q2-tecton-elements 1.51.0 → 1.52.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","closeDropdown","open","focusFirstItem","async","firstItem","hostElement","querySelector","waitForNextPaint","dispatchEvent","FocusEvent","focusLastItem","lastItem","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onDropdownMenuClick","item","disabled","separator","onDropdownMenuKeydown","key","preventDefault","focusAdjacentItem","onToggleClick","openDropdown","onToggleKeydown","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateHandler","detail","_a","scrollContainerTo","top","closePopover","_togglePopover","openPopover","selectItem","value","itemBtn","shadowRoot","click","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomButton","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","navigateTo","featureName","moduleName","queryParams","_b","window","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","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","role"],"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 { Component, ComponentInterface, Prop, Element, Watch, Method, h, Fragment, Listen, State } 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    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    controlElement?: HTMLQ2BtnElement;\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    /** 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    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\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    @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    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\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 hasCustomButton() {\n        return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\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    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    focusFirstItem = async () => {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n        if (!firstItem) return;\n        await waitForNextPaint();\n        firstItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusLastItem = async () => {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        if (!lastItem) return;\n        await waitForNextPaint();\n        lastItem.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 HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (item.disabled || item.separator) return;\n        this.closeDropdown();\n        await waitForNextPaint();\n        this.focusToggle();\n    };\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        switch (event.key) {\n            case 'Escape':\n                this.closeDropdown();\n                this.focusToggle();\n                break;\n\n            case 'Tab':\n                this.closeDropdown();\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'prev');\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'next');\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowUp':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusLastItem();\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusFirstItem();\n                return;\n\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n\n            case 'Tab':\n                if (this.open) this.closeDropdown();\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\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                    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.hasCustomButton ? (\n                        <div\n                            test-id=\"dropdownCustom\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"custom-dropdown-button\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            <slot name=\"control\">\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                            </slot>\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                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                        role=\"menu\"\n                        aria-label={loc(this.label) || undefined}\n                    >\n                        <slot />\n                    </div>\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

@@ -0,0 +1,296 @@
+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-d18e2a20.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}";
+
+const o = l;
+
+const c = class {
+  constructor(e) {
+    t(this, e);
+    this.change = i(this, "change", 7);
+    this.input = i(this, "input", 7);
+    this.scheduledAfterRender = [];
+    this.cancelClick = t => {
+      t === null || t === void 0 ? void 0 : t.stopPropagation();
+      this.change.emit({
+        editing: false,
+        name: "cancel"
+      });
+      this.inputElement.setValue(this.defaultValue);
+    };
+    this.editClick = t => {
+      t === null || t === void 0 ? void 0 : t.stopPropagation();
+      this.change.emit({
+        editing: true,
+        name: "edit"
+      });
+    };
+    this.inputChange = t => {
+      t.stopPropagation();
+    };
+    this.inputClick = t => {
+      t.stopPropagation();
+    };
+    this.inputInput = t => {
+      t.stopPropagation();
+      this.input.emit(t.detail);
+      this.formattedValue = t.detail.formattedValue;
+      this.innerValue = t.detail.value;
+    };
+    this.inputKeyDown = t => {
+      if (t.key === "Escape" || t.key === "Esc") {
+        t.preventDefault();
+        this.cancelClick();
+        return;
+      }
+      if (t.key === "Enter") {
+        t.preventDefault();
+        this.saveClick();
+        return;
+      }
+    };
+    this.saveClick = t => {
+      t && t.stopPropagation();
+      const i = this.hostElement.shadowRoot.querySelector("q2-input").value;
+      this.defaultValue = i;
+      this.change.emit({
+        editing: false,
+        name: "save",
+        value: this.innerValue || i,
+        formattedValue: this.formattedValue || i
+      });
+    };
+    this.formattedValue = undefined;
+    this.ariaLabel = undefined;
+    this.block = undefined;
+    this.disabled = undefined;
+    this.editing = false;
+    this.errors = undefined;
+    this.formatModifier = undefined;
+    this.hideLabel = undefined;
+    this.hints = undefined;
+    this.label = "";
+    this.maxlength = undefined;
+    this.persistentLabel = undefined;
+    this.truncated = undefined;
+    this.type = undefined;
+    this.value = "";
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    n(this);
+    this.defaultValue = this.value;
+  }
+  componentDidLoad() {
+    a(this.hostElement);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach((t => t()));
+    this.scheduledAfterRender = [];
+    this.formattedValue = this.inputElement.formattedValue;
+  }
+  // #endregion
+  // #region Listeners
+  onHostElementChange(t) {
+    if (!h(t, this.hostElement) || this.hostElement.onchange) return;
+    queueMicrotask((() => {
+      switch (t.detail.name) {
+       case "save":
+        if (this.hasErrors) {
+          this.inputElement.focus();
+          break;
+        }
+        this.value = t.detail.value;
+        this.editing = t.detail.editing;
+        break;
+
+       case "cancel":
+        this.inputElement.value = this.value;
+        this.editing = t.detail.editing;
+        break;
+
+       case "edit":
+        this.editing = t.detail.editing;
+        break;
+      }
+    }));
+  }
+  delegateFocus(t) {
+    if (!h(t, this.hostElement)) return;
+    this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
+     *
+     * @testOnly
+     */
+  clickCancel() {
+    var t;
+    if (!this.editing) return;
+    (t = this.cancelBtnElement) === null || t === void 0 ? void 0 : t.click();
+  }
+  /**
+     * Emulates clicking the edit button, which will display the `<q2-input>` field.
+     *
+     * @testOnly
+     */  clickEdit() {
+    var t;
+    if (this.editing) return;
+    (t = this.editBtnElement) === null || t === void 0 ? void 0 : t.click();
+  }
+  /**
+     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
+     *
+     * @testOnly
+     */  clickSave() {
+    var t;
+    if (!this.editing) return;
+    (t = this.saveBtnElement) === null || t === void 0 ? void 0 : t.click();
+  }
+  /**
+     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.
+     *
+     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\
+     * `change` event will be emitted.
+     *
+     * @testOnly
+     */  async setValue(t, i = {
+    clickSave: true
+  }) {
+    await this.clickEdit();
+    await r();
+    await this.inputElement.setValue(t);
+    if (i.clickSave) {
+      await this.clickSave();
+      await r();
+    }
+  }
+  // #endregion
+  // #region Watchers
+  ariaLabelObserver() {
+    n(this);
+  }
+  observesEditing(t, i) {
+    if (t === i) return;
+    this.scheduledAfterRender.push(this.hostElement.focus);
+  }
+  errorsObserver() {
+    const {editing: t, hasErrors: i} = this;
+    const e = this.hostElement.shadowRoot.activeElement;
+    const s = (e === null || e === void 0 ? void 0 : e.tagName) === "Q2-INPUT";
+    if (s || !e || !t || !i) return;
+    this.inputElement.focus();
+  }
+  // #endregion
+  // #region Local Methods
+  get hasErrors() {
+    return Array.isArray(this.errors) && !!this.errors.length;
+  }
+  get hasHints() {
+    return Array.isArray(this.hints) && !!this.hints.length;
+  }
+  get locLabel() {
+    return this.label && d(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,
+      hidden: !this.editing
+    }, e("q2-input", {
+      ref: t => this.inputElement = t,
+      label: this.locLabel,
+      hideLabel: this.hideLabel,
+      value: this.value,
+      hints: this.hasHints ? this.hints : undefined,
+      errors: this.hasErrors ? this.errors : undefined,
+      type: this.type,
+      disabled: this.disabled,
+      formatModifier: this.formatModifier,
+      maxlength: this.maxlength,
+      "test-id": "editableInput",
+      onInput: this.inputInput,
+      onChange: this.inputChange,
+      onKeyDown: this.inputKeyDown,
+      onClick: this.inputClick
+    }), e("q2-btn", {
+      ref: t => this.cancelBtnElement = t,
+      class: "cancel-edit",
+      label: `${d("tecton.element.editableField.cancel")} ${this.locLabel}`,
+      "hide-label": true,
+      "test-id": "cancelButton",
+      onClick: this.cancelClick
+    }, e("q2-icon", {
+      type: "close"
+    })), e("q2-btn", {
+      ref: t => this.saveBtnElement = t,
+      class: "save-edit",
+      label: `${d("tecton.element.editableField.save")} ${this.locLabel}`,
+      "hide-label": true,
+      "test-id": "saveButton",
+      onClick: this.saveClick
+    }, e("q2-icon", {
+      type: "checkmark"
+    })));
+  }
+  generateReadStateDOM() {
+    if (this.persistentLabel && this.locLabel) {
+      return e("div", {
+        class: this.wrapperClass,
+        hidden: this.editing
+      }, e("dl", null, e("dt", {
+        class: "read-state-label"
+      }, this.locLabel), e("dd", null, e("span", {
+        class: "text-wrapper"
+      }, this.formattedValue || this.value), this.generateEditBtn())));
+    }
+    return e("div", {
+      class: this.wrapperClass,
+      hidden: this.editing
+    }, e("div", {
+      class: "text-wrapper"
+    }, this.formattedValue || this.value), this.generateEditBtn());
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return e("div", {
+      key: "255dac3b6e39618e37fc129ef0a743aca1aefc88"
+    }, this.generateEditStateDOM(), this.generateReadStateDOM());
+  }
+  get hostElement() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      ariaLabel: [ "ariaLabelObserver" ],
+      editing: [ "observesEditing" ],
+      errors: [ "errorsObserver" ]
+    };
+  }
+};
+
+c.style = o;
+
+export { c as q2_editable_field };
+//# sourceMappingURL=q2-editable-field.entry.js.map

package/dist/q2-tecton-elements/{p-896c7008.entry.js.map → 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","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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"}

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

@@ -0,0 +1,152 @@
+import { r as t, c as e, h as n, F as i, H as o, g as s } from "./index-7a5365e2.js";
+
+const r = "*{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}";
+
+const a = r;
+
+const d = class {
+  constructor(n) {
+    t(this, n);
+    this.tctClick = e(this, "tctClick", 7);
+    this.tctDrag = e(this, "tctDrag", 7);
+    this.tctOpen = e(this, "tctOpen", 7);
+    this.someText = "default";
+    this.isValidated = undefined;
+    this.status = 0;
+    this.content = undefined;
+    this.disabled = undefined;
+    this.type = "overlay";
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  /**
+     * 6. Component lifecycle events
+     *    Order by their natural call order.
+     */
+  connectedCallback() {}
+  disconnectedCallback() {}
+  componentWillLoad() {}
+  componentDidLoad() {}
+  componentShouldUpdate(t, e, n) {
+    if (n === "content" && t !== e) {
+      return true;
+    }
+    return false;
+  }
+  componentWillUpdate() {}
+  componentDidUpdate() {}
+  componentWillRender() {}
+  componentDidRender() {}
+  // #endregion
+  // #region Listeners
+  /**
+     * 7. Listeners
+     *    Event listeners defined via the @Listen() decorator. List in
+     *    alphabetical order of the event name. Recommend starting listener
+     *    methods with "on".
+     */
+  onClick(t) {
+    this.tctClick.emit(t);
+  }
+  onDrag(t) {
+    this.tctDrag.emit(t);
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * 8. Public methods API
+     *    Methods exposed on the host element via the @Method() decorator.
+     *    Document each using JSDoc comments and include the "@testOnly" tag for
+     *    test methods. Must be async, and listed in alphabetical order.
+     */
+  /**
+     * Closes the menu.
+     */
+  async close() {
+    // ...
+  }
+  /*
+     * Opens the menu. If the menu is already open or it can't be opened, it
+     * returns `false`.
+     *
+     * @testOnly
+     */  async openMenu() {
+    // ...
+    return true;
+  }
+  // #endregion
+  // #region Watchers
+  /**
+     * 9. Watchers
+     *    Methods that are called when a property is updated as specified via
+     *    the @Watch() decorator. List in alphabetical order of the property.
+     */
+  contentChanged(t, e) {
+    if (t !== e) {
+      this.updateState();
+    }
+  }
+  statusChanged(t, e) {
+    if (t !== e) {
+      this.updateState();
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  /**
+     * 10. Local methods
+     *     Methods that contain internal business logic. These methods cannot be
+     *     called from the host element. This includes getters. List getters
+     *     first in alphabetical order, then list the rest of the methods in
+     *     alphabetical order.
+     */
+  get menuState() {
+    //...
+    return "open";
+  }
+  async prepareAnimation() {
+    // ...
+  }
+  updateState() {
+    // ...
+  }
+  // #endregion
+  // #region Render Methods
+  /**
+     * 11. Render methods
+     *     The render() method and helper methods used by render() that return
+     *     JSX. Names should start with "render". List in alphabetical order,
+     *     except for the render() method which should always be last
+     */
+  renderMenuInner() {
+    return n(i, null, n("div", {
+      class: {
+        menu: true,
+        "page-inner": true,
+        disabled: this.disabled
+      },
+      onClick: () => this.tctClick.emit(),
+      role: "menu"
+    }, n("slot", null)));
+  }
+  render() {
+    return n(o, {
+      key: "e4df51465f7c14e0ff4ae2463613e73cc6100318",
+      attribute: "navigation"
+    }, this.renderMenuInner());
+  }
+  get el() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      content: [ "contentChanged" ],
+      status: [ "statusChanged" ]
+    };
+  }
+};
+
+d.style = a;
+
+export { d as q2_example };
+//# sourceMappingURL=q2-example.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2ExampleCss","Q2ExampleStyle0","Q2Example","this","someText","connectedCallback","disconnectedCallback","componentWillLoad","componentDidLoad","componentShouldUpdate","newVal","oldVal","propName","componentWillUpdate","componentDidUpdate","componentWillRender","componentDidRender","onClick","ev","tctClick","emit","onDrag","tctDrag","close","openMenu","contentChanged","newContent","oldContent","updateState","statusChanged","newStatus","oldStatus","menuState","prepareAnimation","renderMenuInner","h","Fragment","class","menu","disabled","role","render","Host","key","attribute"],"sources":["src/components/q2-example/q2-example.scss?tag=q2-example&encapsulation=shadow","src/components/q2-example/q2-example.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    EventEmitter,\n    Fragment,\n    Method,\n    Event,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\n\n@Component({\n    tag: 'q2-example',\n    shadow: true,\n    styleUrl: 'q2-example.scss',\n})\nexport class Q2Example implements ComponentInterface {\n    // #region Own Properties\n\n    /**\n     * 1. Own properties\n     *    Variables that are not exposed publicly due to the lack of the @Prop()\n     *    decorator. They are for internal use only. List in alphabetical order\n     *    and always set the type if a default value has not been set. If a\n     *    default value has been set, then the type can be omitted because it is\n     *    already inferred. If one of these properties needs to be initialized\n     *    with the value of another one of these properties, then the\n     *    initialization should be done in the componentWillLoad() lifecycle\n     *    event so that these properties can be alphabetizes without referencing\n     *    a property before it is declared.\n     */\n\n    num: number;\n    someText = 'default';\n\n    // #endregion\n    // #region Host HTML Element\n\n    /**\n     * 2. Host HTML element\n     *    Reference to host HTML element if needed.\n     */\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    /**\n     * 3. State properties\n     *    Variables that are used to track state internally via the @State()\n     *    decorator. They are for internal use only. List in alphabetical order\n     *    and always set the type if a default value has not been set. If a\n     *    default value has been set, then the type can be omitted because it is\n     *    already inferred.\n     */\n\n    @State()\n    isValidated: boolean;\n\n    @State()\n    status = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * 4. Public property API\n     *    Variables that are exposed publicly via @Prop() decorator as\n     *    properties and attributes on the host element. Document each using\n     *    JSDoc comments, list in alphabetical order, and always set the type if\n     *    a default value has not been set. If a default value has been set,\n     *    then the type can be omitted because it is already inferred.\n     */\n\n    /**\n     * The content of the menu.\n     */\n    @Prop()\n    content: string;\n\n    /**\n     * If `true`, the user cannot interact with the menu.\n     */\n    @Prop()\n    disabled: boolean;\n\n    /**\n     * Specifies the menu type.\n     */\n    @Prop()\n    type = 'overlay';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * 5. Events\n     *    Custom events dispatched from the component that are defined via the\n     *    @Event() decorator. Start each event name with \"tct\" so they do not\n     *    conflict with native events. Document each using JSDoc comments and\n     *    list in alphabetical order.\n     */\n\n    @Event()\n    tctClick: EventEmitter;\n\n    @Event()\n    tctDrag: EventEmitter;\n\n    @Event()\n    tctOpen: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    /**\n     * 6. Component lifecycle events\n     *    Order by their natural call order.\n     */\n\n    connectedCallback() {}\n\n    disconnectedCallback() {}\n\n    componentWillLoad() {}\n\n    componentDidLoad() {}\n\n    componentShouldUpdate(newVal: any, oldVal: any, propName: string) {\n        if (propName === 'content' && newVal !== oldVal) {\n            return true;\n        }\n        return false;\n    }\n\n    componentWillUpdate() {}\n\n    componentDidUpdate() {}\n\n    componentWillRender() {}\n\n    componentDidRender() {}\n\n    // #endregion\n    // #region Listeners\n\n    /**\n     * 7. Listeners\n     *    Event listeners defined via the @Listen() decorator. List in\n     *    alphabetical order of the event name. Recommend starting listener\n     *    methods with \"on\".\n     */\n\n    @Listen('click')\n    onClick(ev: UIEvent) {\n        this.tctClick.emit(ev);\n    }\n\n    @Listen('drag')\n    onDrag(ev: UIEvent) {\n        this.tctDrag.emit(ev);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * 8. Public methods API\n     *    Methods exposed on the host element via the @Method() decorator.\n     *    Document each using JSDoc comments and include the \"@testOnly\" tag for\n     *    test methods. Must be async, and listed in alphabetical order.\n     */\n\n    /**\n     * Closes the menu.\n     */\n    @Method()\n    async close(): Promise<void> {\n        // ...\n    }\n\n    /*\n     * Opens the menu. If the menu is already open or it can't be opened, it\n     * returns `false`.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openMenu(): Promise<boolean> {\n        // ...\n        return true;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    /**\n     * 9. Watchers\n     *    Methods that are called when a property is updated as specified via\n     *    the @Watch() decorator. List in alphabetical order of the property.\n     */\n\n    @Watch('content')\n    contentChanged(newContent: string, oldContent: string) {\n        if (newContent !== oldContent) {\n            this.updateState();\n        }\n    }\n\n    @Watch('status')\n    statusChanged(newStatus: string, oldStatus: string) {\n        if (newStatus !== oldStatus) {\n            this.updateState();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    /**\n     * 10. Local methods\n     *     Methods that contain internal business logic. These methods cannot be\n     *     called from the host element. This includes getters. List getters\n     *     first in alphabetical order, then list the rest of the methods in\n     *     alphabetical order.\n     */\n\n    get menuState(): string {\n        //...\n        return 'open';\n    }\n\n    async prepareAnimation(): Promise<void> {\n        // ...\n    }\n\n    updateState() {\n        // ...\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    /**\n     * 11. Render methods\n     *     The render() method and helper methods used by render() that return\n     *     JSX. Names should start with \"render\". List in alphabetical order,\n     *     except for the render() method which should always be last\n     */\n\n    renderMenuInner() {\n        return (\n            <Fragment>\n                <div\n                    class={{\n                        menu: true,\n                        'page-inner': true,\n                        disabled: this.disabled,\n                    }}\n                    onClick={() => this.tctClick.emit()}\n                    role=\"menu\"\n                >\n                    <slot></slot>\n                </div>\n            </Fragment>\n        );\n    }\n\n    render() {\n        return <Host attribute=\"navigation\">{this.renderMenuInner()}</Host>;\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAe;;AACrB,MAAAC,IAAeD;;MCoBFE,IAAS;;;;;;IAiBlBC,KAAAC,WAAW;;kBA6BF;;;gBA8BF;;;;;;;;EA8BP,iBAAAC,IAAiB;EAEjB,oBAAAC,IAAoB;EAEpB,iBAAAC,IAAiB;EAEjB,gBAAAC,IAAgB;EAEhB,qBAAAC,CAAsBC,GAAaC,GAAaC;IAC5C,IAAIA,MAAa,aAAaF,MAAWC,GAAQ;MAC7C,OAAO;;IAEX,OAAO;;EAGX,mBAAAE,IAAmB;EAEnB,kBAAAC,IAAkB;EAElB,mBAAAC,IAAmB;EAEnB,kBAAAC,IAAkB;;;;;;;;;EAalB,OAAAC,CAAQC;IACJf,KAAKgB,SAASC,KAAKF;;EAIvB,MAAAG,CAAOH;IACHf,KAAKmB,QAAQF,KAAKF;;;;;;;;;;;;;EAiBtB,WAAMK;;;;;;;;SAWN,cAAMC;;IAEF,OAAO;;;;;;;;;EAaX,cAAAC,CAAeC,GAAoBC;IAC/B,IAAID,MAAeC,GAAY;MAC3BxB,KAAKyB;;;EAKb,aAAAC,CAAcC,GAAmBC;IAC7B,IAAID,MAAcC,GAAW;MACzB5B,KAAKyB;;;;;;;;;;;;EAeb,aAAII;;IAEA,OAAO;;EAGX,sBAAMC;;;EAIN,WAAAL;;;;;;;;;;;EAcA,eAAAM;IACI,OACIC,EAACC,GAAQ,MACLD,EAAA;MACIE,OAAO;QACHC,MAAM;QACN,cAAc;QACdC,UAAUpC,KAAKoC;;MAEnBtB,SAAS,MAAMd,KAAKgB,SAASC;MAC7BoB,MAAK;OAELL,EAAA;;EAMhB,MAAAM;IACI,OAAON,EAACO,GAAI;MAAAC,KAAA;MAACC,WAAU;OAAczC,KAAK+B"}