npm - @six-group/ui-library - Versions diffs - 4.0.0 → 4.0.2 - Mend

@six-group/ui-library 4.0.0 → 4.0.2

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 (329) hide show

package/dist/ui-library/p-02981b91.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["isValueEmpty","value","Array","isArray","length","sixSelectCss","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","touched","eventListeners","EventListeners","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClearClick","event","stopPropagation","clearValues","sixChange","isSelected","handleSelectAll","nonFilteredItems","getItems","filter","item","style","display","keyName","key","keyCode","code","isOpen","multiple","ctrlKey","preventDefault","hasDeselectedOptions","some","opt","disabled","checked","option","forEach","checkedItems","map","handleKeyDown","target","items","firstItem","lastItem","tagName","toLowerCase","_a","dropdown","hide","includes","_b","show","setFocus","_c","_d","menu","typeToSelect","handleLabelClick","box","focus","handleMenuSelect","detail","getValue","v","syncItemsFromValue","handleMenuShow","resizeMenu","resizeObserver","observe","host","handleMenuHide","unobserve","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","handleTagInteraction","path","composedPath","clearButton","find","el","HTMLElement","element","classList","contains","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","handleLabelChange","handleMultipleChange","getValueAsArray","handleValueChange","connectedCallback","virtualScroll","options","console","error","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","input","ResizeObserver","requestAnimationFrame","add","debounce","enteredValue","inputDebounce","hasSelection","displayLabel","disconnectedCallback","removeEventListener","removeAll","getItemLabel","slot","querySelector","getTextContent","textContent","h","label","querySelectorAll","hasMenuItems","values","String","minWidth","clientWidth","reposition","val","push","displayTags","exportparts","type","size","pill","clearable","onClick","onKeyDown","syncValueFromItems","maxTagsVisible","total","slice","extractLabelForSelectedItem","join","selectedOption","checkedItem","checkedValues","render","FormControl","helpText","errorText","onLabelClick","required","displayError","invalid","part","ref","hoist","closeOnSelect","containingElement","disableHideOnEnterAndSpace","autocomplete","class","select","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","select__label","placeholder","name","tabindex","select__input","select__menu","onSlotchange"],"sources":["src/components/six-select/util.ts","src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","src/components/six-select/six-select.tsx"],"sourcesContent":["export interface MenuItem {\n value: string;\n}\n\nexport function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[] {\n if (multiple) {\n if (Array.isArray(value)) {\n return getSelectedValues(value, menuItems);\n } else {\n return getSelectedValuesFromString(value, menuItems);\n }\n }\n\n return getSelectedMenuItem(value, menuItems)?.value ?? '';\n}\n\nexport function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean {\n if (value === '') {\n return true;\n }\n\n if (multiple) {\n if (Array.isArray(value)) {\n if (value.length === 0) {\n return true;\n }\n return getSelectedValues(value, menuItems).length === value.length;\n }\n return getSelectedValuesFromString(value, menuItems).length > 0;\n }\n\n return getSelectedMenuItem(value, menuItems) != null;\n}\n\nexport function valueEquals(a: string | string[], b: string | string[]): boolean {\n if (Array.isArray(a) && Array.isArray(b)) {\n return a.length === b.length && a.every((element, index) => element === b[index]);\n } else if (typeof a === 'string' && typeof b === 'string') {\n return a === b;\n }\n return false;\n}\n\nexport function isValueEmpty(value: string | string[]): boolean {\n if (Array.isArray(value)) {\n return value.length === 0;\n }\n return value === '';\n}\n\nfunction getSelectedValues(values: unknown[], menuItems: MenuItem[]): string[] {\n return menuItems.filter((menuItem) => values.includes(menuItem.value)).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedValuesFromString(value: unknown, menuItems: MenuItem[]): string[] {\n return menuItems.filter((menuItem) => value === menuItem.value).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedMenuItem(value: unknown, menuItems: MenuItem[]): MenuItem | undefined {\n return menuItems.find((item) => value === item.value);\n}\n","@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n display: block;\n}\n\n.select {\n display: block;\n}\n\n.select__box {\n display: inline-flex;\n align-items: center;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n font-size: var(--six-input-font-size-medium);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: pointer;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &--autocomplete {\n border: none;\n overflow: initial;\n }\n}\n\n.select:not(.select--disabled) .select__box:hover {\n background-color: var(--six-input-background-color-hover);\n color: var(--six-input-color-hover);\n\n border-bottom-color: var(--six-input-border-color-hover);\n\n &:not(.select__box--line) {\n border-color: var(--six-input-border-color-hover);\n }\n}\n\n.select:not(.select--disabled) .select__box:focus {\n background-color: var(--six-input-background-color-focus);\n outline: none;\n color: var(--six-input-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.select__box--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n}\n\n.select--disabled {\n .select__box {\n background-color: var(--six-input-background-color-disabled);\n color: var(--six-input-color-disabled);\n cursor: not-allowed;\n outline: none;\n\n &:not(.select__box--line) {\n border-color: var(--six-input-border-color-disabled);\n }\n }\n\n .select__tags,\n .select__clear {\n pointer-events: none;\n }\n}\n\n.select--invalid:not(.select--disabled):not(.select--focused) {\n .select__box {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.select__label {\n flex-shrink: 1;\n flex-grow: 1;\n align-items: center;\n user-select: none;\n width: 0; /* needed for firefox because due to \"white-space: nowrap\" the default is set to max-content */\n\n @include hide-scrollbar;\n overflow-x: auto;\n overflow-y: hidden;\n text-overflow: ellipsis;\n}\n\n.select__label--single {\n white-space: nowrap;\n}\n\n.select__clear {\n flex-shrink: 0;\n flex-grow: 0;\n display: inline;\n}\n\n.select__icon {\n flex-shrink: 0;\n flex-grow: 0;\n display: inline;\n transition: var(--six-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n transform: rotate(-180deg);\n}\n\n// Placeholder\n.select--placeholder-visible .select__label {\n color: var(--six-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n color: var(--six-input-placeholder-color-disabled);\n}\n\n// Tags\n.select__tags {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: left;\n margin-left: var(--six-spacing-xx-small);\n}\n\n// Hidden input (for form control validation to show)\n.select__hidden-select {\n @include visually-hidden();\n}\n\n.select__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--small {\n .select__box {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n min-height: var(--six-height-small);\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n }\n\n .select__label {\n margin: 0 var(--six-input-spacing-small);\n }\n\n .select__clear {\n margin-right: var(--six-spacing-xxx-small);\n }\n\n .select__icon {\n margin-right: var(--six-spacing-x-small);\n }\n\n .select__tags {\n padding-bottom: 2px;\n\n six-tag {\n padding-top: 2px;\n margin-right: var(--six-spacing-xx-small);\n }\n }\n\n &.select--has-tags .select__label {\n margin-left: 0;\n }\n}\n\n.select--medium {\n .select__box {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n min-height: var(--six-height-medium);\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n }\n\n .select__label {\n margin: 0 var(--six-input-spacing-medium);\n }\n\n .select__clear {\n margin-right: var(--six-spacing-xxx-small);\n }\n\n .select__icon {\n margin-right: var(--six-spacing-x-small);\n }\n\n .select__tags {\n padding-bottom: 3px;\n\n six-tag {\n padding-top: 3px;\n margin-right: var(--six-spacing-xx-small);\n }\n }\n\n &.select--has-tags .select__label {\n margin-left: 0;\n }\n}\n\n.select--large {\n .select__box {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n min-height: var(--six-height-large);\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n }\n\n .select__label {\n margin: 0 var(--six-input-spacing-large);\n }\n\n .select__clear {\n margin-right: var(--six-spacing-xxx-small);\n }\n\n .select__icon {\n margin-right: var(--six-spacing-x-small);\n }\n\n .select__tags {\n padding-bottom: 4px;\n\n six-tag {\n padding-top: 4px;\n margin-right: var(--six-spacing-xx-small);\n }\n }\n\n &.select--has-tags .select__label {\n margin-left: 0;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--pill {\n &.select--small .select__box {\n border-radius: var(--six-height-small);\n }\n\n &.select--medium .select__box {\n border-radius: var(--six-height-medium);\n }\n\n &.select--large .select__box {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Menu\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.select {\n &__menu {\n max-width: 50vw;\n width: fit-content;\n\n &--filtered {\n // fixes problem where when filter is enabled the popup has the width of the input field but the menu has the width\n // of the trigger element and we thus get weird UI glitches when trigger is narrower than filter input field\n width: 100% !important;\n }\n\n &--hidden {\n // hide the menu panel if there are no menu items\n display: none;\n }\n }\n}\n\n// fixes problem where six-select height changes when size=\"small\" and clearing button is visible\nsix-icon-button::part(base) {\n padding-top: 0;\n padding-bottom: 0;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getTextContent, hasSlot } from '../../utils/slot';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { SixMenuItemData } from '../six-menu/six-menu';\nimport { isValueEmpty } from './util';\n\nexport interface SixSelectChangePayload {\n value: string | string[];\n isSelected: boolean;\n}\n\nlet id = 0;\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 select's options in the form of menu items.\n * @slot label - The select's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the select.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part clear-button - The input's clear button, exported from six-input.\n * @part form-control - The form control that wraps the label, input, and help text.\n * @part help-text - The select's help text.\n * @part icon - The select's icon.\n * @part label - The select's label.\n * @part menu - The select menu, a six-menu element.\n * @part tag - The multiselect option, a six-tag element.\n * @part tags - The container in which multiselect options are rendered.\n */\n\n@Component({\n tag: 'six-select',\n styleUrl: 'six-select.scss',\n shadow: true,\n})\nexport class SixSelect {\n private box?: HTMLElement;\n private dropdown?: HTMLSixDropdownElement;\n private input?: HTMLSixInputElement;\n private inputId = `select-${++id}`;\n private labelId = `select-label-${id}`;\n private helpTextId = `select-help-text-${id}`;\n private errorTextId = `select-error-text-${id}`;\n private menu?: HTMLSixMenuElement;\n private resizeObserver?: ResizeObserver;\n private touched = false;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSelectElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() isOpen = false;\n @State() displayLabel = '';\n @State() displayTags: HTMLSixTagElement[] = [];\n\n /** Set to true to enable multiselect. */\n @Prop() multiple = false;\n\n /**\n * The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\n * number of additional items that are selected. Set to -1 to remove the limit.\n */\n @Prop() maxTagsVisible = 3;\n\n /** Set to true to disable the select control. */\n @Prop() disabled = false;\n\n /** The select's name. */\n @Prop() name = '';\n\n /** The select's placeholder text. */\n @Prop() placeholder = '';\n\n /** The filter's placeholder text. */\n @Prop() filterPlaceholder?: string;\n\n /** The debounce for the filter callbacks. */\n @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n /** The select's size. */\n @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n /** The value of the control. This will be a string or an array depending on `multiple`. */\n @Prop({ mutable: true }) value: string | string[] = '';\n\n /** Set to true to draw a pill-style select with rounded edges. */\n @Prop() pill = false;\n\n /** The select's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** Set to true to add a clear button when the select is populated. */\n @Prop() clearable = false;\n\n /** The label text. */\n @Prop() label = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText = '';\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** Set to render as line */\n @Prop() line = false;\n\n /** Set to true to allow filtering for entries in the dropdown */\n @Prop() filter = false;\n\n /**\n * Set to true to allow async filtering.\n * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n */\n @Prop() asyncFilter = false;\n\n /**\n * Set to true to turn the six-select into an autocomplete.\n */\n @Prop() autocomplete = false;\n\n /** The debounce for when the input changes for autocompletes should be emitted */\n @Prop() inputDebounce = DEFAULT_DEBOUNCE_FAST;\n\n /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */\n @Prop() options: SixMenuItemData[] | null = null;\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 @Watch('disabled')\n handleDisabledChange() {\n if (this.disabled && this.isOpen) {\n this.dropdown?.hide();\n }\n }\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('multiple')\n handleMultipleChange() {\n // Cast to array | string based on `this.multiple`\n const value = this.getValueAsArray();\n this.value = this.multiple ? value : value[0] || '';\n this.syncItemsFromValue();\n }\n\n @Watch('value')\n async handleValueChange() {\n if (this.multiple && !Array.isArray(this.value)) {\n this.value = [];\n }\n\n if (!this.multiple && typeof this.value !== 'string') {\n this.value = '';\n }\n\n await this.syncItemsFromValue();\n }\n\n /** Emitted when the control's value changes. */\n @Event({ eventName: 'six-select-change' }) sixChange!: EventEmitter<SixSelectChangePayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-select-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-select-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n if (this.virtualScroll && this.options === null) {\n console.error('Options must be defined when using virtual scrolling');\n }\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-select-change', 'change', this.host);\n this.eventListeners.forward('six-select-blur', 'blur', this.host);\n this.eventListeners.forward('six-select-focus', 'focus', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n if (this.multiple && this.value != null) {\n this.value = this.getValueAsArray();\n }\n }\n\n componentDidLoad() {\n if (this.input == null) return;\n const input = this.input;\n this.resizeObserver = new ResizeObserver(() => this.resizeMenu());\n\n // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning\n requestAnimationFrame(() => this.syncItemsFromValue());\n\n this.eventListeners.add(\n input,\n 'six-input-input',\n debounce((event) => {\n const enteredValue = input.value;\n this.clearValues();\n this.sixChange.emit({ value: enteredValue, isSelected: false });\n event.stopPropagation();\n }, this.inputDebounce)\n );\n\n input.value = this.hasSelection() ? this.displayLabel : '';\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the select. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.hasFocus = true;\n this.box?.focus(options);\n }\n\n private getItemLabel(item: HTMLSixMenuItemElement): string {\n const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n if (slot != null) {\n return getTextContent(slot);\n } else {\n // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed\n return item.textContent ?? '';\n }\n }\n\n private getItems(): HTMLSixMenuItemElement[] {\n if (this.options !== null) {\n return this.options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n }\n\n return [...this.host.querySelectorAll('six-menu-item')];\n }\n\n private hasMenuItems() {\n return this.getItems().length > 0;\n }\n\n private getValueAsArray() {\n const values = Array.isArray(this.value) ? this.value : this.value === '' ? [] : [this.value];\n // enforce that the values are converted to 'string' before the value is compared\n return values.map(String);\n }\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.clearValues();\n this.sixChange.emit({ value: this.value, isSelected: true });\n };\n\n private clearValues() {\n this.value = this.multiple ? [] : '';\n this.syncItemsFromValue();\n }\n\n private handleSelectAll = (event: KeyboardEvent) => {\n const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');\n const keyName = event.key;\n const keyCode = event.code;\n\n if (keyName === 'Control') {\n return;\n }\n\n if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {\n event.preventDefault();\n const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);\n\n nonFilteredItems\n .filter((option) => !option.disabled)\n .forEach((option) => (option.checked = hasDeselectedOptions));\n const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);\n this.value = hasDeselectedOptions ? checkedItems : [];\n this.sixChange.emit({ value: this.value, isSelected: true });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n\n const items = this.getItems();\n const firstItem = items[0];\n const lastItem = items[items.length - 1];\n\n // Ignore key presses on tags\n if (target.tagName.toLowerCase() === 'six-tag') {\n return;\n }\n\n // Tabbing out of the control closes it\n if (event.key === 'Tab') {\n if (this.isOpen) {\n this.dropdown?.hide();\n }\n return;\n }\n\n // Up/down opens the menu\n if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault();\n\n // Show the menu if it's not already open\n if (!this.isOpen) {\n this.dropdown?.show();\n }\n\n // Focus on a menu item\n if (event.key === 'ArrowDown' && firstItem) {\n firstItem.setFocus();\n return;\n }\n\n if (event.key === 'ArrowUp' && lastItem) {\n lastItem.setFocus();\n return;\n }\n }\n\n // All other keys open the menu and initiate type to select\n if (!this.isOpen) {\n event.stopPropagation();\n event.preventDefault();\n this.dropdown?.show();\n this.menu?.typeToSelect(event.key);\n }\n };\n\n private handleLabelClick = () => {\n this.box?.focus();\n };\n\n private handleMenuSelect = (event: CustomEvent) => {\n const item = event.detail.item;\n\n const getValue = () => {\n if (this.multiple) {\n return this.value.includes(item.value)\n ? (this.value as []).filter((v) => v !== item.value)\n : [...this.value, item.value];\n } else {\n return item.value;\n }\n };\n\n this.value = getValue();\n\n this.syncItemsFromValue();\n this.sixChange.emit({ value: this.value, isSelected: true });\n };\n\n private handleMenuShow = (event: CustomEvent) => {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.resizeMenu();\n this.resizeObserver?.observe(this.host);\n this.isOpen = true;\n };\n\n private handleMenuHide = () => {\n this.resizeObserver?.unobserve(this.host);\n this.isOpen = false;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.syncItemsFromValue();\n };\n\n private handleTagInteraction = (event: KeyboardEvent | MouseEvent) => {\n // Don't toggle the menu when a tag's clear button is activated\n const path = event.composedPath() as EventTarget[];\n const clearButton = path.find((el) => {\n if (el instanceof HTMLElement) {\n const element = el as HTMLElement;\n return element.classList.contains('tag__clear');\n }\n });\n\n if (clearButton) {\n event.stopPropagation();\n this.sixChange.emit({ value: this.value, isSelected: true });\n }\n };\n\n private resizeMenu() {\n if (this.menu == null || this.box == null) return;\n this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n if (this.dropdown) {\n this.dropdown.reposition();\n }\n }\n\n private async syncItemsFromValue() {\n const items = this.getItems();\n const value = this.getValueAsArray();\n\n // Sync checked states\n items.forEach((item) => (item.checked = value.includes(item.value)));\n\n // Sync display label\n if (this.multiple) {\n const checkedItems: HTMLSixMenuItemElement[] = [];\n value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));\n\n this.displayTags = checkedItems.map((item) => {\n return (\n <six-tag\n exportparts=\"base:tag\"\n type=\"primary\"\n size={this.size}\n pill={this.pill}\n clearable\n onClick={this.handleTagInteraction}\n onKeyDown={this.handleTagInteraction}\n onSix-tag-clear={(event) => {\n event.stopPropagation();\n if (!this.disabled) {\n item.checked = false;\n this.syncValueFromItems();\n }\n }}\n >\n {this.getItemLabel(item)}\n </six-tag>\n );\n });\n\n if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {\n const total = this.displayTags.length;\n this.displayLabel = '';\n this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);\n this.displayTags.push(\n <six-tag exportparts=\"base:tag\" type=\"info\" size={this.size}>\n +{total - this.maxTagsVisible}\n </six-tag>\n );\n }\n } else {\n this.displayLabel = this.extractLabelForSelectedItem(value, items);\n this.displayTags = [];\n }\n\n if (!isValueEmpty(this.value)) {\n this.touched = true;\n }\n if (this.touched && this.input != null) {\n this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n }\n }\n\n private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]): string {\n if (value.length === 0 || (value.length === 1 && value[0] === '')) {\n return '';\n }\n\n if (this.options !== null) {\n const selectedOption = this.options.find((item) => item.value === value[0]);\n return selectedOption?.value || '';\n }\n\n const checkedItem = items.find((item) => item.value === value[0]);\n return checkedItem ? this.getItemLabel(checkedItem) : '';\n }\n\n private syncValueFromItems() {\n const items = this.getItems();\n const checkedItems = items.filter((item) => item.checked);\n const checkedValues = checkedItems.map((item) => item.value);\n this.value = this.multiple\n ? this.getValueAsArray().filter((val) => checkedValues.includes(val))\n : checkedValues.length > 0\n ? checkedValues[0]\n : '';\n }\n\n render() {\n const hasSelection = this.hasSelection();\n\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n size={this.size}\n onLabelClick={this.handleLabelClick}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <six-dropdown\n part=\"base\"\n ref={(el) => (this.dropdown = el)}\n hoist={this.hoist}\n closeOnSelect={!this.multiple}\n containingElement={this.host}\n disableHideOnEnterAndSpace={this.autocomplete}\n class={{\n select: true,\n 'select--open': this.isOpen,\n 'select--empty': this.value?.length === 0,\n 'select--focused': this.hasFocus,\n 'select--clearable': this.clearable,\n 'select--disabled': this.disabled,\n 'select--multiple': this.multiple,\n 'select--has-tags': this.multiple && hasSelection,\n 'select--placeholder-visible': this.displayLabel === '',\n 'select--small': this.size === 'small',\n 'select--medium': this.size === 'medium',\n 'select--large': this.size === 'large',\n 'select--pill': this.pill,\n 'select--invalid': this.invalid,\n }}\n onKeyDown={this.handleSelectAll}\n onSix-dropdown-show={this.handleMenuShow}\n onSix-dropdown-hide={this.handleMenuHide}\n filterPlaceholder={this.filterPlaceholder}\n filterDebounce={this.filterDebounce}\n filter={this.filter}\n asyncFilter={this.asyncFilter}\n >\n <div\n slot=\"trigger\"\n ref={(el) => (this.box = el)}\n id={this.inputId}\n class={{\n select__box: true,\n 'select__box--line': this.line,\n 'select__box--autocomplete': this.autocomplete,\n }}\n role=\"combobox\"\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-haspopup=\"true\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n tabIndex={this.disabled ? -1 : 0}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n >\n <span class={{ select__label: true, 'select__label--single': !this.displayTags.length }}>\n {this.displayTags.length > 0 ? (\n <span part=\"tags\" class=\"select__tags\">\n {this.displayTags}\n </span>\n ) : (\n this.displayLabel || this.placeholder\n )}\n </span>\n\n {this.clearable && hasSelection && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n class=\"select__clear\"\n name=\"clear\"\n size=\"small\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n />\n )}\n\n {this.hasMenuItems() && (\n <span part=\"icon\" class=\"select__icon\">\n <six-icon size=\"medium\">expand_more</six-icon>\n </span>\n )}\n\n {/*\n The hidden input tricks the browser's built-in validation so it works as expected. We use an input instead\n of a select because, otherwise, iOS will show a list of options during validation.\n */}\n <six-input\n ref={(el) => (this.input = el)}\n class={{\n select__input: true,\n 'select__hidden-select': !this.autocomplete,\n }}\n aria-hidden=\"true\"\n required={this.required}\n onFocus={this.handleFocus}\n clearable={this.clearable}\n placeholder={this.placeholder}\n pill={this.pill}\n disabled={this.disabled}\n size={this.size}\n tabIndex={-1}\n />\n </div>\n\n <six-menu\n ref={(el) => (this.menu = el)}\n part=\"menu\"\n class={{\n select__menu: true,\n 'select__menu--filtered': this.filter || this.asyncFilter,\n 'select__menu--hidden': !this.hasMenuItems(),\n }}\n onSix-menu-item-selected={this.handleMenuSelect}\n items={this.options}\n virtualScroll={this.virtualScroll}\n remove-box-shadow\n >\n <slot onSlotchange={this.handleSlotChange} />\n </six-menu>\n </six-dropdown>\n </FormControl>\n );\n }\n\n private hasSelection() {\n return this.multiple ? this.value.length > 0 : this.value !== '';\n }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-1256cc0a.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,h as o}from"./p-6153045b.js";import{f as i}from"./p-5654e4c7.js";const n=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:inherit}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.focus-visible.icon-button:focus{box-shadow:var(--six-button-focus-shadow)}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";const s=class{constructor(o){t(this,o);this.handleClickEvent=t=>{if(this.disabled){t.preventDefault();t.stopPropagation()}};this.name=undefined;this.size="medium";this.label=undefined;this.disabled=false;this.html=undefined}componentDidLoad(){if(this.button!=null){i.observe(this.button)}}disconnectedCallback(){if(this.button!=null){i.unobserve(this.button)}}render(){const t=this.html&&o("span",{innerHTML:this.html});return o("div",{onClick:this.handleClickEvent,class:{"icon-button-wrapper--disabled":this.disabled}},o("button",{ref:t=>this.button=t,part:"base",disabled:this.disabled,class:{"icon-button":true,"icon-button--disabled":this.disabled},type:"button","aria-label":this.label},o("six-icon",{"aria-hidden":"true",size:this.size},this.name),o("slot",null),t))}};s.style=n;export{s as six_icon_button};
2	- //# sourceMappingURL=p-1256cc0a.entry.js.map

package/dist/ui-library/p-1256cc0a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sixIconButtonCss","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background: none;\n border: none;\n border-radius: var(--six-border-radius-medium);\n font-size: inherit;\n color: var(--six-input-icon-color);\n padding: var(--six-spacing-x-small);\n cursor: pointer;\n transition: var(--six-transition-medium) color;\n -webkit-appearance: none;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--six-input-icon-color-hover);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--six-input-icon-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: var(--six-button-focus-shadow);\n}\n\n.icon-button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n // no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement;\n\n /** The name of the icon to draw. */\n @Prop({ reflect: true }) name?: string;\n\n /** The icon's size. */\n @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n /**\n * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n */\n @Prop({ reflect: true }) label?: string;\n\n /** Set to true to disable the button. */\n @Prop({ reflect: true }) disabled = false;\n\n /** HTML symbol code or entity. */\n @Prop({ reflect: true }) html?: string;\n\n componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={this.disabled}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type=\"button\"\n aria-label={this.label}\n >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,i0C,MCiBZC,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpC,gBAAAC,GACE,GAAIN,KAAKO,QAAU,KAAM,CACvBC,EAAaC,QAAQT,KAAKO,O,EAI9B,oBAAAG,GACE,GAAIV,KAAKO,QAAU,KAAM,CACvBC,EAAaG,UAAUX,KAAKO,O,EAIhC,MAAAK,GACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAMC,UAAWf,KAAKa,OAEhD,OACEC,EAAA,OAAKE,QAAShB,KAAKC,iBAAkBgB,MAAO,CAAE,gCAAiCjB,KAAKG,WAClFW,EAAA,UACEI,IAAMC,GAAQnB,KAAKO,OAASY,EAC5BC,KAAK,OACLjB,SAAUH,KAAKG,SACfc,MAAO,CACL,cAAe,KACf,wBAAyBjB,KAAKG,UAEhCkB,KAAK,SAAQ,aACDrB,KAAKsB,OAEjBR,EAAA,0BAAsB,OAAOS,KAAMvB,KAAKuB,MACrCvB,KAAKwB,MAERV,EAAA,aACCD,G"}

package/dist/ui-library/p-21b3b321.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as i,c as s,h as t,g as e}from"./p-6153045b.js";import{f as o}from"./p-5654e4c7.js";const r=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:inherit}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details--open:hover{color:var(--six-input-color-focus)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";let a=0;const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-details-show",7);this.sixAfterShow=s(this,"six-details-after-show",7);this.sixHide=s(this,"six-details-hide",7);this.sixAfterHide=s(this,"six-details-after-hide",7);this.componentId=`details-${++a}`;this.isVisible=false;this.handleBodyTransitionEnd=i=>{if(this.body==null)return;const s=i.target;if(i.propertyName==="height"&&s.classList.contains("details__body")){this.body.style.overflow=this.open?"visible":"hidden";this.body.style.height=this.open?"auto":"0";this.open?this.sixAfterShow.emit():this.sixAfterHide.emit();this.body.hidden=!this.open}};this.handleSummaryClick=()=>{var i;if(!this.disabled&&(this.hasContent\|\|this.selectableEmpty)){this.open?this.hide():this.show();(i=this.header)===null\|\|i===void 0?void 0:i.focus()}};this.handleSummaryKeyDown=i=>{if(i.key==="Enter"\|\|i.key===" "){i.preventDefault();this.open?this.hide():this.show()}if(i.key==="ArrowUp"\|\|i.key==="ArrowLeft"){i.preventDefault();this.hide()}if(i.key==="ArrowDown"\|\|i.key==="ArrowRight"){i.preventDefault();this.show()}};this.animateSummaryIcon=true;this.open=false;this.summary="";this.summaryIcon=undefined;this.summaryIconSize="inherit";this.disabled=false;this.inline=false;this.selectableEmpty=false;this.hasContent=true}handleOpenChange(){if(this.body!=null){this.open?this.show():this.hide()}}componentDidLoad(){if(this.details==null\|\|this.body==null)return;o.observe(this.details);this.body.hidden=!this.open;if(this.open){this.show()}}disconnectedCallback(){if(this.details!=null){o.unobserve(this.details)}}async show(){if(this.isVisible\|\|this.body==null)return;const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.body.hidden=false;if(this.body.scrollHeight===0){this.body.style.height="auto";this.body.style.overflow="visible"}else{this.body.style.height=`${this.body.scrollHeight}px`;this.body.style.overflow="hidden"}this.isVisible=true;this.open=true}async hide(){if(!this.isVisible\|\|this.body==null)return;const i=this.body;const s=this.sixHide.emit();if(s.defaultPrevented){this.open=true;return}i.style.height=`${i.scrollHeight}px`;i.style.overflow="hidden";requestAnimationFrame((()=>{i.style.height="0"}));this.isVisible=false;this.open=false}render(){const i=this.hasContent&&(this.summaryIcon\|\|"expand_more");return t("div",{ref:i=>this.details=i,part:"base",class:{details:true,"details--open":this.open,"details--disabled":this.disabled,inline:this.inline}},t("header",{ref:i=>this.header=i,part:"header",id:`${this.componentId}-header`,class:"details__header",role:"button","aria-expanded":this.open?"true":"false","aria-controls":`${this.componentId}-content`,"aria-disabled":this.disabled?"true":"false",tabIndex:this.disabled?-1:0,onClick:this.handleSummaryClick,onKeyDown:this.handleSummaryKeyDown},t("div",{part:"summary",class:"details__summary"},t("slot",{name:"summary"},this.summary)),t("span",{part:"summary-icon",class:{"details__summary-icon":true,"details__summary-icon--animate":this.animateSummaryIcon}},t("slot",{name:"summary-icon",onSlotchange:()=>this.animateSummaryIcon=false},i&&t("six-icon",{size:this.summaryIconSize},i)))),t("div",{ref:i=>this.body=i,class:"details__body",onTransitionEnd:this.handleBodyTransitionEnd},t("div",{part:"content",id:`${this.componentId}-content`,class:"details__content",role:"region","aria-labelledby":`${this.componentId}-header`},t("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};n.style=r;export{n as six_details};
2	- //# sourceMappingURL=p-21b3b321.entry.js.map

package/dist/ui-library/p-21b3b321.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sixDetailsCss","id","SixDetails","this","componentId","isVisible","handleBodyTransitionEnd","event","body","target","propertyName","classList","contains","style","overflow","open","height","sixAfterShow","emit","sixAfterHide","hidden","handleSummaryClick","disabled","hasContent","selectableEmpty","hide","show","_a","header","focus","handleSummaryKeyDown","key","preventDefault","handleOpenChange","componentDidLoad","details","focusVisible","observe","disconnectedCallback","unobserve","sixShow","defaultPrevented","scrollHeight","sixHide","requestAnimationFrame","render","summaryIcon","h","ref","el","part","class","inline","role","tabIndex","onClick","onKeyDown","name","summary","animateSummaryIcon","onSlotchange","size","summaryIconSize","onTransitionEnd"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n --hide-duration: var(--six-transition-medium);\n --hide-timing-function: ease;\n --show-duration: var(--six-transition-medium);\n --show-timing-function: ease;\n\n font-family: var(--six-font-family);\n display: block;\n}\n\n.details {\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: var(--six-border-radius-medium);\n color: var(--six-details-color);\n overflow-anchor: none;\n font-size: var(--six-input-font-size-medium);\n\n &:hover:not(.details--disabled):not(.details--open) {\n border-color: var(--six-input-border-color-hover);\n }\n\n &.inline {\n border: none;\n color: var(--six-sidebar-color);\n\n &:hover {\n background-color: var(--six-sidebar-hover-background-color);\n }\n\n &.details--open {\n background-color: var(--six-color-web-rock-50);\n\n &:hover {\n border: none;\n box-shadow: none;\n }\n\n & > .details__header {\n color: var(--six-sidebar-color);\n font-weight: var(--six-font-weight-bold);\n background-color: var(--six-sidebar-header-background-color);\n }\n }\n }\n}\n\n.details--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n color: var(--six-input-color-disabled);\n}\n\n.details__header {\n display: flex;\n align-items: center;\n border-radius: inherit;\n padding: var(--six-spacing-medium);\n user-select: none;\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n cursor: not-allowed;\n border-width: 1px;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n}\n\n.details__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n}\n\n.details__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.2em;\n transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n transform: rotate(-180deg);\n}\n\n.details--open:hover {\n color: var(--six-input-color-focus);\n}\n\n.details__body {\n height: 0;\n overflow: hidden;\n transition-property: height;\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\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 details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n tag: 'six-details',\n styleUrl: 'six-details.scss',\n shadow: true,\n})\nexport class SixDetails {\n @Element() readonly host!: HTMLSixDetailsElement;\n\n @State() animateSummaryIcon = true;\n\n private body?: HTMLElement;\n private details?: HTMLElement;\n private header?: HTMLElement;\n private componentId = `details-${++id}`;\n private isVisible = false;\n\n /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n @Prop() summary = '';\n\n /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n @Prop() summaryIcon?: string;\n\n /** The icon's size. */\n @Prop({ reflect: true }) summaryIconSize:\n | 'inherit'\n | 'xSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'xLarge'\n | 'xxLarge'\n | 'xxxLarge' = 'inherit';\n\n /** Set to true to prevent the user from toggling the details. */\n @Prop() disabled = false;\n\n /** Set to true when you want to use six-details inline e.g. in a sidebar */\n @Prop() inline = false;\n\n /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children */\n @Prop() selectableEmpty = false;\n\n /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n @Prop() hasContent = true;\n\n @Watch('open')\n handleOpenChange() {\n if (this.body != null) {\n this.open ? this.show() : this.hide();\n }\n }\n\n /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the details opens and all transitions are complete. */\n @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the details closes and all transitions are complete. */\n @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentDidLoad() {\n if (this.details == null || this.body == null) return;\n\n focusVisible.observe(this.details);\n this.body.hidden = !this.open;\n\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n if (this.details != null) {\n focusVisible.unobserve(this.details);\n }\n }\n\n /** Shows the detail body */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible || this.body == null) return;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.body.hidden = false;\n\n if (this.body.scrollHeight === 0) {\n // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n // initially, but not immediately visible (i.e. in a tab panel).\n this.body.style.height = 'auto';\n this.body.style.overflow = 'visible';\n } else {\n this.body.style.height = `${this.body.scrollHeight}px`;\n this.body.style.overflow = 'hidden';\n }\n this.isVisible = true;\n this.open = true;\n }\n\n /** Hides the detail body */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible || this.body == null) return;\n const body = this.body;\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n // We can't transition out of `height: auto`, so let's set it to the current height first\n body.style.height = `${body.scrollHeight}px`;\n body.style.overflow = 'hidden';\n\n requestAnimationFrame(() => {\n // tslint:disable-next-line: no-unused-expression\n body.clientWidth; // force a reflow\n body.style.height = '0';\n });\n\n this.isVisible = false;\n this.open = false;\n }\n\n private handleBodyTransitionEnd = (event: TransitionEvent) => {\n if (this.body == null) return;\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n this.body.style.overflow = this.open ? 'visible' : 'hidden';\n this.body.style.height = this.open ? 'auto' : '0';\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n this.body.hidden = !this.open;\n }\n };\n\n private handleSummaryClick = () => {\n if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n this.open ? this.hide() : this.show();\n this.header?.focus();\n }\n };\n\n private handleSummaryKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.open ? this.hide() : this.show();\n }\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n };\n\n render() {\n const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n return (\n <div\n ref={(el) => (this.details = el)}\n part=\"base\"\n class={{\n details: true,\n 'details--open': this.open,\n 'details--disabled': this.disabled,\n inline: this.inline,\n }}\n >\n <header\n ref={(el) => (this.header = el)}\n part=\"header\"\n id={`${this.componentId}-header`}\n class=\"details__header\"\n role=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`${this.componentId}-content`}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleSummaryClick}\n onKeyDown={this.handleSummaryKeyDown}\n >\n <div part=\"summary\" class=\"details__summary\">\n <slot name=\"summary\">{this.summary}</slot>\n </div>\n\n <span\n part=\"summary-icon\"\n class={{\n 'details__summary-icon': true,\n 'details__summary-icon--animate': this.animateSummaryIcon,\n }}\n >\n <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n </slot>\n </span>\n </header>\n\n <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n <div\n part=\"content\"\n id={`${this.componentId}-content`}\n class=\"details__content\"\n role=\"region\"\n aria-labelledby={`${this.componentId}-header`}\n >\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-29ac3d7d.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as s,h as a,H as i,g as o}from"./p-6153045b.js";const e=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";let r=0;const l=class{constructor(a){t(this,a);this.sixClose=s(this,"six-tab-close",7);this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var s;(s=this.tab)===null\|\|s===void 0?void 0:s.focus(t)}async removeFocus(){var t;(t=this.tab)===null\|\|t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){return a(i,{id:this.host.id\|\|this.componentId},a("div",{part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled\|\|!this.active?"-1":"0"},a("slot",null),this.closable&&a("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})))}get host(){return o(this)}};l.style=e;export{l as six_tab};
2	- //# sourceMappingURL=p-29ac3d7d.entry.js.map

package/dist/ui-library/p-29ac3d7d.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sixTabCss","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","h","Host","host","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n border-radius: 4px;\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n transition: var(--six-transition-fast) box-shadow, var(--six-transition-fast) color;\n\n &:focus {\n outline: none;\n }\n\n &:focus:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\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 tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,kkCCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,GACE,OAEEC,EAACC,EAAI,CAAClB,GAAIE,KAAKiB,KAAKnB,IAAME,KAAKC,aAC7Bc,EAAA,OACEG,KAAK,OACLC,IAAMC,GAAQpB,KAAKQ,IAAMY,EACzBC,MAAO,CACLb,IAAK,KAGL,cAAeR,KAAKsB,OACpB,gBAAiBtB,KAAKuB,SACtB,gBAAiBvB,KAAKwB,UAExBC,KAAK,MAAK,gBACKzB,KAAKwB,SAAW,OAAS,QAAO,gBAChCxB,KAAKsB,OAAS,OAAS,QACtCI,SAAU1B,KAAKwB,WAAaxB,KAAKsB,OAAS,KAAO,KAEjDP,EAAA,aACCf,KAAKuB,UACJR,EAAA,mBACEY,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAAS9B,KAAKG,iBACd4B,UAAW,EAAC,cACA,U"}

package/dist/ui-library/p-314b2096.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as i,h as s,g as n}from"./p-6153045b.js";import{P as e}from"./p-0fdb185d.js";import{E as o}from"./p-7d95def3.js";import{b as r,a as h}from"./p-15559d38.js";import{D as l,a as d}from"./p-698bb2c8.js";function a(t){const i=t.tabIndex;return i>-1}function u(t){if(a(t)){return t}if(t.shadowRoot!=null){const i=[...t.shadowRoot.children].find((t=>a(t)));if(i!=null){return i}}if(t.children!=null){return[...t.children].map((t=>u(t))).at(0)}return undefined}const f=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";const c=t=>i=>(i===null\|\|i===void 0?void 0:i.tagName.toLowerCase())===t.toLowerCase();const p=c("six-menu");const v=c("six-menu-item");let m=0;const w=class{constructor(n){t(this,n);this.sixShow=i(this,"six-dropdown-show",7);this.sixAfterShow=i(this,"six-dropdown-after-show",7);this.sixHide=i(this,"six-dropdown-hide",7);this.sixAfterHide=i(this,"six-dropdown-after-hide",7);this.sixAutoFilter=i(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=i(this,"six-async-filter-fired",7);this.sixScroll=i(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++m}`;this.isVisible=false;this.hasBeenInitialized=false;this.eventListeners=new o;this.getMenuItems=()=>{if(this.filteredOptions.length>0){return this.filteredOptions.map((t=>s("six-menu-item",{value:t.value},t.label)))}if(this.panel==null)return[];const[t]=r(this.panel);return r(t)\|\|Array.from(t.querySelectorAll("six-menu-item"))};this.handleFilterInputChange=()=>{var t,i;if(this.filterInputElement==null)return;const s=((i=(t=this.filterInputElement.value)===null\|\|t===void 0?void 0:t.toLowerCase())===null\|\|i===void 0?void 0:i.trim())\|\|"";if(this.filteredOptions.length>0){this.handleFilteringForAttributeItems(s)}else{this.handleFilteringForSlotItems(s)}this.sixAutoFilter.emit({filterValue:s})};this.handleDocumentKeyDown=t=>{var i;const s=t;if(s.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===((i=this.host.shadowRoot)===null\|\|i===void 0?void 0:i.activeElement)){if(s.key==="ArrowDown"){const t=this.getMenuItems().find((t=>t.style.display!=="none"));if(t!=null){t.setFocus()}}}if(s.key==="Tab"){if(this.open&&document.activeElement!=null&&v(document.activeElement)){s.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var t,i;const s=this.container.getRootNode()instanceof ShadowRoot?(i=(t=document.activeElement)===null\|\|t===void 0?void 0:t.shadowRoot)===null\|\|i===void 0?void 0:i.activeElement:document.activeElement;if((s===null\|\|s===void 0?void 0:s.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}};this.handleDocumentMouseDown=t=>{const i=t.composedPath();if(!i.includes(this.container)){void this.hide();return}};this.handlePanelSelect=t=>{const i=t.target;if(this.closeOnSelect&&p(i)){void this.hide();this.focusOnTrigger()}};this.handleTriggerClick=()=>{this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(t.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(t.key)){t.preventDefault();this.open?void this.hide():void this.show();return}const i=this.getMenu();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.open){void this.show()}if(i==null){return}const s=[...i.querySelectorAll("six-menu-item")];const n=s.at(0);const e=s.at(s.length-1);if(t.key==="ArrowDown"&&n!=null){n.setFocus();return}if(t.key==="ArrowUp"&&e!=null){e.setFocus();return}}const s=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&i!=null&&!s.includes(t.key)){void i.typeToSelect(t.key);return}};this.handleTriggerKeyUp=t=>{if(t.key===" "){t.preventDefault()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.handleDropdownScroll=()=>{if(this.panel==null)return;this.sixScroll.emit({scrollHeight:this.panel.scrollHeight,scrollTop:this.panel.scrollTop,scrollbarHeight:this.panel.offsetHeight(this.panel.offsetHeight/this.panel.scrollHeight),scrollRatio:this.panel.scrollTop/(this.panel.scrollHeight-this.panel.clientHeight)})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=0;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=l;this.disableHideOnEnterAndSpace=false;this.options=[];this.virtualScroll=false;this.filteredOptions=[]}get hasFilterEnabled(){return this.filter\|\|this.asyncFilter}get container(){return this.containingElement\|\|this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(this.popover==null)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){if(Array.isArray(this.options)){this.filteredOptions=[...this.options]}}connectedCallback(){if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}if(Array.isArray(this.options)){this.filteredOptions=[...this.options]}if(this.hasBeenInitialized&&this.popover==null){this.initializePopover()}}componentDidLoad(){this.hasBeenInitialized=true;this.initializePopover();if(this.open){void this.show()}if(this.filter){this.setupFiltering(this.handleFilterInputChange)}else if(this.asyncFilter){this.setupFiltering((()=>{var t,i;return this.sixAsyncFilterFired.emit({filterValue:(i=(t=this.filterInputElement)===null\|\|t===void 0?void 0:t.value)!==null&&i!==void 0?i:""})}))}}initializePopover(){if(this.trigger==null\|\|this.positioner==null)return;const t=()=>{if(this.filter&&this.filterInputElement!=null){this.filterInputElement.value="";if(this.filteredOptions.length>0){this.filteredOptions=[...this.options]}else{const t=this.getMenuItems();t.forEach((t=>t.style.display="unset"))}}this.sixAfterHide.emit()};const i=async()=>{var t;if(this.hasFilterEnabled&&this.autofocusFilter){await((t=this.filterInputElement)===null\|\|t===void 0?void 0:t.setFocus())}this.sixAfterShow.emit()};const s=()=>{if(!this.open&&this.panel!=null){this.panel.scrollTop=0}};this.popover=new e(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:t,onAfterShow:i,onTransitionEnd:s})}setupFiltering(t){if(this.filterInputElement!=null){this.eventListeners.add(this.filterInputElement,"six-input-input",d(t,this.filterDebounce))}}handleFilteringForAttributeItems(t){if(t===""&&Array.isArray(this.options)){this.filteredOptions=[...this.options];return}this.filteredOptions=this.options.filter((i=>{var s,n,e,o;return i.label&&((n=(s=String(i.label))===null\|\|s===void 0?void 0:s.toLowerCase())===null\|\|n===void 0?void 0:n.includes(t))\|\|i.value&&((o=(e=String(i.value))===null\|\|e===void 0?void 0:e.toLowerCase())===null\|\|o===void 0?void 0:o.includes(t))}))}handleFilteringForSlotItems(t){const i=this.getMenuItems();i.forEach((async i=>{var s,n,e,o;const r=((n=(s=i===null\|\|i===void 0?void 0:i.value)===null\|\|s===void 0?void 0:s.toLowerCase())===null\|\|n===void 0?void 0:n.includes(t))\|\|((o=(e=await(i===null\|\|i===void 0?void 0:i.getTextLabel()))===null\|\|e===void 0?void 0:e.toLowerCase())===null\|\|o===void 0?void 0:o.includes(t));i.style.display=r?"unset":"none"}))}disconnectedCallback(){var t;this.eventListeners.removeAll();void this.hide();(t=this.popover)===null\|\|t===void 0?void 0:t.destroy();this.popover=undefined}async show(){if(this.isVisible\|\|this.popover==null\|\|this.panel==null){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible\|\|this.panel==null\|\|this.popover==null){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){if(this.trigger==null)return;const[t]=r(this.trigger);if(t!=null){if(typeof t.setFocus==="function"){t.setFocus()}else if(typeof t.focus==="function"){t.focus()}}}getMenu(){if(this.panel==null)return;return r(this.panel).filter(p).at(0)}async reposition(){if(!this.open\|\|this.popover==null){return}this.popover.reposition()}updateAccessibleTrigger(){if(this.trigger==null)return;const t=r(this.trigger).map(u).at(0);if(t!=null){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter\|\|this.asyncFilter)&&!this.hoist}},this.hasFilterEnabled&&s("six-input",{class:{"filter-hidden":!this.open},"aria-hidden":this.open?"false":"true",ref:t=>this.filterInputElement=t,placeholder:this.filterPlaceholder}),s("div",{ref:t=>this.panel=t,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId,onScroll:this.handleDropdownScroll},s("slot",null),this.filteredOptions.length>0&&s("six-menu",{part:"menu",items:this.filteredOptions,virtualScroll:this.virtualScroll}))))}get host(){return n(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"]}}};w.style=f;const g=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:inherit}:host{display:block}.menu{padding:0 0;border:none;box-shadow:var(--six-elevation-2dp)}.menu:focus{outline:none}.menu--noshadow{box-shadow:none}.menu__wrapper--scrollable{overflow-y:auto}";const b=t=>{var i,s,n;return(n=(s=(i=t===null\|\|t===void 0?void 0:t.shadowRoot)===null\|\|i===void 0?void 0:i.querySelector(".menu-item"))===null\|\|s===void 0?void 0:s.classList)===null\|\|n===void 0?void 0:n.contains("menu-item--focused")};const x=t=>(t===null\|\|t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item";const _=({value:t,label:i})=>s("six-menu-item",{value:t},i);const y=5;const A=64;const k=class{constructor(s){t(this,s);this.sixMenuItemSelected=i(this,"six-menu-item-selected",7);this.eventListeners=new o;this.typeToSelectString="";this.handleScrolling=()=>{if(this.menuWrapper==null)return;this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=undefined;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.scrollingIndex=0;this.sixMenuItemHeight=A}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()}async typeToSelect(t){var i;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=t.toLowerCase();const s=this.getItems();for(const t of s){const s=(i=t.shadowRoot)===null\|\|i===void 0?void 0:i.querySelector("slot:not([name])");const n=h(s).toLowerCase().trim();if(n.substring(0,this.typeToSelectString.length)===this.typeToSelectString){t.setFocus();break}}}getItemsShown(){var t;const i=this.virtualScroll?y:0;return(t=this.itemsShown)!==null&&t!==void 0?t:i}setupForVirtualScrollingAfterRendering(){var t,i;if(!this.virtualScroll\|\|this.menuWrapper==null)return;this.eventListeners.add(this.menuWrapper,"scroll",d(this.handleScrolling,this.scrollingDebounce));const s=(i=(t=this.menu)===null\|\|t===void 0?void 0:t.querySelector("six-menu-item"))===null\|\|i===void 0?void 0:i.clientHeight;if(s!=null&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.menu==null)return[];if(this.items!=null){return this.items.map(_)}const t=this.menu.querySelector("slot");if(t==null)return[];return[...t.assignedElements({flatten:true})].filter((t=>x(t)&&!t.disabled))}getActiveItemIndex(){const t=this.getItems();const i=this.getActiveItem();if(i!=null){const s=t.indexOf(i);if(s>-1){return s}}const s=this.extractItemsFromDOM();return s.findIndex(b)}getActiveItem(){var t;const i=this.getItems().find((t=>t===document.activeElement));if(i!=null){return i}return(t=this.extractItemsFromDOM())===null\|\|t===void 0?void 0:t.find(b)}extractItemsFromDOM(){var t,i;return Array.from((i=(t=this.host.shadowRoot)===null\|\|t===void 0?void 0:t.querySelectorAll("six-menu-item"))!==null&&i!==void 0?i:[])}setActiveItem(t){t===null\|\|t===void 0?void 0:t.setFocus()}handleClick(t){const i=t.target;const s=i.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(t){if(t.key==="Enter"){const i=this.getActiveItem();t.preventDefault();if(i!=null){this.sixMenuItemSelected.emit({name:i.value,item:i})}}if(t.key===" "){t.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(t.key)){const i=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(i.length>0){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"){s=0}else if(t.key==="End"){s=i.length-1}if(s<0)s=0;if(s>i.length-1)s=i.length-1;this.setActiveItem(i[s]);return}}void this.typeToSelect(t.key)}getMenuWrapperStyle(){var t;const i={};if(this.getItemsShown()>0){i.height=`${((t=this.getItemsShown())!==null&&t!==void 0?t:0)this.sixMenuItemHeight}px`}return Object.assign({},i)}getMenuContainerStyle(){const t={};if(this.virtualScroll){t.transform=`translateY(${this.sixMenuItemHeightthis.scrollingIndex}px)`}return Object.assign({},t)}getScrollbarGhostStyle(){const t={};if(this.virtualScroll&&this.items!==null){t.height=`${this.items.lengththis.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},t)}renderItems(){if(this.items===undefined\|\|this.items===null){return}if(!this.virtualScroll){return this.items.map(_)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map(_)}render(){return s("div",{ref:t=>this.menuWrapper=t,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,"menu--noshadow":this.removeBoxShadow,"menu__wrapper--scrollable":this.getItemsShown()>0}},s("div",{ref:t=>this.menu=t,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",null),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return n(this)}};k.style=g;export{w as six_dropdown,k as six_menu};
2	- //# sourceMappingURL=p-314b2096.entry.js.map

package/dist/ui-library/p-314b2096.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["isTabbable","el","tabIndex","getNearestTabbableElement","shadowRoot","tabbableShadowChild","children","find","e","map","at","undefined","sixDropdownCss","isTagName","name","tagName","toLowerCase","isSixMenu","isSixMenuItem","id","SixDropdown","this","componentId","isVisible","hasBeenInitialized","eventListeners","EventListeners","getMenuItems","filteredOptions","length","option","h","value","label","panel","getSlotChildren","Array","from","querySelectorAll","handleFilterInputChange","filterInputElement","lowerCaseFilterTerm","_b","_a","trim","handleFilteringForAttributeItems","handleFilteringForSlotItems","sixAutoFilter","emit","filterValue","handleDocumentKeyDown","event","keyboardEvent","key","hide","focusOnTrigger","host","activeElement","item","style","display","setFocus","open","document","preventDefault","setTimeout","container","getRootNode","ShadowRoot","closest","handleDocumentMouseDown","path","composedPath","includes","handlePanelSelect","target","closeOnSelect","handleTriggerClick","show","handleTriggerKeyDown","disableHideOnEnterAndSpace","menu","getMenu","menuItems","firstMenuItem","lastMenuItem","ignoredKeys","typeToSelect","handleTriggerKeyUp","handleTriggerSlotChange","updateAccessibleTrigger","handleDropdownScroll","sixScroll","scrollHeight","scrollTop","scrollbarHeight","offsetHeight","scrollRatio","clientHeight","DEFAULT_DEBOUNCE_FAST","hasFilterEnabled","filter","asyncFilter","containingElement","handleOpenChange","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","distance","skidding","handleOptionsChange","isArray","options","connectedCallback","virtualScroll","console","error","initializePopover","componentDidLoad","setupFiltering","sixAsyncFilterFired","trigger","positioner","onAfterHide","forEach","sixAfterHide","onAfterShow","async","autofocusFilter","sixAfterShow","onTransitionEnd","Popover","transitionElement","callback","add","debounce","filterDebounce","String","_d","_c","menuItem","elementContainsFilterTerm","getTextLabel","disconnectedCallback","removeAll","destroy","sixShow","defaultPrevented","sixHide","remove","focus","reposition","accessibleTrigger","setAttribute","render","part","class","dropdown","ref","onClick","onKeyDown","onKeyUp","onSlotchange","dropdown__positioner","dropdown__positioner__filtered","placeholder","filterPlaceholder","role","onScroll","items","sixMenuCss","isFocusedMenuItem","querySelector","classList","contains","isSIXMenuItemElement","mapToMenuItem","DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING","DEFAULT_SIX_MENU_ITEM_HEIGHT","SixMenu","typeToSelectString","handleScrolling","menuWrapper","scrollingIndex","Math","floor","sixMenuItemHeight","handleClick","bind","handleKeyDown","componentWillLoad","setupForVirtualScrollingAfterRendering","clearTimeout","typeToSelectTimeout","getItems","slot","getTextContent","substring","getItemsShown","defaultItemsShown","itemsShown","scrollingDebounce","menuItemHeight","assignedElements","flatten","disabled","getActiveItemIndex","selectedItem","getActiveItem","itemIndex","indexOf","sixMenuItems","extractItemsFromDOM","findIndex","i","setActiveItem","clickedItem","sixMenuItemSelected","activeItem","indexOfActiveItem","getMenuWrapperStyle","styles","height","Object","assign","getMenuContainerStyle","transform","getScrollbarGhostStyle","itemSize","renderItems","slice","min","removeBoxShadow"],"sources":["src/utils/tabbable.ts","src/components/six-dropdown/six-dropdown.scss?tag=six-dropdown&encapsulation=shadow","src/components/six-dropdown/six-dropdown.tsx","src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","src/components/six-menu/six-menu.tsx"],"sourcesContent":["export function isTabbable(el: HTMLElement) {\n const tabIndex = el.tabIndex;\n return tabIndex > -1;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement | undefined {\n // Check the element\n if (isTabbable(el)) {\n return el;\n }\n\n // Check the element's shadow root\n if (el.shadowRoot != null) {\n const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e as HTMLElement)) as HTMLElement;\n if (tabbableShadowChild != null) {\n return tabbableShadowChild;\n }\n }\n\n // Check the element's children\n if (el.children != null) {\n return [...el.children].map((e) => getNearestTabbableElement(e as HTMLElement)).at(0);\n }\n\n return undefined;\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n display: inline-block;\n}\n\n.dropdown {\n position: relative;\n}\n\n.dropdown__trigger {\n display: block;\n}\n\n.dropdown__positioner {\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n\n &__filtered {\n width: 100%;\n }\n}\n\n.dropdown__panel {\n max-height: 50vh;\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n color: var(--color);\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-elevation-2dp);\n opacity: 0;\n overflow: auto;\n overscroll-behavior: none;\n pointer-events: none;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n // fix for firefox scrollbar\n scrollbar-width: thin;\n}\n\n.filter-hidden {\n display: none;\n}\n\n.dropdown__positioner {\n &[data-popper-placement^='top'] .dropdown__panel {\n transform-origin: bottom;\n }\n\n &[data-popper-placement^='bottom'] .dropdown__panel {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] .dropdown__panel {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] .dropdown__panel {\n transform-origin: left;\n }\n\n &.popover-visible .dropdown__panel {\n opacity: 1;\n transform: none;\n pointer-events: all;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport Popover from '../../utils/popover';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlotChildren } from '../../utils/slot';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { SixMenuItemData } from '../six-menu/six-menu';\n\nexport interface SixDropdownAutoFilterPayload {\n filterValue: string;\n}\n\nexport interface SixDropdownAsyncFilterPayload {\n filterValue: string;\n}\n\nexport interface SixDropdownScrollPayload {\n scrollHeight: number;\n scrollTop: number;\n scrollbarHeight: number;\n scrollRatio: number;\n}\n\nconst isTagName =\n (name: string) =>\n <T extends Element>(el?: T) =>\n el?.tagName.toLowerCase() === name.toLowerCase();\nconst isSixMenu = isTagName('six-menu');\nconst isSixMenuItem = isTagName('six-menu-item');\n\nlet id = 0;\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 trigger - The dropdown's trigger, usually a `<six-button>` element.\n * @slot - The dropdown's content.\n *\n * @part base - The component's base wrapper.\n * @part trigger - The container that wraps the trigger.\n * @part panel - The panel that gets shown when the dropdown is open.\n */\n\n@Component({\n tag: 'six-dropdown',\n styleUrl: 'six-dropdown.scss',\n shadow: true,\n})\nexport class SixDropdown {\n private componentId = `dropdown-${++id}`;\n private isVisible = false;\n private panel?: HTMLElement;\n private positioner?: HTMLElement;\n private popover?: Popover;\n private trigger?: HTMLElement;\n private hasBeenInitialized = false;\n\n // the input element shown in the dropdown when filter is set to true\n private filterInputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixDropdownElement;\n\n /** Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /**\n * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n * inside the viewport.\n */\n @Prop() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'bottom-start';\n\n /** Determines whether the dropdown should hide when a menu item is selected. */\n @Prop() closeOnSelect = true;\n\n /** The distance in pixels from which to offset the panel away from its trigger. */\n @Prop() distance = 0;\n\n /** The distance in pixels from which to offset the panel along its trigger. */\n @Prop() skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */\n @Prop() containingElement?: HTMLElement;\n\n /**\n * Set to true to allow auto filtering for entries in the dropdown.\n * With this flag the dropdown will automatically filter itsel.\n * If you need to coordinate the shown elements yourself,\n * e.g. because you need to call an endpoint use asyncFilter instead\n */\n @Prop() filter = false;\n\n /**\n * Set to true to allow async filtering.\n * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n */\n @Prop() asyncFilter = false;\n\n /** The filter's placeholder text. */\n @Prop() filterPlaceholder = 'Filter...';\n\n /** By default the search field will be focused when opening a dropdown with filtering enabled. */\n @Prop() autofocusFilter = true;\n\n get hasFilterEnabled() {\n return this.filter || this.asyncFilter;\n }\n\n /** The debounce for the filter callbacks. */\n @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */\n @Prop() disableHideOnEnterAndSpace = false;\n\n /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/\n @Prop() options: SixMenuItemData[] = [];\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 get container() {\n return this.containingElement || this.host;\n }\n\n /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-dropdown-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dropdown opens and all transitions are complete. */\n @Event({ eventName: 'six-dropdown-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-dropdown-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dropdown closes and all transitions are complete. */\n @Event({ eventName: 'six-dropdown-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the auto filter is triggered */\n @Event({ eventName: 'six-dropdown-auto-filter-fired' }) sixAutoFilter!: EventEmitter<SixDropdownAutoFilterPayload>;\n\n /** Emitted when the async filter is triggered */\n @Event({ eventName: 'six-async-filter-fired' }) sixAsyncFilterFired!: EventEmitter<SixDropdownAsyncFilterPayload>;\n\n /** Emitted when the user scrolls inside dropdown panel.*/\n @Event({ eventName: 'six-dropdown-scroll' }) sixScroll!: EventEmitter<SixDropdownScrollPayload>;\n\n private eventListeners = new EventListeners();\n\n // internal representation of options, so we don't have to make options mutable\n @State() filteredOptions: SixMenuItemData[] = [];\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n this.updateAccessibleTrigger();\n }\n\n @Watch('distance')\n @Watch('hoist')\n @Watch('placement')\n @Watch('skidding')\n handlePopoverOptionsChange() {\n if (this.popover == null) return;\n\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n });\n }\n\n @Watch('options')\n handleOptionsChange() {\n if (Array.isArray(this.options)) {\n this.filteredOptions = [...this.options];\n }\n }\n\n connectedCallback() {\n if (this.virtualScroll && this.options === null) {\n console.error('Options must be defined when using virtual scrolling');\n }\n\n if (Array.isArray(this.options)) {\n this.filteredOptions = [...this.options];\n }\n\n if (this.hasBeenInitialized && this.popover == null) {\n // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter\n // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had\n // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,\n // to re-initialize the popover in case the component has already been initialized but the popover is undefined.\n this.initializePopover();\n }\n }\n\n componentDidLoad() {\n this.hasBeenInitialized = true;\n this.initializePopover();\n\n // Show on init if open\n if (this.open) {\n void this.show();\n }\n\n if (this.filter) {\n this.setupFiltering(this.handleFilterInputChange);\n } else if (this.asyncFilter) {\n this.setupFiltering(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement?.value ?? '' }));\n }\n }\n\n private initializePopover() {\n if (this.trigger == null || this.positioner == null) return;\n const onAfterHide = () => {\n if (this.filter && this.filterInputElement != null) {\n this.filterInputElement.value = '';\n\n if (this.filteredOptions.length > 0) {\n this.filteredOptions = [...this.options];\n } else {\n const menuItems = this.getMenuItems();\n menuItems.forEach((item) => (item.style.display = 'unset'));\n }\n }\n\n this.sixAfterHide.emit();\n };\n\n const onAfterShow = async () => {\n if (this.hasFilterEnabled && this.autofocusFilter) {\n // if dropdown filter is enabled we should autofocus the search field\n await this.filterInputElement?.setFocus();\n }\n\n this.sixAfterShow.emit();\n };\n\n const onTransitionEnd = () => {\n if (!this.open && this.panel != null) {\n this.panel.scrollTop = 0;\n }\n };\n\n this.popover = new Popover(this.trigger, this.positioner, {\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.panel,\n onAfterHide,\n onAfterShow,\n onTransitionEnd,\n });\n }\n\n private setupFiltering(callback: () => void) {\n if (this.filterInputElement != null) {\n this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));\n }\n }\n\n private getMenuItems = (): HTMLSixMenuItemElement[] => {\n if (this.filteredOptions.length > 0) {\n return this.filteredOptions.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n }\n if (this.panel == null) return [];\n\n const [panel] = getSlotChildren<HTMLSixMenuElement>(this.panel);\n\n // the menu-items can be in a slot e.g. in six-select or direct children of the panel\n return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));\n };\n\n private handleFilterInputChange = () => {\n if (this.filterInputElement == null) return;\n\n const lowerCaseFilterTerm = this.filterInputElement.value?.toLowerCase()?.trim() || '';\n\n if (this.filteredOptions.length > 0) {\n this.handleFilteringForAttributeItems(lowerCaseFilterTerm);\n } else {\n this.handleFilteringForSlotItems(lowerCaseFilterTerm);\n }\n\n this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });\n };\n\n private handleFilteringForAttributeItems(lowerCaseFilterTerm: string) {\n if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {\n this.filteredOptions = [...this.options];\n return;\n }\n\n this.filteredOptions = this.options.filter(\n (option) =>\n (option.label && String(option.label)?.toLowerCase()?.includes(lowerCaseFilterTerm)) ||\n (option.value && String(option.value)?.toLowerCase()?.includes(lowerCaseFilterTerm))\n );\n }\n\n private handleFilteringForSlotItems(lowerCaseFilterTerm: string) {\n const menuItems = this.getMenuItems();\n menuItems.forEach(async (menuItem) => {\n // hide all elements which don't contain the entered substring\n const elementContainsFilterTerm =\n menuItem?.value?.toLowerCase()?.includes(lowerCaseFilterTerm) ||\n (await menuItem?.getTextLabel())?.toLowerCase()?.includes(lowerCaseFilterTerm);\n\n menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';\n });\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n\n void this.hide();\n this.popover?.destroy();\n this.popover = undefined;\n }\n\n /** Shows the dropdown panel */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible || this.popover == null || this.panel == null) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /** Hides the dropdown panel */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible || this.panel == null || this.popover == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n private focusOnTrigger() {\n if (this.trigger == null) return;\n const [trigger] = getSlotChildren<HTMLSixButtonElement>(this.trigger);\n if (trigger != null) {\n if (typeof trigger.setFocus === 'function') {\n trigger.setFocus();\n } else if (typeof trigger.focus === 'function') {\n trigger.focus();\n }\n }\n }\n\n private getMenu(): HTMLSixMenuElement | undefined {\n if (this.panel == null) return;\n return getSlotChildren<HTMLSixMenuElement>(this.panel).filter(isSixMenu).at(0);\n }\n\n /**\n * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n * is activated.\n */\n @Method()\n async reposition() {\n if (!this.open || this.popover == null) {\n return;\n }\n this.popover.reposition();\n }\n\n private handleDocumentKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n // Close when escape is pressed\n if (keyboardEvent.key === 'Escape') {\n void this.hide();\n this.focusOnTrigger();\n return;\n }\n\n if (this.filterInputElement === this.host.shadowRoot?.activeElement) {\n if (keyboardEvent.key === 'ArrowDown') {\n const item = this.getMenuItems().find((item) => item.style.display !== 'none');\n if (item != null) {\n item.setFocus();\n }\n }\n }\n\n // Handle tabbing\n if (keyboardEvent.key === 'Tab') {\n // Tabbing within an open menu should close the dropdown and refocus the trigger\n if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {\n keyboardEvent.preventDefault();\n void this.hide();\n this.focusOnTrigger();\n return;\n }\n\n // Tabbing outside the containing element closes the panel\n //\n // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n setTimeout(() => {\n const activeElement =\n this.container.getRootNode() instanceof ShadowRoot\n ? document.activeElement?.shadowRoot?.activeElement\n : document.activeElement;\n\n if (activeElement?.closest(this.container.tagName.toLowerCase()) !== this.container) {\n void this.hide();\n return;\n }\n });\n }\n };\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.container)) {\n void this.hide();\n return;\n }\n };\n\n private handlePanelSelect = (event: Event) => {\n const target = event.target as HTMLElement;\n\n // Hide the dropdown when a menu item is selected\n if (this.closeOnSelect && isSixMenu(target)) {\n void this.hide();\n this.focusOnTrigger();\n }\n };\n\n private handleTriggerClick = () => {\n this.open ? this.hide() : this.show();\n };\n\n private handleTriggerKeyDown = (event: KeyboardEvent) => {\n // Close when escape or tab is pressed\n if (event.key === 'Escape') {\n this.focusOnTrigger();\n void this.hide();\n return;\n }\n\n // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n // key again to hide the menu in case they don't want to make a selection.\n if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {\n event.preventDefault();\n this.open ? void this.hide() : void this.show();\n return;\n }\n\n const menu = this.getMenu();\n\n // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n // faster navigation.\n if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault();\n\n // Show the menu if it's not already open\n if (!this.open) {\n void this.show();\n }\n\n if (menu == null) {\n return;\n }\n const menuItems = [...menu.querySelectorAll('six-menu-item')];\n const firstMenuItem = menuItems.at(0);\n const lastMenuItem = menuItems.at(menuItems.length - 1);\n\n // Focus on a menu item\n if (event.key === 'ArrowDown' && firstMenuItem != null) {\n firstMenuItem.setFocus();\n return;\n }\n\n if (event.key === 'ArrowUp' && lastMenuItem != null) {\n lastMenuItem.setFocus();\n return;\n }\n }\n\n // Other keys bring focus to the menu and initiate type-to-select behavior\n const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];\n if (this.open && menu != null && !ignoredKeys.includes(event.key)) {\n void menu.typeToSelect(event.key);\n return;\n }\n };\n\n private handleTriggerKeyUp = (event: KeyboardEvent) => {\n // Prevent space from triggering a click event in Firefox\n if (event.key === ' ') {\n event.preventDefault();\n }\n };\n\n private handleTriggerSlotChange = () => {\n this.updateAccessibleTrigger();\n };\n\n private handleDropdownScroll = () => {\n if (this.panel == null) return;\n\n this.sixScroll.emit({\n scrollHeight: this.panel.scrollHeight,\n scrollTop: this.panel.scrollTop,\n scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),\n scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),\n });\n };\n\n //\n // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n // a child of the slotted element, or an element in the slotted element's shadow root.\n //\n // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n //\n // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n //\n private updateAccessibleTrigger() {\n if (this.trigger == null) return;\n\n const accessibleTrigger = getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);\n if (accessibleTrigger != null) {\n accessibleTrigger.setAttribute('aria-haspopup', 'true');\n accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n }\n }\n\n render() {\n return (\n <div\n part=\"base\"\n id={this.componentId}\n class={{\n dropdown: true,\n 'dropdown--open': this.open,\n }}\n >\n <span\n part=\"trigger\"\n class=\"dropdown__trigger\"\n ref={(el) => (this.trigger = el)}\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeyDown}\n onKeyUp={this.handleTriggerKeyUp}\n >\n <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n </span>\n\n {/* Position the panel with a wrapper since the popover makes use of `translate`. This let's us add transitions\n on the panel without interfering with the position. */}\n <div\n ref={(el) => (this.positioner = el)}\n class={{\n dropdown__positioner: true,\n dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,\n }}\n >\n {this.hasFilterEnabled && (\n <six-input\n class={{\n 'filter-hidden': !this.open,\n }}\n aria-hidden={this.open ? 'false' : 'true'}\n ref={(el) => (this.filterInputElement = el)}\n placeholder={this.filterPlaceholder}\n />\n )}\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dropdown__panel\"\n role=\"menu\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-labelledby={this.componentId}\n onScroll={this.handleDropdownScroll}\n >\n <slot />\n {this.filteredOptions.length > 0 && (\n <six-menu part=\"menu\" items={this.filteredOptions} virtualScroll={this.virtualScroll}></six-menu>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n","@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu {\n padding: 0 0;\n border: none;\n box-shadow: var(--six-elevation-2dp);\n\n &:focus {\n outline: none;\n }\n\n &--noshadow {\n box-shadow: none;\n }\n\n &__wrapper {\n &--scrollable {\n overflow-y: auto;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n label: string;\n value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => <six-menu-item value={value}>{label}</six-menu-item>;\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 * 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 // 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(mapToMenuItem);\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 'menu--noshadow': this.removeBoxShadow,\n 'menu__wrapper--scrollable': this.getItemsShown() > 0,\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"],"mappings":"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"}

package/dist/ui-library/p-3d9de119.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as o,h as r,g as i}from"./p-6153045b.js";import{E as s}from"./p-7d95def3.js";import{F as e}from"./p-d42c2025.js";const l=':host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:""}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}';let a=0;const n=class{constructor(r){t(this,r);this.sixBlur=o(this,"six-switch-blur",7);this.sixChange=o(this,"six-switch-change",7);this.sixFocus=o(this,"six-switch-focus",7);this.switchId=`switch-${++a}`;this.labelId=`switch-label-${a}`;this.errorTextId=`input-error-text-${a}`;this.eventListeners=new s;this.handleClick=()=>{if(this.inputElement!=null){this.checked=this.inputElement.checked;this.sixChange.emit(this.checked)}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit(this.checked)};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=t=>{if(t.key==="ArrowLeft"){t.preventDefault();this.checked=false;this.sixChange.emit(this.checked)}if(t.key==="ArrowRight"){t.preventDefault();this.checked=true;this.sixChange.emit(this.checked)}};this.handleMouseDown=t=>{var o;t.preventDefault();(o=this.inputElement)===null\|\|o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.checked=false;this.label="";this.errorText="";this.invalid=false}handleCheckedChange(){if(this.inputElement!=null){this.inputElement.checked=this.checked;this.checked=this.inputElement.checked}}connectedCallback(){this.eventListeners.forward("six-switch-change","change",this.host);this.eventListeners.forward("six-switch-blur","blur",this.host);this.eventListeners.forward("six-switch-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(t){var o;(o=this.inputElement)===null\|\|o===void 0?void 0:o.focus(t)}async removeFocus(){var t;(t=this.inputElement)===null\|\|t===void 0?void 0:t.blur()}render(){return r(e,{inputId:this.switchId,label:this.label,labelId:this.labelId,hasLabelSlot:false,errorTextId:this.errorTextId,errorText:this.errorText,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},r("label",{part:"base",htmlFor:this.switchId,class:{switch:true,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus},onMouseDown:this.handleMouseDown},r("span",{part:"control",class:"switch__control"},r("span",{part:"thumb",class:"switch__thumb"}),r("input",{ref:t=>this.inputElement=t,id:this.switchId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"switch","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyDown:this.handleKeyDown})),r("span",{part:"label",id:this.labelId,class:"switch__label"},r("slot",null))))}get host(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};n.style=l;export{n as six_switch};
2	- //# sourceMappingURL=p-3d9de119.entry.js.map

package/dist/ui-library/p-3d9de119.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sixSwitchCss","id","SixSwitch","this","switchId","labelId","errorTextId","eventListeners","EventListeners","handleClick","inputElement","checked","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleKeyDown","event","key","preventDefault","handleMouseDown","_a","focus","handleCheckedChange","connectedCallback","forward","host","disconnectedCallback","removeAll","setFocus","options","removeFocus","blur","render","h","FormControl","inputId","label","hasLabelSlot","errorText","size","disabled","required","displayError","invalid","part","htmlFor","class","switch","onMouseDown","ref","el","type","name","value","role","onClick","onBlur","onFocus","onKeyDown"],"sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/**\n * @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n */\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) * 2);\n\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\n\nlet id = 0;\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 switch's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n\n /** The switch's name attribute. */\n @Prop() name = '';\n\n /** The switch's value attribute. */\n @Prop() value = 'on';\n\n /** Set to true to disable the switch. */\n @Prop() disabled = false;\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** Set to true to draw the switch in a checked state. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /** The label text. */\n @Prop() label = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText = '';\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the switch. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /** Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-4705a51e.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as o,h as r,g as i}from"./p-6153045b.js";import{s,g as a}from"./p-1f18768a.js";import{f as e}from"./p-5654e4c7.js";const l=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:inherit}:host{--tabs-border-color:var(--six-tab-border-color);display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group .tab-group__active-tab-indicator{position:absolute;transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease}.tab-group:not(.focus-visible) ::slotted(six-tab){--focus-ring:none}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-bottom:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--top .tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-top:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--bottom .tab-group__active-tab-indicator{top:-2px;border-top:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-right:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--left .tab-group__active-tab-indicator{right:-2px;border-right:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-left:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--right .tab-group__active-tab-indicator{left:-2px;border-left:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const n=class{constructor(r){t(this,r);this.sixTabShow=o(this,"six-tab-show",7);this.sixTabHide=o(this,"six-tab-hide",7);this.handleClick=t=>{const o=t.target;const r=o.closest("six-tab");const i=r===null\|\|r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(r!=null){this.setActiveTab(r)}};this.handleKeyDown=t=>{if(this.nav==null)return;const o=t.target;const r=o.closest("six-tab");const i=r===null\|\|r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(["Enter"," "].includes(t.key)){if(r!=null){this.setActiveTab(r);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const r=this.getAllTabs();let i=r.indexOf(o);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus({preventScroll:true});if(["top","bottom"].includes(this.placement)){s(r[i],this.nav,"horizontal")}t.preventDefault()}}};this.handleScrollLeft=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})};this.handleScrollRight=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})};this.syncActiveTabIndicator=()=>{if(this.activeTabIndicator==null\|\|this.nav==null)return;const t=this.getActiveTab();if(t!=null){this.activeTabIndicator.style.display="block"}else{this.activeTabIndicator.style.display="none";return}const o=t.clientWidth;const r=t.clientHeight;const i=a(t,this.nav);const s=i.top+this.nav.scrollTop;const e=i.left+this.nav.scrollLeft;switch(this.placement){case"top":case"bottom":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height="";this.activeTabIndicator.style.transform=`translateX(${e}px)`;break;case"left":case"right":this.activeTabIndicator.style.width="";this.activeTabIndicator.style.height=`${r}px`;this.activeTabIndicator.style.transform=`translateY(${s}px)`;break}};this.hasScrollControls=false;this.placement="top";this.noScrollControls=false}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}componentDidLoad(){if(this.tabGroup==null\|\|this.nav==null)return;const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()\|\|this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>{var o;return!["aria-labelledby","aria-controls"].includes((o=t.attributeName)!==null&&o!==void 0?o:"")}))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){if(this.mutationObserver==null\|\|this.tabGroup==null\|\|this.nav==null\|\|this.resizeObserver==null){return}this.mutationObserver.disconnect();e.unobserve(this.tabGroup);this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const r=o.find((o=>o.panel===t));if(r!=null){this.setActiveTab(r)}}getAllTabs(t=false){var o;const r=(o=this.tabs)===null\|\|o===void 0?void 0:o.querySelector("slot");if(r==null)return[];return[...r.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){var t;const o=(t=this.body)===null\|\|t===void 0?void 0:t.querySelector("slot");if(o==null)return[];return[...o.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}updateScrollControls(){if(this.nav==null)return;this.hasScrollControls=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth}setActiveTab(t,o=true){if(this.nav==null)return;if(t!=null&&t!==this.activeTab&&!t.disabled){const r=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>{var o;return t.active=t.name===((o=this.activeTab)===null\|\|o===void 0?void 0:o.panel)}));this.syncActiveTabIndicator();if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(r!=null){this.sixTabHide.emit({name:r.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{var r,i;const s=o.find((o=>o.name===t.panel));if(s!=null){t.setAttribute("aria-controls",(r=s.getAttribute("id"))!==null&&r!==void 0?r:"");s.setAttribute("aria-labelledby",(i=t.getAttribute("id"))!==null&&i!==void 0?i:"")}}))}render(){return r("div",{part:"base",ref:t=>this.tabGroup=t,class:{"tab-group":true,"tab-group--top":this.placement==="top","tab-group--bottom":this.placement==="bottom","tab-group--left":this.placement==="left","tab-group--right":this.placement==="right","tab-group--has-scroll-controls":this.hasScrollControls},onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("div",{class:"tab-group__nav-container"},this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--left",exportparts:"base:scroll-button",name:"chevron_left",onClick:this.handleScrollLeft}),r("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"tab-group__nav"},r("div",{ref:t=>this.tabs=t,part:"tabs",class:"tab-group__tabs",role:"tablist"},r("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"tab-group__active-tab-indicator"}),r("slot",{name:"nav",onSlotchange:this.syncActiveTabIndicator}))),this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--right",exportparts:"base:scroll-button",name:"chevron_right",onClick:this.handleScrollRight})),r("div",{ref:t=>this.body=t,part:"body",class:"tab-group__body"},r("slot",{onSlotchange:this.syncActiveTabIndicator})))}get host(){return i(this)}static get watchers(){return{placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"]}}};n.style=l;export{n as six_tab_group};
2	- //# sourceMappingURL=p-4705a51e.entry.js.map

package/dist/ui-library/p-4705a51e.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sixTabGroupCss","SixTabGroup","this","handleClick","event","target","tab","closest","tabGroup","host","setActiveTab","handleKeyDown","nav","includes","key","preventDefault","activeEl","document","activeElement","tagName","toLowerCase","tabs","getAllTabs","index","indexOf","length","Math","max","min","setFocus","preventScroll","placement","scrollIntoView","handleScrollLeft","scroll","left","scrollLeft","clientWidth","behavior","handleScrollRight","syncActiveTabIndicator","activeTabIndicator","getActiveTab","style","display","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","transform","handlePlacementChange","handleNoScrollControlsChange","updateScrollControls","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","setAriaLabels","unobserve","observe","focusVisible","resizeObserver","ResizeObserver","requestAnimationFrame","mutationObserver","MutationObserver","mutations","some","mutation","_a","attributeName","setTimeout","attributes","childList","subtree","disconnectedCallback","disconnect","show","panel","find","el","includeDisabled","slot","querySelector","assignedElements","filter","disabled","getAllPanels","body","active","hasScrollControls","noScrollControls","scrollWidth","emitEvents","activeTab","previousTab","map","name","sixTabHide","emit","sixTabShow","panels","setAttribute","getAttribute","_b","render","h","part","ref","class","onClick","onKeyDown","exportparts","role","onSlotchange"],"sources":["src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n/**\n * @prop --tabs-border-color: The color of the border that separates tabs.\n */\n:host {\n --tabs-border-color: var(--six-tab-border-color);\n display: block;\n}\n\n.tab-group {\n display: flex;\n border: solid 1px transparent;\n border-radius: 0;\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n }\n\n .tab-group__active-tab-indicator {\n position: absolute;\n transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease;\n }\n\n // Remove the focus ring when the user isn't interacting with a keyboard\n &:not(.focus-visible) ::slotted(six-tab) {\n --focus-ring: none;\n }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n left: 0;\n}\n\n.tab-group__scroll-button--right {\n right: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Top\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--top {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-bottom: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n bottom: -2px;\n border-bottom: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n order: 2;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Bottom\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--bottom {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-top: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n top: calc(-1 * 2px);\n border-top: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n order: 1;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Left\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--left {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-right: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n right: calc(-1 * 2px);\n border-right: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Right\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--right {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-left: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n left: calc(-1 * 2px);\n border-left: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getOffset } from '../../utils/offset';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\n\nexport interface SixTabShowPayload {\n name: string;\n}\n\nexport interface SixTabHidePayload {\n name: string;\n}\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 nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n *\n * @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n */\n@Component({\n tag: 'six-tab-group',\n styleUrl: 'six-tab-group.scss',\n shadow: true,\n})\nexport class SixTabGroup {\n private activeTab?: HTMLSixTabElement;\n private activeTabIndicator?: HTMLElement;\n private body?: HTMLElement;\n private mutationObserver?: MutationObserver;\n private nav?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n private tabGroup?: HTMLElement;\n private tabs?: HTMLElement;\n\n @Element() host!: HTMLSixTabGroupElement;\n\n @State() hasScrollControls = false;\n\n /** The placement of the tabs. */\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n /** Disables the scroll arrows that appear when tabs overflow. */\n @Prop() noScrollControls = false;\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n /** Emitted when a tab is shown. */\n @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n /** Emitted when a tab is hidden. */\n @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n componentDidLoad() {\n if (this.tabGroup == null || this.nav == null) return;\n\n // Set initial tab state when the tabs first become visible\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n\n focusVisible.observe(this.tabGroup);\n\n this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n this.resizeObserver.observe(this.nav);\n requestAnimationFrame(() => this.updateScrollControls());\n\n // Update aria labels if the DOM changes\n this.mutationObserver = new MutationObserver((mutations) => {\n if (\n mutations.some((mutation) => {\n return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n })\n ) {\n setTimeout(() => this.setAriaLabels());\n }\n });\n this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {\n return;\n }\n\n this.mutationObserver.disconnect();\n focusVisible.unobserve(this.tabGroup);\n this.resizeObserver.unobserve(this.nav);\n }\n\n /** Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n const tabs = this.getAllTabs();\n const tab = tabs.find((el) => el.panel === panel);\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n }\n\n private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n const slot = this.tabs?.querySelector('slot');\n if (slot == null) return [];\n\n return [...slot.assignedElements()].filter((el: Element) => {\n return includeDisabled\n ? el.tagName.toLowerCase() === 'six-tab'\n : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n }) as [HTMLSixTabElement];\n }\n\n private getAllPanels(): HTMLSixTabPanelElement[] {\n const slot = this.body?.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n HTMLSixTabPanelElement\n ];\n }\n\n private getActiveTab() {\n return this.getAllTabs().find((el) => el.active);\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.nav == null) return;\n\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab != null) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = document.activeElement as HTMLSixTabElement;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n const tabs = this.getAllTabs();\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (event.key === 'ArrowLeft') {\n index = Math.max(0, index - 1);\n } else if (event.key === 'ArrowRight') {\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus({ preventScroll: true });\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n };\n\n private handleScrollLeft = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private handleScrollRight = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private updateScrollControls() {\n if (this.nav == null) return;\n\n this.hasScrollControls = this.noScrollControls\n ? false\n : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n }\n\n private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n if (this.nav == null) return;\n\n if (tab != null && tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync tabs and panels\n this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n this.syncActiveTabIndicator();\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab != null) {\n this.sixTabHide.emit({ name: previousTab.panel });\n }\n\n this.sixTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllTabs();\n const panels = this.getAllPanels();\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel != null) {\n tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n }\n });\n }\n\n private syncActiveTabIndicator = () => {\n if (this.activeTabIndicator == null || this.nav == null) return;\n\n const tab = this.getActiveTab();\n\n if (tab != null) {\n this.activeTabIndicator.style.display = 'block';\n } else {\n this.activeTabIndicator.style.display = 'none';\n return;\n }\n\n const width = tab.clientWidth;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.nav);\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left + this.nav.scrollLeft;\n\n switch (this.placement) {\n case 'top':\n case 'bottom':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = '';\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'left':\n case 'right':\n this.activeTabIndicator.style.width = '';\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n };\n\n render() {\n return (\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'tab-group': true,\n\n // Placements\n 'tab-group--top': this.placement === 'top',\n 'tab-group--bottom': this.placement === 'bottom',\n 'tab-group--left': this.placement === 'left',\n 'tab-group--right': this.placement === 'right',\n\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\">\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_left\"\n onClick={this.handleScrollLeft}\n />\n )}\n <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"tab-group__active-tab-indicator\"\n />\n <slot name=\"nav\" onSlotchange={this.syncActiveTabIndicator} />\n </div>\n </div>\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_right\"\n onClick={this.handleScrollRight}\n />\n )}\n </div>\n\n <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n <slot onSlotchange={this.syncActiveTabIndicator} />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}