@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/collection/components/six-menu/six-menu.js

@@ -1,406 +1,406 @@
-import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
-import { getTextContent } from '../../utils/slot';
-import { EventListeners } from '../../utils/event-listeners';
-import { debounce } from '../../utils/execution-control';
-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", { value: value }, label);
-const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
-const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
-const ITEMS_SHOWN_NOT_SET = undefined;
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The menu's content, including menu items, menu dividers, and menu labels.
- *
- * @part base - The component's base wrapper.
- */
-export class SixMenu {
-  constructor() {
-    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 how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */
-    this.itemsShown = ITEMS_SHOWN_NOT_SET;
-    /** 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;
-    /**
-     * 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 hight after the first render
-    this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
-    this.handleScrolling = () => {
-      // 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);
-    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
-      : ITEMS_SHOWN_NOT_SET;
-    return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
-  }
-  setupForVirtualScrollingAfterRendering() {
-    var _a, _b;
-    if (!this.virtualScroll) {
-      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 && menuItemHeight > 0) {
-      this.sixMenuItemHeight = menuItemHeight;
-    }
-  }
-  getItems() {
-    if (this.items !== null && this.items !== undefined) {
-      return this.items.map(mapToMenuItem);
-    }
-    const slot = this.menu.querySelector('slot');
-    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);
-  }
-  getActiveItemIndex() {
-    const items = this.getItems();
-    const selectedItem = this.getActiveItem();
-    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) {
-      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) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('six-menu-item'));
-  }
-  setActiveItem(item) {
-    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) {
-    // Make a selection when pressing enter
-    if (event.key === 'Enter') {
-      const activeItem = this.getActiveItem();
-      event.preventDefault();
-      if (activeItem) {
-        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) {
-        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() {
-    const styles = {};
-    if (this.getItemsShown() > 0) {
-      // calculate the proper height to show the correct number of items
-      styles.height = `${this.getItemsShown() * this.sixMenuItemHeight}px`;
-    }
-    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) {
-      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(mapToMenuItem);
-  }
-  render() {
-    return (h("div", { ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
-        menu: true,
-        'menu--noshadow': this.removeBoxShadow,
-        'menu__wrapper--scrollable': this.getItemsShown() > 0,
-      } },
-      h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() },
-        h("slot", null),
-        this.renderItems()),
-      this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
-  }
-  static get is() { return "six-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-menu.css"]
-  }; }
-  static get properties() { return {
-    "removeBoxShadow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to remove the box-shadow"
-      },
-      "attribute": "remove-box-shadow",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "SixMenuItemData[] | null",
-        "resolved": "SixMenuItemData[]",
-        "references": {
-          "SixMenuItemData": {
-            "location": "local"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the options to be shown in the dropdown"
-      },
-      "defaultValue": "null"
-    },
-    "itemsShown": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown"
-      },
-      "attribute": "items-shown",
-      "reflect": false,
-      "defaultValue": "ITEMS_SHOWN_NOT_SET"
-    },
-    "virtualScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
-      },
-      "attribute": "virtual-scroll",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "itemSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Used for virtual scrolling\nDefine how many items should be rendered in the DOM when using virtual scrolling"
-      },
-      "attribute": "item-size",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "scrollingDebounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Used for virtual scrolling\nDefine the debounce for listening on scrolling changes in milliseconds.\nThe lower the number the more sensitive the component reacts to scrolling changes."
-      },
-      "attribute": "scrolling-debounce",
-      "reflect": false,
-      "defaultValue": "15"
-    }
-  }; }
-  static get states() { return {
-    "scrollingIndex": {},
-    "sixMenuItemHeight": {}
-  }; }
-  static get events() { return [{
-      "method": "sixMenuItemSelected",
-      "name": "six-menu-item-selected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a menu item is selected."
-      },
-      "complexType": {
-        "original": "SixMenuItemSelectedPayload",
-        "resolved": "SixMenuItemSelectedPayload",
-        "references": {
-          "SixMenuItemSelectedPayload": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "typeToSelect": {
-      "complexType": {
-        "signature": "(key: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLSlotElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\nThe key passed will be appended to the internal query and the selection will be updated. After a brief period, the\ninternal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\nenabling type-to-select when the menu doesn't have focus.",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}
+import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
+import { getTextContent } from '../../utils/slot';
+import { EventListeners } from '../../utils/event-listeners';
+import { debounce } from '../../utils/execution-control';
+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", { value: value }, label);
+const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
+const ITEMS_SHOWN_NOT_SET = undefined;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The menu's content, including menu items, menu dividers, and menu labels.
+ *
+ * @part base - The component's base wrapper.
+ */
+export class SixMenu {
+  constructor() {
+    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 how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */
+    this.itemsShown = ITEMS_SHOWN_NOT_SET;
+    /** 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;
+    /**
+     * 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 hight after the first render
+    this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
+    this.handleScrolling = () => {
+      // 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);
+    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
+      : ITEMS_SHOWN_NOT_SET;
+    return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
+  }
+  setupForVirtualScrollingAfterRendering() {
+    var _a, _b;
+    if (!this.virtualScroll) {
+      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 && menuItemHeight > 0) {
+      this.sixMenuItemHeight = menuItemHeight;
+    }
+  }
+  getItems() {
+    if (this.items !== null && this.items !== undefined) {
+      return this.items.map(mapToMenuItem);
+    }
+    const slot = this.menu.querySelector('slot');
+    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);
+  }
+  getActiveItemIndex() {
+    const items = this.getItems();
+    const selectedItem = this.getActiveItem();
+    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) {
+      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) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('six-menu-item'));
+  }
+  setActiveItem(item) {
+    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) {
+    // Make a selection when pressing enter
+    if (event.key === 'Enter') {
+      const activeItem = this.getActiveItem();
+      event.preventDefault();
+      if (activeItem) {
+        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) {
+        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() {
+    const styles = {};
+    if (this.getItemsShown() > 0) {
+      // calculate the proper height to show the correct number of items
+      styles.height = `${this.getItemsShown() * this.sixMenuItemHeight}px`;
+    }
+    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) {
+      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(mapToMenuItem);
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+        menu: true,
+        'menu--noshadow': this.removeBoxShadow,
+        'menu__wrapper--scrollable': this.getItemsShown() > 0,
+      } },
+      h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() },
+        h("slot", null),
+        this.renderItems()),
+      this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
+  }
+  static get is() { return "six-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-menu.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-menu.css"]
+  }; }
+  static get properties() { return {
+    "removeBoxShadow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to remove the box-shadow"
+      },
+      "attribute": "remove-box-shadow",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SixMenuItemData[] | null",
+        "resolved": "SixMenuItemData[]",
+        "references": {
+          "SixMenuItemData": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the options to be shown in the dropdown"
+      },
+      "defaultValue": "null"
+    },
+    "itemsShown": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown"
+      },
+      "attribute": "items-shown",
+      "reflect": false,
+      "defaultValue": "ITEMS_SHOWN_NOT_SET"
+    },
+    "virtualScroll": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
+      },
+      "attribute": "virtual-scroll",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "itemSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used for virtual scrolling\nDefine how many items should be rendered in the DOM when using virtual scrolling"
+      },
+      "attribute": "item-size",
+      "reflect": false,
+      "defaultValue": "10"
+    },
+    "scrollingDebounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used for virtual scrolling\nDefine the debounce for listening on scrolling changes in milliseconds.\nThe lower the number the more sensitive the component reacts to scrolling changes."
+      },
+      "attribute": "scrolling-debounce",
+      "reflect": false,
+      "defaultValue": "15"
+    }
+  }; }
+  static get states() { return {
+    "scrollingIndex": {},
+    "sixMenuItemHeight": {}
+  }; }
+  static get events() { return [{
+      "method": "sixMenuItemSelected",
+      "name": "six-menu-item-selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a menu item is selected."
+      },
+      "complexType": {
+        "original": "SixMenuItemSelectedPayload",
+        "resolved": "SixMenuItemSelectedPayload",
+        "references": {
+          "SixMenuItemSelectedPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "typeToSelect": {
+      "complexType": {
+        "signature": "(key: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLSlotElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\nThe key passed will be appended to the internal query and the selection will be updated. After a brief period, the\ninternal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\nenabling type-to-select when the menu doesn't have focus.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}