q2-tecton-elements 1.44.0 → 1.45.0

package/dist/esm/q2-icon.entry.js.map

@@ -1 +1 @@
-{"file":"q2-icon.entry.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,0xFAA0xF,CAAC;AAC7yF,qBAAe,SAAS;;MCKX,MAAM;;;;;;;oBAayC,CAAA,MAAA,MAAM,CAAC,cAAc,0CAAE,IAAI,KAAI,KAAK;;;IAQ5F,iBAAiB;QACb,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;IAED,kBAAkB;;QACd,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,0CAAE,MAAM,EAAE,CAAC;QAC9C,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACjD;IAID,UAAU;;QACN,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC5B;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;YAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;SACtB;aAAM;YACH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,0CAAE,MAAM,EAAE,CAAC;SACjD;KACJ;IAED,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;KACjC;IAED,IAAI,cAAc;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,IAAI,QAAQ;QACR,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,cAAc;YAAE,OAAO;QAC5B,OAAO,iBAAiB,cAAc,EAAE,CAAC;KAC5C;IAED,IAAI,aAAa;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,OAAO,QAAQ,CAAC,aAAa,CAAc,IAAI,QAAQ,EAAE,CAAC,CAAC;KAC9D;IAED,IAAI,eAAe;QACf,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,cAAc;YAAE,OAAO;QAC5B,OAAO,cAAc,cAAc,EAAE,CAAC;KACzC;IAED,IAAI,UAAU;QACV,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;KAChE;;;;;IAMD,0BAA0B;QACtB,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;QAC3C,IAAI,eAAe,GAAmB,QAAQ,CAAC,aAAa,CAAC,IAAI,iBAAiB,EAAE,CAAC,CAAC;QAEtF,IAAI,eAAe;YAAE,OAAO,eAAe,CAAC;QAC5C,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,eAAe,CAAC,EAAE,GAAG,iBAAiB,CAAC;QACvC,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACvC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAC3C,OAAO,eAAe,CAAC;KAC1B;IAED,cAAc;;QACV,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QAC3C,MAAM,eAAe,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAC1D,IAAI,aAAa,GAAgB,QAAQ,CAAC,aAAa,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;;QAGxE,IAAI,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,CAAC,aAAa,CAAC,mCAAI,KAAK,EAAE;YACrD,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC;SACf;;;QAID,eAAe,CAAC,gBAAgB,CAC5B,eAAe,EACf;YACI,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB,CAAC;;QAGF,IAAI,aAAa;YAAE,OAAO,IAAI,CAAC;;;QAI/B,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,aAAa,CAAC,EAAE,GAAG,QAAQ,CAAC;QAC5B,eAAe,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAC3C,OAAO,KAAK,CAAC;KAChB;IAED,MAAM,WAAW;QACb,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QAE3D,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC3C,IAAI,YAAY;YAAE,OAAO;QAEzB,IAAI,CAAC,cAAc;YAAE,OAAO;QAC5B,MAAM,UAAU,GAAG,YAAY,CAAC,UAAU,cAAc,aAAa,CAAC,CAAC;QACvE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClD,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7C,GAAG,CAAC,EAAE,GAAG,QAAQ,CAAC;QAClB,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAEpC,IAAI,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,KAAK;YAAE,OAAO;QAE7C,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,UAAU,EAAE;YACjD,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;SAClC;aAAM;YACH,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;SAC7D;QAED,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;QACvD,aAAa,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;KACpF;IAED,eAAe;QACX,MAAM,eAAe,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAC1D,MAAM,UAAU,GAAG,eAAe,CAAC,aAAa,CAAc,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACnF,IAAI,CAAC,SAAS,GAAG,UAAU,GAAI,UAAU,CAAC,SAAS,CAAC,IAAI,CAAsB,GAAG,SAAS,CAAC;KAC9F;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEvD,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACrC,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC,CAAC;QAE7D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,IAAI,KAAK,EAAE;YACP,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC9C,MAAM,OAAO,GAAG,SAAS,UAAU,EAAE,EAAE,CAAC;YACxC,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC;YACnB,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC;YAC1B,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC5B,QAAQ,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;SACrD;aAAM;YACH,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,OAAO,IAAI,CAAC,QAAQ,IAChB,eAAQ,KAER,0BACiB,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,EAC5C,IAAI,EAAC,KAAK,qBACO,KAAK,GAAG,OAAO,GAAG,SAAS,EAC5C,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,WAAW,EAC5C,KAAK,EAAC,4BAA4B,IAEjC,KAAK,IAAI,aAAO,EAAE,EAAC,OAAO,IAAE,KAAK,CAAS,EAC1C,IAAI,CAAC,IAAI,IACN,EAAC,QAAQ,QACJ,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,WAAK,IAAI,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAI,EAClD,SAAG,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAAM,CACpC,KAEX,IAAI,CAAC,UAAU,CAClB,CACC,CACT,CAAC;KACL;;;;;;;;;;;;","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\nimport icons from './icons';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true }) label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true }) type: string;\n\n    /**\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true }) beta: boolean = window.TectonElements?.beta || false;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() iconClone: SVGSymbolElement;\n\n    spriteGroup: SVGElement;\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.beta) return;\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        this.spriteGroup?.appendChild(this.iconClone);\n    }\n\n    @Watch('beta')\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type && this.beta) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tecton-sprite-${spriteFileName}`;\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get iconMarkup() {\n        return (icons[this.type] && icons[this.type].markup()) || '';\n    }\n\n    /**\n     * Checks for the sprite container element in the global DOM\n     * If it does not exist, it creates and appends it to the body\n     */\n    getOrCreateSpriteContainer() {\n        const spriteContainerId = 'tecton-sprites';\n        let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n        if (spriteContainer) return spriteContainer;\n        spriteContainer = document.createElement('div');\n        spriteContainer.id = spriteContainerId;\n        spriteContainer.style.display = 'none';\n        document.body.appendChild(spriteContainer);\n        return spriteContainer;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons to know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.querySelector(`#${spriteId}`);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    cloneSpriteNode() {\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    render() {\n        const { label } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={this.label ? undefined : 'true'}\n                role=\"img\"\n                aria-labelledby={label ? 'label' : undefined}\n                viewBox={this.beta ? undefined : '0 0 26 26'}\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                {label && <title id=\"label\">{label}</title>}\n                {this.beta ? (\n                    <Fragment>\n                        {!!this.type && <use href={`#tct-${this.type}`} />}\n                        <g ref={el => (this.spriteGroup = el)}></g>\n                    </Fragment>\n                ) : (\n                    this.iconMarkup\n                )}\n            </svg>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-icon.entry.js","mappings":"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","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-icon-fill: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true }) label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true }) type: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() iconClone: SVGSymbolElement;\n\n    spriteGroup: SVGElement;\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        this.spriteGroup?.appendChild(this.iconClone);\n    }\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tecton-sprite-${spriteFileName}`;\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    /**\n     * Checks for the sprite container element in the global DOM\n     * If it does not exist, it creates and appends it to the body\n     */\n    getOrCreateSpriteContainer() {\n        const spriteContainerId = 'tecton-sprites';\n        let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n        if (spriteContainer) return spriteContainer;\n        spriteContainer = document.createElement('div');\n        spriteContainer.id = spriteContainerId;\n        spriteContainer.style.display = 'none';\n        document.body.appendChild(spriteContainer);\n        return spriteContainer;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.querySelector(`#${spriteId}`);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    cloneSpriteNode() {\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={label ? undefined : 'true'}\n                role=\"img\"\n                aria-labelledby={label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                {label && <title id=\"label\">{label}</title>}\n                <Fragment>\n                    {!!type && <use href={`#tct-${type}`} />}\n                    <g ref={el => (this.spriteGroup = el)}></g>\n                </Fragment>\n            </svg>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/q2-input.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-1e1ce94e.js';
-import { k as isMobile, c as createGuid, s as setMessageHeight, h as handleAriaLabel, o as overrideFocus, e as hasSlotContent, l as loc, i as isEventFromElement, n as nextPaint, m as messagesDOM, d as labelDOM } from './index-12c2a320.js';
+import { d as isMobile, c as createGuid, s as setMessageHeight, h as handleAriaLabel, o as overrideFocus, p as getAriaValueFromProp, f as hasSlotContent, l as loc, i as isEventFromElement, n as nextPaint, m as messagesDOM, e as labelDOM } from './index-0a702dd6.js';
 
 function formatNumber(val = '', options = {
     prefix: '',
@@ -2869,7 +2869,7 @@ const formatCreditCard = {
     unknownFormatter,
 };
 
-const q2InputCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);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));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, normal));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n      var(--tct-input-focus-border-right-width, 1px) var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #006eb2));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );border-bottom-left-radius:calc(\n        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    );border-bottom-right-radius:calc(\n        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
+const q2InputCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);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));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, normal));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );border-bottom-left-radius:calc(\n        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    );border-bottom-right-radius:calc(\n        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
 const Q2InputStyle0 = q2InputCss;
 
 const inputTypeMap = {
@@ -2990,6 +2990,12 @@ const Q2Input = class {
             this.clear.emit();
             this.inputField.focus();
         };
+        this.onRefocusInput = () => {
+            if (this.showMessages) {
+                this.inputField.focus();
+                setMessageHeight(this);
+            }
+        };
         this.autocapitalize = undefined;
         this.autocomplete = undefined;
         this.autocorrect = undefined;
@@ -3094,6 +3100,23 @@ const Q2Input = class {
             unformattedValue: value,
         };
     }
+    get ariaAttributes() {
+        return {
+            ariaControls: getAriaValueFromProp(this.ariaControls),
+            ariaOwns: getAriaValueFromProp(this.ariaOwns),
+            ariaHaspopup: getAriaValueFromProp(this.ariaHaspopup, [
+                'true',
+                'false',
+                'menu',
+                'listbox',
+                'tree',
+                'grid',
+                'dialog',
+            ]),
+            ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),
+            ariaActivedescendant: getAriaValueFromProp(this.ariaActivedescendant),
+        };
+    }
     get hasCustomDisplaySlot() {
         return !!this.hostElement.querySelector('[slot=custom-display]');
     }
@@ -3395,7 +3418,7 @@ const Q2Input = class {
     }
     /////// VIEW METHODS ///////
     render() {
-        return (h("div", { key: 'bf92aa494026e0a42ec3b6cf9ad7737840777b38', class: this.wrapperClasses }, h("div", { key: 'ada6be9f91c3fb7f6b4899aebd68dc1e7ce90fa4', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
+        return (h("div", { key: '165e2173dc173450c6c08b4a9527d54d4d2e5cc2', class: this.wrapperClasses }, h("div", { key: '51d61f7ef98d0ffa36502469b7a341222a8d3865', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
     }
     countDOM() {
         if (!this.showCount)
@@ -3406,21 +3429,23 @@ const Q2Input = class {
     /* tslint:disable:cyclomatic-complexity */
     inputContainerDOM() {
         const { hasInputLeftSlot, hasInputRightSlot } = this;
-        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", null, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", null, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
+        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
     }
     /* tslint:enable:cyclomatic-complexity */
     /* tslint:disable:cyclomatic-complexity */
     standardInputDOM() {
         const { hasCustomDisplaySlot } = this;
         const inputClasses = ['input-field'];
+        const { ariaControls, ariaOwns, ariaHaspopup, ariaExpanded, ariaActivedescendant } = this.ariaAttributes;
         if (hasCustomDisplaySlot)
             inputClasses.push('sr');
-        return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode })));
+        return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": ariaControls, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode })));
     }
     /* tslint:enable:cyclomatic-complexity */
     pseudoInputDOM() {
         const showPlaceholder = !this.value && !!this.placeholder;
-        return (h("div", { class: "pseudo-input-container" }, h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": this.ariaExpanded === 'true' ? 'true' : undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton", onFocus: this.onInputFocus, onBlur: this.onInputBlur }, h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))))));
+        const { ariaControls, ariaOwns, ariaHaspopup, ariaExpanded, ariaActivedescendant } = this.ariaAttributes;
+        return (h("div", { class: "pseudo-input-container" }, h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-controls": ariaControls, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton", onFocus: this.onInputFocus, onBlur: this.onInputBlur }, h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))))));
     }
     placeCursorAtEnd() {
         const { inputField } = this;