q2-tecton-elements 1.56.2 → 1.56.4

package/dist/q2-tecton-elements/q2-dropdown.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","open","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","onPopoverState","detail","handleFocusOut","relatedTarget","_a","contains","hostElement","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","showActionSheetList","dispatchEvent","FocusEvent","navigateTo","featureName","moduleName","queryParams","_b","TectonElements","call","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","contextIdParamName","action","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","overpanelPath","params","undefined","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"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\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}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\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    popoverElement?: HTMLQ2PopoverElement;\n    optionList: HTMLQ2OptionListElement;\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    /**\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.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        this.popoverElement?.scrollContainerTo({ top: 0 });\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\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 [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\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, 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 itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\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    _clickItem(value: string) {\n        if (!value) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        itemBtn.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    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\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    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\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        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\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    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 = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\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    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\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.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\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                    <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                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","optionSelector","focusToggle","controlElement","focus","handleFocusOut","event","relatedTarget","_a","popoverElement","contains","hostElement","open","onClickElsewhere","target","localName","stopPropagation","onPopoverState","detail","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","option","showActionSheetList","dispatchEvent","FocusEvent","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","TectonElements","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","_b","navigateTo","call","featureName","moduleName","showOverpanel","undefined","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"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\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}\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/** @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@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    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\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    /**\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.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        this.popoverElement?.scrollContainerTo({ top: 0 });\n        if (!open) {\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\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 [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\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, 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 itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\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    _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        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        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\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\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.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\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                    <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                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-editable-field.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as e, g as s } from "./index-7a5365e2.js";
 
-import { a as n, o as a, i as h, w as r, l as d } from "./index-c215e8ef.js";
+import { a as n, o as a, i as h, w as d, l as r } from "./index-f2a66217.js";
 
 const l = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
 
@@ -90,7 +90,6 @@ const c = class {
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t()));
     this.scheduledAfterRender = [];
-    this.formattedValue = this.inputElement.formattedValue;
   }
   // #endregion
   // #region Listeners
@@ -122,6 +121,9 @@ const c = class {
     if (!h(t, this.hostElement)) return;
     this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
   }
+  inputFormatted(t) {
+    this.formattedValue = t.detail.formattedValue;
+  }
   // #endregion
   // #region Public Methods API
   /**
@@ -163,11 +165,11 @@ const c = class {
     clickSave: true
   }) {
     await this.clickEdit();
-    await r();
+    await d();
     await this.inputElement.setValue(t);
     if (i.clickSave) {
       await this.clickSave();
-      await r();
+      await d();
     }
   }
   // #endregion
@@ -195,24 +197,11 @@ const c = class {
     return Array.isArray(this.hints) && !!this.hints.length;
   }
   get locLabel() {
-    return this.label && d(this.label) || "";
+    return this.label && r(this.label) || "";
   }
   get wrapperClass() {
     return `q2-editable-field-wrapper ${this.editing ? "editing" : ""}`;
   }
-  generateEditBtn() {
-    return e("q2-btn", {
-      ref: t => this.editBtnElement = t,
-      class: "begin-edit",
-      label: `${d("tecton.element.editableField.edit")} ${this.locLabel}`,
-      "hide-label": true,
-      disabled: this.disabled,
-      "test-id": "editButton",
-      onClick: this.editClick
-    }, e("q2-icon", {
-      type: "edit"
-    }));
-  }
   generateEditStateDOM() {
     return e("div", {
       class: this.wrapperClass,
@@ -236,7 +225,7 @@ const c = class {
     }), e("q2-btn", {
       ref: t => this.cancelBtnElement = t,
       class: "cancel-edit",
-      label: `${d("tecton.element.editableField.cancel")} ${this.locLabel}`,
+      label: `${r("tecton.element.editableField.cancel")} ${this.locLabel}`,
       "hide-label": true,
       "test-id": "cancelButton",
       onClick: this.cancelClick
@@ -245,7 +234,7 @@ const c = class {
     })), e("q2-btn", {
       ref: t => this.saveBtnElement = t,
       class: "save-edit",
-      label: `${d("tecton.element.editableField.save")} ${this.locLabel}`,
+      label: `${r("tecton.element.editableField.save")} ${this.locLabel}`,
       "hide-label": true,
       "test-id": "saveButton",
       onClick: this.saveClick
@@ -262,20 +251,40 @@ const c = class {
         class: "read-state-label"
       }, this.locLabel), e("dd", null, e("span", {
         class: "text-wrapper"
-      }, this.formattedValue || this.value), this.generateEditBtn())));
+      }, this.formattedValue || this.value), e("q2-btn", {
+        ref: t => this.editBtnElement = t,
+        class: "begin-edit",
+        label: `${r("tecton.element.editableField.edit")} ${this.locLabel}`,
+        "hide-label": true,
+        disabled: this.disabled,
+        "test-id": "editButton",
+        onClick: this.editClick
+      }, e("q2-icon", {
+        type: "edit"
+      })))));
     }
     return e("div", {
       class: this.wrapperClass,
       hidden: this.editing
     }, e("div", {
       class: "text-wrapper"
-    }, this.formattedValue || this.value), this.generateEditBtn());
+    }, this.formattedValue || this.value), e("q2-btn", {
+      ref: t => this.editBtnElement = t,
+      class: "begin-edit",
+      label: `${r("tecton.element.editableField.edit")} ${this.locLabel}`,
+      "hide-label": true,
+      disabled: this.disabled,
+      "test-id": "editButton",
+      onClick: this.editClick
+    }, e("q2-icon", {
+      type: "edit"
+    })));
   }
   // #endregion
   // #region Render Methods
   render() {
     return e("div", {
-      key: "045844a547274328958144578f205451727d9a82"
+      key: "cd976a515db2bc31d2fb16cae89358d5363dad9a"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-editable-field.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","cancelClick","event","stopPropagation","change","emit","editing","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","input","detail","formattedValue","innerValue","value","inputKeyDown","key","preventDefault","saveClick","valueFromInputProp","hostElement","shadowRoot","querySelector","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","onHostElementChange","isEventFromElement","onchange","queueMicrotask","hasErrors","focus","delegateFocus","clickCancel","_a","cancelBtnElement","click","clickEdit","editBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","ariaLabelObserver","observesEditing","newValue","oldValue","push","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","Array","isArray","errors","length","hasHints","hints","locLabel","label","loc","wrapperClass","generateEditBtn","h","ref","el","class","disabled","onClick","type","generateEditStateDOM","hidden","hideLabel","undefined","formatModifier","maxlength","onInput","onChange","onKeyDown","generateReadStateDOM","persistentLabel","render"],"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\n:host {\n    display: inline-block;\n    max-width: 100%;\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\nq2-btn {\n    flex: 0 0 44px;\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 { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n    formattedValue: IFormatterValueObject['formattedValue'];\n}\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     */\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     */\n    @Event()\n    input: 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        this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\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    // #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?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    generateEditBtn() {\n        return (\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={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\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                    onInput={this.inputInput}\n                    onChange={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={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={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                            {this.generateEditBtn()}\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                {this.generateEditBtn()}\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<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(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?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\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"],"mappings":"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"}
+{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","cancelClick","event","stopPropagation","change","emit","editing","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","input","detail","formattedValue","innerValue","value","inputKeyDown","key","preventDefault","saveClick","valueFromInputProp","hostElement","shadowRoot","querySelector","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","onHostElementChange","isEventFromElement","onchange","queueMicrotask","hasErrors","focus","delegateFocus","inputFormatted","clickCancel","_a","cancelBtnElement","click","clickEdit","editBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","ariaLabelObserver","observesEditing","newValue","oldValue","push","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","Array","isArray","errors","length","hasHints","hints","locLabel","label","loc","wrapperClass","generateEditStateDOM","h","class","hidden","ref","el","hideLabel","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","generateReadStateDOM","persistentLabel","render"],"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\n:host {\n    display: inline-block;\n    max-width: 100%;\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\nq2-btn {\n    flex: 0 0 44px;\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 { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\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     */\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     */\n    @Event()\n    input: 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('formatted')\n    inputFormatted(event: CustomEvent<IFormatterValueObject>) {\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?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ 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                    onInput={this.inputInput}\n                    onChange={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={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={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={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={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<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(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?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\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"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-example.entry.js

@@ -131,7 +131,7 @@ const d = class {
   }
   render() {
     return n(o, {
-      key: "752803c4854a382f94193f975b9593931a34e812",
+      key: "fd60dba7829dc02c6d3f979264b2c93822e5784d",
       attribute: "navigation"
     }, this.renderMenuInner());
   }

package/dist/q2-tecton-elements/q2-file-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as r, g as o } from "./index-7a5365e2.js";
 
-import { l as a, e as s } from "./index-c215e8ef.js";
+import { l as a, e as s } from "./index-f2a66217.js";
 
 const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
 

package/dist/q2-tecton-elements/q2-form.entry.js

@@ -1,25 +1,25 @@
-import { r as a, h as o } from "./index-7a5365e2.js";
+import { r as o, h as a } from "./index-7a5365e2.js";
 
-const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.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 n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.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 n = c;
+const c = n;
 
 const i = class {
-  constructor(o) {
-    a(this, o);
+  constructor(a) {
+    o(this, a);
     this.spacing = "normal";
   }
   render() {
-    return o("div", {
-      key: "befb2b017cd148d0ea0ce96a640911a8f973bce1",
+    return a("div", {
+      key: "75b376daf1c33d954674037fea49b27b00ab49c3",
       class: "container"
-    }, o("slot", {
-      key: "82eec71b0e44cfa7cf8d6559f62fd4cc64a68a1c"
+    }, a("slot", {
+      key: "0d23b04de6f082f7985adecb3d4b9bf89f8efbf4"
     }));
   }
 };
 
-i.style = n;
+i.style = c;
 
 export { i as q2_form };
 //# sourceMappingURL=q2-form.entry.js.map

package/dist/q2-tecton-elements/q2-formatted-text.entry.js

@@ -49,11 +49,11 @@ const s = class {
   render() {
     const {formattedTextClasses: t} = this;
     return e("div", {
-      key: "0d59672677b0655bdab402c0cf9ded5f12d85338",
+      key: "04b61a747abc6f233682f329dc20d99fbda5f870",
       class: t,
       "aria-label": this.formattedValue
     }, e("span", {
-      key: "74152644c1b97e05acf05b64ccc8255b98002c31"
+      key: "2ecad2428993d705980f797e5a5cd1b54fc63c1f"
     }, this.formattedValue));
   }
   static get watchers() {

package/dist/q2-tecton-elements/q2-item_3.entry.js

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as i, c as o } from "./index-7a5365e2.js";
 
-import { o as n, e as r } from "./index-c215e8ef.js";
+import { o as n, e as r } from "./index-f2a66217.js";
 
 const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 
@@ -106,44 +106,44 @@ const d = class {
   render() {
     const {clickable: t} = this;
     return e("div", {
-      key: "b8fd1943532c8b21e6009abdc074adb8804de569",
+      key: "50dfa5bbda8a2e9e999e8d2f8802769f364d89b1",
       "test-id": "itemContainer",
       class: this.itemClasses,
       ref: t => this.itemElement = t,
       role: t ? "button" : undefined,
       tabIndex: t ? 0 : undefined
     }, this.hasBulletSlotContent && e("div", {
-      key: "e24948885dc1c5adc00daf6c79f50ab6e12c1a5f",
+      key: "1c26db2c974577f5fbbec8a01e6e9f4e9cef9f96",
       class: this.bulletClasses
     }, e("slot", {
-      key: "3f7a9d142e999ae4e2d0f4030962a99b92d2009f",
+      key: "91e7c3f7b1c8fc0d75fa33b4dca0c07e11257020",
       name: "bullet"
     })), e("div", {
-      key: "1fce62c21f3c0e2b99aa2687a19dbd6081043242",
+      key: "5942e7972b1bf3894e4854973b9f3a6667e578bf",
       class: this.mainClasses
     }, this.hasHeaderSlotContent && e("div", {
-      key: "e73680590a2f8612d93ced7065e0cdb85c5690e9",
+      key: "21f2819f13d44e5ed8738e415c1e3d793fb75e44",
       class: "header"
     }, e("slot", {
-      key: "b550f6e06b3987b21a9e1340b6b3338304271513",
+      key: "a6c8182d90972e7492ead940ae386fc1739209a7",
       name: "header"
     })), this.hasBodySlotContent && e("div", {
-      key: "5397462440a383586ad044b0fa3601b99151f6b6",
+      key: "91fbced71976b927615b32e54a7b9f42261d0d0e",
       class: "body"
     }, e("slot", {
-      key: "c33d16c661a9f18f154685598a93229e6b99b01d",
+      key: "cd989467616bc33970cd1e32477678855c32ff79",
       name: "body"
     }))), this.hasActionSlotContent && e("div", {
-      key: "12d47acdf2b4915d7db0b506552decf3e8339b15",
+      key: "ff878148864e9c18365e820c1b47937de4d57750",
       class: this.actionClasses
     }, e("slot", {
-      key: "35cd3d9956350f7839e3b32947ce646ac093e0b0",
+      key: "5b03288fd354d4d00ae9b3339e22374288897ceb",
       name: "action"
     })), this.hasFooterSlotContent && e("div", {
-      key: "8ff5309d31bc9472721f0e67144ec16d79b5bc76",
+      key: "986e46c47edfee86e61937902a94aa25463cf6f3",
       class: this.footerClasses
     }, e("slot", {
-      key: "14b717dfd672f169a8ee7aedab6bb70d5a0f2dfe",
+      key: "5fbbe5165bb9e9fc700e01082aca5d7319d1e448",
       name: "footer"
     })));
   }
@@ -302,23 +302,23 @@ const f = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "f4669851dfbd167e38d5ca50043f15d77cc0d800",
+      key: "b9a278c2835f8019f4ce77f3faad5245da4837be",
       class: this.listClasses,
       ref: t => this.listElement = t
     }, (this.hasFilterSlot || this.hasLabelContent) && e("div", {
-      key: "528c9d5ebb2d5ed8924ad67f6f79415443d5bd93",
+      key: "9b748a716d57f3aa8cd1f951dd6dc6431e8ad598",
       class: this.headerClasses
     }, e("div", {
-      key: "1c6a2dc44ae7d8c1664bcd8c96584d451f379918",
+      key: "1ccc3478d514a9a977351579b83286c33dd01721",
       class: "label"
     }, this.label), this.hasFilterSlot && e("slot", {
-      key: "116cace9b3451dad4e7b4c045989cd0d768216d2",
+      key: "92220efb13353cf88f24adcc77bb9591b25bc94b",
       name: "filter"
     })), e("div", {
-      key: "20f693f5b706961ad9f0fc9b6e934eb3d16211dc",
+      key: "eacbad6f3cfe9b7c714771da194da02e480bf928",
       role: "list"
     }, e("slot", {
-      key: "260f0822b4bf149adc6b0269f3f09e9d4550b7a4"
+      key: "f509ef608b8e016f1d22e93e66f8d10285dfad8f"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-legend.entry.js

@@ -103,10 +103,10 @@ const o = class {
   // #region Render Methods
   render() {
     return i("click-elsewhere", {
-      key: "95da1d55b13d20ce807598d88339e36c45b52c49",
+      key: "f1b2cc98ce1049fdab0a64f1bf716060cc8658c2",
       onChange: () => this.onClickElsewhere(this)
     }, i("ul", {
-      key: "dd9a72bab53b5a4093821fc6834fe13cdf8e65b9"
+      key: "9310fd8b724fb252b7c8f76147d2447d48d1d14b"
     }, this.dataWithClasses.map((t => i("li", {
       class: "item"
     }, i("button", {

package/dist/q2-tecton-elements/q2-loc.entry.js

@@ -1,6 +1,6 @@
 import { r as t, g as s } from "./index-7a5365e2.js";
 
-import { l as i } from "./index-c215e8ef.js";
+import { l as i } from "./index-f2a66217.js";
 
 const e = class {
   constructor(s) {