npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.288d30e → 0.0.0-insider.3028e0e - Mend

@six-group/ui-library 0.0.0-insider.288d30e → 0.0.0-insider.3028e0e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (403) hide show

package/dist/collection/components/six-menu/six-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-menu.js","sourceRoot":"","sources":["../../../src/components/six-menu/six-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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;\n\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 sixMenuItemHeight = 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 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 }\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\n if (this.virtualScroll && this.items !== null) {\n styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n }\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"]}
1	+ {"version":3,"file":"six-menu.js","sourceRoot":"","sources":["../../../src/components/six-menu/six-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/six-menu/test/six-menu.spec.js CHANGED Viewed

@@ -43,7 +43,7 @@ describe('six-menu', () => {
         expect(page.root).toEqualHtml(`
       <six-menu virtual-scroll="">
         <mock:shadow-root>
-          <div class="menu" part="wrapper" style="height: 320px;">
+          <div class="menu" part="wrapper" style="height: 240px;">
             <div part="base" role="menu" tabindex="0" style="transform: translateY(0px);">
               <slot></slot>
             </div>

package/dist/collection/components/six-menu/test/six-menu.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-menu.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu/test/six-menu.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,yCAAyC;SAChD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,sCAAsC;SAC7C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,QAAQ;QACR,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QAEH,OAAO;QACP,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;gBAC1D,KAAK,EAAE,SAAS,GAAG,EAAE;gBACrB,KAAK,EAAE,SAAS,GAAG,EAAE;aACtB,CAAC,CAAC,CAAC;QACN,CAAC;QACD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenu } from '../six-menu';\n\ndescribe('six-menu', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu></six-menu>`,\n });\n expect(page.root).toEqualHtml(`\n <six-menu>\n <mock:shadow-root>\n <div class=\"menu\" part=\"wrapper\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\">\n <slot></slot>\n </div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n\n it('renders without box-shadow', async () => {\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu remove-box-shadow></six-menu>`,\n });\n expect(page.root).toEqualHtml(`\n <six-menu remove-box-shadow=\"\">\n <mock:shadow-root>\n <div class=\".no-shadow menu\" part=\"wrapper\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\">\n <slot></slot>\n </div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n\n it('renders virtual scrolling', async () => {\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu virtual-scroll></six-menu>`,\n });\n expect(page.root).toEqualHtml(`\n <six-menu virtual-scroll=\"\">\n <mock:shadow-root>\n <div class=\"menu\" part=\"wrapper\" style=\"height: ~~320px~~;\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\" style=\"transform: translateY(0px);\">\n <slot></slot>\n </div>\n <div></div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n\n it('renders dynamically added items', async () => {\n // given\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu></six-menu>`,\n });\n\n // when\n if (page.root != null) {\n page.root.items = Array.from(Array(3).keys()).map((idx) => ({\n label: `label ${idx}`,\n value: `value ${idx}`,\n }));\n }\n await page.waitForChanges();\n\n // then\n expect(page.root).toEqualHtml(`\n <six-menu>\n <mock:shadow-root>\n <div class=\"menu\" part=\"wrapper\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\">\n <slot></slot>\n <six-menu-item value=\"value 0\">\n label 0\n </six-menu-item>\n <six-menu-item value=\"value 1\">\n label 1\n </six-menu-item>\n <six-menu-item value=\"value 2\">\n label 2\n </six-menu-item>\n </div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"six-menu.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu/test/six-menu.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,yCAAyC;SAChD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,sCAAsC;SAC7C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,QAAQ;QACR,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QAEH,OAAO;QACP,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;gBAC1D,KAAK,EAAE,SAAS,GAAG,EAAE;gBACrB,KAAK,EAAE,SAAS,GAAG,EAAE;aACtB,CAAC,CAAC,CAAC;QACN,CAAC;QACD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenu } from '../six-menu';\n\ndescribe('six-menu', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu></six-menu>`,\n });\n expect(page.root).toEqualHtml(`\n <six-menu>\n <mock:shadow-root>\n <div class=\"menu\" part=\"wrapper\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\">\n <slot></slot>\n </div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n\n it('renders without box-shadow', async () => {\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu remove-box-shadow></six-menu>`,\n });\n expect(page.root).toEqualHtml(`\n <six-menu remove-box-shadow=\"\">\n <mock:shadow-root>\n <div class=\".no-shadow menu\" part=\"wrapper\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\">\n <slot></slot>\n </div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n\n it('renders virtual scrolling', async () => {\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu virtual-scroll></six-menu>`,\n });\n expect(page.root).toEqualHtml(`\n <six-menu virtual-scroll=\"\">\n <mock:shadow-root>\n <div class=\"menu\" part=\"wrapper\" style=\"height: 240px;\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\" style=\"transform: translateY(0px);\">\n <slot></slot>\n </div>\n <div></div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n\n it('renders dynamically added items', async () => {\n // given\n const page = await newSpecPage({\n components: [SixMenu],\n html: `<six-menu></six-menu>`,\n });\n\n // when\n if (page.root != null) {\n page.root.items = Array.from(Array(3).keys()).map((idx) => ({\n label: `label ${idx}`,\n value: `value ${idx}`,\n }));\n }\n await page.waitForChanges();\n\n // then\n expect(page.root).toEqualHtml(`\n <six-menu>\n <mock:shadow-root>\n <div class=\"menu\" part=\"wrapper\">\n <div part=\"base\" role=\"menu\" tabindex=\"0\">\n <slot></slot>\n <six-menu-item value=\"value 0\">\n label 0\n </six-menu-item>\n <six-menu-item value=\"value 1\">\n label 1\n </six-menu-item>\n <six-menu-item value=\"value 2\">\n label 2\n </six-menu-item>\n </div>\n </div>\n </mock:shadow-root>\n </six-menu>\n `);\n });\n});\n"]}

package/dist/collection/components/six-menu-divider/six-menu-divider.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuDivider {
     render() {
-        return h("div", { key: 'ae890203093a071811e37e77637b68c2b858c202', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
+        return h("div", { key: '41a61bd4110bfb44f10211c350afcebe5c5971df', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
     }
     static get is() { return "six-menu-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-menu-item/six-menu-item.js CHANGED Viewed

@@ -63,13 +63,13 @@ export class SixMenuItem {
         this.hasFocus = false;
     }
     render() {
-        return (h("div", { key: 'a91c841a6fac9e807f623cd337d9902a6ee98aaa', ref: (el) => (this.menuItem = el), part: "base", class: {
+        return (h("div", { key: 'd8c10ca0fc9bd795b87790337f2cc0c792999685', ref: (el) => (this.menuItem = el), part: "base", class: {
                 'menu-item': true,
                 'menu-item--checked': this.checked,
                 'menu-item--disabled': this.disabled,
                 'menu-item--focused': this.hasFocus,
                 'menu-item--active': this.active,
-            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { class: "menu-item__checkbox" }, h("six-checkbox", { "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '5d4fa9c6c86e1506703cdbe0d295e753ba251302', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '619b262517cddb822a90e7251ce720c8bee09bb9', name: "prefix" })), h("span", { key: '94c554dec6b00e361f84ab42f27c06c94908f9e7', part: "label", class: "menu-item__label" }, h("slot", { key: '5e0dded9fd06cd4b1bf3cad28025f97da055326b', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'bd328a4e14592019cc68fc12ef66c9e2561f561f', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '7a46bc384827392a4bc55e424d926de1f8d36766', name: "suffix" })), this.checkType === 'check' && (h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check")))));
+            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { class: "menu-item__checkbox" }, h("six-checkbox", { "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '470f2fee47a4120c0dead3b7996220af9e5274d1', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: 'fdddb68cb266d02f6a6a2b46ffcdecb1d8eb32db', name: "prefix" })), h("span", { key: '6d9fe694ce0e07f2aac3604b905f9194f4764057', part: "label", class: "menu-item__label" }, h("slot", { key: 'ef2903a04191f78955802da5edefd32583305068', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'd4f6ee6c2789c33deaf08eb585ec7ca283b59170', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '39a1d59be3d1f9deda4c55b1575a72c647600783', name: "suffix" })), this.checkType === 'check' && (h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check")))));
     }
     static get is() { return "six-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-menu-label/six-menu-label.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuLabel {
     render() {
-        return (h("div", { key: 'c6c5d6cccd54d6fbdbdf2a561165fbb22547976e', part: "base", class: "menu-label" }, h("slot", { key: '33bf6b17abe001e11677c5fbae1573dcd84280f1' })));
+        return (h("div", { key: '5183d165a877bd2ca0c25d4ff61d55200b66132d', part: "base", class: "menu-label" }, h("slot", { key: '5adecf55a82a78de5eee401aeec442f7e60e0874' })));
     }
     static get is() { return "six-menu-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-picto/six-picto.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class SixPicto {
     render() {
         var _a;
         const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-        return (h(Host, { key: '2aa8212ff4ea5c7ed283f8d96ebf9699ab528007' }, h("div", { key: '451ab5a15cb33b9e5569cded07dacfc03833a830', part: "icon", class: {
+        return (h(Host, { key: 'adec8f35b8501390c0831495ea9f915f6616aa04' }, h("div", { key: '92bcee923694c027ed93554d4d93924b58803b82', part: "icon", class: {
                 [`is-size-${this.size}`]: typeof this.size != null || this.size.trim() !== '',
                 [`${iconName}`]: true,
             } })));

package/dist/collection/components/six-progress-bar/six-progress-bar.js CHANGED Viewed

@@ -17,10 +17,10 @@ export class SixProgressBar {
         this.indeterminate = false;
     }
     render() {
-        return (h("div", { key: '4833889d1cb6d61a5b8263bf3349ec55b0d3138b', part: "base", class: {
+        return (h("div", { key: '5361da7a78cfcaa6375e078da88209dcd725d832', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: '0e0bfb16e106f8bdf669e84df7ee1cf846a735e2', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: 'a3dea20c3afea5be2c6c02adf9e6f98cdb038cbb', part: "indicator", class: "progress-bar__indicator", style: {
                 width: `${this.percentage}%`,
             } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
     }

package/dist/collection/components/six-progress-ring/six-progress-ring.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class SixProgressRing {
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: 'fcfdeaf3f113028f9368d6c26323ed3680daf1dc', part: "base", class: "progress-ring" }, h("svg", { key: '55048e767285e998ed5bf34ada821abc7d3eae58', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '63f9d87a8d310c1ea3dd40801eeb3232c0b4bb3d', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: '34a46dadccdb2498bff8196a232570a761d6a468', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: '55077cbe1488ae88aa86e06c97ae4948f7d5726a', part: "label", class: "progress-ring__label" }, h("slot", { key: '3e43561a4838f5f34f7196d713c2d6ddd4688965' }))));
+        return (h("div", { key: 'e502ccf39d3b246d03122b446949ee8380e1a2fa', part: "base", class: "progress-ring" }, h("svg", { key: 'd37581863e5a67e9f8a9cd058954581ee7e86a4a', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '022eeb124e217d93479cf7ead2cabb9169b9afd4', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'bc0fbfc9f1c872243ae2169d6412db47fb554e19', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: '9320211edc9c0b9b24124ffc7ffdac9d6d2f86a7', part: "label", class: "progress-ring__label" }, h("slot", { key: 'e7c3ce7e12a7691e461b73e6cbd2912dde27ac75' }))));
     }
     static get is() { return "six-progress-ring"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-radio/six-radio.js CHANGED Viewed

@@ -103,12 +103,12 @@ export class SixRadio {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: '13c5201fe152b2bc57a679422219af5ae19a46a9', part: "base", class: {
+        return (h("label", { key: '11d5d7c460cf62b2fc73435137998c3b424ab58f', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'd32606e4ac318f0de1afb0234d2dfc7dd00546ec', part: "control", class: "radio__control" }, h("span", { key: 'd12e68de71d9e49dc4b68813dc036ffa4e06fc96', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'b942c5b3f4c817484ce4a615913a4a9c01675562', viewBox: "0 0 16 16" }, h("g", { key: '316ed8598111b40d906c0b44ab7e4bfd2bf5cd1c', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '58a1547753ea79b7de3b4b90eeedfeb40ad7b6d6', fill: "currentColor" }, h("circle", { key: 'd225f3a06fdbb23a84eae34a6ba1b9184f55e627', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '8e3adc0aaba86098d423c5a7f484a20fe0b2a0cd', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'b72458bbd8e5ca7a8109a5e85b1b5699a843d097', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '87652971c02c9aa7187a0f266283d9a475946f78' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'e6ca5e0308ed109262b995b9831f32f5c5829cbc', part: "control", class: "radio__control" }, h("span", { key: 'c201309a8ef4def676aa48cf9dd66b94da28db10', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '0e003d8db64fb73c54e95fffb9005d434d2b114e', viewBox: "0 0 16 16" }, h("g", { key: '374a33afe42003445cb91630754007f7057ff755', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '2b85fcbdf694e18c9234819a0a20ffd793be0102', fill: "currentColor" }, h("circle", { key: '45842bd37b3dcea164b972c9ff6e461fc866536d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '924cbd7890627bbf79201b68a989f894e26d9579', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'f00e3fbac022d2be55117448df3e8ff908dd4cd5', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '0fa728701561580e0d06f0568a001d1d234ed867' }))));
     }
     static get is() { return "six-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-range/six-range.js CHANGED Viewed

@@ -188,7 +188,7 @@ export class SixRange {
         }
     }
     render() {
-        return (h(FormControl, { key: '4bd9c413aa318930b38a57e8f76906b5c25c0961', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '2a5cd3d1b1bcc77813aacc5eb2971a5ef0e27e0f', part: "base", class: {
+        return (h(FormControl, { key: 'cf23b46a8ca2596e962810d3528163ab9add32c3', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '370f20143ac3c9325b7cc99ceb3c3a6720a50b1c', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -196,7 +196,7 @@ export class SixRange {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: '448a9d9d41e466a09c4e00d9229b2971e99190b5', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '74380f56888930992b753f905cd6e9256c24d106', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     static get is() { return "six-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-root/six-root.js CHANGED Viewed

@@ -16,7 +16,7 @@ export class SixRoot {
         this.version = '';
     }
     render() {
-        return (h("host", { key: 'd004ad641b82d656ccbb7b788a04d8befab64b47', class: "six-root" }, h("header", { key: 'cce9488ed3c0778120fb1c0ce040a74b8c3b18d6', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: 'b5810a66f91e003d83ee9196e0c955b52773794a', name: "header" })), h("nav", { key: '8d7aa97373ddb660d7a6e5ab1b860736726b9ee7', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'ab612b588dedf3e3098cd6f423078ef2fdc83bed', name: "left-sidebar" })), h("main", { key: '2c6e91c192a5346302d6d0be19a4e43d190cf5d4', part: "main" }, h("div", { key: 'bb52732ddf5462b1d536444f0f584fa48ba5ee55', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '23db6d1c2426497e40e91ef7d7898f37e1977465', name: "main" })), h("div", { key: 'f083d6d754ff7a502efe8f20663a423075f85e9f', class: "six-root__footer" }, h("slot", { key: 'd902e6b083181958e12f8f808b2dc98e2bb99dfd', name: "footer" }))), h("nav", { key: '05b158597d15d8536e8eb8ccc66f0ff971ebdc92', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '3a9168dbd5039344e948c22c822ca7f65648cb1f', name: "right-sidebar" }))));
+        return (h("host", { key: 'f4b3cb516ce1b70a834903c00a56ca7edf5364dc', class: "six-root" }, h("header", { key: '88ec66c2af58e55621563f600cb8c1589467218c', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: '072a0e92b9203149a9823fdf83aa45b39494559f', name: "header" })), h("nav", { key: '58d18ca9b9ebf9db5981b3c82cce657f73ef5f13', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '62643ef967da9d303380b4d4d26ec5e026a86ac3', name: "left-sidebar" })), h("main", { key: '0b059f2814c4485dd03a3a166529d78999baa699', part: "main" }, h("div", { key: '74ce003ff9d45945b9bdc43b170c99300856544b', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5ea05c471c96fd47cf27749accd1c551f16d69d2', name: "main" })), h("div", { key: '5dd7796754df4238f61f1ee8cc3cee9589f1f40f', class: "six-root__footer" }, h("slot", { key: '5c4036b9fb4d36f69b617a2e6ee7fce62c80fa08', name: "footer" }))), h("nav", { key: '36c76008c9dc36b7fef9f8a6a79e6508d1764ede', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '66cdae8a60d251063e4c8a710a36d0be07dedf0e', name: "right-sidebar" }))));
     }
     static get is() { return "six-root"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-search-field/six-search-field.js CHANGED Viewed

@@ -42,7 +42,7 @@ export class SixSearchField {
         this.eventListeners.removeAll();
     }
     render() {
-        return (h("div", { key: '3083fe949be687f4540c7ee0115d9befc4faa90d', class: "search-box" }, h("six-input", { key: 'addaf6279a2473b3c44d2284c11a4e822c0883fe', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: 'd6953c6b87cbf8f6ed1fb1625aa510857ccfb421', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'd7f0a5e0974d5e0cbe8b0e120999804be0299aef' })));
+        return (h("div", { key: '85db56e598dbf855409cc34f385680472f3ec208', class: "search-box" }, h("six-input", { key: 'caba6d8f93c3d95e18d50de6f01cf87d42c0afc2', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '511f56040dcd6b4a4c9033c6f4191c5ae457839e', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: '6c067ed8f365be18f5c05ef2b9a7b538bba5c015' })));
     }
     static get is() { return "six-search-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-select/six-select.js CHANGED Viewed

@@ -4,6 +4,7 @@ import FormControl from "../../functional-components/form-control/form-control";
 import { EventListeners } from "../../utils/event-listeners";
 import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
 import { getLanguage } from "../../utils/error-messages";
+import { convertToValidArrayValue, convertToValidValue, valueEquals } from "./util";
 let id = 0;
 /**
  * @since 1.0
@@ -47,7 +48,8 @@ export class SixSelect {
             var _a;
             event.stopPropagation();
             await this.clearValues();
-            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide());
+            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show());
+            await this.setFocus();
             this.sixChange.emit({ value: this.value, isSelected: true });
         };
         this.handleKeyDown = (event) => {
@@ -138,12 +140,12 @@ export class SixSelect {
                 return;
             }
             this.activeItemIndex = -1;
-            // reset display style of main items
-            const mainItems = this.getItems();
-            mainItems.forEach((item) => (item.style.display = 'unset'));
-            // show selected menu items in the selection container and hide them in the main container
-            const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
             if (!this.virtualScroll && this.multiple) {
+                // reset display style of main items
+                const mainItems = this.getItems();
+                mainItems.forEach((item) => (item.style.display = 'unset'));
+                // show selected menu items in the selection container and hide them in the main container
+                const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);
                 checkedItems.forEach((i) => (i.style.display = 'none'));
                 this.selectionContainerItems = checkedItems.map((item) => {
                     return (h("six-menu-item", { key: item.value, checked: true, value: item.value, checkType: this.multiple ? 'checkbox' : 'check', onClick: (event) => {
@@ -163,6 +165,9 @@ export class SixSelect {
         };
         this.handleMenuHide = () => {
             this.isOpen = false;
+            if (this.multiple) {
+                this.handleBlur();
+            }
         };
         this.handleSlotChange = () => {
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
@@ -215,44 +220,52 @@ export class SixSelect {
         this.handleSlotChange();
     }
     handleMultipleChange() {
-        // Cast to array | string based on `this.multiple`
-        const value = this.getValueAsArray();
-        this.value = this.multiple ? value : value[0] || '';
+        this.value = convertToValidValue(this.value, this.multiple);
         this.syncItemsFromValue();
     }
     async handleValueChange() {
-        if (this.multiple && !Array.isArray(this.value)) {
-            this.value = [];
-        }
-        if (!this.multiple && typeof this.value !== 'string') {
-            this.value = '';
+        const newValue = convertToValidValue(this.value, this.multiple);
+        if (!valueEquals(this.value, newValue)) {
+            this.value = newValue;
         }
         await this.syncItemsFromValue();
     }
     connectedCallback() {
+        var _a;
         if (this.virtualScroll && this.options === null) {
             console.error('Options must be defined when using virtual scrolling');
         }
-        this.init();
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-select-change', 'change', this.host);
+        this.eventListeners.forward('six-select-blur', 'blur', this.host);
+        this.eventListeners.forward('six-select-focus', 'focus', this.host);
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
+        }
     }
     componentWillLoad() {
+        this.value = convertToValidValue(this.value, this.multiple);
         this.handleSlotChange();
-        if (this.multiple && this.value != null) {
-            this.value = this.getValueAsArray();
-        }
     }
     componentDidLoad() {
-        this.init();
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
+        }
         // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
         requestAnimationFrame(() => this.syncItemsFromValue());
         if (this.autocomplete && this.autocompleteInput != null) {
             const autocompleteInput = this.autocompleteInput;
             this.eventListeners.add(autocompleteInput, 'six-input-input', debounce((event) => {
+                var _a;
                 this.value = autocompleteInput.value;
                 this.sixChange.emit({ value: this.value, isSelected: false });
                 event.stopPropagation();
+                if (this.virtualScroll || this.value.length > 0) {
+                    (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show();
+                }
             }, this.inputDebounce));
-            autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+            const selectedLabel = this.displayedValues.join(', ');
+            autocompleteInput.value = selectedLabel;
         }
     }
     disconnectedCallback() {
@@ -267,16 +280,6 @@ export class SixSelect {
         this.hasFocus = true;
         (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
-    init() {
-        var _a;
-        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-        this.eventListeners.forward('six-select-change', 'change', this.host);
-        this.eventListeners.forward('six-select-blur', 'blur', this.host);
-        this.eventListeners.forward('six-select-focus', 'focus', this.host);
-        if (this.displayValuesContainer) {
-            this.resizeObserver.observe(this.displayValuesContainer);
-        }
-    }
     getItemLabel(item) {
         var _a, _b;
         const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
@@ -303,11 +306,6 @@ export class SixSelect {
         var _a;
         return [...(((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) || [])];
     }
-    getValueAsArray() {
-        const values = Array.isArray(this.value) ? this.value : this.value === '' ? [] : [this.value];
-        // enforce that the values are converted to 'string' before the value is compared
-        return values.map(String);
-    }
     async clearValues() {
         this.value = this.multiple ? [] : '';
         this.selectionContainerItems = [];
@@ -327,19 +325,30 @@ export class SixSelect {
     async syncItemsFromValue() {
         const selectionContainerItems = this.getSelectionContainerItems();
         const mainItems = this.getItems();
-        const value = this.getValueAsArray();
+        const value = convertToValidValue(this.value, this.multiple);
         selectionContainerItems.forEach((item) => {
             item.checkType = this.multiple ? 'checkbox' : 'check';
-            item.checked = value.includes(item.value);
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
         });
         mainItems.forEach((item) => {
             item.checkType = this.multiple ? 'checkbox' : 'check';
-            item.checked = value.includes(item.value);
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
         });
-        const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
+        const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);
         this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));
-        if (this.autocomplete && this.autocompleteInput != null) {
-            this.autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+        if (this.autocomplete && this.autocompleteInput != null && !this.hasFocus) {
+            const selectedLabel = this.displayedValues.join(', ');
+            this.autocompleteInput.value = selectedLabel;
         }
         requestAnimationFrame(() => {
             this.updateDisplayedValues();
@@ -405,7 +414,7 @@ export class SixSelect {
             showClear = true;
             showExpand = false;
         }
-        return (h(FormControl, { key: 'cf4bbc5c8bdb3bd395b3223065ef7175f12fc750', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: '5de198b2fc9ab517f9e6682394d881328f4da383', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        return (h(FormControl, { key: 'aadbfa9eb9b23c921f8ab3f4bbb405c55ba3272f', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: '16ed31352aee1e313b00169a3e3c98f0ccf408e4', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
                 select: true,
                 'select--open': this.isOpen,
                 'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -420,20 +429,20 @@ export class SixSelect {
                 'select--large': this.size === 'large',
                 'select--pill': this.pill,
                 'select--invalid': this.invalid,
-            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: '731e50e52df65db450e852209b091698d024d533', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: '8d5dc6933777ea4522d0a133430c164ea6efeb34', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
                 select__box: true,
                 'select__box--line': this.line,
                 'select__box--autocomplete': this.autocomplete,
-            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: '4623418e42ad9d69891c582b7e88e2686b27eaa1', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { key: '1c53a3b59a3f09c6707709c36afdcd62e90de43a', ref: (el) => (this.autocompleteInput = el), class: {
+            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: '1d94d6e44646a44f313d792d9232069c245d835d', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { key: '114a07bf20d38d902eb9bdeb21763d83cc592c4c', ref: (el) => (this.autocompleteInput = el), class: {
                 select__input: true,
                 'select__hidden-select': !this.autocomplete,
-            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: '65f3a8a73dd645a1098afc2b92104336b16fb80f', class: {
+            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: '2c1cbf7b6896e36cb6eb0407ca12ce1a09bd26f1', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { key: '80ac8179cb1fd6bbccd9525254511dde6908af5f', ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: '5959b0414a8553f2ec9deab26d745319c56ffcc9', ref: (el) => (this.menu = el), part: "menu", class: {
                 select__menu: true,
                 'select__menu--hidden': !hasMenuItems,
-            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: '72f6447ad3dc14df92cf42b4a7b0984e970759c7', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: '32c794b9767c0061445ad8b1e75803a4e93d4b4b', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';