@xplortech/apollo-core 0.5.2 → 0.5.3

package/dist/cjs/xpl-select.cjs.entry.js

@@ -1,623 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-944adb2e.js');
-const v4 = require('./v4-14140ff3.js');
-
-/// <reference path="./dropdownchoice.d.ts"></reference>
-const XplDropdown = ({ active, choices, mode, selected, update, }) => {
-  return (index.h("div", { class: {
-      "xpl-dropdown": true,
-      "xpl-dropdown--multi": mode === "multi",
-      "active": active,
-    } },
-    index.h("ul", null, choices.map(({ label, isGroupHeading }, i) => {
-      return isGroupHeading ?
-        index.h("span", null, label) :
-        index.h("li", null,
-          index.h("button", { class: {
-              selected: selected[i]
-            }, onClick: () => {
-              let newSelected;
-              if (mode === "single") {
-                // @ts-expect-error
-                newSelected = selected.map((v, j) => {
-                  return i === j ? !selected[i] : false;
-                });
-                active = false;
-              }
-              else if (mode === "multi") {
-                newSelected = selected.map((v, j) => {
-                  return i === j ? !selected[i] : v;
-                });
-              }
-              update(newSelected);
-            }, tabIndex: active ? 0 : -1 }, label));
-    }))));
-};
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as the `TypeError` message for "Functions" methods. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/** Used to match leading and trailing whitespace. */
-var reTrim = /^\s+|\s+$/g;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
-
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
-
-/**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
- *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
- */
-var now = function() {
-  return root.Date.now();
-};
-
-/**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
- *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
- *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
- */
-function debounce(func, wait, options) {
-  var lastArgs,
-      lastThis,
-      maxWait,
-      result,
-      timerId,
-      lastCallTime,
-      lastInvokeTime = 0,
-      leading = false,
-      maxing = false,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        result = wait - timeSinceLastCall;
-
-    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
-  }
-
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-  }
-
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
-
-  function debounced() {
-    var time = now(),
-        isInvoking = shouldInvoke(time);
-
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-
-/**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds. The throttled function comes with a `cancel`
- * method to cancel delayed `func` invocations and a `flush` method to
- * immediately invoke them. Provide `options` to indicate whether `func`
- * should be invoked on the leading and/or trailing edge of the `wait`
- * timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.throttle` and `_.debounce`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
- *  Specify invoking on the leading edge of the timeout.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
- * @example
- *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
- *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
- * jQuery(element).on('click', throttled);
- *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel);
- */
-function throttle(func, wait, options) {
-  var leading = true,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  if (isObject(options)) {
-    leading = 'leading' in options ? !!options.leading : leading;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-  return debounce(func, wait, {
-    'leading': leading,
-    'maxWait': wait,
-    'trailing': trailing
-  });
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && objectToString.call(value) == symbolTag);
-}
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = value.replace(reTrim, '');
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-var lodash_throttle = throttle;
-
-function tagWidth(text) {
-  const context = document.createElement("canvas").getContext("2d");
-  context.font = "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
-  return context.measureText(text).width + 44; // = text + l/r padding + margin-right
-}
-const XplSelect = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * An array of choices for the user to choose from.
-     * Each choice should be of the form:
-     * {
-     *   label: string;
-     *   href?: string;
-     *   value?: string;
-     *   isGroupHeading?: boolean;
-     * }
-     */
-    this.choices = [];
-    /**
-     * Whether to allow a single choice or multiple choices.
-     */
-    this.mode = "single";
-    /**
-     * Only used in multi-choice selects. If `true`,
-     * badges representing selections that would overflow the
-     * container are replaced with "+x more" (where x is the
-     * number not shown). If `false`, the container's height will
-     * adjust to show all badges representing selections.
-     */
-    this.truncate = true;
-    this.active = false;
-    this.id = v4.v4();
-    this.keepFocus = false;
-    this.value = "";
-    // infinity isn't real, it's just a mathematical construct, it can't hurt you
-    this.visibleChoices = Infinity;
-  }
-  componentWillLoad() {
-    this.selected = this.choices && this.choices.length > 0 ? this.choices.map(() => false) : [];
-    window.addEventListener("click", (e) => {
-      const el = e.target;
-      const select = el.closest(".xpl-select");
-      if (select === null || select !== this.container) {
-        this.active = false;
-      }
-    });
-    window.addEventListener("resize", lodash_throttle(() => {
-      this.maybeTruncateChoices();
-    }, 250));
-  }
-  maybeTruncateChoices() {
-    if (this.mode === "single" || !this.truncate)
-      return;
-    const containerWidth = this.container.getBoundingClientRect().width;
-    let visibleChoices = 0;
-    let visibleChoicesWidth = 0;
-    const actualNumSelected = this.selected.filter(a => a).length;
-    for (let i = 0; i < actualNumSelected; i++) {
-      visibleChoicesWidth += tagWidth(this.getDisplayValue(i));
-      if (visibleChoicesWidth > containerWidth - 140)
-        break;
-      visibleChoices++;
-    }
-    if (visibleChoices >= actualNumSelected)
-      visibleChoices = Infinity;
-    if (visibleChoices < 1)
-      visibleChoices = 1;
-    this.visibleChoices = visibleChoices;
-  }
-  getDisplayValue(i) {
-    return this.choices[i].label;
-  }
-  getActualValue(i) {
-    return this.choices[i].value || this.choices[i].label;
-  }
-  update(selected) {
-    this.selected = selected;
-    if (this.mode === "single") {
-      const selected = this.selected.findIndex(v => v);
-      this.value = selected >= 0 ?
-        this.getActualValue(selected) :
-        "";
-    }
-    else if (this.mode === "multi") {
-      this.value = this.selected.map((v, i) => {
-        return v ? this.getActualValue(i) : "";
-      }).filter(v => v.length > 0).join("|");
-    }
-  }
-  render() {
-    let visibleChoices = 0;
-    return (index.h(index.Host, { class: {
-        "xpl-select": true,
-        "xpl-select--disabled": this.disabled,
-        "xpl-select--no-truncate": !this.truncate,
-      }, onKeyDown: (e) => {
-        if (e.key === "Escape")
-          this.active = false;
-      }, ref: (el) => (this.container = el) }, this.label || this.description ? (index.h("label", { class: {
-        "xpl-label": true,
-        "xpl-label--disabled": this.disabled,
-      }, htmlFor: this.id }, this.label, this.description && index.h("small", { class: {
-        "xpl-description": true,
-        "xpl-description--disabled": this.disabled,
-      } }, this.description))) : null, index.h("div", { class: {
-        "xpl-input": true,
-        "xpl-input--disabled": this.disabled,
-        "xpl-input--error": this.error !== undefined
-      } }, index.h("div", { class: "xpl-input-wrapper" }, index.h("div", { class: {
-        "xpl-select-value": true,
-        "xpl-select-value--active": this.mode === "multi" && this.value.length > 0,
-        "has-value": this.value.length > 0,
-      } }, this.mode === "single" ?
-      (this.value || this.placeholder) :
-      (this.value.length > 0 ?
-        this.selected.map((v, i) => {
-          if (!v)
-            return null;
-          if (visibleChoices >= this.visibleChoices)
-            return null;
-          visibleChoices++;
-          return (index.h("xpl-tag", { onClose: () => {
-              this.selected = this.selected.map((v, j) => i === j ? false : v);
-              this.update(this.selected);
-              this.maybeTruncateChoices();
-            } }, this.getDisplayValue(i)));
-        }) :
-        this.placeholder), this.visibleChoices < Infinity && `+ ${this.selected.filter(a => a).length - this.visibleChoices} more`), index.h("button", { disabled: this.disabled, id: this.id, onKeyDown: (e) => {
-        if (e.key === "Tab")
-          this.keepFocus = true;
-      }, onClick: () => {
-        if (!this.disabled)
-          this.active = !this.active;
-      } })), !this.disabled && (index.h(XplDropdown, { active: this.active, choices: this.choices, mode: this.mode, selected: this.selected, update: (selected) => {
-        this.update(selected);
-        this.maybeTruncateChoices();
-      } })), this.error !== undefined && this.error.length > 0 && index.h("label", { class: "xpl-input-error", htmlFor: this.id }, index.h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error)), index.h("input", { type: "hidden", value: this.value })));
-  }
-};
-
-exports.xpl_select = XplSelect;