q2-tecton-elements 1.67.2 → 1.68.0

package/dist/components/q2-dropdown.js.map

@@ -1 +1 @@
-{"file":"q2-dropdown.js","mappings":"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","names":["Q2Dropdown","__stencil_proxyCustomElement"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n::slotted([slot=\"popover-top\"]) {\n    padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n    border-bottom: var-list(--tct-dropdown-slot-border-top);\n}\n\n::slotted([slot=\"popover-bottom\"]) {\n    padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n    border-top: var-list(--tct-dropdown-slot-border-bottom);\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n    --tct-popover-padding: #{var-list(--tct-dropdown-content-padding)};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n/**\n * @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.\n */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\n    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\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     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\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    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\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({ mutable: true })\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;\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     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this._alignOptionStructure();\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) {\n            this.popoverElement?.scrollContainerTo({ top: 0 });\n        } else {\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Gets the outerHTML for top/bottom slotted elements.\n     */\n    @Method()\n    async _getSlotsHtml() {\n        return [\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({\n                slot: 'top',\n                html: slot.outerHTML,\n            })),\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({\n                slot: 'bottom',\n                html: slot.outerHTML,\n            })),\n        ];\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\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 dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or\n     * [Option](https://tecton.q2developer.com/design-system/q2-option/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, or the dropdown is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        const target = item ? itemBtn : option;\n        if (!target || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        target.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * This method only applies to the deprecated `q2-dropdown-item` element, since\n     * `q2-option` (its replacement) does not support the `removable` attribute.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * If the dropdown is disabled, this method does nothing.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _alignOptionStructure(elem: Element = this.hostElement) {\n        Array.from(elem.children).forEach(el => {\n            if (el.tagName === 'Q2-OPTION') {\n                el.setAttribute('_hide-selected-block', '');\n            } else if (el.tagName === 'Q2-OPTGROUP') {\n                this._alignOptionStructure(el);\n            }\n        });\n    }\n\n    _clickItem(value: string) {\n        if (!value || this.disabled) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n        option?.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\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    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    tabIndex={0}\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <slot name=\"popover-top\" />\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <slot name=\"popover-bottom\" />\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-dropdown.js","mappings":";;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,g0CAAg0C;;MCoBz0CA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AADvB,IAAA,WAAA,GAAA;;;;;AAKI,QAAA,IAAoB,CAAA,oBAAA,GAAW,mDAAmD;AAElF,QAAA,IAAc,CAAA,cAAA,GAAW,4CAA4C;AA8DrE;;;;AAIG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAY,CAAC,EAAC,CAAA,EAAA,GAAA,MAAM,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAA;;AAyCjD,QAAA,IAAA,CAAA,gBAAgB,GAAqB,MAAM,CAAC;AAoB5C;;;;;;;;;AASG;AAEH,QAAA,IAAW,CAAA,WAAA,GAAa,IAAI;AAU5B;;;AAGG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAoE,MAAM;AAyP9E,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACf,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;AAC/B,SAAC;AAED,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,KAAiB,KAAI;;AACnC,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,aAAuC;YACnE,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,0CAAE,QAAQ,CAAC,aAAa,CAAC;gBAAE;AAClD,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAAE;AAC9C,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACrB,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAkB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,YAAA,IAAI,MAAM,CAAC,SAAS,KAAK,gBAAgB,EAAE;gBACvC,KAAK,CAAC,eAAe,EAAE;;AAE3B,YAAA,IAAI,MAAM,CAAC,SAAS,KAAK,iBAAiB,EAAE;gBACxC,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,gBAAA,IAAI,CAAC,cAAc;oBAAE;AACrB,gBAAA,cAAc,CAAC,IAAI,GAAG,KAAK;;AAEnC,SAAC;AAED,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,KAAqD,KAAI;AACvE,YAAA,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI;gBAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;AAC/B,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,OAAO,KAAiB,KAAI;YACxC,KAAK,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc;AACxD,YAAA,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE;AAC7B,gBAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;;iBAC3B;AACH,gBAAA,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;;AAE1C,SAAC;AAED,QAAA,IAAA,CAAA,eAAe,GAAG,OAAO,KAAoB,KAAI;AAC7C,YAAA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;AAC7E,YAAA,IAAI,eAAe;gBAAE;YAErB,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc;AACxD,YAAA,IAAI,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;AACpC,gBAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;;iBAC3B;AACH,gBAAA,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC;;AAEpD,SAAC;AA0JJ;;;IAhcG,iBAAiB,GAAA;QACb,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,gBAAgB,EAAE;;IAG3B,gBAAgB,GAAA;QACZ,IAAI,CAAC,4BAA4B,EAAE;AACnC,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;QAClD,IAAI,CAAC,WAAW,EAAE;;AAItB,IAAA,yBAAyB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAkC,EAAA;;AAC1E,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;QACxC,IAAI,CAAC,IAAI,EAAE;AACP,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;AAClD,YAAA,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC;;;;;AAO9C;;AAEG;AAEH,IAAA,MAAM,aAAa,GAAA;QACf,OAAO;YACH,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,KAAK;AAClF,gBAAA,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE,IAAI,CAAC,SAAS;AACvB,aAAA,CAAC,CAAC;YACH,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,KAAK;AACrF,gBAAA,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,IAAI,CAAC,SAAS;AACvB,aAAA,CAAC,CAAC;SACN;;AAGL;;;AAGG;AAEH,IAAA,MAAM,YAAY,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE;QACjC,IAAI,CAAC,cAAc,EAAE;;AAGzB;;;AAGG;AAEH,IAAA,MAAM,WAAW,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE;QAChC,IAAI,CAAC,cAAc,EAAE;;AAGzB;;;;;;;;;AASG;IAEH,MAAM,UAAU,CAAC,KAAa,EAAA;;AAC1B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACvC,CAAG,EAAA,IAAI,CAAC,oBAAoB,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CACnD;AACD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAsB,CAAG,EAAA,IAAI,CAAC,cAAc,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CAAC;QAC9G,MAAM,OAAO,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,UAAU,CAAC,aAAa,CAAoB,gBAAgB,CAAC;QACnF,MAAM,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM;AACtC,QAAA,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;YAAE;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;YAC5B,MAAM,gBAAgB,EAAE;;QAE5B,MAAM,CAAC,KAAK,EAAE;QACd,MAAM,gBAAgB,EAAE;;AAG5B;;;;;;;;;;;;;;;AAeG;IAEH,MAAM,gBAAgB,CAAC,KAAa,EAAA;;AAChC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACvC,CAAG,EAAA,IAAI,CAAC,oBAAoB,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CACnD;QACD,MAAM,YAAY,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,UAAU,CAAC,aAAa,CAAoB,uBAAuB,CAAC;QAC/F,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ;YAAE;AAC7C,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;YAC5B,MAAM,gBAAgB,EAAE;;QAE5B,YAAY,CAAC,KAAK,EAAE;QACpB,MAAM,gBAAgB,EAAE;;;;IAO5B,wBAAwB,GAAA;QACpB,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,gBAAgB,GAAA;AACZ,QAAA,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,kBAAkB,CAAC;;IAI5D,gBAAgB,GAAA;QACZ,eAAe,CAAC,IAAI,CAAC;;IAIzB,cAAc,GAAA;QACV,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,mBAAmB,GAAA;QACf,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,WAAW,GAAA;QACP,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,mBAAmB,GAAA;AACf,QAAA,iBAAiB,CAAC,IAAI,EAAE,cAAc,EAAE,kBAAkB,CAAC;;IAI/D,mBAAmB,GAAA;QACf,IAAI,CAAC,4BAA4B,EAAE;;;;AAMvC,IAAA,IAAI,0BAA0B,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,MAAM;;AAG9E,IAAA,IAAI,gBAAgB,GAAA;QAChB,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC;;AAG7D,IAAA,IAAI,iBAAiB,GAAA;QACjB,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACjE,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE;AAC9D,QAAA,MAAM,IAAI,GAAG,IAAI,KAAK,MAAM;AAC5B,QAAA,MAAM,GAAG,GAAG,IAAI,KAAK,KAAK;AAC1B,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,QAAQ;AAChC,QAAA,IAAI,MAAM;AACV,QAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAC/B,YAAA,MAAM,GAAG,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,CAAY,SAAA,EAAA,IAAI,EAAE;;AAE3D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI;AACxB,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;AAChC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI;AAC9B,QAAA,MAAM,SAAS,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,UAAU,GAAG,EAAE;QAE5D,OAAO;YACH,IAAI;YACJ,GAAG;YACH,MAAM;YACN,MAAM;YACN,QAAQ;YACR,YAAY;YACZ,SAAS;YACT,MAAM;SACT;;AAGL,IAAA,qBAAqB,CAAC,IAAA,GAAgB,IAAI,CAAC,WAAW,EAAA;AAClD,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AACnC,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,EAAE;AAC5B,gBAAA,EAAE,CAAC,YAAY,CAAC,sBAAsB,EAAE,EAAE,CAAC;;AACxC,iBAAA,IAAI,EAAE,CAAC,OAAO,KAAK,aAAa,EAAE;AACrC,gBAAA,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC;;AAEtC,SAAC,CAAC;;AAGN,IAAA,UAAU,CAAC,KAAa,EAAA;;AACpB,QAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ;YAAE;AAC7B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACvC,CAAG,EAAA,IAAI,CAAC,oBAAoB,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CACnD;AACD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAsB,CAAG,EAAA,IAAI,CAAC,cAAc,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CAAC;QAC9G,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,CAAC,aAAa,CAAoB,gBAAgB,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AAC5E,QAAA,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,KAAK,EAAE;;IAGnB,MAAM,kBAAkB,CAAC,KAAiC,EAAA;QACtD,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;AACxD,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;;IAG/B,cAAc,GAAA;AACV,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,cAAc,CAAC,KAAK,EAAE;QACtB,cAAc,CAAC,KAAK,EAAE;QACtB,cAAc,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;;IAuDzD,4BAA4B,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;;YAE7B,IAAI,CAAC,sBAAsB,EAAE;YAC7B;;QAGJ,IAAI,CAAC,uBAAuB;aACvB,IAAI,CAAC,IAAI,IAAG;YACT,IAAI,CAAC,sBAAsB,EAAE;AAC7B,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC;AACzC,aAAC,CAAC;AACN,SAAC;aACA,KAAK,CAAC,GAAG,IAAG;YACT,IAAI,CAAC,sBAAsB,EAAE;AAC7B,YAAA,MAAM,GAAG;AACb,SAAC,CAAC;;IAGV,sBAAsB,GAAA;QAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;AACjG,QAAA,gBAAgB,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;;IAG9E,WAAW,GAAA;QACP,QACI,IAAI,CAAC,IAAI;AACT,YAAA,MAAM,CAAC,cAAc;YACrB,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;;IAIlH,uBAAuB,GAAA;QACnB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,IAAG;AACnC,YAAA,OAAO,KAAK,CAAC,GAAG,CAAC,YAAY,IAAG;AAC5B,gBAAA,IAAI,SAAS;AACb,gBAAA,IAAI,WAAW;AACf,gBAAA,IAAI,YAAY,CAAC,WAAW,CAAC,EAAE;oBAC3B,WAAW,GAAG,EAAE;oBAChB,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC;;AAG5E,gBAAA,QAAQ,YAAY,CAAC,MAAM;AACvB,oBAAA,KAAK,YAAY;AACb,wBAAA,SAAS,GAAG,YAAA;;AACR,4BAAA,OAAO,MAAA,CAAA,EAAA,GAAA,MAAM,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,MACpC,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,YAAY,CAAC,WAAW,EACxB,YAAY,CAAC,UAAU,EACvB,WAAW,CACd;AACL,yBAAC;wBACD;AACJ,oBAAA,KAAK,eAAe;AAChB,wBAAA,SAAS,GAAG,YAAA;;AACR,4BAAA,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,cAAc,0CAAE,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EACvC,CAAG,EAAA,YAAY,CAAC,WAAW,CAAI,CAAA,EAAA,YAAY,CAAC,UAAU,CAAA,CAAE,EACxD,WAAW,EACX,SAAS,EACT,IAAI,CACP;AACL,yBAAC;wBACD;;gBAGR,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC;gBAClE,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC;AAC7D,gBAAA,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC;AACnD,gBAAA,eAAe,CAAC,WAAW,GAAG,YAAY,CAAC,SAAS;AACpD,gBAAA,eAAe,CAAC,OAAO,GAAG,SAAS;AAEnC,gBAAA,OAAO,eAAe;AAC1B,aAAC,CAAC;AACN,SAAC,CAAC;;;;IAMN,MAAM,GAAA;AACF,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB;QACvC,QACI,wEACI,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAA,SAAA,EACvB,mBAAmB,EAAA,EAE3B,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAE,QAAQ,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,YAAY,EAAE,CAAA,EAAG,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAE,CAAA,EAC1C,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,EACjE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAC,MAAM,EACX,SAAA,EAAA,gBAAgB,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,GAAG,CAAC,mCAAmC,EAAE,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC,EAEvF,EAAA,IAAI,CAAC,gBAAgB,IAClB,CACY,CAAA,KAAA,EAAA,EAAA,SAAA,EAAA,iBAAiB,EACzB,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,EAAE,GAAG,QAAQ,EAAA,EAEtC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,CACrB,KAEN,CAAA,CAAC,QAAQ,EAAA,IAAA,EACJ,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,KAC1B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,IAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAQ,CAC9D,EACA,IAAI,CAAC,IAAI,GAAG,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GAAG,GAAG,CACxC,CACd,CACI,EACT,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,YAAA,EACH,IAAI,CAAC,gBAAgB,EACjC,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAG,CAAA,EAC3B,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,EAAE,EAAC,aAAa,EAChB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,CAAC,iCAAiC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAA,WAAA,EAAA,IAAA,EAAA,EAGrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACK,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,GAAG,CACrB,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Dropdown","__stencil_proxyCustomElement"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n::slotted([slot=\"popover-top\"]) {\n    padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n    border-bottom: var-list(--tct-dropdown-slot-border-top);\n}\n\n::slotted([slot=\"popover-bottom\"]) {\n    padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n    border-top: var-list(--tct-dropdown-slot-border-bottom);\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n    --tct-popover-padding: #{var-list(--tct-dropdown-content-padding)};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n/**\n * @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.\n */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\n    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\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     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\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    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\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({ mutable: true })\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;\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     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this._alignOptionStructure();\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (!open) {\n            this.popoverElement?.scrollContainerTo({ top: 0 });\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Gets the outerHTML for top/bottom slotted elements.\n     */\n    @Method()\n    async _getSlotsHtml() {\n        return [\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({\n                slot: 'top',\n                html: slot.outerHTML,\n            })),\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({\n                slot: 'bottom',\n                html: slot.outerHTML,\n            })),\n        ];\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\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 dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or\n     * [Option](https://tecton.q2developer.com/design-system/q2-option/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, or the dropdown is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        const target = item ? itemBtn : option;\n        if (!target || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        target.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * This method only applies to the deprecated `q2-dropdown-item` element, since\n     * `q2-option` (its replacement) does not support the `removable` attribute.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * If the dropdown is disabled, this method does nothing.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _alignOptionStructure(elem: Element = this.hostElement) {\n        Array.from(elem.children).forEach(el => {\n            if (el.tagName === 'Q2-OPTION') {\n                el.setAttribute('_hide-selected-block', '');\n            } else if (el.tagName === 'Q2-OPTGROUP') {\n                this._alignOptionStructure(el);\n            }\n        });\n    }\n\n    _clickItem(value: string) {\n        if (!value || this.disabled) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n        option?.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\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    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    tabIndex={0}\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <slot name=\"popover-top\" />\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <slot name=\"popover-bottom\" />\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-editable-field.js.map

@@ -1 +1 @@
-{"file":"q2-editable-field.js","mappings":"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","names":["Q2EditableField","__stencil_proxyCustomElement"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n    .begin-edit,\n    .save-edit,\n    .cancel-edit {\n        flex: 0 0 44px;\n        --tct-btn-icon-hover-background: #{var-list(\n                --tct-editable-field-btn-hover-background,\n                --app-gray-l3,\n                #f2f2f2\n            )};\n        --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n    }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display: block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport type { EventDetail, FormatterValueObject } from 'q2-tecton-common/lib/types/elements';\nimport { Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\n\n/**\n * @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n */\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    // #region Own Properties\n\n    cancelBtnElement: HTMLQ2BtnElement;\n    defaultValue: string;\n    editBtnElement: HTMLQ2BtnElement;\n    innerValue: string;\n    inputElement: HTMLQ2InputElement;\n    saveBtnElement: HTMLQ2BtnElement;\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    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** Disables the edit button and field. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true })\n    editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true })\n    persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true })\n    truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true })\n    type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *@info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     * @deprecated Use 'tctInput' instead\n     */\n    @Event()\n    input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *\n     * @info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     */\n    @Event()\n    tctChange: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event()\n    tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n\n        this.defaultValue = this.value;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        queueMicrotask(() => {\n            switch (event.detail.name) {\n                case 'save':\n                    if (this.hasErrors) {\n                        this.inputElement.focus();\n                        break;\n                    }\n                    this.value = event.detail.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'cancel':\n                    this.inputElement.value = this.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'edit':\n                    this.editing = event.detail.editing;\n                    break;\n            }\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    @Listen('tctFormatted')\n    inputFormatted(event: CustomEvent<FormatterValueObject>) {\n        this.formattedValue = event.detail.formattedValue;\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, hasErrors } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasErrors(): boolean {\n        return Array.isArray(this.errors) && !!this.errors.length;\n    }\n\n    get hasHints(): boolean {\n        return Array.isArray(this.hints) && !!this.hints.length;\n    }\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    cancelClick = (event?: CustomEvent) => {\n        event?.stopPropagation();\n        mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    editClick = (event: CustomEvent) => {\n        event?.stopPropagation();\n        mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n    };\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={this.hasHints ? this.hints : undefined}\n                    errors={this.hasErrors ? this.errors : undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onChange={e => e.stopImmediatePropagation()}\n                    onInput={e => e.stopImmediatePropagation()}\n                    onTctInput={this.inputInput}\n                    onTctChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={e => e.stopImmediatePropagation()}\n                    onTctClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={e => e.stopImmediatePropagation()}\n                    onTctClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            <q2-btn\n                                ref={el => (this.editBtnElement = el)}\n                                class=\"begin-edit\"\n                                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                                hide-label\n                                disabled={this.disabled}\n                                test-id=\"editButton\"\n                                onClick={e => e.stopImmediatePropagation()}\n                                onTctClick={this.editClick}\n                            >\n                                <q2-icon type=\"edit\" />\n                            </q2-btn>\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                <q2-btn\n                    ref={el => (this.editBtnElement = el)}\n                    class=\"begin-edit\"\n                    label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                    hide-label\n                    disabled={this.disabled}\n                    test-id=\"editButton\"\n                    onClick={e => e.stopImmediatePropagation()}\n                    onTctClick={this.editClick}\n                >\n                    <q2-icon type=\"edit\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    inputInput = (event: Q2InputCustomEvent<EventDetail> & InputEvent) => {\n        event.stopPropagation();\n        mirrorEmit(this, ['input', 'tctInput'], event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    saveClick = (event?: CustomEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        mirrorEmit(this, ['change', 'tctChange'], {\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-editable-field.js","mappings":"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","names":["Q2EditableField","__stencil_proxyCustomElement"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n    .begin-edit,\n    .save-edit,\n    .cancel-edit {\n        flex: 0 0 44px;\n        --tct-btn-icon-hover-background: #{var-list(\n                --tct-editable-field-btn-hover-background,\n                --app-gray-l3,\n                #f2f2f2\n            )};\n        --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n    }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display: block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport type { EventDetail, FormatterValueObject } from 'q2-tecton-common/lib/types/elements';\nimport { Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\n\n/**\n * @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n */\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    // #region Own Properties\n\n    cancelBtnElement: HTMLQ2BtnElement;\n    defaultValue: string;\n    editBtnElement: HTMLQ2BtnElement;\n    innerValue: string;\n    inputElement: HTMLQ2InputElement;\n    saveBtnElement: HTMLQ2BtnElement;\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    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** Disables the edit button and field. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true })\n    editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true })\n    persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true })\n    truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true })\n    type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *@info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     * @deprecated Use 'tctInput' instead\n     */\n    @Event()\n    input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *\n     * @info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     */\n    @Event()\n    tctChange: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event()\n    tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n\n        this.defaultValue = this.value;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        queueMicrotask(() => {\n            switch (event.detail.name) {\n                case 'save':\n                    if (this.hasErrors) {\n                        this.inputElement.focus();\n                        break;\n                    }\n                    this.value = event.detail.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'cancel':\n                    this.inputElement.value = this.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'edit':\n                    this.editing = event.detail.editing;\n                    break;\n            }\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    @Listen('tctFormatted')\n    inputFormatted(event: CustomEvent<FormatterValueObject>) {\n        this.formattedValue = event.detail.formattedValue;\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, hasErrors } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasErrors(): boolean {\n        return Array.isArray(this.errors) && !!this.errors.length;\n    }\n\n    get hasHints(): boolean {\n        return Array.isArray(this.hints) && !!this.hints.length;\n    }\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    cancelClick = (event?: CustomEvent) => {\n        event?.stopPropagation();\n        mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    editClick = (event: CustomEvent) => {\n        event?.stopPropagation();\n        mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n    };\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={this.hasHints ? this.hints : undefined}\n                    errors={this.hasErrors ? this.errors : undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onChange={e => e.stopImmediatePropagation()}\n                    onInput={e => e.stopImmediatePropagation()}\n                    onTctInput={this.inputInput}\n                    onTctChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={e => e.stopImmediatePropagation()}\n                    onTctClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={e => e.stopImmediatePropagation()}\n                    onTctClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            <q2-btn\n                                ref={el => (this.editBtnElement = el)}\n                                class=\"begin-edit\"\n                                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                                hide-label\n                                disabled={this.disabled}\n                                test-id=\"editButton\"\n                                onClick={e => e.stopImmediatePropagation()}\n                                onTctClick={this.editClick}\n                            >\n                                <q2-icon type=\"edit\" />\n                            </q2-btn>\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                <q2-btn\n                    ref={el => (this.editBtnElement = el)}\n                    class=\"begin-edit\"\n                    label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                    hide-label\n                    disabled={this.disabled}\n                    test-id=\"editButton\"\n                    onClick={e => e.stopImmediatePropagation()}\n                    onTctClick={this.editClick}\n                >\n                    <q2-icon type=\"edit\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    inputInput = (event: Q2InputCustomEvent<EventDetail> & InputEvent) => {\n        event.stopPropagation();\n        mirrorEmit(this, ['input', 'tctInput'], event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    saveClick = (event?: CustomEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        mirrorEmit(this, ['change', 'tctChange'], {\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-example.js

@@ -127,7 +127,7 @@ const Q2Example$1 = /*@__PURE__*/ proxyCustomElement(class Q2Example extends HTM
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: '6ffb94ccdcae5f6a0762f80b2d022997345f5cc0', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: '7878622b0f2a455617e109b9aa32290bffc00a92', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/q2-file-picker.js.map

@@ -1 +1 @@
-{"file":"q2-file-picker.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,kpQAAkpQ;;MCoC7pQA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;;AAQY,QAAA,IAAM,CAAA,MAAA,GAAgB,EAAE,YAAY,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;AAIlE,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;;AAYxB,QAAA,IAAiB,CAAA,iBAAA,GAAY,KAAK;AAGlC,QAAA,IAAc,CAAA,cAAA,GAAoB,EAAE;AAGpC,QAAA,IAAqB,CAAA,qBAAA,GAAY,KAAK;AAGtC,QAAA,IAAc,CAAA,cAAA,GAAG,CAAC;;;AAKlB;;AAEG;AAEH,QAAA,IAAU,CAAA,UAAA,GAA0C,QAAQ;AAe5D;;;;;AAKG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAsB,EAAE;AASjC;;AAEG;AAGH,QAAA,IAAQ,CAAA,QAAA,GAAW,QAAQ;AAE3B;;AAEG;AAEH,QAAA,IAAW,CAAA,WAAA,GAAW,QAAQ;AAE9B;;;;;;;;;;;AAWG;AAEH,QAAA,IAAM,CAAA,MAAA,GAAsB,EAAE;AAyB9B;;;AAGG;AAEH,QAAA,IAAO,CAAA,OAAA,GAA6B,QAAQ;AAwG5C,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAY,KAAI;AAC3B,YAAA,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AACpB,YAAA,IAAI,CAAC,qBAAqB,GAAG,KAAK;AACtC,SAAC;AAyID,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,CAAY,KAAI;YAChC,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AACpB,YAAA,IAAI,CAAC,qBAAqB,GAAG,KAAK;AAClC,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC;YACrD,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC;AAEvD,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;AAC5B,YAAA,IAAI,CAAC,MAAM,GAAG,WAAW;AAC7B,SAAC;AAED,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,CAAQ,KAAI;AAC7B,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;YACtE,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC;;AAEvD,YAAA,IAAI,CAAC,iBAAsC,CAAC,KAAK,GAAG,EAAE;AAEvD,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;AAC5B,YAAA,IAAI,CAAC,MAAM,GAAG,WAAW;AAC7B,SAAC;AAED,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,CAAY,KAAI;YACjC,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AACpB,YAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI;AACrC,SAAC;;;AASD,QAAA,IAAM,CAAA,MAAA,GAAG,MAAK;AACV,YAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AACzB,YAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACnB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,MAClC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACf,IAAI,CAAC,QAAQ,KACV,aACI,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,YAAY,EACZ,SAAA,EAAA,OAAO,IAEd,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,mBAAmB,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAA,CAAG,GAAG,EAAE,CACnF,CACX,EACA,IAAI,CAAC,cAAc,KAChB,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,aAAa,EAAA,SAAA,EACR,aAAa,EAEpB,EAAA,CAAC,CAAC,IAAI,CAAC,WAAW,IACf,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IACrB,IAAI,CAAC,yBAAyB,IAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,CAAG,KAE3B,EAAE,CACL,CACC,CACT,CACC,CACT,EAEA,CAAC,IAAI,CAAC,OAAO,KAAK,aAAa,KAC5B,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAClC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,MAAA,GAAA,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,EACxC,SAAA,EAAA,WAAW,EAElB,EAAA,CAAC,IAAI,CAAC,iBAAiB,KACpB,EAAC,QAAQ,EAAA,IAAA,EACL,CAAY,CAAA,YAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAc,CAAA,EACzC,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAA,EAAE,GAAG,CAAC,6CAA6C,CAAC,CAAK,CAC3E,CACd,MACG,EAAC,QAAQ,EAAA,IAAA,EACL,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAW,CAAA,EACjC,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACrB,CAAA,CAAA,SAAA,EAAA,EACI,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,GAAG,CAAC,kCAAkC,CAAC,EAC9C,UAAU,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAC1C,OAAO,EAAC,QAAQ,EACR,SAAA,EAAA,aAAa,EACrB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,oBAAoB,EAC3B,CAAA,EACD,GAAG,CAAC,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAClE,CACG,CACd,CACC,CACT,MACG,WACI,KAAK,EAAC,QAAQ,EAAA,SAAA,EACN,QAAQ,EAAA,EAEhB,CAAA,CAAA,QAAA,EAAA,EACI,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAC5C,MAAM,EAAC,kBAAkB,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EACvC,IAAI,EAAE,IAAI,CAAC,gBAAgB,aACnB,eAAe,EAAA,EAEvB,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAW,CAAA,EACpC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,GAAG,CAAC,uCAAuC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAQ,CACvE,CACP,CACT,EACD,CAAA,CAAA,OAAA,EAAA,EAAA,kBAAA,EACsB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,aAAa,KAAK,SAAS,EACpE,KAAK,EAAC,IAAI,EACV,EAAE,EAAC,YAAY,EACf,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,MAAA,GAAA,EAAE,GAAI,IAAI,CAAC,iBAAiB,CAAC,EAClE,IAAI,EAAC,MAAM,EACH,SAAA,EAAA,YAAY,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EACR,IAAA,EAAA,QAAQ,EAAE,EAAE,EACd,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,KACzB,CACI,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9C,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACnB,cAAc,EAAE,IAAI,CAAC,sCAAsC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAE3E,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,EAChB,IAAI,CAAC,MAAM,KAAK,cAAc;gBAC/B,IAAI,CAAC,MAAM,KAAK,iBAAiB;gBACjC,IAAI,CAAC,MAAM,KAAK,QAAQ;AACxB,gBAAA,IAAI,CAAC,MAAM,KAAK,sBAAsB,IAClC,CAAA,CAAA,SAAA,EAAA,EACI,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACL,CAAA,IACX,IAAI,CAAC,MAAM,KAAK,aAAa,IAC7B,CAAA,CAAA,YAAA,EAAA,EACI,KAAK,EAAC,mBAAmB,EAEf,0BAAA,EAAA,IAAA,EAAA,CAAA,KAEd,CAAA,CAAA,SAAA,EAAA,EACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACP,CAAA,CACd,CACC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAO,EACzC,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EAEV,EAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAClC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EACd,CAAA,CAAA,QAAA,EAAA,EACI,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAC,cAAc,EACV,YAAA,EAAA,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,OAAO,EAAA,CAAW,CAC3B,CACP,CACA,CACb,CAAC,CACI,CACR,CACJ;AAEd,SAAC;AAGJ;AA3cG;;;;;;;;;;;;;AAaG;AACH,IAAA,IACI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM;;IAGtB,IAAI,KAAK,CAAC,CAAC,EAAA;AACP,QAAA,OAAO,CAAC,KAAK,CAAC,8DAA8D,CAAC;;;;AAmCjF,IAAA,cAAc,CAAC,QAA2B,EAAA;AACtC,QAAA,QAAQ,CAAC,OAAO,CAAC,UAAU,IAAG;YAC1B,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC;AACjG,YAAA,IAAI,uBAAuB,GAAG,EAAE,EAAE;AAC9B,gBAAA,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3E,IAAI,CAAC,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC;;iBAC9F;gBACH,MAAM,0BAA0B,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAC5D,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAC7C;AACD,gBAAA,IAAI,0BAA0B,GAAG,EAAE,EAAE;oBACjC,IAAI,CAAC,cAAc,CAAC,0BAA0B,CAAC,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM;oBAC1E,IAAI,UAAU,CAAC,MAAM,KAAK,QAAQ,IAAI,UAAU,CAAC,OAAO,EAAE;wBACtD,IAAI,CAAC,cAAc,CAAC,0BAA0B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO;;oBAEhF,IAAI,CAAC,+BAA+B,EAAE;;;AAGlD,SAAC,CAAC;;;;AAMN,IAAA,IAAI,gBAAgB,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,UAAU,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU;;AAGnE,IAAA,IAAI,eAAe,GAAA;AACf,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC;AAC7B,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;AAC5B,YAAA,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC;;AAGzC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC;;AAGtC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;;AAG9G,IAAA,IAAI,cAAc,GAAA;QACd,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,yBAAyB;;AAG/D,IAAA,IAAI,yBAAyB,GAAA;QACzB,OAAO,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC;;AAGjD,IAAA,IAAI,QAAQ,GAAA;QACR,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,mBAAmB;;AAGnD,IAAA,IAAI,mBAAmB,GAAA;QACnB,OAAO,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;;AAG3C,IAAA,gBAAgB,CAAC,aAAqB,EAAA;QAClC,MAAM,YAAY,GAAG,EAAE;QACvB,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,0BAA0B,CAAC,aAAa,CAAC,CAAC;QACpE,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,CAAC;QACnE,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC;AACvE,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,YAAY,CAAC;AAEvC,QAAA,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5B,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;;aAC3B;AACH,YAAA,IAAI,CAAC,WAAW,GAAG,aAAa;;AAGpC,QAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE;;AAQtD,IAAA,YAAY,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;;IAG3B,+BAA+B,GAAA;QAC3B,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,aAAa,CAAC,EAAE;AACnG,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;;;AAItC,IAAA,UAAU,CAAC,WAAwB,EAAA;QAC/B,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;AAC1D,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;;AAGpC,IAAA,0BAA0B,CAAC,KAAa,EAAA;QACpC,MAAM,YAAY,GAAG,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,YAAY;AAEzD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACjB,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE;YAC9D,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAC9C,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;;AAE3D,SAAC,CAAC;;AAGF,QAAA,YAAY,CAAC,OAAO,CAAC,WAAW,IAAG;YAC/B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC;AAC7C,YAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACZ,gBAAA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;;AAE9B,SAAC,CAAC;AAEF,QAAA,OAAO,YAAY;;AAGvB,IAAA,6BAA6B,CAAC,KAAa,EAAA;QACvC,MAAM,sBAAsB,GAAG,EAAE;AAEjC,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ;AAAE,YAAA,OAAO,sBAAsB;QAE7D,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;YAC9B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC/C,YAAA,WAAW,CAAC,OAAO,CAAC,IAAI,IAAG;gBACvB,sBAAsB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,sBAAsB,EAAE,CAAC;AACzE,aAAC,CAAC;;AAGN,QAAA,OAAO,sBAAsB;;AAGjC,IAAA,yBAAyB,CAAC,KAAa,EAAA;QACnC,MAAM,kBAAkB,GAAG,EAAE;AAE7B,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ;AAAE,YAAA,OAAO,kBAAkB;AAE5D,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;YACjB,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;gBAC9B,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;;AAEpE,SAAC,CAAC;;AAGF,QAAA,kBAAkB,CAAC,OAAO,CAAC,YAAY,IAAG;YACtC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC;AAC9C,YAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACZ,gBAAA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;;AAE9B,SAAC,CAAC;AAEF,QAAA,OAAO,kBAAkB;;IAG7B,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;;AAG7B,IAAA,sCAAsC,CAAC,QAAgB,EAAA;QACnD,OAAO,CAAC,CAAiB,KAAI;AACzB,YAAA,IAAI,CAAC,CAAC,aAAa,KAAK,uBAAuB,EAAE;gBAC7C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;;AAE7F,SAAC;;AAGL,IAAA,+BAA+B,CAAC,QAAgB,EAAA;AAC5C,QAAA,OAAO,MAAK;YACR,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YAClF,IAAI,YAAY,EAAE;AACd,gBAAA,YAAY,CAAC,WAAW,GAAG,IAAI;gBAC/B,IAAI,CAAC,aAAa,EAAE;;AAE5B,SAAC;;AAGL,IAAA,sBAAsB,CAAC,aAA4B,EAAA;QAC/C,MAAM,aAAa,GAAG,CAAA,QAAA,EAAW,aAAa,CAAC,MAAM,KAAK,UAAU,GAAG,YAAY,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,wBAAwB,CAAC,aAAa,CAAC,CAAA,CAAE;QACzI,OAAO,CAAA,sBAAA,EAAyB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,EAAK,aAAa,CAAA,CAAA,CAAG;;AAGhF,IAAA,kBAAkB,CAAC,QAAgB,EAAA;AAC/B,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC;QAC7B,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;QAClF,IAAI,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,WAAW,EAAE;AAC3B,YAAA,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;;aACrB;AACH,YAAA,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;;AAE3B,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,wBAAwB,CAAC,aAA4B,EAAA;AACjD,QAAA,QAAQ,aAAa,CAAC,MAAM;AACxB,YAAA,KAAK,cAAc;AACf,gBAAA,OAAO,GAAG,CAAC,+CAA+C,CAAC;AAC/D,YAAA,KAAK,iBAAiB;AAClB,gBAAA,OAAO,GAAG,CAAC,4CAA4C,CAAC;AAC5D,YAAA,KAAK,sBAAsB;AACvB,gBAAA,OAAO,GAAG,CAAC,6CAA6C,CAAC;AAC7D,YAAA,KAAK,aAAa;AACd,gBAAA,OAAO,GAAG,CAAC,6CAA6C,CAAC;AAC7D,YAAA,KAAK,QAAQ;gBACT,IAAI,aAAa,CAAC,OAAO;AAAE,oBAAA,OAAO,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC;AAC5D,gBAAA,OAAO,GAAG,CAAC,wCAAwC,CAAC;AACxD,YAAA,KAAK,UAAU;AACf,YAAA;gBACI,OAAO,GAAG,CAAC,oCAAoC,EAAE;AAC7C,oBAAA,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;AACvD,iBAAA,CAAC;;;IA+Bd,iBAAiB,GAAA;QACb,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2FilePicker","__stencil_proxyCustomElement"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    --tct-link-font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n    --tct-icon-stroke-secondary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n    min-width: var(--tct-file-picker-drop-zone-min-width, 320px);\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.drop-zone-disabled {\n    opacity: var-list(--tct-file-picker-drop-zone-disabled-opacity, --app-disabled-opacity, 0.4);\n    cursor: not-allowed;\n}\n\n.fade-in {\n    animation-fill-mode: both;\n    animation-play-state: running;\n    animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n    animation: shrinkToCenterFadeOut 0.1s ease-out;\n    animation-play-state: running;\n    animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: var(--tct-file-picker-item-close-btn-border-radius, 4px);\n    --tct-btn-neutral-text-active-font-color: #{var-list(\n            --tct-file-picker-item-close-btn-active-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-hover-focus-ring-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-icon-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n            --tct-file-picker-item-border-color,\n            --t-gray-8,\n            #808080\n        )};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-info {\n    @include line-clamp(1);\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n    }\n}\n\n[slot='action'] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\nimport type { ValidFileStatus, FilesObject } from 'q2-tecton-common/lib/types/elements';\n\ntype DisplayedFile = {\n    file: File;\n    message?: string;\n    status: ValidFileStatusType | InvalidFileStatusType;\n    toBeRemoved?: boolean;\n};\ntype ValidFileStatusType = 'in-progress' | 'failed' | 'uploaded';\ntype InvalidFileStatusType = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit';\n\n/**\n * @name File Picker\n * @category Forms\n * @summary Use for uploading files via browse dialog or drag-and-drop.\n * @slot label - An optional slot to display a custom label.\n * @slot description - An optional slot to display a custom description.\n */\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    private _value: FilesObject = { invalidFiles: [], validFiles: [] };\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: DisplayedFile[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The size of the browse button.\n     */\n    @Prop({ reflect: true })\n    buttonSize: 'none' | 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Disables the file picker, preventing user interaction.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of `ValidFileStatus` objects representing the upload status of\n     * files. Each `ValidFileStatus` object contains the following properties:\n     * - `name`: The file name.\n     * - `status`: The upload status, either `\"failed\"` or `\"uploaded\"`.\n     * - `message`: (Optional) A custom status message, used only when `status`\n     *   is `\"failed\"`. This allows developers to provide more detail about\n     *   upload failures while ensuring all other file status messages remain\n     *   consistent with approved design/UX standards. Custom failure messages\n     *   are limited to a single line.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    status: ValidFileStatus[] = [];\n\n    /**\n     * Returns an object representing the selected files with two properties:\n     * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n     *   files that failed validation.\n     * - `validFiles`: An array of `File` objects representing files that passed\n     *   validation.\n     *\n     * Each `InvalidFileStatus` object includes the following properties:\n     * - `file`: The `File` object.\n     * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n     *   type), `\"over-size-limit\"` (file exceeds the size limit), or\n     *   `\"over-max-files-limit\"` (total exceeds the max files limit).\n     * @readonly\n     */\n    @Prop()\n    get value() {\n        return this._value;\n    }\n\n    set value(_) {\n        console.error('Setting the value of this component directly is not allowed.');\n    }\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Custom event dispatched when the user selects files. The event detail\n     * contains an object representing the selected files with two\n     * properties:\n     * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n     *   files that failed validation.\n     * - `validFiles`: An array of `File` objects representing files that passed\n     *   validation.\n     *\n     * Each `InvalidFileStatus` object includes the following properties:\n     * - `file`: The `File` object.\n     * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n     *   type), `\"over-size-limit\"` (file exceeds the size limit), or\n     *   `\"over-max-files-limit\"` (total exceeds the max files limit).\n     */\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: ValidFileStatus[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    if (statusItem.status === 'failed' && statusItem.message) {\n                        this.displayedFiles[matchingDisplayedFileIndex].message = statusItem.message;\n                    }\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actualButtonSize() {\n        return this.buttonSize === 'none' ? undefined : this.buttonSize;\n    }\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        if (this.disabled) {\n            classes.push('drop-zone-disabled');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemButtonLabel(displayedFile: DisplayedFile) {\n        const statusMessage = `Status, ${displayedFile.status === 'uploaded' ? 'uploaded. ' : ''}${this.getFileItemStatusMessage(displayedFile)}`;\n        return `Dismiss file item for ${displayedFile.file.name}. ${statusMessage}.`;\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(displayedFile: DisplayedFile) {\n        switch (displayedFile.status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                if (displayedFile.message) return loc(displayedFile.message);\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [\n                    (displayedFile.file.size / (1000 * 1000)).toFixed(2),\n                ]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        if (this.disabled) return;\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this._value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n        // Reset the input value to allow re-selection of the same file\n        (this.browseButtonInput as HTMLInputElement).value = '';\n\n        this.emitChange(filesObject);\n        this._value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        if (this.disabled) return;\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        const { disabled } = this;\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        class=\"browse-link\"\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                        disabled={disabled}\n                                        href=\"javascript:void(0)\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={disabled || this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size={this.actualButtonSize}\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    disabled={disabled}\n                    multiple\n                    tabIndex={-1}\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"decorator\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading\n                                            class=\"file-item-loading\"\n                                            hide-from-screen-readers\n                                        ></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div\n                                    class=\"file-item-info\"\n                                    slot=\"body\"\n                                >\n                                    {this.getFileItemStatusMessage(file)}\n                                </div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        hide-label=\"true\"\n                                        label={this.getFileItemButtonLabel(file)}\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                        disabled={disabled}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-file-picker.js","mappings":"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","names":["Q2FilePicker","__stencil_proxyCustomElement"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n@import './variables';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    --tct-link-font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n    --tct-icon-stroke-secondary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n    min-width: var(--tct-file-picker-drop-zone-min-width, 320px);\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.drop-zone-disabled {\n    opacity: var-list(--tct-file-picker-drop-zone-disabled-opacity, --app-disabled-opacity, 0.4);\n    cursor: not-allowed;\n}\n\n.fade-in {\n    animation-fill-mode: both;\n    animation-play-state: running;\n    animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n    animation: shrinkToCenterFadeOut 0.1s ease-out;\n    animation-play-state: running;\n    animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: var(--tct-file-picker-item-close-btn-border-radius, 4px);\n    --tct-btn-neutral-text-active-font-color: #{var-list(\n            --tct-file-picker-item-close-btn-active-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-hover-focus-ring-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-icon-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n            --tct-file-picker-item-border-color,\n            --t-gray-8,\n            #808080\n        )};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-info {\n    @include line-clamp(1);\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n    }\n}\n\n[slot='action'] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\nimport type { ValidFileStatus, FilesObject } from 'q2-tecton-common/lib/types/elements';\n\ntype DisplayedFile = {\n    file: File;\n    message?: string;\n    status: ValidFileStatusType | InvalidFileStatusType;\n    toBeRemoved?: boolean;\n};\ntype ValidFileStatusType = 'in-progress' | 'failed' | 'uploaded';\ntype InvalidFileStatusType = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit';\n\n/**\n * @name File Picker\n * @category Forms\n * @summary Use for uploading files via browse dialog or drag-and-drop.\n * @slot label - An optional slot to display a custom label.\n * @slot description - An optional slot to display a custom description.\n */\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    private _value: FilesObject = { invalidFiles: [], validFiles: [] };\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: DisplayedFile[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The size of the browse button.\n     */\n    @Prop({ reflect: true })\n    buttonSize: 'none' | 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Disables the file picker, preventing user interaction.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of `ValidFileStatus` objects representing the upload status of\n     * files. Each `ValidFileStatus` object contains the following properties:\n     * - `name`: The file name.\n     * - `status`: The upload status, either `\"failed\"` or `\"uploaded\"`.\n     * - `message`: (Optional) A custom status message, used only when `status`\n     *   is `\"failed\"`. This allows developers to provide more detail about\n     *   upload failures while ensuring all other file status messages remain\n     *   consistent with approved design/UX standards. Custom failure messages\n     *   are limited to a single line.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    status: ValidFileStatus[] = [];\n\n    /**\n     * Returns an object representing the selected files with two properties:\n     * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n     *   files that failed validation.\n     * - `validFiles`: An array of `File` objects representing files that passed\n     *   validation.\n     *\n     * Each `InvalidFileStatus` object includes the following properties:\n     * - `file`: The `File` object.\n     * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n     *   type), `\"over-size-limit\"` (file exceeds the size limit), or\n     *   `\"over-max-files-limit\"` (total exceeds the max files limit).\n     * @readonly\n     */\n    @Prop()\n    get value() {\n        return this._value;\n    }\n\n    set value(_) {\n        console.error('Setting the value of this component directly is not allowed.');\n    }\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Custom event dispatched when the user selects files. The event detail\n     * contains an object representing the selected files with two\n     * properties:\n     * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n     *   files that failed validation.\n     * - `validFiles`: An array of `File` objects representing files that passed\n     *   validation.\n     *\n     * Each `InvalidFileStatus` object includes the following properties:\n     * - `file`: The `File` object.\n     * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n     *   type), `\"over-size-limit\"` (file exceeds the size limit), or\n     *   `\"over-max-files-limit\"` (total exceeds the max files limit).\n     */\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: ValidFileStatus[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    if (statusItem.status === 'failed' && statusItem.message) {\n                        this.displayedFiles[matchingDisplayedFileIndex].message = statusItem.message;\n                    }\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actualButtonSize() {\n        return this.buttonSize === 'none' ? undefined : this.buttonSize;\n    }\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        if (this.disabled) {\n            classes.push('drop-zone-disabled');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemButtonLabel(displayedFile: DisplayedFile) {\n        const statusMessage = `Status, ${displayedFile.status === 'uploaded' ? 'uploaded. ' : ''}${this.getFileItemStatusMessage(displayedFile)}`;\n        return `Dismiss file item for ${displayedFile.file.name}. ${statusMessage}.`;\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(displayedFile: DisplayedFile) {\n        switch (displayedFile.status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                if (displayedFile.message) return loc(displayedFile.message);\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [\n                    (displayedFile.file.size / (1000 * 1000)).toFixed(2),\n                ]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        if (this.disabled) return;\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this._value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n        // Reset the input value to allow re-selection of the same file\n        (this.browseButtonInput as HTMLInputElement).value = '';\n\n        this.emitChange(filesObject);\n        this._value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        if (this.disabled) return;\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        const { disabled } = this;\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        class=\"browse-link\"\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                        disabled={disabled}\n                                        href=\"javascript:void(0)\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={disabled || this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size={this.actualButtonSize}\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    disabled={disabled}\n                    multiple\n                    tabIndex={-1}\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"decorator\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading\n                                            class=\"file-item-loading\"\n                                            hide-from-screen-readers\n                                        ></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div\n                                    class=\"file-item-info\"\n                                    slot=\"body\"\n                                >\n                                    {this.getFileItemStatusMessage(file)}\n                                </div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        hide-label=\"true\"\n                                        label={this.getFileItemButtonLabel(file)}\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                        disabled={disabled}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-form.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const q2FormCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}.container{--tct-input-margin:var(--comp-spacing);--tct-select-margin:var(--comp-spacing);--tct-calendar-margin:var(--comp-spacing);--tct-file-picker-margin:var(--comp-spacing);--tct-textarea-margin:var(--comp-spacing);--tct-checkbox-group-margin:var(--comp-spacing);--tct-radio-group-margin:var(--comp-spacing)}:host([spacing=none]) .container{--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none) 0)}:host([spacing=compact]) .container{--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact) 0)}:host(:not([spacing]),[spacing=normal]) .container{--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal) 0)}:host([spacing=comfortable]) .container{--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable) 0)}";
+const q2FormCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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([spacing=none]){--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none))}:host([spacing=compact]){--comp-spacing-compact:var(--app-scale-1x, 5px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact))}:host(:not([spacing])),:host([spacing=normal]){--comp-spacing-normal:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal))}:host([spacing=comfortable]){--comp-spacing-comfortable:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable))}.container{--tct-input-margin:0;--tct-select-margin:0;--tct-calendar-margin:0;--tct-file-picker-margin:0;--tct-textarea-margin:0;--tct-checkbox-group-margin:0;--tct-radio-group-margin:0;display:flex;flex-direction:column;gap:var(--comp-spacing)}";
 
 const Q2Form$1 = /*@__PURE__*/ proxyCustomElement(class Q2Form extends HTMLElement {
     constructor() {
@@ -14,7 +14,7 @@ const Q2Form$1 = /*@__PURE__*/ proxyCustomElement(class Q2Form extends HTMLEleme
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6720d1cf81a23420db41de84fce56398ff932018', class: "container" }, h("slot", { key: '48165fa24f2eb15d66fdfa63b6c122c0dc320714' })));
+        return (h("div", { key: 'b01b965b3fc436b4155245fa747e4c8922304114', class: "container" }, h("slot", { key: '039fd27f2a80825f14a6247eb330eac983638389' })));
     }
     static get style() { return q2FormCss; }
 }, [1, "q2-form", {

package/dist/components/q2-form.js.map

@@ -1 +1 @@
-{"file":"q2-form.js","mappings":";;AAAA,MAAM,SAAS,GAAG,onDAAonD;;MCQznDA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AADnB,IAAA,WAAA,GAAA;;;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Form","__stencil_proxyCustomElement"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n    :host([spacing='none']) & {\n        --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n    }\n    :host([spacing='compact']) & {\n        --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n    }\n    :host(:not([spacing]), [spacing='normal']) & {\n        --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n    }\n\n    :host([spacing='comfortable']) & {\n        --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n    }\n\n    --tct-input-margin: var(--comp-spacing);\n    --tct-select-margin: var(--comp-spacing);\n    --tct-calendar-margin: var(--comp-spacing);\n    --tct-file-picker-margin: var(--comp-spacing);\n    --tct-textarea-margin: var(--comp-spacing);\n    --tct-checkbox-group-margin: var(--comp-spacing);\n    --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n/**\n * @name Form\n * @category Forms\n * @summary Use for wrapping form fields with consistent spacing.\n */\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n    // #region Public Property API\n\n    /** Changes the vertical spacing of the form-fields contained within the component's slot */\n    @Prop({ reflect: true })\n    spacing: 'none' | 'compact' | 'normal' | 'comfortable' = 'normal';\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-form.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mgDAAmgD;;MCQxgDA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AADnB,IAAA,WAAA,GAAA;;;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Form","__stencil_proxyCustomElement"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n// Spacing tokens are set on :host so that slotted descendants (e.g. q2-grid)\n// can inherit --comp-spacing and use it as a default for their own gap.\n:host([spacing='none']) {\n    --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n    --comp-spacing: #{var-list(--tct-form-spacing-none, --comp-spacing-none)};\n}\n:host([spacing='compact']) {\n    --comp-spacing-compact: #{var-list(--app-scale-1x, 5px)};\n    --comp-spacing: #{var-list(--tct-form-spacing-compact, --comp-spacing-compact)};\n}\n:host(:not([spacing])),\n:host([spacing='normal']) {\n    --comp-spacing-normal: #{var-list(--app-scale-3x, 15px)};\n    --comp-spacing: #{var-list(--tct-form-spacing-normal, --comp-spacing-normal)};\n}\n:host([spacing='comfortable']) {\n    --comp-spacing-comfortable: #{var-list(--app-scale-5x, 25px)};\n    --comp-spacing: #{var-list(--tct-form-spacing-comfortable, --comp-spacing-comfortable)};\n}\n\n.container {\n    // Zero the form-field default margins so spacing is driven entirely by\n    // `gap` below — keeps form-alone and form+grid layouts visually identical.\n    --tct-input-margin: 0;\n    --tct-select-margin: 0;\n    --tct-calendar-margin: 0;\n    --tct-file-picker-margin: 0;\n    --tct-textarea-margin: 0;\n    --tct-checkbox-group-margin: 0;\n    --tct-radio-group-margin: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n/**\n * @name Form\n * @category Forms\n * @summary Use for wrapping form fields with consistent spacing.\n */\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n    // #region Public Property API\n\n    /** Changes the vertical spacing of the form-fields contained within the component's slot */\n    @Prop({ reflect: true })\n    spacing: 'none' | 'compact' | 'normal' | 'comfortable' = 'normal';\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-formatted-text.js

@@ -72,7 +72,7 @@ const Q2FormattedText$1 = /*@__PURE__*/ proxyCustomElement(class Q2FormattedText
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '0e3cb56f89a3ab403b45b411a4cd38ec267ed58b', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: 'a9bb42690d67bce14debcb99db50c63582c6ba63' }, this.formattedValue)));
+        return (h("div", { key: '9345b2829e7ac6dd1e5e308e1b840dcb298dbc0d', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '4687a60218658aeced2507ffd9f5eef6c5c9b40e' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],