@six-group/ui-library 0.0.0-insider.b13c699 → 0.0.0-insider.b2b9a34

package/dist/components/p-CKhg9ibv.js

@@ -0,0 +1,44 @@
+const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;
+const DEFAULT_DEBOUNCE_FAST = 300;
+/**
+ * Debounce function to implement a timeframe to wait for no new changes before executing a callback
+
+ *  example usages:
+ *    debounce(() => saveInput());
+ *    debounce(() => saveInput(), 750);
+ *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));
+ *
+ *  regarding default timeout check https://lawsofux.com/doherty-threshold/
+ *
+ * @param callback
+ * @param timeout
+ */
+const debounce = (callback, timeout = DEFAULT_DEBOUNCE_FAST) => {
+    let timer;
+    return (args) => {
+        clearTimeout(timer);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        timer = setTimeout(() => callback(args), timeout);
+    };
+};
+/**
+ * Debounce an event
+ *
+ * @param event
+ * @param timeout
+ */
+const debounceEvent = (event, timeout) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const original = event._original || event;
+    const emit = debounce(original.emit.bind(original), timeout);
+    return {
+        _original: event,
+        emit: emit,
+    };
+};
+
+export { DEFAULT_DEBOUNCE_FAST as D, debounce as a, DEFAULT_DEBOUNCE_INSANELY_FAST as b, debounceEvent as d };
+//# sourceMappingURL=p-CKhg9ibv.js.map
+
+//# sourceMappingURL=p-CKhg9ibv.js.map

package/dist/components/p-CKhg9ibv.js.map

@@ -0,0 +1 @@
+{"file":"p-CKhg9ibv.js","mappings":"AAEO,MAAM,8BAA8B,GAAG;AACvC,MAAM,qBAAqB,GAAG;AAErC;;;;;;;;;;;;AAYG;AACU,MAAA,QAAQ,GAAG,CAAI,QAAwB,EAAE,OAAO,GAAG,qBAAqB,KAAI;AACvF,IAAA,IAAI,KAAa;IACjB,OAAO,CAAC,IAAO,KAAI;QACjB,YAAY,CAAC,KAAK,CAAC;;;AAGnB,QAAA,KAAK,GAAG,UAAU,CAAC,MAAM,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;AACnD,KAAC;AACH;AAEA;;;;;AAKG;MACU,aAAa,GAAG,CAAC,KAAmB,EAAE,OAAe,KAAkB;;AAElF,IAAA,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK;AAClD,IAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAgC;IAC3F,OAAO;AACL,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,IAAI,EAAE,IAAI;KACK;AACnB;;;;","names":[],"sources":["src/utils/execution-control.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;\nexport const DEFAULT_DEBOUNCE_FAST = 300;\n\n/**\n * Debounce function to implement a timeframe to wait for no new changes before executing a callback\n\n *  example usages:\n *    debounce(() => saveInput());\n *    debounce(() => saveInput(), 750);\n *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));\n *\n *  regarding default timeout check https://lawsofux.com/doherty-threshold/\n *\n * @param callback\n * @param timeout\n */\nexport const debounce = <T>(callback: (x: T) => void, timeout = DEFAULT_DEBOUNCE_FAST) => {\n  let timer: number;\n  return (args: T) => {\n    clearTimeout(timer);\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    timer = setTimeout(() => callback(args), timeout);\n  };\n};\n\n/**\n * Debounce an event\n *\n * @param event\n * @param timeout\n */\nexport const debounceEvent = (event: EventEmitter, timeout: number): EventEmitter => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const original = (event as any)._original || event;\n  const emit = debounce(original.emit.bind(original), timeout) as (_: unknown) => CustomEvent;\n  return {\n    _original: event,\n    emit: emit,\n  } as EventEmitter;\n};\n"],"version":3}

package/dist/components/p-CSfxA66i.js

@@ -0,0 +1,76 @@
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { f as focusVisible } from './p-Vw_F19Fv.js';
+import { d as defineCustomElement$1 } from './p-C84iXIFp.js';
+
+const sixIconButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;text-decoration:none;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";
+
+const SixIconButton = /*@__PURE__*/ proxyCustomElement(class SixIconButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** The icon's size. */
+        this.size = 'medium';
+        /** Set to true to disable the button. */
+        this.disabled = false;
+        this.handleClickEvent = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+    }
+    componentDidLoad() {
+        if (this.button != null) {
+            focusVisible.observe(this.button);
+        }
+    }
+    disconnectedCallback() {
+        if (this.button != null) {
+            focusVisible.unobserve(this.button);
+        }
+    }
+    render() {
+        const isLink = this.href != null;
+        const isButton = !isLink;
+        const Button = isLink ? 'a' : 'button';
+        const html = this.html && h("span", { key: '3a8510f8bb2afb5170f10c74be60ba75b8a5337c', innerHTML: this.html });
+        return (h("div", { key: '2f7bbfa76220fdcb6f761564fc0f1cd2d9965016', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h(Button, { key: '7453dadfdd7eafadae8c08c187d2aed60ac32031', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
+                'icon-button': true,
+                'icon-button--disabled': this.disabled,
+            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, h("six-icon", { key: 'ed51d0979fb1ecce548b342ee324bab5d2cf6dfd', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '12bbdce6ac15e198adf8afd6c17cba7aadf20376' }), html)));
+    }
+    static get style() { return sixIconButtonCss; }
+}, [1, "six-icon-button", {
+        "name": [513],
+        "size": [513],
+        "label": [513],
+        "disabled": [516],
+        "html": [513],
+        "href": [1],
+        "target": [1],
+        "download": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-icon-button", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-icon-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixIconButton);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixIconButton as S, defineCustomElement as d };
+//# sourceMappingURL=p-CSfxA66i.js.map
+
+//# sourceMappingURL=p-CSfxA66i.js.map

package/dist/components/p-CSfxA66i.js.map

@@ -0,0 +1 @@
+{"file":"p-CSfxA66i.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,87CAA87C;;MCiB18C,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;;AAY2B,QAAA,IAAI,CAAA,IAAA,GAAgF,QAAQ;;AAS5F,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA4DjC,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;;AAE3B,SAAC;AACF;IApDC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIrC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAA,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIvC,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI;AAChC,QAAA,MAAM,QAAQ,GAAG,CAAC,MAAM;QACxB,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAExD,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC5F,CAAC,CAAA,MAAM,qDACL,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACvC,aAAA,EACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,gBACzB,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC/D,QAAQ,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACrE,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,qBAAqB,GAAG,SAAS,EAAA,EAEtE,CAAsB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EACzC,EAAA,IAAI,CAAC,IAAI,CACD,EACX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CACE,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  text-decoration: none;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"version":3}

package/dist/components/p-CXsF3egB.js

@@ -0,0 +1,305 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
+import { a as getTextContent } from './p-j3oIB5oT.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { a as debounce } from './p-CKhg9ibv.js';
+import { d as defineCustomElement$4 } from './p-BKl-wAjt.js';
+import { d as defineCustomElement$3 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$2 } from './p-C84iXIFp.js';
+import { d as defineCustomElement$1 } from './p-SZP6K3B0.js';
+
+const sixMenuCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu{padding:var(--six-spacing-xx-small) 0;border:none;box-shadow:var(--six-shadow-small);overflow-y:auto;overflow-x:hidden}.menu:focus{outline:none}.no-shadow{box-shadow:none}";
+
+const isFocusedMenuItem = (menuItem) => { var _a, _b, _c; return (_c = (_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu-item')) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('menu-item--focused'); };
+const isSIXMenuItemElement = (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
+const mapToMenuItem = ({ value, label }) => (h("six-menu-item", { key: value, value: value }, label));
+const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
+const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixMenuItemSelected = createEvent(this, "six-menu-item-selected");
+        this.eventListeners = new EventListeners();
+        this.typeToSelectString = '';
+        /** Set to true to remove the box-shadow */
+        this.removeBoxShadow = false;
+        /** Set the options to be shown in the dropdown */
+        this.items = null;
+        /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+         *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+        this.virtualScroll = false;
+        /**
+         * Used for virtual scrolling
+         * Define how many items should be rendered in the DOM when using virtual scrolling
+         */
+        this.itemSize = 10;
+        /**
+         * Used for virtual scrolling
+         * Define the debounce for listening on scrolling changes in milliseconds.
+         * The lower the number the more sensitive the component reacts to scrolling changes.
+         */
+        this.scrollingDebounce = 15;
+        /**
+         * Internal: Disables handling of key presses.
+         */
+        this.disableKeyboardHandling = false;
+        /**
+         * Used to calculate which items should be rendered in the DOM
+         */
+        this.scrollingIndex = 0;
+        // set a default item height, this variable will be updated with the real value after the first render.
+        // However, it's necessary to have a default value because we can only fetch the proper height after the first render
+        this.sixMenuItemHeight = this.virtualScroll
+            ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING
+            : DEFAULT_SIX_MENU_ITEM_HEIGHT;
+        this.handleScrolling = () => {
+            if (this.menuWrapper == null)
+                return;
+            // for performance improvements we only update the DOM if the scrollRatio change "enough"
+            this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);
+        };
+    }
+    connectedCallback() {
+        this.handleClick = this.handleClick.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+    }
+    componentWillLoad() {
+        if (this.items === null) {
+            return;
+        }
+    }
+    componentDidLoad() {
+        this.setupForVirtualScrollingAfterRendering();
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    /**
+     * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
+     * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
+     * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
+     * enabling type-to-select when the menu doesn't have focus.
+     */
+    async typeToSelect(key) {
+        var _a;
+        clearTimeout(this.typeToSelectTimeout);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);
+        this.typeToSelectString += key.toLowerCase();
+        const items = this.getItems();
+        for (const item of items) {
+            const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+            const label = getTextContent(slot).toLowerCase().trim();
+            if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {
+                item.setFocus();
+                break;
+            }
+        }
+    }
+    getItemsShown() {
+        var _a;
+        const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;
+        if (this.items && this.items.length === 1) {
+            return 0;
+        }
+        return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
+    }
+    setupForVirtualScrollingAfterRendering() {
+        var _a, _b;
+        if (!this.virtualScroll || this.menuWrapper == null)
+            return;
+        this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));
+        // set menu height to proper height once the item is rendered.
+        const menuItemHeight = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector('six-menu-item')) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        if (menuItemHeight != null && menuItemHeight > 0) {
+            this.sixMenuItemHeight = menuItemHeight;
+        }
+    }
+    getItems() {
+        if (this.menu == null)
+            return [];
+        if (this.items != null) {
+            return this.items.map(mapToMenuItem);
+        }
+        const slot = this.menu.querySelector('slot');
+        if (slot == null)
+            return [];
+        return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);
+    }
+    getActiveItemIndex() {
+        const items = this.getItems();
+        const selectedItem = this.getActiveItem();
+        if (selectedItem != null) {
+            const itemIndex = items.indexOf(selectedItem);
+            if (itemIndex > -1) {
+                return itemIndex;
+            }
+        }
+        const sixMenuItems = this.extractItemsFromDOM();
+        return sixMenuItems.findIndex(isFocusedMenuItem);
+    }
+    getActiveItem() {
+        var _a;
+        const activeElement = this.getItems().find((i) => i === document.activeElement);
+        if (activeElement != null) {
+            return activeElement;
+        }
+        return (_a = this.extractItemsFromDOM()) === null || _a === void 0 ? void 0 : _a.find(isFocusedMenuItem);
+    }
+    extractItemsFromDOM() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) !== null && _b !== void 0 ? _b : []);
+    }
+    setActiveItem(item) {
+        item === null || item === void 0 ? void 0 : item.setFocus();
+    }
+    handleClick(event) {
+        const target = event.target;
+        const clickedItem = target.closest('six-menu-item');
+        if (clickedItem && !clickedItem.disabled) {
+            this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });
+        }
+    }
+    handleKeyDown(event) {
+        if (this.disableKeyboardHandling) {
+            return;
+        }
+        // Make a selection when pressing enter
+        if (event.key === 'Enter') {
+            const activeItem = this.getActiveItem();
+            event.preventDefault();
+            if (activeItem != null) {
+                this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });
+            }
+        }
+        // Prevent scrolling when space is pressed
+        if (event.key === ' ') {
+            event.preventDefault();
+        }
+        // Move the selection when pressing down or up
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();
+            let indexOfActiveItem = this.getActiveItemIndex();
+            if (items.length > 0) {
+                event.preventDefault();
+                if (event.key === 'ArrowDown') {
+                    indexOfActiveItem++;
+                }
+                else if (event.key === 'ArrowUp') {
+                    indexOfActiveItem--;
+                }
+                else if (event.key === 'Home') {
+                    indexOfActiveItem = 0;
+                }
+                else if (event.key === 'End') {
+                    indexOfActiveItem = items.length - 1;
+                }
+                if (indexOfActiveItem < 0)
+                    indexOfActiveItem = 0;
+                if (indexOfActiveItem > items.length - 1)
+                    indexOfActiveItem = items.length - 1;
+                this.setActiveItem(items[indexOfActiveItem]);
+                return;
+            }
+        }
+        void this.typeToSelect(event.key);
+    }
+    getMenuWrapperStyle() {
+        var _a;
+        const styles = {};
+        if (this.getItemsShown() > 0) {
+            // calculate the proper height to show the correct number of items
+            styles.height = `${((_a = this.getItemsShown()) !== null && _a !== void 0 ? _a : 0) * this.sixMenuItemHeight}px`;
+        }
+        else if (this.items && this.items.length === 1) {
+            styles.height = 'auto';
+        }
+        return Object.assign({}, styles);
+    }
+    getMenuContainerStyle() {
+        const styles = {};
+        if (this.virtualScroll) {
+            // calculate height of content are if all items would be rendered so the scrollbar has the proper size
+            styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;
+        }
+        return Object.assign({}, styles);
+    }
+    getScrollbarGhostStyle() {
+        const styles = {};
+        if (this.virtualScroll && this.items !== null && this.items.length > 1) {
+            styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;
+        }
+        return Object.assign({}, styles);
+    }
+    renderItems() {
+        if (this.items === undefined || this.items === null) {
+            return;
+        }
+        if (!this.virtualScroll) {
+            return this.items.map(mapToMenuItem);
+        }
+        return this.items
+            .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))
+            .map(({ value, label }) => (h("six-menu-item", { checkType: "check", key: value, value: value }, label)));
+    }
+    render() {
+        return (h("div", { key: '5b49fa6852d9d86c36e77533e06950ca5c320675', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+                menu: true,
+                'no-shadow': this.removeBoxShadow,
+            } }, h("div", { key: 'b471da4ddcd06d56f21b020491c41c53766757a6', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: 'e04e2751c6afd78db344211ca1e6db55b6b6d829' }), this.renderItems()), this.virtualScroll && h("div", { key: '63dcb8d734ae480e7a4a8dcd50f0dc4131f8cb09', style: this.getScrollbarGhostStyle() })));
+    }
+    get host() { return this; }
+    static get style() { return sixMenuCss; }
+}, [1, "six-menu", {
+        "removeBoxShadow": [4, "remove-box-shadow"],
+        "items": [16],
+        "itemsShown": [2, "items-shown"],
+        "virtualScroll": [4, "virtual-scroll"],
+        "itemSize": [2, "item-size"],
+        "scrollingDebounce": [2, "scrolling-debounce"],
+        "disableKeyboardHandling": [4, "disable-keyboard-handling"],
+        "scrollingIndex": [32],
+        "sixMenuItemHeight": [32],
+        "typeToSelect": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-menu", "six-checkbox", "six-error", "six-icon", "six-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixMenu);
+            }
+            break;
+        case "six-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "six-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixMenu as S, defineCustomElement as d };
+//# sourceMappingURL=p-CXsF3egB.js.map
+
+//# sourceMappingURL=p-CXsF3egB.js.map

package/dist/components/p-CXsF3egB.js.map

@@ -0,0 +1 @@
+{"file":"p-CXsF3egB.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","src/components/six-menu/six-menu.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu {\n  padding: var(--six-spacing-xx-small) 0;\n  border: none;\n  box-shadow: var(--six-shadow-small);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.menu:focus {\n  outline: none;\n}\n\n.no-shadow {\n  box-shadow: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n  label: string;\n  value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n  menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n  el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n  <six-menu-item key={value} value={value}>\n    {label}\n  </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-menu',\n  styleUrl: 'six-menu.scss',\n  shadow: true,\n})\nexport class SixMenu {\n  private readonly eventListeners = new EventListeners();\n\n  private menu?: HTMLElement;\n  private menuWrapper?: HTMLElement;\n  private typeToSelectString = '';\n  private typeToSelectTimeout?: number;\n\n  @Element() host!: HTMLSixMenuElement;\n\n  /** Emitted when a menu item is selected. */\n  @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n  /** Set to true to remove the box-shadow */\n  @Prop() removeBoxShadow = false;\n\n  /** Set the options to be shown in the dropdown */\n  @Prop() items: SixMenuItemData[] | null = null;\n\n  /** Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown */\n  @Prop() itemsShown?: number;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  /**\n   * Used for virtual scrolling\n   * Define how many items should be rendered in the DOM when using virtual scrolling\n   */\n  @Prop() itemSize = 10;\n\n  /**\n   * Used for virtual scrolling\n   * Define the debounce for listening on scrolling changes in milliseconds.\n   * The lower the number the more sensitive the component reacts to scrolling changes.\n   */\n  @Prop() scrollingDebounce = 15;\n\n  /**\n   * Internal: Disables handling of key presses.\n   */\n  @Prop() disableKeyboardHandling = false;\n\n  /**\n   * Used to calculate which items should be rendered in the DOM\n   */\n  @State()\n  private scrollingIndex = 0;\n\n  // set a default item height, this variable will be updated with the real value after the first render.\n  // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n  @State()\n  private sixMenuItemHeight = this.virtualScroll\n    ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING\n    : DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  componentWillLoad() {\n    if (this.items === null) {\n      return;\n    }\n  }\n\n  private handleScrolling = () => {\n    if (this.menuWrapper == null) return;\n    // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n    this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n  };\n\n  componentDidLoad() {\n    this.setupForVirtualScrollingAfterRendering();\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /**\n   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n   * enabling type-to-select when the menu doesn't have focus.\n   */\n  @Method()\n  async typeToSelect(key: string) {\n    clearTimeout(this.typeToSelectTimeout);\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n    this.typeToSelectString += key.toLowerCase();\n    const items = this.getItems();\n    for (const item of items) {\n      const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n      const label = getTextContent(slot).toLowerCase().trim();\n      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n        item.setFocus();\n        break;\n      }\n    }\n  }\n\n  private getItemsShown(): number {\n    const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n    if (this.items && this.items.length === 1) {\n      return 0;\n    }\n    return this.itemsShown ?? defaultItemsShown;\n  }\n\n  private setupForVirtualScrollingAfterRendering() {\n    if (!this.virtualScroll || this.menuWrapper == null) return;\n\n    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n    // set menu height to proper height once the item is rendered.\n    const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n    if (menuItemHeight != null && menuItemHeight > 0) {\n      this.sixMenuItemHeight = menuItemHeight;\n    }\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.menu == null) return [];\n\n    if (this.items != null) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    const slot = this.menu.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n    );\n  }\n\n  private getActiveItemIndex() {\n    const items = this.getItems();\n    const selectedItem = this.getActiveItem();\n    if (selectedItem != null) {\n      const itemIndex = items.indexOf(selectedItem);\n      if (itemIndex > -1) {\n        return itemIndex;\n      }\n    }\n    const sixMenuItems = this.extractItemsFromDOM();\n    return sixMenuItems.findIndex(isFocusedMenuItem);\n  }\n\n  private getActiveItem(): HTMLSixMenuItemElement | undefined {\n    const activeElement = this.getItems().find((i) => i === document.activeElement);\n    if (activeElement != null) {\n      return activeElement;\n    }\n    return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n  }\n\n  private extractItemsFromDOM() {\n    return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n  }\n\n  private setActiveItem(item: HTMLSixMenuItemElement) {\n    item?.setFocus();\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const clickedItem = target.closest('six-menu-item');\n    if (clickedItem && !clickedItem.disabled) {\n      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disableKeyboardHandling) {\n      return;\n    }\n\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const activeItem = this.getActiveItem();\n      event.preventDefault();\n\n      if (activeItem != null) {\n        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n      }\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n      let indexOfActiveItem = this.getActiveItemIndex();\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          indexOfActiveItem++;\n        } else if (event.key === 'ArrowUp') {\n          indexOfActiveItem--;\n        } else if (event.key === 'Home') {\n          indexOfActiveItem = 0;\n        } else if (event.key === 'End') {\n          indexOfActiveItem = items.length - 1;\n        }\n\n        if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n        if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n        this.setActiveItem(items[indexOfActiveItem]);\n\n        return;\n      }\n    }\n\n    void this.typeToSelect(event.key);\n  }\n\n  private getMenuWrapperStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n    if (this.getItemsShown() > 0) {\n      // calculate the proper height to show the correct number of items\n      styles.height = `${(this.getItemsShown() ?? 0) * this.sixMenuItemHeight}px`;\n    } else if (this.items && this.items.length === 1) {\n      styles.height = 'auto';\n    }\n    return {\n      ...styles,\n    };\n  }\n\n  private getMenuContainerStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll) {\n      // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getScrollbarGhostStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n    if (this.virtualScroll && this.items !== null && this.items.length > 1) {\n      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n    }\n    return {\n      ...styles,\n    };\n  }\n\n  private renderItems() {\n    if (this.items === undefined || this.items === null) {\n      return;\n    }\n\n    if (!this.virtualScroll) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    return this.items\n      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n      .map(({ value, label }: SixMenuItemData) => (\n        <six-menu-item checkType=\"check\" key={value} value={value}>\n          {label}\n        </six-menu-item>\n      ));\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuWrapper = el)}\n        style={this.getMenuWrapperStyle()}\n        part=\"wrapper\"\n        class={{\n          menu: true,\n          'no-shadow': this.removeBoxShadow,\n        }}\n      >\n        <div\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          role=\"menu\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n          style={this.getMenuContainerStyle()}\n        >\n          <slot />\n          {this.renderItems()}\n        </div>\n        {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n      </div>\n    );\n  }\n}\n"],"version":3}