@nrk/core-toggle/jsx.js

/*! @nrk/core-toggle v3.1.0 - Copyright (c) 2017-2021 NRK */
'use strict';

var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;

  try {
    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

function _construct(Parent, args, Class) {
  if (_isNativeReflectConstruct()) {
    _construct = Reflect.construct;
  } else {
    _construct = function _construct(Parent, args, Class) {
      var a = [null];
      a.push.apply(a, args);
      var Constructor = Function.bind.apply(Parent, a);
      var instance = new Constructor();
      if (Class) _setPrototypeOf(instance, Class.prototype);
      return instance;
    };
  }

  return _construct.apply(null, arguments);
}

function _isNativeFunction(fn) {
  return Function.toString.call(fn).indexOf("[native code]") !== -1;
}

function _wrapNativeSuper(Class) {
  var _cache = typeof Map === "function" ? new Map() : undefined;

  _wrapNativeSuper = function _wrapNativeSuper(Class) {
    if (Class === null || !_isNativeFunction(Class)) return Class;

    if (typeof Class !== "function") {
      throw new TypeError("Super expression must either be null or a function");
    }

    if (typeof _cache !== "undefined") {
      if (_cache.has(Class)) return _cache.get(Class);

      _cache.set(Class, Wrapper);
    }

    function Wrapper() {
      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
    }

    Wrapper.prototype = Object.create(Class.prototype, {
      constructor: {
        value: Wrapper,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
    return _setPrototypeOf(Wrapper, Class);
  };

  return _wrapNativeSuper(Class);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();

  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
        result;

    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var IS_BROWSER = typeof window !== 'undefined';
var IS_ANDROID = IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed

var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform));
// Mock HTMLElement for Node

if (!IS_BROWSER && !global.HTMLElement) {
  global.HTMLElement = /*#__PURE__*/function () {
    function _class() {
      _classCallCheck(this, _class);
    }

    return _class;
  }();
}
/**
* closest
* @param {Element} element Element to traverse up from
* @param {String} selector A selector to search for matching parents or element itself
* @return {Element|null}  Element which is the closest ancestor matching selector
*/

var closest$1 = function () {
  var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
  var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
  return proto.closest ? function (el, css) {
    return el.closest(css);
  } : function (el, css) {
    // IE jumps to shadow SVG DOM on clicking an SVG defined by <use>.
    // If so, jump back to <use> element and traverse real DOM
    if (el.correspondingUseElement) el = el.correspondingUseElement;

    for (; el; el = el.parentElement) {
      if (match.call(el, css)) return el;
    }

    return null;
  };
}();
/**
* dispatchEvent - with infinite loop prevention
* @param {Element} elem The target object
* @param {String} name The source object(s)
* @param {Object} detail Detail object (bubbles and cancelable is set to true)
* @return {Boolean} Whether the event was canceled
*/

function dispatchEvent(element, name) {
  var detail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  var ignore = "prevent_recursive_dispatch_maximum_callstack".concat(name);
  var event;
  if (element[ignore]) return true; // We are already processing this event, so skip sending a new one
  else element[ignore] = true; // Add name to dispatching ignore

  if (typeof window.CustomEvent === 'function') {
    event = new window.CustomEvent(name, {
      bubbles: true,
      cancelable: true,
      detail: detail
    });
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(name, true, true, detail);
  } // IE reports incorrect event.defaultPrevented
  // but correct return value on element.dispatchEvent


  var result = element.dispatchEvent(event);
  element[ignore] = null; // Remove name from dispatching ignore

  return result; // Follow W3C standard for return value
}
/**
* getUUID
* @return {String} A generated unique ID
*/

function getUUID() {
  return Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
}
/**
 * toggleAttribute (Ponyfill for IE and Edge, fixes #299)
 * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
 * @param {Element} el  Single DOM Element
 * @param {String} name The name of the attribute to be toggled
 * @param {Boolean} force Force attribute to be added or removed regardless of previous state
 */

function toggleAttribute(el, name) {
  var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !this.hasAttribute(name);
  if (!force === el.hasAttribute(name)) el[force ? 'setAttribute' : 'removeAttribute'](name, '');
  return force;
}

var SCROLLER = IS_BROWSER && document.createElement('div');

var CoreToggle = /*#__PURE__*/function (_HTMLElement) {
  _inherits(CoreToggle, _HTMLElement);

  var _super = _createSuper(CoreToggle);

  function CoreToggle() {
    _classCallCheck(this, CoreToggle);

    return _super.apply(this, arguments);
  }

  _createClass(CoreToggle, [{
    key: "connectedCallback",
    value: function connectedCallback() {
      if (IS_IOS) document.documentElement.style.cursor = 'pointer'; // Fix iOS events for closing popups (https://stackoverflow.com/a/16006333/8819615)

      if (!IS_ANDROID) this.setAttribute('aria-labelledby', this.button.id = this.button.id || getUUID()); // Andriod reads only label instead of content

      this.value = this.button.textContent; // Set up aria-label

      this.setAttribute('role', 'group'); // Help Edge

      this.button.setAttribute('aria-expanded', this._open = !this.hidden);
      this.button.setAttribute('aria-controls', this.id = this.id || getUUID());
      document.addEventListener('keydown', this, true); // Use capture to enable checking defaultPrevented (from ESC key) in parents

      document.addEventListener('click', this);
    }
  }, {
    key: "disconnectedCallback",
    value: function disconnectedCallback() {
      this._button = null;
      document.removeEventListener('keydown', this, true);
      document.removeEventListener('click', this);
      handleAutoposition(this, true);
    }
  }, {
    key: "attributeChangedCallback",
    value: function attributeChangedCallback() {
      if (this._open === this.hidden) {
        // this._open comparison ensures actual change
        this.button.setAttribute('aria-expanded', this._open = !this.hidden);

        try {
          this.querySelector('[autofocus]').focus();
        } catch (err) {}

        handleAutoposition(this, this.hidden);
        dispatchEvent(this, 'toggle');
      }
    }
  }, {
    key: "handleEvent",
    value: function handleEvent(event) {
      if (event.defaultPrevented) return;
      if (event.type === 'resize' || event.type === 'scroll') return this.updatePosition();

      if (event.type === 'keydown' && event.keyCode === 27) {
        var isButton = event.target.getAttribute && event.target.getAttribute('aria-expanded') === 'true';
        var isHiding = isButton ? event.target === this.button : closest$1(event.target, this.nodeName) === this;

        if (isHiding) {
          this.hidden = true;
          this.button.focus(); // Move focus back to button

          return event.preventDefault(); // Prevent closing maximized Safari and other coreToggles
        }
      }

      if (event.type === 'click') {
        var btn = closest$1(event.target, 'a,button');
        if (btn && !btn.hasAttribute('aria-expanded') && closest$1(event.target, this.nodeName) === this) dispatchEvent(this, 'toggle.select', btn);else if (btn && btn.getAttribute('aria-controls') === this.id) this.hidden = !this.hidden;else if (this.popup && !this.contains(event.target)) this.hidden = true; // Click in content or outside
      }
    }
    /**
    * updatePosition Exposed for _very_ niche situations, use sparingly
    * @param {HTMLElement} contentEl Reference to the core-toggle element
    */

  }, {
    key: "updatePosition",
    value: function updatePosition() {
      var _this = this;

      if (this._skipPosition || !this.button) return; // Avoid infinite loops for mutationObserver

      this._skipPosition = true;
      this.style.position = 'fixed'; // Set viewModel before reading dimensions

      var triggerRect = this.button.getBoundingClientRect();
      var contentRect = this.getBoundingClientRect();
      var hasSpaceRight = triggerRect.left + contentRect.width < window.innerWidth;
      var hasSpaceUnder = triggerRect.bottom + contentRect.height < window.innerHeight;
      var hasSpaceOver = triggerRect.top - contentRect.height > 0; // Always place under when no hasSpaceOver, as no OS can scroll further up than window.scrollY = 0

      var placeUnder = hasSpaceUnder || !hasSpaceOver;
      var scroll = placeUnder ? window.pageYOffset + triggerRect.bottom + contentRect.height + 30 : 0;
      this.style.left = "".concat(Math.round(hasSpaceRight ? triggerRect.left : triggerRect.right - contentRect.width), "px");
      this.style.top = "".concat(Math.round(placeUnder ? triggerRect.bottom : triggerRect.top - contentRect.height), "px");
      SCROLLER.style.cssText = "position:absolute;padding:1px;top:".concat(Math.round(scroll), "px");
      setTimeout(function () {
        return _this._skipPosition = null;
      }); // Timeout to flush event queue before we can resume acting on mutations
    }
  }, {
    key: "button",
    get: function get() {
      if (this._button && (this._button.getAttribute('data-for') || this._button.getAttribute('for')) === this.id) return this._button; // Speed up

      return (this._button = this.id && document.querySelector("[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]"))) || this.previousElementSibling;
    } // aria-haspopup triggers forms mode in JAWS, therefore store as custom attr

  }, {
    key: "popup",
    get: function get() {
      return this.getAttribute('popup') === 'true' || this.getAttribute('popup') || this.hasAttribute('popup');
    },
    set: function set(val) {
      this[val === false ? 'removeAttribute' : 'setAttribute']('popup', val);
    }
  }, {
    key: "autoposition",
    get: function get() {
      return this.hasAttribute('autoposition');
    },
    set: function set(val) {
      toggleAttribute(this, 'autoposition', val);
    } // Must set attribute for IE11

  }, {
    key: "hidden",
    get: function get() {
      return this.hasAttribute('hidden');
    },
    set: function set(val) {
      toggleAttribute(this, 'hidden', val);
    } // Set this.button aria-label, so that visible button text can be augmentet with intention of button
    // Example: Button text: "01.02.2019", aria-label: "01.02.2019, Choose date"
    // Does not update aria-label if not already set to something else than this.popup

  }, {
    key: "value",
    get: function get() {
      return this.button.value || this.button.textContent;
    },
    set: function set(data) {
      if (data === void 0) {
        data = false;
      }

      if (!this.button || !this.popup.length) return;
      var button = this.button;
      var popup = (button.getAttribute('aria-label') || ",".concat(this.popup)).split(',')[1];
      var label = data.textContent || data || ''; // data can be Element, Object or String

      if (popup === this.popup) {
        var target = button.querySelector('span') || button; // Use span to preserve embedded HTML and SVG

        button.value = data.value || label;
        target[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label;
        button.setAttribute('aria-label', "".concat(button.textContent, ",").concat(this.popup));
      }
    }
  }], [{
    key: "observedAttributes",
    get: function get() {
      return ['hidden', 'autoposition'];
    }
  }]);

  return CoreToggle;
}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));

function handleAutoposition(self, teardown) {
  if (teardown) {
    if (self._positionObserver) self._positionObserver.disconnect();
    if (SCROLLER.parentNode) SCROLLER.parentNode.removeChild(SCROLLER);
    self.style.position = self._positionObserver = null;
    window.removeEventListener('scroll', self, true); // Use capture to also listen for elements with overflow

    window.removeEventListener('resize', self);
  } else if (self.autoposition) {
    // Attach MutationObserver if supported
    if (!self._positionObserver) self._positionObserver = window.MutationObserver && new window.MutationObserver(self.updatePosition.bind(self));
    if (self._positionObserver) self._positionObserver.observe(self, {
      childList: true,
      subtree: true,
      attributes: true
    });
    document.body.appendChild(SCROLLER);
    window.addEventListener('scroll', self, true); // Use capture to also listen for elements with overflow

    window.addEventListener('resize', self);
    self.updatePosition(); // Initial trigger
  }
}

var version = "3.1.0";

/**
* closest
* @param {Element} el Element to traverse up from
* @param {String} css A selector to search for matching parents or element itself
* @return {Element|null}  Element which is the closest ancestor matching selector
*/

var closest = function () {
  var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
  var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
  return proto.closest ? function (el, css) {
    return el.closest(css);
  } : function (el, css) {
    for (; el; el = el.parentElement) {
      if (match.call(el, css)) {
        return el;
      }
    }

    return null;
  };
}();
/**
* customElementToReact
* @param {Class|Function} elementClass A custom element definition.
* @param {Array} options Props and custom events
* @return {Object} A React component
*/


function customElementToReact(elementClass, options) {
  if (options === void 0) options = {};
  var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11

  var dashCase = name.replace(/.[A-Z]/g, function (ref) {
    var a = ref[0];
    var b = ref[1];
    return a + "-" + b;
  }); // NameName -> name-name

  var customProps = options.props || [];
  var customEvents = options.customEvents || [];
  var eventMap = customEvents.reduce(function (map, eventName) {
    map[eventName] = "on" + eventName.replace(/(^|\.)./g, function (m) {
      return m.slice(-1).toUpperCase();
    }); // input.filter => onInputFilter

    return map;
  }, {});
  var skipProps = customProps.concat('forwardRef', Object.keys(eventMap).map(function (onEventName) {
    return eventMap[onEventName];
  }));
  var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
  return function (superclass) {
    function anonymous(props) {
      var this$1$1 = this;
      superclass.call(this, props); // Register ref prop for accessing custom element https://reactjs.org/docs/refs-and-the-dom.html#callback-refs

      this.ref = function (el) {
        if (typeof this$1$1.props.forwardRef === 'function') {
          this$1$1.props.forwardRef(el);
        } else if (this$1$1.props.forwardRef) {
          this$1$1.props.forwardRef.current = el;
        }

        return this$1$1.el = el;
      }; // Register event handler on component for each custom event


      Object.keys(eventMap).forEach(function (eventName) {
        var onEventName = eventMap[eventName];

        this$1$1[eventName] = function (event) {
          if (this$1$1.props[onEventName] && closest(event.target, this$1$1.el.nodeName) === this$1$1.el) {
            this$1$1.props[onEventName](event);
          }
        };
      });
    }

    if (superclass) anonymous.__proto__ = superclass;
    anonymous.prototype = Object.create(superclass && superclass.prototype);
    anonymous.prototype.constructor = anonymous;

    anonymous.prototype.componentDidMount = function componentDidMount() {
      var this$1$1 = this; // Run connectedCallback() after React componentDidMount() to allow React hydration to run first

      if (!window.customElements.get(tagName)) {
        window.customElements.define(tagName, elementClass);
      } // Populate properties on custom element


      customProps.forEach(function (propName) {
        if (propName in this$1$1.props) {
          this$1$1.el[propName] = this$1$1.props[propName];
        }
      }); // Register events on custom element

      customEvents.forEach(function (eventName) {
        this$1$1.el.addEventListener(eventName, this$1$1[eventName]);
      });
    };

    anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
      var this$1$1 = this; // Sync prop changes to custom element

      customProps.forEach(function (propName) {
        if (prev[propName] !== this$1$1.props[propName]) {
          this$1$1.el[propName] = this$1$1.props[propName];
        }
      });
    };

    anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
      var this$1$1 = this; // Remove event handlers on custom element on unmount

      customEvents.forEach(function (eventName) {
        this$1$1.el.removeEventListener(eventName, this$1$1[eventName]);
      });
    };

    anonymous.prototype.render = function render() {
      var this$1$1 = this; // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810

      return React__default['default'].createElement(tagName, Object.keys(this.props).reduce(function (thisProps, propName) {
        if (skipProps.indexOf(propName) === -1) {
          // Do not render customEvents and custom props as attributes
          if (propName === 'className') {
            thisProps["class"] = this$1$1.props[propName];
          } // Fixes className for custom elements
          else if (this$1$1.props[propName] === true) {
            thisProps[propName] = '';
          } // Fixes boolean attributes
          else if (this$1$1.props[propName] !== false) {
            thisProps[propName] = this$1$1.props[propName];
          } // Pass only truthy, non-function props

        }

        return thisProps;
      }, {
        ref: this.ref
      }));
    };

    return anonymous;
  }(React__default['default'].Component);
}

var coreToggle = customElementToReact(CoreToggle, {
  props: ['popup'],
  customEvents: ['toggle', 'toggle.select'],
  suffix: version
});

module.exports = coreToggle;