q2-tecton-elements 1.67.2 → 1.68.0

package/dist/cjs/q2-option.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-option.entry.cjs.js","mappings":"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","names":["getAllText","loc","hasValidAncestor","h","Host"],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    align-items: center;\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_hide-selected-block]:not([_hide-selected-block='false'])) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n:host(:not([_hide-selected-block])) {\n    grid-template-areas: 'icon content';\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host([separator]:not([separator=\"false\"])) {\n    display: block;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus-visible) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n::slotted(q2-item){\n    padding: var(--app-scale-1x, 5px) 0;\n}\n\n.content {\n    display: block;\n    grid-area: content;\n    font-size: var(--tct-option-content-font-size, inherit);\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\nimport { hasValidAncestor } from '@/utils/component';\n\n/**\n * @name Option\n * @category Forms\n * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.\n */\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Disables child q2-option selectable state and removes the selector space.\n     * @private\n     */\n    @Prop({ reflect: true })\n    _hideSelectedBlock: boolean = false;\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean = false;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-select, q2-option-list, q2-pill, q2-dropdown');\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    displayChangedHandler() {\n        this.display = loc(this.display);\n        this.setTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    @Watch('separator')\n    separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        this.setTextContent();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    setTextContent = () => {\n        const hasLoc: boolean = !!this.hostElement.querySelector('q2-loc');\n        if (this.multiline || hasLoc) return;\n        this.hostElement.textContent = loc(this.display);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden, role } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={role === 'menuitem' ? undefined : `${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && !this._hideSelectedBlock && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-option.entry.cjs.js","mappings":"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","names":["getAllText","loc","hasValidAncestor","h","Host"],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    align-items: center;\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_hide-selected-block]:not([_hide-selected-block='false'])) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n:host(:not([_hide-selected-block])) {\n    grid-template-areas: 'icon content';\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host([separator]:not([separator=\"false\"])) {\n    display: block;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus-visible) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n::slotted(q2-item){\n    padding: var(--app-scale-1x, 5px) 0;\n}\n\n.content {\n    display: block;\n    grid-area: content;\n    font-size: var(--tct-option-content-font-size, inherit);\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\nimport { hasValidAncestor } from '@/utils/component';\n\n/**\n * @name Option\n * @category Forms\n * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.\n */\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Disables child q2-option selectable state and removes the selector space.\n     * @private\n     */\n    @Prop({ reflect: true })\n    _hideSelectedBlock: boolean = false;\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean = false;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        hasValidAncestor(this.hostElement, 'q2-select, q2-option-list, q2-pill, q2-dropdown');\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    displayChangedHandler() {\n        this.display = loc(this.display);\n        this.setTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    @Watch('separator')\n    separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        this.setTextContent();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    setTextContent = () => {\n        const hasLoc: boolean = !!this.hostElement.querySelector('q2-loc');\n        if (this.multiline || hasLoc) return;\n        this.hostElement.textContent = loc(this.display);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden, role } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={role === 'menuitem' ? undefined : `${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && !this._hideSelectedBlock && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-option.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-option.entry.cjs.js","sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    align-items: center;\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_hide-selected-block]:not([_hide-selected-block='false'])) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n:host(:not([_hide-selected-block])) {\n    grid-template-areas: 'icon content';\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host([separator]:not([separator=\"false\"])) {\n    display: block;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus-visible) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n::slotted(q2-item){\n    padding: var(--app-scale-1x, 5px) 0;\n}\n\n.content {\n    display: block;\n    grid-area: content;\n    font-size: var(--tct-option-content-font-size, inherit);\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\nimport { hasValidAncestor } from '@/utils/component';\n\n/**\n * @name Option\n * @category Forms\n * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.\n */\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Disables child q2-option selectable state and removes the selector space.\n     * @private\n     */\n    @Prop({ reflect: true })\n    _hideSelectedBlock: boolean = false;\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean = false;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-select, q2-option-list, q2-pill, q2-dropdown');\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    displayChangedHandler() {\n        this.display = loc(this.display);\n        this.setTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    @Watch('separator')\n    separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        this.setTextContent();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    setTextContent = () => {\n        const hasLoc: boolean = !!this.hostElement.querySelector('q2-loc');\n        if (this.multiline || hasLoc) return;\n        this.hostElement.textContent = loc(this.display);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden, role } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={role === 'menuitem' ? undefined : `${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && !this._hideSelectedBlock && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"names":["getAllText","loc","hasValidAncestor","h","Host"],"mappings":"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"}
+{"version":3,"file":"q2-option.entry.cjs.js","sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    align-items: center;\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_hide-selected-block]:not([_hide-selected-block='false'])) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n:host(:not([_hide-selected-block])) {\n    grid-template-areas: 'icon content';\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host([separator]:not([separator=\"false\"])) {\n    display: block;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus-visible) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n::slotted(q2-item){\n    padding: var(--app-scale-1x, 5px) 0;\n}\n\n.content {\n    display: block;\n    grid-area: content;\n    font-size: var(--tct-option-content-font-size, inherit);\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\nimport { hasValidAncestor } from '@/utils/component';\n\n/**\n * @name Option\n * @category Forms\n * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.\n */\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Disables child q2-option selectable state and removes the selector space.\n     * @private\n     */\n    @Prop({ reflect: true })\n    _hideSelectedBlock: boolean = false;\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean = false;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        hasValidAncestor(this.hostElement, 'q2-select, q2-option-list, q2-pill, q2-dropdown');\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    displayChangedHandler() {\n        this.display = loc(this.display);\n        this.setTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    @Watch('separator')\n    separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        this.setTextContent();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    setTextContent = () => {\n        const hasLoc: boolean = !!this.hostElement.querySelector('q2-loc');\n        if (this.multiline || hasLoc) return;\n        this.hostElement.textContent = loc(this.display);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden, role } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={role === 'menuitem' ? undefined : `${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && !this._hideSelectedBlock && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"names":["getAllText","loc","hasValidAncestor","h","Host"],"mappings":"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"}

package/dist/cjs/q2-otp.cjs.entry.js

@@ -0,0 +1,373 @@
+'use strict';
+
+var index = require('./index-BYXz4owL.js');
+var index$1 = require('./index-DmGkqdX2.js');
+
+const q2OtpCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-otp-margin:var(--tct-otp-margin-top, var(--t-otp-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-otp-margin-bottom, var(--t-otp-margin-bottom, var(--app-scale-5x, 25px)));--comp-otp-tween:var(--tct-otp-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));--comp-otp-vertical-gap:var(--tct-otp-vertical-gap, var(--app-scale-4x, 20px));--comp-otp-field-size:44px;--comp-otp-field-gap:var(--tct-otp-field-gap, var(--app-scale-2x, 10px));--comp-otp-field-background:var(--tct-otp-field-background, var(--t-base, #FFFFFF));--comp-otp-field-border-color:var(--tct-otp-field-border-color, var(--t-a11y-gray-color-AA, #404040));--comp-otp-field-border-radius:var(--tct-otp-field-border-radius, var(--tct-border-radius-2, var(--app-border-radius-2, 8px)));--comp-otp-field-border-width:var(--tct-otp-field-border-width, 1px);--comp-otp-field-font-color:var(--tct-otp-field-font-color, var(--t-text, inherit));--comp-otp-field-font-size:var(--tct-otp-field-font-size, var(--app-font-size, 16px));--comp-otp-field-masked-color:var(--tct-otp-field-masked-color, var(--tct-otp-field-font-color, var(--t-text, #1f1f1f)));--comp-otp-field-masked-size:var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, 8px));--comp-otp-field-font-weight:var(--tct-otp-field-font-weight, 400);--comp-otp-field-focus-box-shadow:var(--tct-otp-field-focus-box-shadow, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));--comp-otp-field-error-border-color:var(--tct-otp-field-error-border-color, var(--const-stoplight-alert, #C30000));--comp-otp-field-error-focus-ring-color:var(--tct-otp-field-error-focus-ring-color, #c30000);--comp-otp-field-error-focus-box-shadow:var(--tct-otp-field-error-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color));--comp-otp-field-success-border-color:var(--tct-otp-field-success-border-color, var(--const-stoplight-success, #0e8a00));--comp-otp-field-success-focus-ring-color:var(--tct-otp-field-success-focus-ring-color, #0e8a00);--comp-otp-field-success-focus-box-shadow:var(--tct-otp-field-success-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color));--comp-otp-field-disabled-opacity:var(--tct-otp-field-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));--comp-otp-separator-color:var(--tct-otp-separator-color, var(--t-textA, var(--t-a11y-gray-color, #4d4d4d)));--comp-otp-separator-font-size:var(--tct-otp-separator-font-size, 20px);--comp-otp-separator-font-weight:var(--tct-otp-separator-font-weight, 600);display:flex;justify-content:center;margin:var(--tct-otp-margin, var(--comp-default-otp-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.otp-container{align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.otp-label{display:block;color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit));text-align:center;text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));transition:color var(--comp-otp-tween);width:100%}.helper-text{color:var(--tct-otp-helper-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-otp-helper-font-size, var(--app-font-size-small, 12px));text-align:center}.otp-content{align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.send-code-hidden{clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute;width:1px}.otp-control-group{align-items:center;display:flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%;width:max-content}.fields-container{align-items:center;display:flex;flex-wrap:nowrap;gap:var(--comp-otp-field-gap);justify-content:center;pointer-events:none;position:relative;width:max-content}.fields-shell{max-width:100%;padding:4px;position:relative;width:max-content}.otp-hidden-input{appearance:none;-webkit-appearance:none;background:transparent;border:0;caret-color:transparent;color:transparent;cursor:text;font-size:16px;height:100%;inset:0;margin:0;opacity:1;outline:none;padding:0;pointer-events:auto;position:absolute;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent}.otp-hidden-input::selection{background:transparent;color:transparent}.otp-hidden-input:focus,.otp-hidden-input:focus-visible{outline:none;box-shadow:none}.otp-hidden-input:disabled{cursor:not-allowed}.otp-slot{align-items:center;background:var(--comp-otp-field-background);border-color:var(--comp-otp-field-border-color);border-radius:var(--comp-otp-field-border-radius);border-style:solid;border-width:var(--comp-otp-field-border-width);box-sizing:border-box;color:var(--comp-otp-field-font-color);display:flex;flex:0 0 var(--comp-otp-field-size);height:var(--comp-otp-field-size);justify-content:center;position:relative;transition:border-color var(--comp-otp-tween), box-shadow var(--comp-otp-tween), opacity var(--comp-otp-tween);width:var(--comp-otp-field-size)}.otp-slot.is-active{border-color:var(--tct-otp-field-focus-border-color, var(--comp-otp-field-border-color));box-shadow:var(--comp-otp-field-focus-box-shadow)}.otp-slot .otp-caret{animation:otp-caret-blink 1s step-end infinite;background:currentColor;display:block;height:50%;pointer-events:none;width:2px}.state-error .otp-slot{border-color:var(--comp-otp-field-error-border-color)}.state-error .otp-slot.is-active{box-shadow:var(--comp-otp-field-error-focus-box-shadow)}.state-success .otp-slot{border-color:var(--comp-otp-field-success-border-color)}.state-success .otp-slot.is-active{box-shadow:var(--comp-otp-field-success-focus-box-shadow)}:host([disabled]) .otp-slot{opacity:var(--comp-otp-field-disabled-opacity)}:host([disabled]) .otp-hidden-input{cursor:not-allowed}@keyframes otp-caret-blink{0%,100%{opacity:1}50%{opacity:0}}.otp-char{color:var(--comp-otp-field-font-color);font-family:inherit;font-size:var(--comp-otp-field-font-size);font-weight:var(--comp-otp-field-font-weight);line-height:1;pointer-events:none;user-select:none}.otp-dot{background:var(--comp-otp-field-masked-color);border-radius:50%;display:block;height:var(--comp-otp-field-masked-size);pointer-events:none;width:var(--comp-otp-field-masked-size)}.otp-separator{color:var(--comp-otp-separator-color);font-size:var(--comp-otp-separator-font-size);font-weight:var(--comp-otp-separator-font-weight)}.submit-button{width:100%}.processing-overlay{align-items:center;background:var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));border-radius:var(--comp-otp-field-border-radius);display:flex;inset:0;justify-content:center;pointer-events:auto;position:absolute;--tct-loading-spinner-size:var(--tct-otp-processing-spinner-size, 32px);z-index:1}.otp-message{margin:0;text-align:center;width:100%}";
+
+const Q2Otp = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tctClear = index.createEvent(this, "tctClear", 7);
+        this.tctComplete = index.createEvent(this, "tctComplete", 7);
+        this.tctInput = index.createEvent(this, "tctInput", 7);
+        this.tctSendCode = index.createEvent(this, "tctSendCode", 7);
+        this.tctSubmit = index.createEvent(this, "tctSubmit", 7);
+        // #region Own Properties
+        this.defaultSendCodeLabel = 'tecton.element.otp.sendCode';
+        this.defaultSendCodeLabelValue = 'Send code';
+        this.defaultSubmitLabel = 'tecton.element.otp.verify';
+        this.defaultSubmitLabelValue = 'Verify';
+        this.guid = index$1.createGuid();
+        this.hasAutoFocused = false;
+        // #endregion
+        // #region State Properties
+        this.hasFocus = false;
+        // #endregion
+        // #region Public Property API
+        /** Focuses the first one-time password field when the component loads. */
+        this.autoFocus = false;
+        /** Triggers submission when the last field is filled. */
+        this.autoSubmit = false;
+        /** Clears all fields and returns focus to the first field when `state` becomes `error`. */
+        this.clearOnError = false;
+        /** Disables all one-time password fields. */
+        this.disabled = false;
+        /** Number of one-time password fields. */
+        this.length = 4 | 6 | 8;
+        /** Obscures entered characters. */
+        this.masked = false;
+        /** Toggles helper text visibility. */
+        this.showHelperText = false;
+        /**
+         * Renders fields in two equal groups with a dash separator.
+         * @private
+         */
+        this.split = false;
+        /** The composed one-time password value. */
+        this.value = '';
+        this.handleFocusIn = () => {
+            if (this.state === 'error') {
+                this.value = '';
+                if (this.inputRef)
+                    this.inputRef.value = '';
+                this.state = undefined;
+            }
+            this.hasFocus = true;
+        };
+        this.handleFocusOut = (event) => {
+            if (this.autoFocus && this.hasAutoFocused && !this.value && !event.relatedTarget) {
+                return;
+            }
+            this.hasFocus = false;
+        };
+        this.handleInputEvent = () => {
+            if (this.disabled || this.locksInput) {
+                this.inputRef.value = this.value;
+                return;
+            }
+            const digits = this.filterDigits(this.inputRef.value);
+            this.inputRef.value = digits;
+            if (this.state === 'error') {
+                this.state = undefined;
+            }
+            this.value = digits;
+            this.tctInput.emit({ value: digits });
+            if (digits.length === this.normalizedLength) {
+                this.handleComplete(digits);
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== 'Enter')
+                return;
+            if (this.disabled || this.locksInput || !this.isComplete)
+                return;
+            event.preventDefault();
+            this.submit();
+        };
+        this.handlePaste = (event) => {
+            var _a, _b;
+            event.preventDefault();
+            if (this.disabled || this.locksInput)
+                return;
+            const pastedValue = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            const digits = this.filterDigits(pastedValue);
+            this.inputRef.value = digits;
+            if (this.state === 'error') {
+                this.state = undefined;
+            }
+            this.value = digits;
+            this.tctInput.emit({ value: digits });
+            if (digits.length === this.normalizedLength) {
+                this.handleComplete(digits);
+            }
+        };
+        this.handleSendCodeClick = () => {
+            var _a;
+            if (this.disabled)
+                return;
+            (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+            this.state = undefined;
+            this.tctSendCode.emit();
+        };
+        this.handleSubmitClick = () => {
+            if (this.isVerifying || this.isSuccess)
+                return;
+            this.submit();
+        };
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.value = this.filterDigits(this.value);
+    }
+    componentDidLoad() {
+        index$1.overrideFocus(this.hostElement);
+        this.focusOnLoad();
+    }
+    componentDidRender() {
+        this.focusOnLoad();
+    }
+    // #endregion
+    // #region Listeners
+    onHostElementFocus(event) {
+        var _a, _b;
+        if (this.disabled || this.locksInput)
+            return;
+        if (!index$1.isEventFromElement(event, this.hostElement))
+            return;
+        if (this.isAwaitingSendCode) {
+            (_a = this.sendCodeRef) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Clears all fields, focuses the first field, and emits `tctClear`.
+     */
+    async clear() {
+        this.clearValue(true);
+    }
+    /**
+     * Clears the component and resets error, success, and processing state.
+     */
+    async reset() {
+        this.clearValue(true);
+        this.state = undefined;
+    }
+    // #endregion
+    // #region Watchers
+    autoFocusObserver() {
+        this.focusOnLoad();
+    }
+    lengthObserver() {
+        if (this.value.length > this.normalizedLength) {
+            this.value = this.value.slice(0, this.normalizedLength);
+        }
+    }
+    stateObserver(state) {
+        if (state === null) {
+            Promise.resolve().then(() => {
+                if (this.state === null)
+                    this.state = undefined;
+            });
+            return;
+        }
+        if (state === 'error' && this.clearOnError) {
+            this.clearValue(true);
+        }
+    }
+    valueObserver() {
+        const digits = this.filterDigits(this.value);
+        if (digits !== this.value) {
+            this.value = digits;
+        }
+        if (this.inputRef && this.inputRef.value !== digits) {
+            this.inputRef.value = digits;
+        }
+    }
+    // #endregion
+    // #region Local Methods
+    get activeSlotIndex() {
+        return Math.min(this.value.length, this.normalizedLength - 1);
+    }
+    get componentId() {
+        return `q2-otp-${this.guid}`;
+    }
+    get describedBy() {
+        const ids = [];
+        if (this.state === 'error' && this.errorMessage)
+            ids.push(this.messageId);
+        if (this.state === 'success' && this.successMessage)
+            ids.push(this.messageId);
+        return ids.length ? ids.join(' ') : undefined;
+    }
+    get hasVisibleHelperText() {
+        return this.showHelperText && !!this.helperText;
+    }
+    get helperTextId() {
+        return `${this.componentId}-helper-text`;
+    }
+    get inputAriaLabel() {
+        const inputLabel = `${this.localizedLabel} (${this.normalizedLength} ${index$1.loc('tecton.element.otp.digits')})`;
+        return [this.hasVisibleHelperText ? this.localizedHelperText : '', inputLabel].filter(Boolean).join(' ');
+    }
+    get isAwaitingSendCode() {
+        return this.state === 'ready';
+    }
+    get isComplete() {
+        return this.value.length === this.normalizedLength;
+    }
+    get isSuccess() {
+        return this.state === 'success';
+    }
+    get isVerifying() {
+        return this.state === 'verifying';
+    }
+    get labelId() {
+        return `${this.componentId}-label`;
+    }
+    get localizedHelperText() {
+        return index$1.loc(this.helperText);
+    }
+    get localizedLabel() {
+        return index$1.loc(this.label);
+    }
+    get localizedProcessingLabel() {
+        return index$1.loc(this.processingLabel || 'Verifying');
+    }
+    get localizedSendCodeLabel() {
+        if (this.sendCodeLabel)
+            return index$1.loc(this.sendCodeLabel);
+        const localizedLabel = index$1.loc(this.defaultSendCodeLabel);
+        return localizedLabel === this.defaultSendCodeLabel ? this.defaultSendCodeLabelValue : localizedLabel;
+    }
+    get localizedSubmitLabel() {
+        if (this.submitLabel)
+            return index$1.loc(this.submitLabel);
+        const localizedLabel = index$1.loc(this.defaultSubmitLabel);
+        return localizedLabel === this.defaultSubmitLabel ? this.defaultSubmitLabelValue : localizedLabel;
+    }
+    get locksInput() {
+        return this.isVerifying || this.isSuccess;
+    }
+    get messageId() {
+        return `${this.componentId}-message`;
+    }
+    get normalizedLength() {
+        const length = Number(this.length);
+        return [4, 6, 8].includes(length) ? length : 6;
+    }
+    clearValue(emitEvent = false) {
+        var _a;
+        this.value = '';
+        if (this.inputRef)
+            this.inputRef.value = '';
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        if (emitEvent)
+            this.tctClear.emit({ value: '' });
+    }
+    filterDigits(value) {
+        return value.replace(/\D/g, '').slice(0, this.normalizedLength);
+    }
+    focusOnLoad() {
+        if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput)
+            return;
+        setTimeout(() => {
+            if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput || !this.inputRef) {
+                return;
+            }
+            this.hasAutoFocused = true;
+            this.hasFocus = true;
+            this.inputRef.focus();
+        }, 100);
+    }
+    handleComplete(digits) {
+        this.tctComplete.emit({ value: digits });
+        if (this.autoSubmit) {
+            setTimeout(() => this.submit(digits), 150);
+        }
+    }
+    submit(value = this.value) {
+        this.state = 'verifying';
+        this.tctSubmit.emit({ value });
+    }
+    // #endregion
+    // #region Render Methods
+    renderFields() {
+        return Array.from({ length: this.normalizedLength }, (_, index$1) => {
+            const char = this.value[index$1] || '';
+            const isActive = this.hasFocus && index$1 === this.activeSlotIndex;
+            const hasValue = !!char;
+            return [
+                this.split && index$1 === this.normalizedLength / 2 && (index.h("span", { "aria-hidden": "true", class: "otp-separator" }, "-")),
+                index.h("div", { class: {
+                        'otp-slot': true,
+                        'is-active': isActive,
+                        'has-value': hasValue,
+                    } }, isActive && !hasValue ? (index.h("span", { class: "otp-caret", "aria-hidden": "true" })) : this.masked && hasValue ? (index.h("span", { class: "otp-dot" })) : (index.h("span", { class: "otp-char" }, char))),
+            ];
+        });
+    }
+    renderHelperText() {
+        if (!this.hasVisibleHelperText)
+            return;
+        return (index.h("div", { class: "helper-text", id: this.helperTextId }, this.localizedHelperText));
+    }
+    renderLabel() {
+        if (!this.label)
+            return;
+        return (index.h("div", { class: "otp-label", id: this.labelId }, this.localizedLabel));
+    }
+    renderMessage() {
+        if (this.state === 'error' && this.errorMessage) {
+            return (index.h("q2-message", { appearance: "minimal", class: "otp-message", id: this.messageId, type: "error" }, index$1.loc(this.errorMessage)));
+        }
+        if (this.state === 'success' && this.successMessage) {
+            return (index.h("q2-message", { appearance: "minimal", class: "otp-message", id: this.messageId, type: "success" }, index$1.loc(this.successMessage)));
+        }
+    }
+    renderProcessingOverlay() {
+        if (this.autoSubmit && this.isVerifying) {
+            return (index.h("div", { class: "processing-overlay" }, index.h("q2-loading", { label: this.localizedProcessingLabel })));
+        }
+    }
+    renderSendCodeButton() {
+        if (!this.isAwaitingSendCode)
+            return;
+        return (index.h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "workflow-primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
+    }
+    renderSubmitArea() {
+        if (this.isSuccess) {
+            return (index.h("q2-btn", { block: true, class: "submit-button", intent: "neutral", onClick: this.handleSubmitClick }, index.h("q2-icon", { type: "checkmark" }), index$1.loc('Success')));
+        }
+        return (index.h("q2-btn", { block: true, class: "submit-button", disabled: this.disabled || !this.isComplete, intent: "workflow-primary", label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel, loading: this.isVerifying, onClick: this.handleSubmitClick }));
+    }
+    render() {
+        return (index.h("div", { key: '3befb9c99f5fa35e6f7d653b256306513499e2fe', "aria-busy": this.isVerifying ? 'true' : undefined, "aria-labelledby": this.label ? this.labelId : undefined, class: {
+                'otp-container': true,
+                'has-focus': this.hasFocus,
+                'is-masked': this.masked,
+                'send-code-pending': this.isAwaitingSendCode,
+                'state-error': this.state === 'error',
+                'state-success': this.state === 'success',
+                'state-verifying': this.isVerifying,
+                [`length-${this.normalizedLength}`]: true,
+            }, role: "group" }, this.renderSendCodeButton(), index.h("div", { key: '813749faba075fda49bc4aa05366479b386b9256', class: { 'otp-content': true, 'send-code-hidden': this.isAwaitingSendCode } }, this.renderLabel(), index.h("div", { key: 'b9e4967cebebbec209359b6463502d9daab9a587', class: "otp-control-group" }, index.h("div", { key: '611bff112f241cde331858545954a9dd3ce4d116', class: "fields-shell" }, index.h("div", { key: '38b2d554c171c8b20ec075e2f9ccb6822274214d', class: "fields-container" }, index.h("input", { key: '3a2f27e7aa17940b070b1c7ce9b472d8c498192e', "aria-describedby": this.describedBy, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.inputAriaLabel, autocomplete: "one-time-code", autofocus: this.autoFocus, class: "otp-hidden-input", disabled: this.disabled || this.isVerifying || this.isSuccess, inputmode: "numeric", maxLength: this.normalizedLength, onBlur: this.handleFocusOut, onFocus: this.handleFocusIn, onInput: this.handleInputEvent, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, pattern: "[0-9]*", ref: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "autoFocus": ["autoFocusObserver"],
+        "length": ["lengthObserver"],
+        "state": ["stateObserver"],
+        "value": ["valueObserver"]
+    }; }
+};
+Q2Otp.style = q2OtpCss;
+
+exports.q2_otp = Q2Otp;
+//# sourceMappingURL=q2-otp.entry.cjs.js.map
+
+//# sourceMappingURL=q2-otp.cjs.entry.js.map

package/dist/cjs/q2-otp.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"q2-otp.entry.cjs.js","mappings":"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","names":["createGuid","overrideFocus","isEventFromElement","loc","index","h"],"sources":["src/components/q2-otp/q2-otp.scss?tag=q2-otp&encapsulation=shadow","src/components/q2-otp/q2-otp.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-otp-margin: #{var-list(var-prefixer(otp-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(otp-margin-bottom), --app-scale-5x, 25px)};\n    --comp-otp-tween: #{var-list(--tct-otp-tween, --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    --comp-otp-vertical-gap: #{var-list(--tct-otp-vertical-gap, --app-scale-4x, 20px)};\n    --comp-otp-field-size: 44px;\n    --comp-otp-field-gap: #{var-list(--tct-otp-field-gap, --app-scale-2x, 10px)};\n    --comp-otp-field-background: #{var-list(--tct-otp-field-background, --t-base, #FFFFFF)};\n    --comp-otp-field-border-color: #{var-list(--tct-otp-field-border-color, --t-a11y-gray-color-AA, #404040)};\n    --comp-otp-field-border-radius: #{var-list(\n            --tct-otp-field-border-radius,\n            --tct-border-radius-2,\n            --app-border-radius-2,\n            8px\n        )};\n    --comp-otp-field-border-width: #{var-list(--tct-otp-field-border-width, 1px)};\n    --comp-otp-field-font-color: #{var-list(--tct-otp-field-font-color, --t-text, inherit)};\n    --comp-otp-field-font-size: #{var-list(--tct-otp-field-font-size, --app-font-size, 16px)};\n    --comp-otp-field-masked-color: #{var-list(--tct-otp-field-masked-color, --tct-otp-field-font-color, --t-text, #1f1f1f)};\n    --comp-otp-field-masked-size: #{var-list(--tct-otp-field-masked-size, --tct-otp-field-masked-font-size, 8px)};\n    --comp-otp-field-font-weight: #{var-list(--tct-otp-field-font-weight, 400)};\n    --comp-otp-field-focus-box-shadow: #{var-list(\n            --tct-otp-field-focus-box-shadow,\n            --const-double-focus-ring,\n            unquote('0 0 0 2px #ffffff, 0 0 0 4px #0066cc')\n        )};\n    --comp-otp-field-error-border-color: #{var-list(--tct-otp-field-error-border-color, --const-stoplight-alert, #C30000)};\n    --comp-otp-field-error-focus-ring-color: #{var-list(--tct-otp-field-error-focus-ring-color, #c30000)};\n    --comp-otp-field-error-focus-box-shadow: #{var-list(\n            --tct-otp-field-error-focus-box-shadow,\n            unquote('0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color)')\n        )};\n    --comp-otp-field-success-border-color: #{var-list(--tct-otp-field-success-border-color, --const-stoplight-success, #0e8a00)};\n    --comp-otp-field-success-focus-ring-color: #{var-list(--tct-otp-field-success-focus-ring-color, #0e8a00)};\n    --comp-otp-field-success-focus-box-shadow: #{var-list(\n            --tct-otp-field-success-focus-box-shadow,\n            unquote('0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color)')\n        )};\n    --comp-otp-field-disabled-opacity: #{var-list(\n            --tct-otp-field-disabled-opacity,\n            --tct-disabled-opacity,\n            --app-disabled-opacity,\n            0.4\n        )};\n    --comp-otp-separator-color: #{var-list(--tct-otp-separator-color, --t-textA, --t-a11y-gray-color, #4d4d4d)};\n    --comp-otp-separator-font-size: #{var-list(--tct-otp-separator-font-size, 20px)};\n    --comp-otp-separator-font-weight: #{var-list(--tct-otp-separator-font-weight, 600)};\n\n    display: flex;\n    justify-content: center;\n    margin: var-list(--tct-otp-margin, --comp-default-otp-margin);\n    font-size: var-list(var-prefixer(input-font-size), --app-font-size, inherit);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.otp-container {\n    align-items: center;\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--comp-otp-vertical-gap);\n    max-width: 100%;\n}\n\n.otp-label {\n    display: block;\n    color: var-list(var-prefixer(input-label-font-color), inherit);\n    font-size: var-list(var-prefixer(input-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(input-label-font-weight), 600);\n    letter-spacing: var-list(var-prefixer(input-label-letter-spacing), inherit);\n    line-height: var-list(var-prefixer(input-label-line-height), inherit);\n    text-align: center;\n    text-transform: var-list(var-prefixer(input-label-text-transform), none);\n    transition: color var(--comp-otp-tween);\n    width: 100%;\n}\n\n.helper-text {\n    color: var-list(--tct-otp-helper-font-color, --t-textA, --t-a11y-gray-color, rgba(77, 77, 77, 0.77));\n    font-size: var-list(--tct-otp-helper-font-size, --app-font-size-small, 12px);\n    text-align: center;\n}\n\n.otp-content {\n    align-items: center;\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--comp-otp-vertical-gap);\n    max-width: 100%;\n}\n\n.send-code-hidden {\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    width: 1px;\n}\n\n.otp-control-group {\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    gap: var(--comp-otp-vertical-gap);\n    max-width: 100%;\n    width: max-content;\n}\n\n.fields-container {\n    align-items: center;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--comp-otp-field-gap);\n    justify-content: center;\n    pointer-events: none;\n    position: relative;\n    width: max-content;\n}\n\n.fields-shell {\n    max-width: 100%;\n    padding: 4px;\n    position: relative;\n    width: max-content;\n}\n\n.otp-hidden-input {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    caret-color: transparent;\n    color: transparent;\n    cursor: text;\n    font-size: 16px;\n    height: 100%;\n    inset: 0;\n    margin: 0;\n    opacity: 1;\n    outline: none;\n    padding: 0;\n    pointer-events: auto;\n    position: absolute;\n    width: 100%;\n    z-index: 1;\n    -webkit-tap-highlight-color: transparent;\n    -webkit-text-fill-color: transparent;\n\n    &::selection {\n        background: transparent;\n        color: transparent;\n    }\n\n    &:focus,\n    &:focus-visible {\n        outline: none;\n        box-shadow: none;\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n}\n\n.otp-slot {\n    align-items: center;\n    background: var(--comp-otp-field-background);\n    border-color: var(--comp-otp-field-border-color);\n    border-radius: var(--comp-otp-field-border-radius);\n    border-style: solid;\n    border-width: var(--comp-otp-field-border-width);\n    box-sizing: border-box;\n    color: var(--comp-otp-field-font-color);\n    display: flex;\n    flex: 0 0 var(--comp-otp-field-size);\n    height: var(--comp-otp-field-size);\n    justify-content: center;\n    position: relative;\n    transition:\n        border-color var(--comp-otp-tween),\n        box-shadow var(--comp-otp-tween),\n        opacity var(--comp-otp-tween);\n    width: var(--comp-otp-field-size);\n\n    &.is-active {\n        border-color: var-list(--tct-otp-field-focus-border-color, --comp-otp-field-border-color);\n        box-shadow: var(--comp-otp-field-focus-box-shadow);\n    }\n\n    .otp-caret {\n        animation: otp-caret-blink 1s step-end infinite;\n        background: currentColor;\n        display: block;\n        height: 50%;\n        pointer-events: none;\n        width: 2px;\n    }\n\n    .state-error & {\n        border-color: var(--comp-otp-field-error-border-color);\n\n        &.is-active {\n            box-shadow: var(--comp-otp-field-error-focus-box-shadow);\n        }\n    }\n\n    .state-success & {\n        border-color: var(--comp-otp-field-success-border-color);\n\n        &.is-active {\n            box-shadow: var(--comp-otp-field-success-focus-box-shadow);\n        }\n    }\n}\n\n:host([disabled]) .otp-slot {\n    opacity: var(--comp-otp-field-disabled-opacity);\n}\n\n:host([disabled]) .otp-hidden-input {\n    cursor: not-allowed;\n}\n\n@keyframes otp-caret-blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n}\n\n.otp-char {\n    color: var(--comp-otp-field-font-color);\n    font-family: inherit;\n    font-size: var(--comp-otp-field-font-size);\n    font-weight: var(--comp-otp-field-font-weight);\n    line-height: 1;\n    pointer-events: none;\n    user-select: none;\n}\n\n.otp-dot {\n    background: var(--comp-otp-field-masked-color);\n    border-radius: 50%;\n    display: block;\n    height: var(--comp-otp-field-masked-size);\n    pointer-events: none;\n    width: var(--comp-otp-field-masked-size);\n}\n\n.otp-separator {\n    color: var(--comp-otp-separator-color);\n    font-size: var(--comp-otp-separator-font-size);\n    font-weight: var(--comp-otp-separator-font-weight);\n}\n\n.submit-button {\n    width: 100%;\n}\n\n.processing-overlay {\n    align-items: center;\n    background: var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));\n    border-radius: var(--comp-otp-field-border-radius);\n    display: flex;\n    inset: 0;\n    justify-content: center;\n    pointer-events: auto;\n    position: absolute;\n    --tct-loading-spinner-size: var(--tct-otp-processing-spinner-size, 32px);\n    z-index: 1;\n}\n\n.otp-message {\n    margin: 0;\n    text-align: center;\n    width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n/**\n * @name One-Time Password\n * @category Forms\n * @summary Use for entering a short one-time verification code.\n */\n@Component({ tag: 'q2-otp', shadow: true, styleUrl: 'q2-otp.scss' })\nexport class Q2Otp {\n    // #region Own Properties\n\n    private readonly defaultSendCodeLabel = 'tecton.element.otp.sendCode';\n    private readonly defaultSendCodeLabelValue = 'Send code';\n    private readonly defaultSubmitLabel = 'tecton.element.otp.verify';\n    private readonly defaultSubmitLabelValue = 'Verify';\n    guid = createGuid();\n    hasAutoFocused = false;\n    inputRef: HTMLInputElement;\n    sendCodeRef: HTMLElement;\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    hasFocus: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Focuses the first one-time password field when the component loads. */\n    @Prop({ reflect: true })\n    autoFocus: boolean = false;\n\n    /** Triggers submission when the last field is filled. */\n    @Prop({ reflect: true })\n    autoSubmit: boolean = false;\n\n    /** Clears all fields and returns focus to the first field when `state` becomes `error`. */\n    @Prop({ reflect: true })\n    clearOnError: boolean = false;\n\n    /** Disables all one-time password fields. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Error message rendered below the submit area.\n     * @localizable\n     */\n    @Prop()\n    errorMessage: string;\n\n    /**\n     * Helper text content.\n     * @localizable\n     */\n    @Prop()\n    helperText: string;\n\n    /**\n     * Visible label above the one-time password fields.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Number of one-time password fields. */\n    @Prop({ reflect: true })\n    length: number = 4 | 6 | 8;\n\n    /** Obscures entered characters. */\n    @Prop({ reflect: true })\n    masked: boolean = false;\n\n    /**\n     * Button text during processing.\n     * @localizable\n     */\n    @Prop()\n    processingLabel: string;\n\n    /**\n     * Button text for the send-code action.\n     * @localizable\n     */\n    @Prop()\n    sendCodeLabel: string;\n\n    /** Toggles helper text visibility. */\n    @Prop({ reflect: true })\n    showHelperText: boolean = false;\n\n    /**\n     * Renders fields in two equal groups with a dash separator.\n     * @private\n     */\n    @Prop({ reflect: true })\n    split: boolean = false;\n\n    /**\n     * Sets the visual status for the one-time password fields.\n     *\n     * - `ready` — Shows the send-code button and hides the input fields until the user requests a code.\n     * - `error` — Displays an error style on the fields. If `errorMessage` is set, it renders below the submit area.\n     *   When `clearOnError` is enabled, all fields are cleared and focus returns to the first field.\n     * - `success` — Locks the input, replaces the submit button with a success indicator, and displays the\n     *   `successMessage` if provided.\n     * - `verifying` — Locks the input and puts the submit button into a loading state. When combined with `autoSubmit`,\n     *   a processing overlay with `processingLabel` is shown over the fields.\n     */\n    @Prop({ reflect: true, mutable: true })\n    state: 'error' | 'ready' | 'success' | 'verifying' | undefined;\n\n    /**\n     * Renders a submit button with this label.\n     * @localizable\n     */\n    @Prop()\n    submitLabel: string;\n\n    /**\n     * Success message rendered below the submit area.\n     * @localizable\n     */\n    @Prop()\n    successMessage: string;\n\n    /** The composed one-time password value. */\n    @Prop({ mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the fields are cleared. */\n    @Event()\n    tctClear: EventEmitter<{ value: string }>;\n\n    /** Emitted when all fields are filled. */\n    @Event()\n    tctComplete: EventEmitter<{ value: string }>;\n\n    /** Emitted when any field value changes. */\n    @Event()\n    tctInput: EventEmitter<{ value: string }>;\n\n    /** Emitted when the send-code button is clicked. */\n    @Event()\n    tctSendCode: EventEmitter<void>;\n\n    /** Emitted when the submit button is clicked or auto-submit triggers. */\n    @Event()\n    tctSubmit: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void {\n        this.value = this.filterDigits(this.value);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.focusOnLoad();\n    }\n\n    componentDidRender(): void {\n        this.focusOnLoad();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent): void {\n        if (this.disabled || this.locksInput) return;\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (this.isAwaitingSendCode) {\n            this.sendCodeRef?.focus();\n            return;\n        }\n        this.inputRef?.focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Clears all fields, focuses the first field, and emits `tctClear`.\n     */\n    @Method()\n    async clear(): Promise<void> {\n        this.clearValue(true);\n    }\n\n    /**\n     * Clears the component and resets error, success, and processing state.\n     */\n    @Method()\n    async reset(): Promise<void> {\n        this.clearValue(true);\n        this.state = undefined;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoFocus')\n    autoFocusObserver(): void {\n        this.focusOnLoad();\n    }\n\n    @Watch('length')\n    lengthObserver(): void {\n        if (this.value.length > this.normalizedLength) {\n            this.value = this.value.slice(0, this.normalizedLength);\n        }\n    }\n\n    @Watch('state')\n    stateObserver(state: string | null): void {\n        if (state === null) {\n            Promise.resolve().then(() => {\n                if (this.state === null) this.state = undefined;\n            });\n            return;\n        }\n\n        if (state === 'error' && this.clearOnError) {\n            this.clearValue(true);\n        }\n    }\n\n    @Watch('value')\n    valueObserver(): void {\n        const digits = this.filterDigits(this.value);\n        if (digits !== this.value) {\n            this.value = digits;\n        }\n        if (this.inputRef && this.inputRef.value !== digits) {\n            this.inputRef.value = digits;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get activeSlotIndex(): number {\n        return Math.min(this.value.length, this.normalizedLength - 1);\n    }\n\n    get componentId(): string {\n        return `q2-otp-${this.guid}`;\n    }\n\n    get describedBy(): string | undefined {\n        const ids = [];\n        if (this.state === 'error' && this.errorMessage) ids.push(this.messageId);\n        if (this.state === 'success' && this.successMessage) ids.push(this.messageId);\n        return ids.length ? ids.join(' ') : undefined;\n    }\n\n    get hasVisibleHelperText(): boolean {\n        return this.showHelperText && !!this.helperText;\n    }\n\n    get helperTextId(): string {\n        return `${this.componentId}-helper-text`;\n    }\n\n    get inputAriaLabel(): string {\n        const inputLabel = `${this.localizedLabel} (${this.normalizedLength} ${loc('tecton.element.otp.digits')})`;\n        return [this.hasVisibleHelperText ? this.localizedHelperText : '', inputLabel].filter(Boolean).join(' ');\n    }\n\n    get isAwaitingSendCode(): boolean {\n        return this.state === 'ready';\n    }\n\n    get isComplete(): boolean {\n        return this.value.length === this.normalizedLength;\n    }\n\n    get isSuccess(): boolean {\n        return this.state === 'success';\n    }\n\n    get isVerifying(): boolean {\n        return this.state === 'verifying';\n    }\n\n    get labelId(): string {\n        return `${this.componentId}-label`;\n    }\n\n    get localizedHelperText(): string {\n        return loc(this.helperText);\n    }\n\n    get localizedLabel(): string {\n        return loc(this.label);\n    }\n\n    get localizedProcessingLabel(): string {\n        return loc(this.processingLabel || 'Verifying');\n    }\n\n    get localizedSendCodeLabel(): string {\n        if (this.sendCodeLabel) return loc(this.sendCodeLabel);\n\n        const localizedLabel = loc(this.defaultSendCodeLabel);\n        return localizedLabel === this.defaultSendCodeLabel ? this.defaultSendCodeLabelValue : localizedLabel;\n    }\n\n    get localizedSubmitLabel(): string {\n        if (this.submitLabel) return loc(this.submitLabel);\n\n        const localizedLabel = loc(this.defaultSubmitLabel);\n        return localizedLabel === this.defaultSubmitLabel ? this.defaultSubmitLabelValue : localizedLabel;\n    }\n\n    get locksInput(): boolean {\n        return this.isVerifying || this.isSuccess;\n    }\n\n    get messageId(): string {\n        return `${this.componentId}-message`;\n    }\n\n    get normalizedLength() {\n        const length = Number(this.length);\n        return [4, 6, 8].includes(length) ? length : 6;\n    }\n\n    clearValue(emitEvent = false): void {\n        this.value = '';\n        if (this.inputRef) this.inputRef.value = '';\n        this.inputRef?.focus();\n        if (emitEvent) this.tctClear.emit({ value: '' });\n    }\n\n    filterDigits(value: string): string {\n        return value.replace(/\\D/g, '').slice(0, this.normalizedLength);\n    }\n\n    focusOnLoad(): void {\n        if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput) return;\n\n        setTimeout(() => {\n            if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput || !this.inputRef) {\n                return;\n            }\n\n            this.hasAutoFocused = true;\n            this.hasFocus = true;\n            this.inputRef.focus();\n        }, 100);\n    }\n\n    handleComplete(digits: string): void {\n        this.tctComplete.emit({ value: digits });\n\n        if (this.autoSubmit) {\n            setTimeout(() => this.submit(digits), 150);\n        }\n    }\n\n    handleFocusIn = () => {\n        if (this.state === 'error') {\n            this.value = '';\n            if (this.inputRef) this.inputRef.value = '';\n            this.state = undefined;\n        }\n        this.hasFocus = true;\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        if (this.autoFocus && this.hasAutoFocused && !this.value && !event.relatedTarget) {\n            return;\n        }\n        this.hasFocus = false;\n    };\n\n    handleInputEvent = () => {\n        if (this.disabled || this.locksInput) {\n            this.inputRef.value = this.value;\n            return;\n        }\n\n        const digits = this.filterDigits(this.inputRef.value);\n        this.inputRef.value = digits;\n\n        if (this.state === 'error') {\n            this.state = undefined;\n        }\n\n        this.value = digits;\n        this.tctInput.emit({ value: digits });\n\n        if (digits.length === this.normalizedLength) {\n            this.handleComplete(digits);\n        }\n    };\n\n    handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Enter') return;\n        if (this.disabled || this.locksInput || !this.isComplete) return;\n\n        event.preventDefault();\n        this.submit();\n    };\n\n    handlePaste = (event: ClipboardEvent) => {\n        event.preventDefault();\n        if (this.disabled || this.locksInput) return;\n\n        const pastedValue = event.clipboardData?.getData('text') ?? '';\n        const digits = this.filterDigits(pastedValue);\n\n        this.inputRef.value = digits;\n\n        if (this.state === 'error') {\n            this.state = undefined;\n        }\n\n        this.value = digits;\n        this.tctInput.emit({ value: digits });\n\n        if (digits.length === this.normalizedLength) {\n            this.handleComplete(digits);\n        }\n    };\n\n    handleSendCodeClick = () => {\n        if (this.disabled) return;\n\n        this.inputRef?.focus();\n        this.state = undefined;\n        this.tctSendCode.emit();\n    };\n\n    handleSubmitClick = () => {\n        if (this.isVerifying || this.isSuccess) return;\n        this.submit();\n    };\n\n    submit(value = this.value): void {\n        this.state = 'verifying';\n        this.tctSubmit.emit({ value });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderFields() {\n        return Array.from({ length: this.normalizedLength }, (_, index) => {\n            const char = this.value[index] || '';\n            const isActive = this.hasFocus && index === this.activeSlotIndex;\n            const hasValue = !!char;\n\n            return [\n                this.split && index === this.normalizedLength / 2 && (\n                    <span\n                        aria-hidden=\"true\"\n                        class=\"otp-separator\"\n                    >\n                        -\n                    </span>\n                ),\n                <div\n                    class={{\n                        'otp-slot': true,\n                        'is-active': isActive,\n                        'has-value': hasValue,\n                    }}\n                >\n                    {isActive && !hasValue ? (\n                        <span\n                            class=\"otp-caret\"\n                            aria-hidden=\"true\"\n                        />\n                    ) : this.masked && hasValue ? (\n                        <span class=\"otp-dot\" />\n                    ) : (\n                        <span class=\"otp-char\">{char}</span>\n                    )}\n                </div>,\n            ];\n        });\n    }\n\n    renderHelperText() {\n        if (!this.hasVisibleHelperText) return;\n        return (\n            <div\n                class=\"helper-text\"\n                id={this.helperTextId}\n            >\n                {this.localizedHelperText}\n            </div>\n        );\n    }\n\n    renderLabel() {\n        if (!this.label) return;\n        return (\n            <div\n                class=\"otp-label\"\n                id={this.labelId}\n            >\n                {this.localizedLabel}\n            </div>\n        );\n    }\n\n    renderMessage() {\n        if (this.state === 'error' && this.errorMessage) {\n            return (\n                <q2-message\n                    appearance=\"minimal\"\n                    class=\"otp-message\"\n                    id={this.messageId}\n                    type=\"error\"\n                >\n                    {loc(this.errorMessage)}\n                </q2-message>\n            );\n        }\n\n        if (this.state === 'success' && this.successMessage) {\n            return (\n                <q2-message\n                    appearance=\"minimal\"\n                    class=\"otp-message\"\n                    id={this.messageId}\n                    type=\"success\"\n                >\n                    {loc(this.successMessage)}\n                </q2-message>\n            );\n        }\n    }\n\n    renderProcessingOverlay() {\n        if (this.autoSubmit && this.isVerifying) {\n            return (\n                <div class=\"processing-overlay\">\n                    <q2-loading label={this.localizedProcessingLabel} />\n                </div>\n            );\n        }\n    }\n\n    renderSendCodeButton() {\n        if (!this.isAwaitingSendCode) return;\n\n        return (\n            <q2-btn\n                block\n                class=\"send-code-button\"\n                disabled={this.disabled}\n                intent=\"workflow-primary\"\n                label={this.localizedSendCodeLabel}\n                onClick={this.handleSendCodeClick}\n                ref={el => (this.sendCodeRef = el)}\n            />\n        );\n    }\n\n    renderSubmitArea() {\n        if (this.isSuccess) {\n            return (\n                <q2-btn\n                    block\n                    class=\"submit-button\"\n                    intent=\"neutral\"\n                    onClick={this.handleSubmitClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                    {loc('Success')}\n                </q2-btn>\n            );\n        }\n\n        return (\n            <q2-btn\n                block\n                class=\"submit-button\"\n                disabled={this.disabled || !this.isComplete}\n                intent=\"workflow-primary\"\n                label={this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel}\n                loading={this.isVerifying}\n                onClick={this.handleSubmitClick}\n            />\n        );\n    }\n\n    render() {\n        return (\n            <div\n                aria-busy={this.isVerifying ? 'true' : undefined}\n                aria-labelledby={this.label ? this.labelId : undefined}\n                class={{\n                    'otp-container': true,\n                    'has-focus': this.hasFocus,\n                    'is-masked': this.masked,\n                    'send-code-pending': this.isAwaitingSendCode,\n                    'state-error': this.state === 'error',\n                    'state-success': this.state === 'success',\n                    'state-verifying': this.isVerifying,\n                    [`length-${this.normalizedLength}`]: true,\n                }}\n                role=\"group\"\n            >\n                {this.renderSendCodeButton()}\n                <div class={{ 'otp-content': true, 'send-code-hidden': this.isAwaitingSendCode }}>\n                    {this.renderLabel()}\n                    <div class=\"otp-control-group\">\n                        <div class=\"fields-shell\">\n                            <div class=\"fields-container\">\n                                <input\n                                    aria-describedby={this.describedBy}\n                                    aria-invalid={this.state === 'error' ? 'true' : 'false'}\n                                    aria-label={this.inputAriaLabel}\n                                    autocomplete=\"one-time-code\"\n                                    autofocus={this.autoFocus}\n                                    class=\"otp-hidden-input\"\n                                    disabled={this.disabled || this.isVerifying || this.isSuccess}\n                                    inputmode=\"numeric\"\n                                    maxLength={this.normalizedLength}\n                                    onBlur={this.handleFocusOut}\n                                    onFocus={this.handleFocusIn}\n                                    onInput={this.handleInputEvent}\n                                    onKeyDown={this.handleKeyDown}\n                                    onPaste={this.handlePaste}\n                                    pattern=\"[0-9]*\"\n                                    ref={el => (this.inputRef = el)}\n                                    test-id=\"q2OtpInput\"\n                                    type=\"text\"\n                                    value={this.value}\n                                />\n                                {this.renderFields()}\n                            </div>\n                            {this.renderProcessingOverlay()}\n                        </div>\n                        {this.renderSubmitArea()}\n                        {this.renderMessage()}\n                    </div>\n                    {this.renderHelperText()}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}