q2-tecton-elements 1.50.1 → 1.51.0

package/dist/q2-tecton-elements/p-56df21b0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","clickedElsewhere","event","target","localName","stopPropagation","inputBlurHandler","inputFocused","inputChangeHandler","inputClickHandler","async","shouldShowActionSheet","executeActionSheet","toggleDropdown","focusInput","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","open","openDropdownWithoutActiveElement","prioritizeSearch","searchText","input","emit","query","inputKeydownHandler","readonly","disabled","key","shiftKey","isShiftTab","hasSlot","hasPopoverTop","hasPopoverBottom","keysForOptionListToHandle","searchable","inputField","preventDefault","includes","shouldClearSearchText","clearSearchText","optionList","handleExternalKeydown","onCustomDisplayClick","onMutationObserved","hostElement","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","setActiveElement","focus","showSelected","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","_a","window","Tecton","useActionSheets","loc","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","onHostElementChange","onchange","multiple","selectedOptions","onClearHandler","handleSelectedDisplay","display","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","closeDropdown","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","keydownHandler","closePopover","_togglePopover","openPopover","searchOptions","innerInputField","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","push","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","structuredSelectedOptions","map","valueUpdated","badgeValue","optionsLength","_b","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","from","querySelectorAll","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","wrapperClasses","errors","classes","join","_c","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","change","undefined","result","showActionSheetList","changeDetails","selectedOptionValues","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","name","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","popoverMode","block","class","type","id","label","listLabel","onChange","tabindex","renderVisibilityToggle","selectedOptionsCount","checked","onClick","onKeyDown","htmlFor","render","role","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onInput","onFocus","onBlur","badgeTheme","_role","_preventEntry"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                4px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    // #region Own Properties\n\n    inputField?: HTMLQ2InputElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    statusMessageTimer: NodeJS.Timeout;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasCustomDisplay: boolean = false;\n\n    @State()\n    hasPopoverBottom: boolean = false;\n\n    @State()\n    hasPopoverTop: boolean = false;\n\n    @State()\n    inputFocused: boolean = false;\n\n    @State()\n    open: boolean = false;\n\n    @State()\n    prioritizeSearch: boolean = false;\n\n    @State()\n    searchText: string = '';\n\n    @State()\n    showSelected: boolean = false;\n\n    @State()\n    statusMessage: string;\n\n    @State()\n    structuredSelectedOptions: IOptionValue[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */\n    @Prop({ reflect: true })\n    clearable: boolean;\n\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * The presence of `errors` will mark the field as invalid, putting it into an error state.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     * @warning\n     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */\n    @Prop({ reflect: true })\n    invalid: boolean;\n\n    /**\n     * The text that will be used as the label for the field.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop()\n    listLabel: string = loc('tecton.element.select.listLabel');\n\n    /** The minimum number of rows the component will try to display below or above the component when opened. */\n    @Prop()\n    minRows: number = 3;\n\n    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */\n    @Prop({ reflect: true })\n    multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true })\n    multiple: boolean = false;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean = false;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user selects an option.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true })\n    searchable: boolean = false;\n\n    /**\n     * Each item in this array should correspond to the value of a `q2-option` element.\n     * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n     */\n    @Prop({ mutable: true })\n    selectedOptions: string[] = [];\n\n    /**\n     * The current value for the select. This should correspond to the value of a nested q2-option element.\n     * This property is only relevant for single-select implementations.\n     */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     *\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     */\n    @Event()\n    input: EventEmitter<{ query: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('clear')\n    onClearHandler() {\n        this.clearValue();\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<input>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n    };\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const { key, shiftKey } = event;\n        const isShiftTab = key === 'Tab' && shiftKey;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        if (hasSlot && (key === 'Tab' || isShiftTab)) return;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n\n        if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {\n            event.preventDefault();\n            if (!this.open) this.openDropdownWithoutActiveElement();\n        }\n\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    renderOptionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                max-height={this.popoverMaxHeight}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                mode={this.popoverMode || undefined}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.renderVisibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    renderVisibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.renderOptionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-34856c71.entry.js → p-5a834214.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{l as r,a as n}from"./p-9a1a4bc0.js";const i="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";const d=i;const a=class{constructor(e){t(this,e);this.handleQ2LocValue=()=>{const t=this.hostElement.querySelector("q2-loc");return t?r(t.value,t.substitutions):""};this.onItemClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"select",value:this.value||""},bubbles:true}))};this.onItemFocus=t=>{t.stopPropagation()};this.onItemKeydown=t=>{if(t.key==="ArrowRight")this.focusRemoveBtn()};this.onRemoveBtnClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"remove",value:this.value||""},bubbles:true}))};this.onRemoveBtnFocus=t=>{t.stopPropagation()};this.onRemoveBtnKeydown=t=>{if(t.key==="ArrowLeft")this.focusItem()};this.q2LocValue=undefined;this.ariaLabel=undefined;this.disabled=undefined;this.label=undefined;this.removable=undefined;this.separator=undefined;this.value=undefined}componentWillLoad(){n(this);this.q2LocValue=this.handleQ2LocValue()}onHostElementFocus(t){if(t.target===this.hostElement){this.focusItem()}}ariaLabelObserver(){n(this)}get dropdownItemBtn(){return this.hostElement.shadowRoot.querySelector(".dropdown-item")}get innerLabel(){return this.label||this.hostElement.textContent.trim()||this.q2LocValue}get removeBtn(){return this.hostElement.shadowRoot.querySelector(".remove-dropdown-item")}get removeLabel(){return r("tecton.element.dropdownItem.remove",[this.innerLabel||""])}focusItem(){this.dropdownItemBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}focusRemoveBtn(){this.removeBtn&&this.removeBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}renderItemDOM(){return e("div",{class:"dropdown-item-wrapper"},e("q2-btn",{class:"dropdown-item",label:this.innerLabel,"hide-label":true,tabIndex:-1,disabled:!!this.disabled,_role:"menuitem",onClick:this.onItemClick,onKeyDown:this.onItemKeydown,onFocus:this.onItemFocus,"test-id":"dropdownItem"},e("div",{class:"dropdown-item-content"},e("slot",null))),!!this.removable&&e("q2-btn",{class:"remove-dropdown-item",label:this.removeLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onRemoveBtnClick,onKeyDown:this.onRemoveBtnKeydown,onFocus:this.onRemoveBtnFocus,"test-id":"removeDropdownItem"},e("q2-icon",{type:"close"})))}renderSeparatorDOM(){return e("div",{class:"dropdown-separator",role:"separator","test-id":"dropdownItemSeparator"})}render(){if(!!this.separator){return this.renderSeparatorDOM()}return this.renderItemDOM()}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};a.style=d;export{a as q2_dropdown_item};
-//# sourceMappingURL=p-34856c71.entry.js.map
+import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{l as r,a as n}from"./p-15ac45d6.js";const i="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";const d=i;const a=class{constructor(e){t(this,e);this.handleQ2LocValue=()=>{const t=this.hostElement.querySelector("q2-loc");return t?r(t.value,t.substitutions):""};this.onItemClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"select",value:this.value||""},bubbles:true}))};this.onItemFocus=t=>{t.stopPropagation()};this.onItemKeydown=t=>{if(t.key==="ArrowRight")this.focusRemoveBtn()};this.onRemoveBtnClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"remove",value:this.value||""},bubbles:true}))};this.onRemoveBtnFocus=t=>{t.stopPropagation()};this.onRemoveBtnKeydown=t=>{if(t.key==="ArrowLeft")this.focusItem()};this.q2LocValue=undefined;this.ariaLabel=undefined;this.disabled=undefined;this.label=undefined;this.removable=undefined;this.separator=undefined;this.value=undefined}componentWillLoad(){n(this);this.q2LocValue=this.handleQ2LocValue()}onHostElementFocus(t){if(t.target===this.hostElement){this.focusItem()}}ariaLabelObserver(){n(this)}get dropdownItemBtn(){return this.hostElement.shadowRoot.querySelector(".dropdown-item")}get innerLabel(){return this.label||this.hostElement.textContent.trim()||this.q2LocValue}get removeBtn(){return this.hostElement.shadowRoot.querySelector(".remove-dropdown-item")}get removeLabel(){return r("tecton.element.dropdownItem.remove",[this.innerLabel||""])}focusItem(){this.dropdownItemBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}focusRemoveBtn(){this.removeBtn&&this.removeBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}renderItemDOM(){return e("div",{class:"dropdown-item-wrapper"},e("q2-btn",{class:"dropdown-item",label:this.innerLabel,"hide-label":true,tabIndex:-1,disabled:this.disabled,_role:"menuitem",onClick:this.onItemClick,onKeyDown:this.onItemKeydown,onFocus:this.onItemFocus,"test-id":"dropdownItem"},e("div",{class:"dropdown-item-content"},e("slot",null))),!!this.removable&&e("q2-btn",{class:"remove-dropdown-item",label:this.removeLabel,"hide-label":true,disabled:this.disabled,_role:"menuitem",onClick:this.onRemoveBtnClick,onKeyDown:this.onRemoveBtnKeydown,onFocus:this.onRemoveBtnFocus,"test-id":"removeDropdownItem"},e("q2-icon",{type:"close"})))}renderSeparatorDOM(){return e("div",{class:"dropdown-separator",role:"separator","test-id":"dropdownItemSeparator"})}render(){if(!!this.separator){return this.renderSeparatorDOM()}return this.renderItemDOM()}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};a.style=d;export{a as q2_dropdown_item};
+//# sourceMappingURL=p-5a834214.entry.js.map

package/dist/q2-tecton-elements/{p-34856c71.entry.js.map → p-5a834214.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","handleQ2LocValue","locElement","hostElement","querySelector","loc","value","substitutions","onItemClick","event","stopImmediatePropagation","dispatchEvent","CustomEvent","detail","type","bubbles","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","onHostElementFocus","target","ariaLabelObserver","dropdownItemBtn","shadowRoot","innerLabel","label","textContent","trim","removeBtn","removeLabel","FocusEvent","renderItemDOM","h","class","tabIndex","disabled","_role","onClick","onKeyDown","onFocus","removable","renderSeparatorDOM","role","render","separator"],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, State, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        return locElement ? loc(locElement.value, locElement.substitutions) : '';\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    tabIndex={-1}\n                    disabled={!!this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    render() {\n        if (!!this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,25EAC1B,MAAAC,EAAeD,E,MCIFE,EAAc,M,yBAyGvBC,KAAAC,iBAAmB,KACf,MAAMC,EAAaF,KAAKG,YAAYC,cAAc,UAClD,OAAOF,EAAaG,EAAIH,EAAWI,MAAOJ,EAAWK,eAAiB,EAAE,EAG5EP,KAAAQ,YAAeC,IACXA,EAAMC,2BACNV,KAAKG,YAAYQ,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNR,MAAON,KAAKM,OAAS,IAEzBS,QAAS,OAEhB,EAGLf,KAAAgB,YAAeP,IACXA,EAAMQ,iBAAiB,EAG3BjB,KAAAkB,cAAiBT,IACb,GAAIA,EAAMU,MAAQ,aAAcnB,KAAKoB,gBAAgB,EAGzDpB,KAAAqB,iBAAoBZ,IAChBA,EAAMC,2BAENV,KAAKG,YAAYQ,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNR,MAAON,KAAKM,OAAS,IAEzBS,QAAS,OAEhB,EAGLf,KAAAsB,iBAAoBb,IAChBA,EAAMQ,iBAAiB,EAG3BjB,KAAAuB,mBAAsBd,IAClB,GAAIA,EAAMU,MAAQ,YAAanB,KAAKwB,WAAW,E,uKA/FnD,iBAAAC,GACIC,EAAgB1B,MAChBA,KAAK2B,WAAa3B,KAAKC,kB,CAO3B,kBAAA2B,CAAmBnB,GACf,GAAIA,EAAMoB,SAAW7B,KAAKG,YAAa,CACnCH,KAAKwB,W,EAQb,iBAAAM,GACIJ,EAAgB1B,K,CAMpB,mBAAI+B,GACA,OAAO/B,KAAKG,YAAY6B,WAAW5B,cAAc,iB,CAGrD,cAAI6B,GACA,OAAOjC,KAAKkC,OAASlC,KAAKG,YAAYgC,YAAYC,QAAUpC,KAAK2B,U,CAGrE,aAAIU,GACA,OAAOrC,KAAKG,YAAY6B,WAAW5B,cAAc,wB,CAGrD,eAAIkC,GACA,OAAOjC,EAAI,qCAAsC,CAACL,KAAKiC,YAAc,I,CAGzE,SAAAT,GACIxB,KAAK+B,gBAAgBpB,cAAc,IAAI4B,WAAW,QAAS,CAAExB,QAAS,Q,CAG1E,cAAAK,GACIpB,KAAKqC,WAAarC,KAAKqC,UAAU1B,cAAc,IAAI4B,WAAW,QAAS,CAAExB,QAAS,Q,CAsDtF,aAAAyB,GACI,OACIC,EAAA,OAAKC,MAAM,yBACPD,EAAA,UACIC,MAAM,gBACNR,MAAOlC,KAAKiC,WAAU,kBAEtBU,UAAW,EACXC,WAAY5C,KAAK4C,SACjBC,MAAM,WACNC,QAAS9C,KAAKQ,YACduC,UAAW/C,KAAKkB,cAChB8B,QAAShD,KAAKgB,YAAW,UACjB,gBAERyB,EAAA,OAAKC,MAAM,yBACPD,EAAA,iBAGLzC,KAAKiD,WACJR,EAAA,UACIC,MAAM,uBACNR,MAAOlC,KAAKsC,YAAW,kBAEvBM,WAAY5C,KAAK4C,SACjBC,MAAM,WACNC,QAAS9C,KAAKqB,iBACd0B,UAAW/C,KAAKuB,mBAChByB,QAAShD,KAAKsB,iBAAgB,UACtB,sBAERmB,EAAA,WAAS3B,KAAK,W,CAOlC,kBAAAoC,GACI,OACIT,EAAA,OACIC,MAAM,qBACNS,KAAK,YAAW,UACR,yB,CAKpB,MAAAC,GACI,KAAMpD,KAAKqD,UAAW,CAClB,OAAOrD,KAAKkD,oB,CAGhB,OAAOlD,KAAKwC,e"}
+{"version":3,"names":["q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","handleQ2LocValue","locElement","hostElement","querySelector","loc","value","substitutions","onItemClick","event","stopImmediatePropagation","dispatchEvent","CustomEvent","detail","type","bubbles","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","onHostElementFocus","target","ariaLabelObserver","dropdownItemBtn","shadowRoot","innerLabel","label","textContent","trim","removeBtn","removeLabel","FocusEvent","renderItemDOM","h","class","tabIndex","disabled","_role","onClick","onKeyDown","onFocus","removable","renderSeparatorDOM","role","render","separator"],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, State, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        return locElement ? loc(locElement.value, locElement.substitutions) : '';\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    tabIndex={-1}\n                    disabled={this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    render() {\n        if (!!this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,25EAC1B,MAAAC,EAAeD,E,MCIFE,EAAc,M,yBAyGvBC,KAAAC,iBAAmB,KACf,MAAMC,EAAaF,KAAKG,YAAYC,cAAc,UAClD,OAAOF,EAAaG,EAAIH,EAAWI,MAAOJ,EAAWK,eAAiB,EAAE,EAG5EP,KAAAQ,YAAeC,IACXA,EAAMC,2BACNV,KAAKG,YAAYQ,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNR,MAAON,KAAKM,OAAS,IAEzBS,QAAS,OAEhB,EAGLf,KAAAgB,YAAeP,IACXA,EAAMQ,iBAAiB,EAG3BjB,KAAAkB,cAAiBT,IACb,GAAIA,EAAMU,MAAQ,aAAcnB,KAAKoB,gBAAgB,EAGzDpB,KAAAqB,iBAAoBZ,IAChBA,EAAMC,2BAENV,KAAKG,YAAYQ,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNR,MAAON,KAAKM,OAAS,IAEzBS,QAAS,OAEhB,EAGLf,KAAAsB,iBAAoBb,IAChBA,EAAMQ,iBAAiB,EAG3BjB,KAAAuB,mBAAsBd,IAClB,GAAIA,EAAMU,MAAQ,YAAanB,KAAKwB,WAAW,E,uKA/FnD,iBAAAC,GACIC,EAAgB1B,MAChBA,KAAK2B,WAAa3B,KAAKC,kB,CAO3B,kBAAA2B,CAAmBnB,GACf,GAAIA,EAAMoB,SAAW7B,KAAKG,YAAa,CACnCH,KAAKwB,W,EAQb,iBAAAM,GACIJ,EAAgB1B,K,CAMpB,mBAAI+B,GACA,OAAO/B,KAAKG,YAAY6B,WAAW5B,cAAc,iB,CAGrD,cAAI6B,GACA,OAAOjC,KAAKkC,OAASlC,KAAKG,YAAYgC,YAAYC,QAAUpC,KAAK2B,U,CAGrE,aAAIU,GACA,OAAOrC,KAAKG,YAAY6B,WAAW5B,cAAc,wB,CAGrD,eAAIkC,GACA,OAAOjC,EAAI,qCAAsC,CAACL,KAAKiC,YAAc,I,CAGzE,SAAAT,GACIxB,KAAK+B,gBAAgBpB,cAAc,IAAI4B,WAAW,QAAS,CAAExB,QAAS,Q,CAG1E,cAAAK,GACIpB,KAAKqC,WAAarC,KAAKqC,UAAU1B,cAAc,IAAI4B,WAAW,QAAS,CAAExB,QAAS,Q,CAsDtF,aAAAyB,GACI,OACIC,EAAA,OAAKC,MAAM,yBACPD,EAAA,UACIC,MAAM,gBACNR,MAAOlC,KAAKiC,WAAU,kBAEtBU,UAAW,EACXC,SAAU5C,KAAK4C,SACfC,MAAM,WACNC,QAAS9C,KAAKQ,YACduC,UAAW/C,KAAKkB,cAChB8B,QAAShD,KAAKgB,YAAW,UACjB,gBAERyB,EAAA,OAAKC,MAAM,yBACPD,EAAA,iBAGLzC,KAAKiD,WACJR,EAAA,UACIC,MAAM,uBACNR,MAAOlC,KAAKsC,YAAW,kBAEvBM,SAAU5C,KAAK4C,SACfC,MAAM,WACNC,QAAS9C,KAAKqB,iBACd0B,UAAW/C,KAAKuB,mBAChByB,QAAShD,KAAKsB,iBAAgB,UACtB,sBAERmB,EAAA,WAAS3B,KAAK,W,CAOlC,kBAAAoC,GACI,OACIT,EAAA,OACIC,MAAM,qBACNS,KAAK,YAAW,UACR,yB,CAKpB,MAAAC,GACI,KAAMpD,KAAKqD,UAAW,CAClB,OAAOrD,KAAKkD,oB,CAGhB,OAAOlD,KAAKwC,e"}

package/dist/q2-tecton-elements/p-5f99a4a8.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as o}from"./p-a5f18e27.js";import{m as r,o as n,i as a,w as s,l as c}from"./p-15ac45d6.js";import{s as l,a as d}from"./p-b7554a79.js";const p="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentcolor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}";const h=p;const v=class{constructor(e){t(this,e);this.change=i(this,"change",7);var o;this.scheduledAfterRender=[];this.clearSelectedOptions=()=>{this.selectedOptions=[];this.value=null;this.active=false;this.open=false;this.primaryBtn.focus();this.change.emit({value:null,values:[],active:false});this.scheduledAfterRender.push(r)};this.determineOptionCount=async()=>{if(this.optionList){const t=await this.optionList.getOptions();this.optionCount=t.length}else{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t}};this.executeActionSheet=async t=>{const i=await l(this,t);this.handleSelectionChanges(i)};this.getOption=async t=>{if(this.optionList){const i=await this.optionList.getOptions();return i.find((i=>i.value===t))}else{return this.hostElement.querySelector(`q2-option[value="${t}"]`)}};this.handleButtonFocusout=async t=>{const i=t.relatedTarget;if((i===null||i===void 0?void 0:i.tagName)==="Q2-OPTION")return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;this.handleSelectionChanges(t.detail)};this.handleClick=async t=>{t.stopPropagation();if(this.disabled)return;if(this.optionCount){if(d(this)){this.executeActionSheet(t)}else{await this.popoverElement.toggle()}}else{const{value:t,label:i}=this;const e=this.active=!this.active;const o=e?[{value:t,display:i}]:[];this.selectedOptions=o;this.change.emit({value:t,values:o,active:e})}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(!this.optionCount||this.disabled||i)return;t.preventDefault();const e=this.hasPopoverTop||this.hasPopoverBottom;if(d(this,t)&&!e){this.executeActionSheet(t)}else{this.optionList.handleExternalKeydown(t)}};this.handleSelectionChanges=async t=>{const{multiple:i}=this;const{value:e="",values:o=[]}=t;const r=i?!!o.length:!!e;if(!this.hostElement.onchange){if(i){this.selectedOptions=o;this.value=undefined}else{const t=await this.getOption(e);this.selectedOptions=t?[{value:t.value,display:t.display}]:[];this.value=(t===null||t===void 0?void 0:t.value)||undefined}}this.change.emit({value:i?undefined:e,values:o,active:r})};this.handleWrapperClick=()=>{this.primaryBtn.focus();this.primaryBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.onMutationObserved=()=>{this.updateSlotState();this.determineOptionCount();this.updateSelectedOptionElements()};this.updateSlotState=()=>{const{hostElement:t,hasPopoverTop:i,hasPopoverBottom:e}=this;const o=t.shadowRoot.querySelector('slot[name="popover-top"]');const r=t.shadowRoot.querySelector('slot[name="popover-bottom"]');const n=(o===null||o===void 0?void 0:o.assignedNodes().length)>0;const a=(r===null||r===void 0?void 0:r.assignedNodes().length)>0;if(i!==n)this.hasPopoverTop=n;if(e!==a)this.hasPopoverBottom=a};this.syncValueProperties=()=>{const{value:t,selectedOptions:i}=this;if(!!(i===null||i===void 0?void 0:i.length))this.selectedOptionsChanged(i);else if(t)this.valueChanged(t)};this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i=[]}=this;const e=i.map((t=>t.value));const o=await((t=this.optionList)===null||t===void 0?void 0:t.getOptions());if(this.optionCount)this.active=!!e.length;this.selectedOptionElements=(o===null||o===void 0?void 0:o.filter((t=>e.includes(t.value))))||[]};this.hasPopoverTop=false;this.hasPopoverBottom=false;this.optionCount=undefined;this.selectedOptionElements=[];this.active=undefined;this.borderless=undefined;this.disabled=undefined;this.hoist=!!((o=window.Tecton)===null||o===void 0?void 0:o.useActionSheets);this.label=undefined;this.maxLength=undefined;this.multiple=undefined;this.open=undefined;this.optionListLabel=undefined;this.popoverAlignment="right";this.popoverDirection=undefined;this.popoverMaxHeight=undefined;this.popoverMinHeight=150;this.selectedOptions=[];this.theme=undefined;this.value=undefined}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}componentWillLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement);this.syncValueProperties()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}handleSelectedDisplay(){if(this.multiple)return;this.updateSelectedOptionElements()}delegateFocus(t){if(!a(t,this.hostElement))return;this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}async closePopover(){if(!this.open||this.disabled)return;this._togglePopover()}async openPopover(){if(this.open||this.disabled)return;this._togglePopover()}async setValue(t,i={closePopover:true}){var e;const o=new Set(Array.isArray(t)?t:[t]);const r=await((e=this.optionList)===null||e===void 0?void 0:e.getOptions());if(!this.open){await this.openPopover();await s()}o.forEach((t=>{var i;(i=r.find((i=>i.value===t)))===null||i===void 0?void 0:i.click()}));if(i.closePopover){await this.closePopover();await s()}}selectedOptionsChanged(t){var i,e;const{multiple:o}=this;const r=(e=(i=t===null||t===void 0?void 0:t[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o){if(this.value)this.value=null;this.updateSelectedOptionElements()}else if(this.value===r){this.updateSelectedOptionElements()}else{this.value=r}}async valueChanged(t){var i,e;const{multiple:o,selectedOptions:r}=this;if(o)return;const n=(e=(i=r===null||r===void 0?void 0:r[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(t===n)this.updateSelectedOptionElements();else{const i=await this.getOption(t);const{value:e,display:o}=i||{value:t,display:null};this.selectedOptions=e?[{value:e,display:o}]:[]}}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:e,optionCount:o}=this;if(!o||e.length===0)return c(t);else if(e.length===1)return c(e[0].display);return c("tecton.element.pill.activeCount",{count:i.length})}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;if(t)return i.length>t?`${i.substring(0,t)}…`:i;else return i}_togglePopover(){const{primaryBtn:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}renderHiddenElement(){return e("div",{id:"option-description",class:"sr","aria-hidden":"true"},c("tecton.element.optionList.optionCount",[this.optionCount]))}renderIcon(){const{optionCount:t,active:i}=this;const o=t&&i;const r=o?"button":"div";const n=o||!t?"close":"chevron-down";return e(r,{class:"btn-close",onClick:o&&this.clearSelectedOptions||undefined,disabled:o&&this.disabled||undefined,"aria-label":o&&c("tecton.element.pill.clearSelection")||undefined,type:o&&"button"||undefined},e("q2-icon",{type:n}))}render(){const{optionCount:t,active:i,open:o}=this;const r=["btn-wrapper"];if(t||i)r.push("has-icon");if(t)r.push("has-options");return e("click-elsewhere",{key:"02e7f5f616daeb2b0e40259c1c99ac142f86b553",onChange:this.onClickElsewhere},e("div",{key:"13ece1982239e075de4911cc76c806b9f30dc84b",class:r.join(" ")},e("div",{key:"afff34dc889240fbbf32cb2401359f51ce5feee4",class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},e("button",{key:"5f9b91813e5f4006137534fe5fe1820adf35d2f6",class:"btn-primary","test-id":"btn-control",type:"button",role:t&&"combobox"||undefined,ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,disabled:this.disabled,"aria-roledescription":!t&&"filter","aria-controls":t&&"option-list"||undefined,"aria-expanded":t&&`${!!o}`||undefined,"aria-label":this.buttonContent,"aria-describedby":t&&"option-description"||undefined},this.truncatedButtonContent,!t&&i&&e("span",{key:"084fb2e933da3e3f281a5480c74e917ebac38015",class:"sr"},"(",c("tecton.element.pill.active"),")"))),this.renderIcon(),!!t&&this.renderHiddenElement()),this.optionCount>0&&e("q2-popover",{key:"5fcab5d95192479ac7f0e2e911d51327044500ef",ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,"max-height":this.popoverMaxHeight,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},e("div",{key:"b5d7756b724d76aa0cf487324c6790d7ca529293",class:"popover-content"},e("div",{key:"e191b41fcfa2a9f2fefc66dde961a24a867c73d8",ref:t=>this.popoverTopContainer=t,class:"popover-top-container",tabindex:"-1",hidden:!this.hasPopoverTop,onKeyDown:this.handleKeydown},e("slot",{key:"8078c79efc74285ce9db259c28a1c6b2e957a09f",name:"popover-top"})),e("q2-option-list",{key:"1cd2a521a30af647a4ba5008f11d927209454061",type:"listbox",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements(),label:c("tecton.element.optionList.label",[this.optionListLabel])},e("slot",{key:"432d785fe233aaf875a1b601522bb5189edf1b82"})),e("div",{key:"22d1406b38ae6f991c7253f5b10b70f7fa6744e7",ref:t=>this.popoverBottomContainer=t,class:"popover-bottom-container",tabindex:"-1",hidden:!this.hasPopoverBottom,onKeyDown:this.handleKeydown},e("slot",{key:"7619b7dabfaae3dea23363d7769e350a7f2ed51f",name:"popover-bottom"})))))}get hostElement(){return o(this)}static get watchers(){return{selectedOptions:["selectedOptionsChanged"],value:["valueChanged"]}}};v.style=h;export{v as q2_pill};
+//# sourceMappingURL=p-5f99a4a8.entry.js.map

package/dist/q2-tecton-elements/p-5f99a4a8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2PillCss","Q2PillStyle0","Q2Pill","this","scheduledAfterRender","clearSelectedOptions","selectedOptions","value","active","open","primaryBtn","focus","change","emit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","handleButtonFocusout","relatedTarget","tagName","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","hasPopoverTop","hasPopoverBottom","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","popTopSlot","shadowRoot","popBottomSlot","topSlotHasNode","assignedNodes","bottomSlotHasNode","syncValueProperties","selectedOptionsChanged","valueChanged","selectedValues","map","_a","selectedOptionElements","filter","includes","window","Tecton","useActionSheets","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","popoverTopContainer","tabindex","hidden","name","onReady","optionListLabel","popoverBottomContainer"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentcolor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    popoverBottomContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    hasPopoverBottom = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions: HTMLQ2OptionElement[] = await this.optionList?.getOptions();\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION') return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-72d948b4.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as n,g as o}from"./p-a5f18e27.js";const e="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}.link{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;color:var(--tct-link-color, var(--t-primary, inherit));font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link a{height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link a q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link.standalone{display:flex;align-items:center;color:var(--tct-link-color-standalone, var(--t-primary));--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link.standalone:active:hover a{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link.standalone.disabled a{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link.standalone.disabled:hover{text-decoration:none}.link.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link.inline.disabled{cursor:not-allowed;opacity:0.5}.link.inline:focus-visible .link.inline{box-shadow:var(--const-double-focus-ring)}";const r=e;const l=class{constructor(n){t(this,n);this.tctClick=i(this,"tctClick",7);this.disabled=false;this.href="#";this.label=undefined;this.referrerpolicy=undefined;this.target=undefined;this.tctTitle=undefined;this.variant="inline"}async clickLink(){const t=this.hostElement.shadowRoot.querySelector(`[test-id="linkAnchor"]`);t===null||t===void 0?void 0:t.click()}get classes(){const t=["link"];if(this.variant)t.push(this.variant);if(!!this.disabled)t.push("disabled");return t.join(" ")}handleClick(t){t.stopPropagation();if(this.disabled)return;this.tctClick.emit({target:this.target,referrerpolicy:this.referrerpolicy,href:this.href})}render(){return this.variant==="standalone"?n("div",{class:this.classes,"aria-label":this.label},n("a",{onClick:t=>this.handleClick(t),href:!!this.disabled?undefined:this.href,target:this.target||"_self",referrerPolicy:this.referrerpolicy||undefined,title:this.tctTitle||undefined,"test-id":"linkAnchor"},n("span",{class:"label"},this.label),n("q2-icon",{type:"chevron-right"}))):n("a",{class:this.classes,onClick:t=>this.handleClick(t),href:!!this.disabled?undefined:this.href,target:this.target||"_self",referrerPolicy:this.referrerpolicy||undefined,title:this.tctTitle||undefined,"test-id":"linkAnchor"},this.label)}get hostElement(){return o(this)}};l.style=r;export{l as q2_link};
+//# sourceMappingURL=p-72d948b4.entry.js.map

package/dist/q2-tecton-elements/p-72d948b4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2LinkCss","Q2LinkStyle0","Q2Link","clickLink","anchor","this","hostElement","shadowRoot","querySelector","click","classes","list","variant","push","disabled","join","handleClick","event","stopPropagation","tctClick","emit","target","referrerpolicy","href","render","h","class","label","onClick","e","undefined","referrerPolicy","title","tctTitle","type"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n.link {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    color: var-list(--tct-link-color, --t-primary, inherit);\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n    a {\n        height: var(--tct-link-height, 24px);\n        display: flex;\n        align-items: center;\n        --tct-icon-size: 16px;\n        text-decoration: none;\n        q2-icon {\n            margin-left: var(--tct-link-label-icon-gap, 6px);\n        }\n    }\n\n    &.standalone {\n        display: flex;\n        align-items: center;\n        color: var-list(--tct-link-color-standalone, --t-primary);\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            a {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            a {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n                opacity: 0.5;\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n        &:focus-visible & {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The disabled.  */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The label to display. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** The target.  */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** The title attribute on a tag in shadowRoot. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** The value link to display. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes() {\n        const list = ['link'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type=\"chevron-right\"></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,u+FAClB,MAAAC,EAAeD,E,MCCFE,EAAM,M,0EAWK,M,UAIL,I,8GAoBG,Q,CAqBlB,eAAMC,GACF,MAAMC,EAASC,KAAKC,YAAYC,WAAWC,cAAc,0BACxDJ,IAA4B,MAA5BA,SAAM,SAANA,EAA8BK,O,CAMnC,WAAIC,GACA,MAAMC,EAAO,CAAC,QACd,GAAIN,KAAKO,QAASD,EAAKE,KAAKR,KAAKO,SACjC,KAAMP,KAAKS,SAAUH,EAAKE,KAAK,YAC/B,OAAOF,EAAKI,KAAK,I,CAGrB,WAAAC,CAAYC,GACRA,EAAMC,kBACN,GAAIb,KAAKS,SAAU,OACnBT,KAAKc,SAASC,KAAK,CACfC,OAAQhB,KAAKgB,OACbC,eAAgBjB,KAAKiB,eACrBC,KAAMlB,KAAKkB,M,CAOnB,MAAAC,GACI,OAAOnB,KAAKO,UAAY,aACpBa,EAAA,OACIC,MAAOrB,KAAKK,QAAO,aACPL,KAAKsB,OAEjBF,EAAA,KACIG,QAASC,GAAKxB,KAAKW,YAAYa,GAC/BN,OAAQlB,KAAKS,SAAWgB,UAAYzB,KAAKkB,KACzCF,OAAQhB,KAAKgB,QAAU,QACvBU,eAAgB1B,KAAKiB,gBAAkBQ,UACvCE,MAAO3B,KAAK4B,UAAYH,UAAS,UACzB,cAERL,EAAA,QAAMC,MAAM,SAASrB,KAAKsB,OAC1BF,EAAA,WAASS,KAAK,oBAItBT,EAAA,KACIC,MAAOrB,KAAKK,QACZkB,QAASC,GAAKxB,KAAKW,YAAYa,GAC/BN,OAAQlB,KAAKS,SAAWgB,UAAYzB,KAAKkB,KACzCF,OAAQhB,KAAKgB,QAAU,QACvBU,eAAgB1B,KAAKiB,gBAAkBQ,UACvCE,MAAO3B,KAAK4B,UAAYH,UAAS,UACzB,cAEPzB,KAAKsB,M"}

package/dist/q2-tecton-elements/{p-3c7be0bb.entry.js → p-7903cd15.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as a,F as o,g as r}from"./p-a5f18e27.js";import{r as l,l as n}from"./p-9a1a4bc0.js";const c="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";const d=c;const i=class{constructor(a){t(this,a);this.click=e(this,"click",7);this.select=e(this,"select",7);this.selectAllRows=e(this,"selectAllRows",7);this.sort=e(this,"sort",7);this.toggle=e(this,"toggle",7);this.checkSlots=()=>{var t,e,a,o;this.hasExpandableRows=!!((e=(t=this.hostElement)===null||t===void 0?void 0:t.querySelector(`[slot$="-expandable-content"]`))!==null&&e!==void 0?e:false);this.hasDropdowns=!!((o=(a=this.hostElement)===null||a===void 0?void 0:a.querySelector(`[slot$="-dropdown"]`))!==null&&o!==void 0?o:false);this.checkSlotCount+=1};this.onClickRow=(t,e)=>{t.stopPropagation();this.click.emit({row:e})};this.onClickTableRow=(t,e)=>{if(this.clickable){this.onClickRow(t,e)}else if(this.hasExpandableRows){this.onToggleRow(t,e)}};this.onControlContainerClick=t=>{t.stopPropagation()};this.onSelectRow=(t,e)=>{t.stopPropagation();const{selectMode:a,serializedRows:o,selectedRows:r}=this;const{checked:l}=t.detail;const n=Object.assign(Object.assign({},e),{selected:l});let c;if(a==="single"){c=l?[n]:[]}else{c=l?[...r,n]:r.filter((t=>t.id!==n.id))}const d=c.length===o.length;const i=!d&&c.length>0;const s=this.select.emit({row:n,rows:c,allSelected:d});if(s.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>t.id===n.id?n:t));this.allRowsSelected=d;this.someRowsSelected=i};this.onSort=t=>{const e=t.sorted==="ASC"?"DESC":"ASC";const a=t.key;const o=this.sort.emit({header:t,direction:e});if(o.defaultPrevented)return;const r=t.sortable!=="manual";if(!r)return;this.serializedHeaders=this.serializedHeaders.map((t=>{const o=a===t.key?e:undefined;return Object.assign(Object.assign({},t),{sorted:o})}));this.serializedRows=this.sortRows(this.serializedRows,Object.assign(Object.assign({},t),{sorted:e}))};this.onToggleRow=(t,e)=>{t.stopPropagation();const a=Object.assign(Object.assign({},e),{expanded:!e.expanded});const o=this.toggle.emit({row:a});if(o.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>{if(t.id===a.id)return a;else return Object.assign({},t)}))};this.allRowsSelected=false;this.checkSlotCount=0;this.hasDropdowns=false;this.hasExpandableRows=false;this.hasRowData=false;this.serializedHeaders=[];this.serializedRows=[];this.someRowsSelected=false;this.bordered=undefined;this.caption=undefined;this.clickable=undefined;this.density=undefined;this.emptyIcon="inbox";this.emptyMessage="tecton.element.dataTable.emptyMessage";this.headers=undefined;this.hideCaption=undefined;this.hideClickable=undefined;this.loading=undefined;this.rows=undefined;this.selectable=undefined;this.selectMode="multiple";this.shadowed=undefined;this.striped=undefined}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}if(this.resizeObserver){this.resizeObserver.disconnect();this.resizeObserver=null}}componentWillLoad(){this.headersHandler(this.headers);this.rowsHandler(this.rows)}componentDidLoad(){if(typeof MutationObserver!=="undefined"){const t=new MutationObserver((()=>this.checkSlots()));t.observe(this.hostElement,{childList:true,subtree:true,attributes:true});this.mutationObserver=t}if(typeof ResizeObserver!=="undefined"){this.resizeObserver=new ResizeObserver((()=>l()));this.resizeObserver.observe(this.hostElement)}}onClickListener(t){if(t instanceof PointerEvent)t.stopImmediatePropagation()}onSelectAllRows(t){t.stopPropagation();const{checked:e}=t.detail;const a=e?this.serializedRows.map((t=>{if(t.disabled){return t}else{return Object.assign(Object.assign({},t),{selected:e})}})):[];const o=this.select.emit({row:undefined,rows:a,allSelected:e});if(o.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>{if(t.disabled)return t;t.selected=e;return t}));this.allRowsSelected=e;this.someRowsSelected=false}headersHandler(t=[]){this.serializedHeaders=t.map((t=>{const{title:e}=t;let{key:a}=t;if(!a)a=e.toLowerCase().replace(/\s/g,"-");return Object.assign({key:a},t)}))}rowsHandler(t=[]){const{serializedHeaders:e,mappedHeaders:a}=this;const o={id:null,cells:{},selected:false,expanded:false,disabled:false};let r=true;let l=false;const n=t.map((({id:t,cells:e,selected:n,expanded:c,disabled:d})=>{const i=Object.entries(e).reduce(((t,[e,o])=>{const r=a[e]||{};const{align:l,type:n="text",lineClamp:c,verticalAlign:d}=r;const i="type"in r&&r.type==="badge";const s={value:"",ariaLabel:undefined,type:n,align:l,lineClamp:c,verticalAlign:d,badgeStatus:i?r.badgeStatus:undefined,badgeTheme:i?r.badgeTheme:undefined};const b=typeof o==="object"?Object.assign(Object.assign({},s),o):Object.assign(Object.assign({},s),{value:o});t[e]=b;return t}),{});if(r&&!n)r=false;if(!r&&n)l=true;return Object.assign(Object.assign({},o),{id:t,selected:!!n,expanded:!!c,disabled:!!d,cells:i})}));const c=e.find((({sorted:t})=>t));const d=!!c&&c.sortable!=="manual";this.hasRowData=!!t.length;this.allRowsSelected=this.hasRowData&&r;this.someRowsSelected=this.hasRowData&&l;this.serializedRows=!!d?this.sortRows(n,c):n;this.checkSlots()}selectableHandler(){if(this.selectable===false){this.selectAllRows.emit({checked:false})}}async sortColumn(t){const e=this.hostElement.shadowRoot.querySelector(`#header-${t.key} q2-btn[test-id="sort-control"]`);e===null||e===void 0?void 0:e.click()}async toggleRowExpansion(t){const e=this.hostElement.shadowRoot.querySelector(`#row-${t} q2-btn[test-id="expandable-row-control"]`);e===null||e===void 0?void 0:e.click()}async toggleRowSelect(t){const e=this.hostElement.shadowRoot.querySelector(`#row-${t} q2-checkbox[test-id="select-row-control"]`);e===null||e===void 0?void 0:e.click()}async clickRow(t){const e=this.hostElement.shadowRoot.querySelector(`#row-${t} q2-btn[test-id="clickable-row-control"]`);e===null||e===void 0?void 0:e.click()}async getCellContent(t,e){var a,o;const r=(a=this.hostElement.querySelector(`[slot=row-${t}-cell-${e}`))===null||a===void 0?void 0:a.textContent;const l=(o=this.hostElement.shadowRoot.querySelector(`slot[name=row-${t}-cell-${e}]`))===null||o===void 0?void 0:o.textContent;return r||l||""}async toggleSelectAllRows(){if(!this.selectable)return;const t=this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id="select-all-rows-control"]`);t===null||t===void 0?void 0:t.click()}get mappedHeaders(){return this.serializedHeaders.reduce(((t,e)=>{t[e.key]=e;return t}),{})}get numberOfColumns(){var t,e;return((e=(t=this.serializedHeaders)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0)+(this.selectable?1:0)+(this.clickable?1:0)+(this.hasExpandableRows?1:0)+(this.hasDropdowns?1:0)}get selectedRow(){return this.selectedRows.find((({selected:t})=>!!t))}get selectedRows(){return this.serializedRows.filter((({selected:t})=>t))}sortRows(t,e){const{key:a,sorted:o}=e;const r=o||"ASC";const l=[...t].sort(((t,e)=>{const o=t.cells[a].value;const l=e.cells[a].value;if(o<l)return r==="ASC"?-1:1;if(o>l)return r==="ASC"?1:-1;return 0}));return l}render(){const{caption:t}=this;return a("div",{key:"ca929992a1cbe3dc46b9793d66b94bf927378458",class:"container"},a("table",{key:"4b3b8f54037d166262a115573fa9a80d63b9b3fe"},t&&a("caption",{key:"85de87c8cce24c2fc3d5c3718aff47924ecfe76c",class:this.hideCaption?"sr":undefined},t),this.renderTableColGroup(),this.renderTableHeader(),this.renderEmptyState(),this.renderTableRows()))}renderCellContent(t){if(!t)return;const{type:e,ariaLabel:o,value:r}=t;if([undefined,null].includes(r))return;switch(e){case"badge":let e;switch(typeof r){case"string":e=parseFloat(r);break;case"boolean":e=r?1:0;break;default:e=r;break}return a("q2-badge",{"aria-label":o,value:e,theme:t.badgeTheme,status:t.badgeStatus,size:"large"});case"icon":const l=typeof r==="string"?r:`${r}`;return a("q2-icon",{label:o,type:l});case"boolean":return!!r?a("q2-icon",{label:n("tecton.element.dataTable.booleanTrue"),type:"checkmark"}):a("div",{"aria-label":n("tecton.element.dataTable.booleanFalse")});case"code":return a("code",{"aria-label":o},r);default:return a("div",{"aria-label":o},r)}}renderEmptyState(){const{hasRowData:t,numberOfColumns:e,emptyIcon:o,emptyMessage:r,loading:l}=this;if(t||l)return null;return a("slot",{name:"empty-table"},a("tbody",null,a("tr",{class:"empty-state"},a("td",{colSpan:e},a("div",{class:"empty-state-content"},a("q2-icon",{type:o}),a("p",null,n(r)))))))}renderTableColGroup(){const{serializedHeaders:t,selectable:e,clickable:o,hasExpandableRows:r,hasDropdowns:l}=this;if(!t.length)return null;return a("colgroup",null,e&&a("col",{class:"select-column"}),t.map((({width:t,backgroundColor:e})=>a("col",{style:{width:t,backgroundColor:e}}))),o&&a("col",{class:"click-column"}),r&&a("col",{class:"expandable-row-control-column"}),l&&a("col",{class:"dropdown-column"}))}renderTableHeader(){const{serializedHeaders:t,selectable:e,clickable:o,hideClickable:r,selectMode:l,hasExpandableRows:c,hasDropdowns:d,allRowsSelected:i,someRowsSelected:s,hasRowData:b,loading:h}=this;if(!t.length)return null;return a("thead",null,a("tr",null,e&&a("th",null,l==="multiple"&&a("q2-checkbox",{label:n("tecton.element.dataTable.selectAllRows"),"hide-label":true,onChange:()=>this.selectAllRows.emit({checked:!i}),checked:b&&i&&!s,indeterminate:b&&s&&!i,disabled:h||!b,"test-id":"select-all-rows-control"})),t.map((t=>{const{align:e,sorted:o,verticalAlign:r}=t;const l=[];if(e)l.push(`align-${e}`);if(r)l.push(`vertical-align-${r}`);if(!!o)l.push("sorted");return a("th",{class:l.join(" "),id:`header-${t.key}`},t.sortable?a("q2-btn",{onClick:()=>this.onSort(t),"test-id":"sort-control",disabled:this.loading},a("div",{class:"header-content","aria-label":t.ariaLabel||undefined},a("slot",{name:`header-cell-${t.key}`},t.title),!!o?a("q2-icon",{class:`sorted-indicator direction-${o}`,type:"arrow-down",label:o==="ASC"?n("tecton.element.dataTable.sortedAscending"):n("tecton.element.dataTable.sortedDescending"),"test-id":"sorted-indicator"}):a("q2-icon",{class:`sorted-indicator`,type:"sort",label:n("tecton.element.dataTable.clickToSort"),"test-id":"sorted-indicator"}))):a("div",{class:"header-content","aria-label":t.ariaLabel||undefined},a("slot",{name:`header-cell-${t.key}`},t.title)))})),o&&a("th",{id:"click",class:r?"sr":undefined},a("span",{class:"sr"},n("tecton.element.dataTable.clickRow"))),c&&a("th",{id:"toggle"},a("span",{class:"sr"},n("tecton.element.dataTable.toggleRow"))),d&&a("th",null,a("span",{class:"sr"},n("tecton.element.dataTable.dropdown")))))}renderTableRows(){const{serializedHeaders:t,serializedRows:e,selectable:r,clickable:l,striped:c,hideClickable:d,selectMode:i,hasExpandableRows:s,hasDropdowns:b,numberOfColumns:h,loading:p}=this;if(p){return a("tbody",null,a("tr",{class:"loading-row"},a("td",{colSpan:h},a("q2-loading",{inline:true}))))}let u=false;let v;if(i==="single"){v=this.selectedRow;u=!!v}const g=[];if(l)g.push("click-column");if(d)g.push("sr");const f=g.join(" ");return a("tbody",null,e.map((e=>{const d=`row-${e.id}-cell`;const i=`row-${e.id}-expandable-content`;const p=`row-${e.id}-dropdown`;const g=s&&!!this.hostElement.querySelector(`[slot="${i}"]`);const w=b&&!!this.hostElement.querySelector(`[slot="${p}"]`);const m=[];if(g)m.push("expandable");if(l)m.push("clickable");if(c)m.push("striped");if(e.expanded)m.push("expanded");if(e.selected)m.push("selected");const x=l||g;return a(o,null,a("tr",{id:`row-${e.id}`,class:m.join(" "),onClick:x&&(t=>this.onClickTableRow(t,e)),tabIndex:x?-1:undefined},r&&a("td",{class:"select-column",onClick:this.onControlContainerClick},a("q2-checkbox",{label:n("tecton.element.dataTable.selectRow"),"hide-label":true,checked:e.selected,disabled:u&&e!==v||e.disabled,onChange:t=>this.onSelectRow(t,e),"test-id":"select-row-control"})),t.map((({key:t})=>{const o=e.cells[t];const r=o===null||o===void 0?void 0:o.lineClamp;const l=o===null||o===void 0?void 0:o.align;const n=o===null||o===void 0?void 0:o.verticalAlign;const c=[];if(l)c.push(`align-${l}`);if(n)c.push(`vertical-align-${n}`);if(r)c.push("clamped");const i=r?{"--comp-line-clamp-count":`${r}`}:undefined;return a("td",{class:c.join(" "),style:i},a("slot",{name:`${d}-${t}`},this.renderCellContent(o)))})),l&&a("td",{class:f},a("q2-btn",{intent:"neutral",size:"small",onClick:t=>this.onClickRow(t,e),"test-id":"clickable-row-control"},n("tecton.element.dataTable.clickRow"))),s&&a("td",{class:"expandable-row-control-column",onClick:this.onControlContainerClick},g&&a("q2-btn",{onClick:t=>this.onToggleRow(t,e),ariaExpanded:`${e.expanded}`,ariaControls:i,ariaLabel:n("tecton.element.dataTable.toggleRow"),"test-id":"expandable-row-control"},a("q2-icon",{type:"chevron-down",class:"toggle-expandable-row"}))),b&&a("td",{class:"dropdown-column",onClick:this.onControlContainerClick},w&&a("slot",{name:p}))),g&&a("tr",{id:i,class:"expandable-row",hidden:!e.expanded,"aria-hidden":!e.expanded},a("td",{colSpan:h,headers:"toggle"},a("div",{class:"expandable-content"},a("slot",{name:i})))))})))}get hostElement(){return r(this)}static get watchers(){return{headers:["headersHandler"],rows:["rowsHandler"],selectable:["selectableHandler"]}}};i.style=d;export{i as q2_data_table};
-//# sourceMappingURL=p-3c7be0bb.entry.js.map
+import{r as t,c as e,h as a,F as o,g as r}from"./p-a5f18e27.js";import{m as l,l as n}from"./p-15ac45d6.js";const c="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";const d=c;const i=class{constructor(a){t(this,a);this.click=e(this,"click",7);this.select=e(this,"select",7);this.selectAllRows=e(this,"selectAllRows",7);this.sort=e(this,"sort",7);this.toggle=e(this,"toggle",7);this.checkSlots=()=>{var t,e,a,o;this.hasExpandableRows=!!((e=(t=this.hostElement)===null||t===void 0?void 0:t.querySelector(`[slot$="-expandable-content"]`))!==null&&e!==void 0?e:false);this.hasDropdowns=!!((o=(a=this.hostElement)===null||a===void 0?void 0:a.querySelector(`[slot$="-dropdown"]`))!==null&&o!==void 0?o:false);this.checkSlotCount+=1};this.onClickRow=(t,e)=>{t.stopPropagation();this.click.emit({row:e})};this.onClickTableRow=(t,e)=>{if(this.clickable){this.onClickRow(t,e)}else if(this.hasExpandableRows){this.onToggleRow(t,e)}};this.onControlContainerClick=t=>{t.stopPropagation()};this.onSelectRow=(t,e)=>{t.stopPropagation();const{selectMode:a,serializedRows:o,selectedRows:r}=this;const{checked:l}=t.detail;const n=Object.assign(Object.assign({},e),{selected:l});let c;if(a==="single"){c=l?[n]:[]}else{c=l?[...r,n]:r.filter((t=>t.id!==n.id))}const d=c.length===o.length;const i=!d&&c.length>0;const s=this.select.emit({row:n,rows:c,allSelected:d});if(s.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>t.id===n.id?n:t));this.allRowsSelected=d;this.someRowsSelected=i};this.onSort=t=>{const e=t.sorted==="ASC"?"DESC":"ASC";const a=t.key;const o=this.sort.emit({header:t,direction:e});if(o.defaultPrevented)return;const r=t.sortable!=="manual";if(!r)return;this.serializedHeaders=this.serializedHeaders.map((t=>{const o=a===t.key?e:undefined;return Object.assign(Object.assign({},t),{sorted:o})}));this.serializedRows=this.sortRows(this.serializedRows,Object.assign(Object.assign({},t),{sorted:e}))};this.onToggleRow=(t,e)=>{t.stopPropagation();const a=Object.assign(Object.assign({},e),{expanded:!e.expanded});const o=this.toggle.emit({row:a});if(o.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>{if(t.id===a.id)return a;else return Object.assign({},t)}))};this.allRowsSelected=false;this.checkSlotCount=0;this.hasDropdowns=false;this.hasExpandableRows=false;this.hasRowData=false;this.serializedHeaders=[];this.serializedRows=[];this.someRowsSelected=false;this.bordered=undefined;this.caption=undefined;this.clickable=undefined;this.density=undefined;this.emptyIcon="inbox";this.emptyMessage="tecton.element.dataTable.emptyMessage";this.headers=undefined;this.hideCaption=undefined;this.hideClickable=undefined;this.loading=undefined;this.rows=undefined;this.selectable=undefined;this.selectMode="multiple";this.shadowed=undefined;this.striped=undefined}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}if(this.resizeObserver){this.resizeObserver.disconnect();this.resizeObserver=null}}componentWillLoad(){this.headersHandler(this.headers);this.rowsHandler(this.rows)}componentDidLoad(){if(typeof MutationObserver!=="undefined"){const t=new MutationObserver((()=>this.checkSlots()));t.observe(this.hostElement,{childList:true,subtree:true,attributes:true});this.mutationObserver=t}if(typeof ResizeObserver!=="undefined"){this.resizeObserver=new ResizeObserver((()=>l()));this.resizeObserver.observe(this.hostElement)}}onClickListener(t){if(t instanceof PointerEvent)t.stopImmediatePropagation()}onSelectAllRows(t){t.stopPropagation();const{checked:e}=t.detail;const a=e?this.serializedRows.map((t=>{if(t.disabled){return t}else{return Object.assign(Object.assign({},t),{selected:e})}})):[];const o=this.select.emit({row:undefined,rows:a,allSelected:e});if(o.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>{if(t.disabled)return t;t.selected=e;return t}));this.allRowsSelected=e;this.someRowsSelected=false}async clickRow(t){const e=this.hostElement.shadowRoot.querySelector(`#row-${t} q2-btn[test-id="clickable-row-control"]`);e===null||e===void 0?void 0:e.click()}async getCellContent(t,e){var a,o;const r=(a=this.hostElement.querySelector(`[slot=row-${t}-cell-${e}`))===null||a===void 0?void 0:a.textContent;const l=(o=this.hostElement.shadowRoot.querySelector(`slot[name=row-${t}-cell-${e}]`))===null||o===void 0?void 0:o.textContent;return r||l||""}async sortColumn(t){const e=this.hostElement.shadowRoot.querySelector(`#header-${t.key} q2-btn[test-id="sort-control"]`);e===null||e===void 0?void 0:e.click()}async toggleRowExpansion(t){const e=this.hostElement.shadowRoot.querySelector(`#row-${t} q2-btn[test-id="expandable-row-control"]`);e===null||e===void 0?void 0:e.click()}async toggleRowSelect(t){const e=this.hostElement.shadowRoot.querySelector(`#row-${t} q2-checkbox[test-id="select-row-control"]`);e===null||e===void 0?void 0:e.click()}async toggleSelectAllRows(){if(!this.selectable)return;const t=this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id="select-all-rows-control"]`);t===null||t===void 0?void 0:t.click()}headersHandler(t=[]){this.serializedHeaders=t.map((t=>{const{title:e}=t;let{key:a}=t;if(!a)a=e.toLowerCase().replace(/\s/g,"-");return Object.assign({key:a},t)}))}rowsHandler(t=[]){const{serializedHeaders:e,mappedHeaders:a}=this;const o={id:null,cells:{},selected:false,expanded:false,disabled:false};let r=true;let l=false;const n=t.map((({id:t,cells:e,selected:n,expanded:c,disabled:d})=>{const i=Object.entries(e).reduce(((t,[e,o])=>{const r=a[e]||{};const{align:l,type:n="text",lineClamp:c,verticalAlign:d}=r;const i="type"in r&&r.type==="badge";const s={value:"",ariaLabel:undefined,type:n,align:l,lineClamp:c,verticalAlign:d,badgeStatus:i?r.badgeStatus:undefined,badgeTheme:i?r.badgeTheme:undefined};const b=typeof o==="object"?Object.assign(Object.assign({},s),o):Object.assign(Object.assign({},s),{value:o});t[e]=b;return t}),{});if(r&&!n)r=false;if(!r&&n)l=true;return Object.assign(Object.assign({},o),{id:t,selected:!!n,expanded:!!c,disabled:!!d,cells:i})}));const c=e.find((({sorted:t})=>t));const d=!!c&&c.sortable!=="manual";this.hasRowData=!!t.length;this.allRowsSelected=this.hasRowData&&r;this.someRowsSelected=this.hasRowData&&l;this.serializedRows=!!d?this.sortRows(n,c):n;this.checkSlots()}selectableHandler(){if(this.selectable===false){this.selectAllRows.emit({checked:false})}}get mappedHeaders(){return this.serializedHeaders.reduce(((t,e)=>{t[e.key]=e;return t}),{})}get numberOfColumns(){var t,e;return((e=(t=this.serializedHeaders)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0)+(this.selectable?1:0)+(this.clickable?1:0)+(this.hasExpandableRows?1:0)+(this.hasDropdowns?1:0)}get selectedRow(){return this.selectedRows.find((({selected:t})=>!!t))}get selectedRows(){return this.serializedRows.filter((({selected:t})=>t))}sortRows(t,e){const{key:a,sorted:o}=e;const r=o||"ASC";const l=[...t].sort(((t,e)=>{const o=t.cells[a].value;const l=e.cells[a].value;if(o<l)return r==="ASC"?-1:1;if(o>l)return r==="ASC"?1:-1;return 0}));return l}render(){const{caption:t}=this;return a("div",{key:"3b83513a749562f7d9787103e4bad96b281da690",class:"container"},a("table",{key:"61142600c24e4dba06d9bcf06a0abdc5e424997c"},t&&a("caption",{key:"db2048dcbd52e6f2bc892634be354d2fe8fc4560",class:this.hideCaption?"sr":undefined},t),this.renderTableColGroup(),this.renderTableHeader(),this.renderEmptyState(),this.renderTableRows()))}renderCellContent(t){if(!t)return;const{type:e,ariaLabel:o,value:r}=t;if([undefined,null].includes(r))return;switch(e){case"badge":let e;switch(typeof r){case"string":e=parseFloat(r);break;case"boolean":e=r?1:0;break;default:e=r;break}return a("q2-badge",{"aria-label":o,value:e,theme:t.badgeTheme,status:t.badgeStatus,size:"large"});case"icon":const l=typeof r==="string"?r:`${r}`;return a("q2-icon",{label:o,type:l});case"boolean":return!!r?a("q2-icon",{label:n("tecton.element.dataTable.booleanTrue"),type:"checkmark"}):a("div",{"aria-label":n("tecton.element.dataTable.booleanFalse")});case"code":return a("code",{"aria-label":o},r);default:return a("div",{"aria-label":o},r)}}renderEmptyState(){const{hasRowData:t,numberOfColumns:e,emptyIcon:o,emptyMessage:r,loading:l}=this;if(t||l)return null;return a("slot",{name:"empty-table"},a("tbody",null,a("tr",{class:"empty-state"},a("td",{colSpan:e},a("div",{class:"empty-state-content"},a("q2-icon",{type:o}),a("p",null,n(r)))))))}renderTableColGroup(){const{serializedHeaders:t,selectable:e,clickable:o,hasExpandableRows:r,hasDropdowns:l}=this;if(!t.length)return null;return a("colgroup",null,e&&a("col",{class:"select-column"}),t.map((({width:t,backgroundColor:e})=>a("col",{style:{width:t,backgroundColor:e}}))),o&&a("col",{class:"click-column"}),r&&a("col",{class:"expandable-row-control-column"}),l&&a("col",{class:"dropdown-column"}))}renderTableHeader(){const{serializedHeaders:t,selectable:e,clickable:o,hideClickable:r,selectMode:l,hasExpandableRows:c,hasDropdowns:d,allRowsSelected:i,someRowsSelected:s,hasRowData:b,loading:h}=this;if(!t.length)return null;return a("thead",null,a("tr",null,e&&a("th",null,l==="multiple"&&a("q2-checkbox",{label:n("tecton.element.dataTable.selectAllRows"),"hide-label":true,onChange:()=>this.selectAllRows.emit({checked:!i}),checked:b&&i&&!s,indeterminate:b&&s&&!i,disabled:h||!b,"test-id":"select-all-rows-control"})),t.map((t=>{const{align:e,sorted:o,verticalAlign:r}=t;const l=[];if(e)l.push(`align-${e}`);if(r)l.push(`vertical-align-${r}`);if(!!o)l.push("sorted");return a("th",{class:l.join(" "),id:`header-${t.key}`},t.sortable?a("q2-btn",{onClick:()=>this.onSort(t),"test-id":"sort-control",disabled:this.loading},a("div",{class:"header-content","aria-label":t.ariaLabel||undefined},a("slot",{name:`header-cell-${t.key}`},t.title),!!o?a("q2-icon",{class:`sorted-indicator direction-${o}`,type:"arrow-down",label:o==="ASC"?n("tecton.element.dataTable.sortedAscending"):n("tecton.element.dataTable.sortedDescending"),"test-id":"sorted-indicator"}):a("q2-icon",{class:`sorted-indicator`,type:"sort",label:n("tecton.element.dataTable.clickToSort"),"test-id":"sorted-indicator"}))):a("div",{class:"header-content","aria-label":t.ariaLabel||undefined},a("slot",{name:`header-cell-${t.key}`},t.title)))})),o&&a("th",{id:"click",class:r?"sr":undefined},a("span",{class:"sr"},n("tecton.element.dataTable.clickRow"))),c&&a("th",{id:"toggle"},a("span",{class:"sr"},n("tecton.element.dataTable.toggleRow"))),d&&a("th",null,a("span",{class:"sr"},n("tecton.element.dataTable.dropdown")))))}renderTableRows(){const{serializedHeaders:t,serializedRows:e,selectable:r,clickable:l,striped:c,hideClickable:d,selectMode:i,hasExpandableRows:s,hasDropdowns:b,numberOfColumns:h,loading:p}=this;if(p){return a("tbody",null,a("tr",{class:"loading-row"},a("td",{colSpan:h},a("q2-loading",{inline:true}))))}let u=false;let v;if(i==="single"){v=this.selectedRow;u=!!v}const g=[];if(l)g.push("click-column");if(d)g.push("sr");const f=g.join(" ");return a("tbody",null,e.map((e=>{const d=`row-${e.id}-cell`;const i=`row-${e.id}-expandable-content`;const p=`row-${e.id}-dropdown`;const g=s&&!!this.hostElement.querySelector(`[slot="${i}"]`);const w=b&&!!this.hostElement.querySelector(`[slot="${p}"]`);const m=[];if(g)m.push("expandable");if(l)m.push("clickable");if(c)m.push("striped");if(e.expanded)m.push("expanded");if(e.selected)m.push("selected");const x=l||g;return a(o,null,a("tr",{id:`row-${e.id}`,class:m.join(" "),onClick:x&&(t=>this.onClickTableRow(t,e)),tabIndex:x?-1:undefined},r&&a("td",{class:"select-column",onClick:this.onControlContainerClick},a("q2-checkbox",{label:n("tecton.element.dataTable.selectRow"),"hide-label":true,checked:e.selected,disabled:u&&e!==v||e.disabled,onChange:t=>this.onSelectRow(t,e),"test-id":"select-row-control"})),t.map((({key:t})=>{const o=e.cells[t];const r=o===null||o===void 0?void 0:o.lineClamp;const l=o===null||o===void 0?void 0:o.align;const n=o===null||o===void 0?void 0:o.verticalAlign;const c=[];if(l)c.push(`align-${l}`);if(n)c.push(`vertical-align-${n}`);if(r)c.push("clamped");const i=r?{"--comp-line-clamp-count":`${r}`}:undefined;return a("td",{class:c.join(" "),style:i},a("slot",{name:`${d}-${t}`},this.renderCellContent(o)))})),l&&a("td",{class:f},a("q2-btn",{intent:"neutral",size:"small",onClick:t=>this.onClickRow(t,e),"test-id":"clickable-row-control"},n("tecton.element.dataTable.clickRow"))),s&&a("td",{class:"expandable-row-control-column",onClick:this.onControlContainerClick},g&&a("q2-btn",{onClick:t=>this.onToggleRow(t,e),ariaExpanded:`${e.expanded}`,ariaControls:i,ariaLabel:n("tecton.element.dataTable.toggleRow"),"test-id":"expandable-row-control"},a("q2-icon",{type:"chevron-down",class:"toggle-expandable-row"}))),b&&a("td",{class:"dropdown-column",onClick:this.onControlContainerClick},w&&a("slot",{name:p}))),g&&a("tr",{id:i,class:"expandable-row",hidden:!e.expanded,"aria-hidden":!e.expanded},a("td",{colSpan:h,headers:"toggle"},a("div",{class:"expandable-content"},a("slot",{name:i})))))})))}get hostElement(){return r(this)}static get watchers(){return{headers:["headersHandler"],rows:["rowsHandler"],selectable:["selectableHandler"]}}};i.style=d;export{i as q2_data_table};
+//# sourceMappingURL=p-7903cd15.entry.js.map