q2-tecton-elements 1.37.1 → 1.38.1

package/dist/q2-tecton-elements/{p-47c60d4a.entry.js.map → p-0cade28b.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","Q2Tooltip","this","animationEndCount","componentDidLoad","overrideFocus","hostElement","shouldBeVisible","persistent","matches","checkFocusClass","isKeyboardFocus","findFocusVisibleElement","document","activeElement","focusClass","hideTooltip","animationEndHandler","element","shadowRoot","keyUpHandler","event","key","focusCaptureHandler","focusHandler","isEventFromElement","focusable","tooltipElement","focus","focusOutHandler","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-tooltip',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true }) multiline: boolean;\n    @Prop({ reflect: true }) persistent: boolean;\n    @Prop({ reflect: true }) immediate: boolean;\n    @Prop({ reflect: true }) focusable: boolean = false;\n    @Prop({ reflect: true }) position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    @Element() hostElement: HTMLElement;\n    @State() focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    tooltipElement: HTMLDivElement;\n    animationEndCount = 0;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /// Getters ///\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    /// Helpers //\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    /// Listeners ///\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,yuM,MCQLC,EAAS,M,yBAalBC,KAAAC,kBAAoB,E,qIAP0B,M,cACyC,I,0BASvFC,mBACIC,EAAcH,KAAKI,Y,CAInBC,sBACA,GAAIL,KAAKM,WAAY,OAAO,KAC5B,OAAON,KAAKI,YAAYG,QAAQ,wB,CAIpCC,kBACI,IAAKR,KAAKK,gBAAiB,OAC3B,MAAMI,IAAoBT,KAAKU,wBAAwBC,SAASC,eAChEZ,KAAKa,WAAaJ,EAAkB,qBAAuB,oBAC3D,GAAIA,EAAiB,M,CAGzBK,cACI,GAAId,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3BE,sBACIf,KAAKC,kBAAoBD,KAAKC,kBAAoB,EAClD,MAAMY,WAAEA,EAAUZ,kBAAEA,GAAsBD,KAK1C,GAAIa,IAAe,yBAA4BA,IAAe,qBAAuBZ,IAAsB,EAAI,CAC3GD,KAAKa,WAAa,KAClBb,KAAKC,kBAAoB,C,EAIjCS,wBAAwBM,GACpB,IAAKA,EAAS,OACd,GAAIA,EAAQC,WAAYD,EAAUhB,KAAKU,wBAAwBM,EAAQC,WAAWL,eAClF,OAAOI,IAAO,MAAPA,SAAO,SAAPA,EAAST,QAAQ,mBAAoBS,EAAU,I,CAK1DE,aAAaC,GACT,OAAQA,EAAMC,KACV,IAAK,MACL,IAAK,SACDpB,KAAKc,cACL,M,CAKZO,sBACIrB,KAAKQ,iB,CAITc,aAAaH,GACT,IAAKI,EAAmBJ,EAAOnB,KAAKI,aAAc,OAClD,IAAKJ,KAAKwB,UAAW,OACrBxB,KAAKyB,eAAeC,O,CAIxBC,kBACI,GAAI3B,KAAKK,gBAAiB,OAC1B,GAAIL,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3Be,SACI,MAAMf,WAAEA,GAAeb,KACvB,MAAM6B,EAAU,CAAC,WACjB,GAAIhB,EAAYgB,EAAQC,KAAKjB,GAE7B,OAAOb,KAAK+B,MACRC,EAAA,OACIC,SAAUjC,KAAKwB,UAAY,EAAIU,UAC/BC,IAAKC,GAAOpC,KAAKyB,eAAiBW,EAClCC,MAAOR,EAAQS,KAAK,KAAI,aACZtC,KAAK+B,MACjBQ,eAAgB,IAAMvC,KAAKe,sBAC3ByB,KAAK,UAAS,UACN,oBAERR,EAAA,cAGJA,EAAA,Y"}
+{"version":3,"names":["stylesCss","Q2Tooltip","this","animationEndCount","componentDidLoad","overrideFocus","hostElement","shouldBeVisible","persistent","matches","checkFocusClass","isKeyboardFocus","findFocusVisibleElement","document","activeElement","focusClass","hideTooltip","animationEndHandler","element","shadowRoot","keyUpHandler","event","key","focusCaptureHandler","focusHandler","isEventFromElement","focusable","tooltipElement","focus","focusOutHandler","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-tooltip',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true }) multiline: boolean;\n    @Prop({ reflect: true }) persistent: boolean;\n    @Prop({ reflect: true }) immediate: boolean;\n    @Prop({ reflect: true }) focusable: boolean = false;\n    @Prop({ reflect: true }) position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    @Element() hostElement: HTMLElement;\n    @State() focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    tooltipElement: HTMLDivElement;\n    animationEndCount = 0;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /// Getters ///\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    /// Helpers //\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    /// Listeners ///\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,ouM,MCQLC,EAAS,M,yBAalBC,KAAAC,kBAAoB,E,qIAP0B,M,cACyC,I,0BASvFC,mBACIC,EAAcH,KAAKI,Y,CAInBC,sBACA,GAAIL,KAAKM,WAAY,OAAO,KAC5B,OAAON,KAAKI,YAAYG,QAAQ,wB,CAIpCC,kBACI,IAAKR,KAAKK,gBAAiB,OAC3B,MAAMI,IAAoBT,KAAKU,wBAAwBC,SAASC,eAChEZ,KAAKa,WAAaJ,EAAkB,qBAAuB,oBAC3D,GAAIA,EAAiB,M,CAGzBK,cACI,GAAId,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3BE,sBACIf,KAAKC,kBAAoBD,KAAKC,kBAAoB,EAClD,MAAMY,WAAEA,EAAUZ,kBAAEA,GAAsBD,KAK1C,GAAIa,IAAe,yBAA4BA,IAAe,qBAAuBZ,IAAsB,EAAI,CAC3GD,KAAKa,WAAa,KAClBb,KAAKC,kBAAoB,C,EAIjCS,wBAAwBM,GACpB,IAAKA,EAAS,OACd,GAAIA,EAAQC,WAAYD,EAAUhB,KAAKU,wBAAwBM,EAAQC,WAAWL,eAClF,OAAOI,IAAO,MAAPA,SAAO,SAAPA,EAAST,QAAQ,mBAAoBS,EAAU,I,CAK1DE,aAAaC,GACT,OAAQA,EAAMC,KACV,IAAK,MACL,IAAK,SACDpB,KAAKc,cACL,M,CAKZO,sBACIrB,KAAKQ,iB,CAITc,aAAaH,GACT,IAAKI,EAAmBJ,EAAOnB,KAAKI,aAAc,OAClD,IAAKJ,KAAKwB,UAAW,OACrBxB,KAAKyB,eAAeC,O,CAIxBC,kBACI,GAAI3B,KAAKK,gBAAiB,OAC1B,GAAIL,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3Be,SACI,MAAMf,WAAEA,GAAeb,KACvB,MAAM6B,EAAU,CAAC,WACjB,GAAIhB,EAAYgB,EAAQC,KAAKjB,GAE7B,OAAOb,KAAK+B,MACRC,EAAA,OACIC,SAAUjC,KAAKwB,UAAY,EAAIU,UAC/BC,IAAKC,GAAOpC,KAAKyB,eAAiBW,EAClCC,MAAOR,EAAQS,KAAK,KAAI,aACZtC,KAAK+B,MACjBQ,eAAgB,IAAMvC,KAAKe,sBAC3ByB,KAAK,UAAS,UACN,oBAERR,EAAA,cAGJA,EAAA,Y"}

package/dist/q2-tecton-elements/p-0fb2be4c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as a,g as r}from"./p-277dc8cd.js";import{i}from"./p-f0e323ad.js";const e="*{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}.avatar-img,.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)))}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";const s=class{constructor(a){t(this,a);this.onError=()=>{this.badSrc=true};this.onLoad=()=>{this.isLoaded=true};this.name=undefined;this.initials=undefined;this.src=undefined;this.icon="person";this.badSrc=false;this.isLoaded=false}srcDidUpdate(){this.badSrc=false}get fallbackIcon(){return i[this.icon]&&i[this.icon].markup()||i.error.markup()}get computedInitials(){const{initials:t,name:a}=this;if(!t&&!a)return;let r="";if(t){r=t.substr(0,4)}else if(a){const t=a.split(" ");const i=t[0][0];const e=t.length>1?t[t.length-1][0]:undefined;r+=i;if(e)r+=e}r=r===null||r===void 0?void 0:r.toUpperCase();return r}render(){const{computedInitials:t}=this;const r=this.src&&!this.badSrc;const i=this.isLoaded;const e=(this.name||this.initials)&&(!this.src||this.badSrc);const s=!this.name&&!this.initials&&(!this.src||this.badSrc);return a("div",null,r&&a("img",{class:i?"avatar-img":"avatar-img-default","test-id":"userImage",src:this.src,onError:this.onError,onLoad:this.onLoad,alt:this.name||""}),e&&a("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid meet","test-id":"userInitials",class:`avatar-initials size-${t.length}`,"aria-label":this.name,"aria-hidden":!this.name&&"true"},a("text",{x:"50",y:"50","dominant-baseline":"central","text-anchor":"middle","aria-hidden":"true"},t)),s&&a("div",{"test-id":"fallbackIcon",class:"fallback"},a("q2-icon",{type:this.icon})))}get el(){return r(this)}static get watchers(){return{src:["srcDidUpdate"]}}};s.style=e;export{s as q2_avatar};
+//# sourceMappingURL=p-0fb2be4c.entry.js.map

package/dist/q2-tecton-elements/{p-536978fe.entry.js.map → p-0fb2be4c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","Q2Avatar","this","onError","badSrc","onLoad","isLoaded","srcDidUpdate","fallbackIcon","icons","icon","markup","error","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","class","alt","viewBox","preserveAspectRatio","x","y","type"],"sources":["./src/components/q2-avatar/styles.scss?tag=q2-avatar&encapsulation=shadow","./src/components/q2-avatar/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\nimport icons from '../q2-icon/icons';\n\n@Component({\n    tag: 'q2-avatar',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Avatar implements ComponentInterface {\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) initials: string;\n    @Prop({ reflect: true }) src: string;\n    @Prop() icon: string = 'person';\n\n    @State() badSrc: boolean = false;\n    @State() isLoaded: boolean = false;\n    @Element() el: HTMLElement;\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    get fallbackIcon() {\n        return (icons[this.icon] && icons[this.icon].markup()) || icons.error.markup();\n    }\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,yyF,MCQLC,EAAQ,M,yBAejBC,KAAAC,QAAU,KACND,KAAKE,OAAS,IAAI,EAGtBF,KAAAG,OAAS,KACLH,KAAKI,SAAW,IAAI,E,yEAhBD,S,YAEI,M,cACE,K,CAI7BC,eACIL,KAAKE,OAAS,K,CAWdI,mBACA,OAAQC,EAAMP,KAAKQ,OAASD,EAAMP,KAAKQ,MAAMC,UAAaF,EAAMG,MAAMD,Q,CAGtEE,uBACA,MAAMC,SAAEA,EAAQC,KAAEA,GAASb,KAC3B,IAAKY,IAAaC,EAAM,OAExB,IAAIC,EAAS,GACb,GAAIF,EAAU,CACVE,EAASF,EAASG,OAAO,EAAG,E,MACzB,GAAIF,EAAM,CACb,MAAMG,EAAQH,EAAKI,MAAM,KACzB,MAAMC,EAAiBF,EAAM,GAAG,GAChC,MAAMG,EAAgBH,EAAMI,OAAS,EAAIJ,EAAMA,EAAMI,OAAS,GAAG,GAAKC,UACtEP,GAAUI,EACV,GAAIC,EAAeL,GAAUK,C,CAGjCL,EAASA,IAAM,MAANA,SAAM,SAANA,EAAQQ,cAEjB,OAAOR,C,CAGXS,SACI,MAAMZ,iBAAEA,GAAqBX,KAC7B,MAAMwB,EAAUxB,KAAKyB,MAAQzB,KAAKE,OAClC,MAAME,EAAWJ,KAAKI,SACtB,MAAMsB,GAAgB1B,KAAKa,MAAQb,KAAKY,aAAeZ,KAAKyB,KAAOzB,KAAKE,QACxE,MAAMyB,GAAgB3B,KAAKa,OAASb,KAAKY,YAAcZ,KAAKyB,KAAOzB,KAAKE,QAExE,OACI0B,EAAA,WACKJ,GACGI,EAAA,OACIC,MAAOzB,EAAW,aAAe,qBAAoB,UAC7C,YACRqB,IAAKzB,KAAKyB,IACVxB,QAASD,KAAKC,QACdE,OAAQH,KAAKG,OACb2B,IAAK9B,KAAKa,MAAQ,KAGzBa,GACGE,EAAA,OACIG,QAAQ,cACRC,oBAAoB,gBAAe,UAC3B,eACRH,MAAO,wBAAwBlB,EAAiBS,SAAQ,aAC5CpB,KAAKa,KAAI,eACPb,KAAKa,MAAQ,QAE3Be,EAAA,QACIK,EAAE,KACFC,EAAE,KAAI,oBACY,UAAS,cACf,SAAQ,cACR,QAEXvB,IAIZgB,GACGC,EAAA,iBACY,eACRC,MAAM,YAEND,EAAA,WAASO,KAAMnC,KAAKQ,Q"}
+{"version":3,"names":["stylesCss","Q2Avatar","this","onError","badSrc","onLoad","isLoaded","srcDidUpdate","fallbackIcon","icons","icon","markup","error","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","class","alt","viewBox","preserveAspectRatio","x","y","type"],"sources":["./src/components/q2-avatar/styles.scss?tag=q2-avatar&encapsulation=shadow","./src/components/q2-avatar/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\nimport icons from '../q2-icon/icons';\n\n@Component({\n    tag: 'q2-avatar',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Avatar implements ComponentInterface {\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) initials: string;\n    @Prop({ reflect: true }) src: string;\n    @Prop() icon: string = 'person';\n\n    @State() badSrc: boolean = false;\n    @State() isLoaded: boolean = false;\n    @Element() el: HTMLElement;\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    get fallbackIcon() {\n        return (icons[this.icon] && icons[this.icon].markup()) || icons.error.markup();\n    }\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,oyF,MCQLC,EAAQ,M,yBAejBC,KAAAC,QAAU,KACND,KAAKE,OAAS,IAAI,EAGtBF,KAAAG,OAAS,KACLH,KAAKI,SAAW,IAAI,E,yEAhBD,S,YAEI,M,cACE,K,CAI7BC,eACIL,KAAKE,OAAS,K,CAWdI,mBACA,OAAQC,EAAMP,KAAKQ,OAASD,EAAMP,KAAKQ,MAAMC,UAAaF,EAAMG,MAAMD,Q,CAGtEE,uBACA,MAAMC,SAAEA,EAAQC,KAAEA,GAASb,KAC3B,IAAKY,IAAaC,EAAM,OAExB,IAAIC,EAAS,GACb,GAAIF,EAAU,CACVE,EAASF,EAASG,OAAO,EAAG,E,MACzB,GAAIF,EAAM,CACb,MAAMG,EAAQH,EAAKI,MAAM,KACzB,MAAMC,EAAiBF,EAAM,GAAG,GAChC,MAAMG,EAAgBH,EAAMI,OAAS,EAAIJ,EAAMA,EAAMI,OAAS,GAAG,GAAKC,UACtEP,GAAUI,EACV,GAAIC,EAAeL,GAAUK,C,CAGjCL,EAASA,IAAM,MAANA,SAAM,SAANA,EAAQQ,cAEjB,OAAOR,C,CAGXS,SACI,MAAMZ,iBAAEA,GAAqBX,KAC7B,MAAMwB,EAAUxB,KAAKyB,MAAQzB,KAAKE,OAClC,MAAME,EAAWJ,KAAKI,SACtB,MAAMsB,GAAgB1B,KAAKa,MAAQb,KAAKY,aAAeZ,KAAKyB,KAAOzB,KAAKE,QACxE,MAAMyB,GAAgB3B,KAAKa,OAASb,KAAKY,YAAcZ,KAAKyB,KAAOzB,KAAKE,QAExE,OACI0B,EAAA,WACKJ,GACGI,EAAA,OACIC,MAAOzB,EAAW,aAAe,qBAAoB,UAC7C,YACRqB,IAAKzB,KAAKyB,IACVxB,QAASD,KAAKC,QACdE,OAAQH,KAAKG,OACb2B,IAAK9B,KAAKa,MAAQ,KAGzBa,GACGE,EAAA,OACIG,QAAQ,cACRC,oBAAoB,gBAAe,UAC3B,eACRH,MAAO,wBAAwBlB,EAAiBS,SAAQ,aAC5CpB,KAAKa,KAAI,eACPb,KAAKa,MAAQ,QAE3Be,EAAA,QACIK,EAAE,KACFC,EAAE,KAAI,oBACY,UAAS,cACf,SAAQ,cACR,QAEXvB,IAIZgB,GACGC,EAAA,iBACY,eACRC,MAAM,YAEND,EAAA,WAASO,KAAMnC,KAAKQ,Q"}

package/dist/q2-tecton-elements/p-107f07f2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as n,h as o,g as e}from"./p-277dc8cd.js";import{l as i,o as r}from"./p-f34521a4.js";const a="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";const s=class{constructor(o){t(this,o);this.viewChange=n(this,"viewChange",7);this.toggleChange=n(this,"toggleChange",7);this.scheduledAfterRender=[];this.monthGrid=[[0,1,2],[3,4,5],[6,7,8],[9,10,11]];this.months=["January","February","March","April","May","June","July","August","September","October","November","December"].map((t=>({label:i(`tecton.element.calendar.months.${t}`),abbr:i(`tecton.element.calendar.months.abbr.${t}`)})));this.onMonthSelection=t=>{var n,o;const e=t.target.closest(".month-button");if((n=e===null||e===void 0?void 0:e.dataset)===null||n===void 0?void 0:n.index){this.selectMonth(Number((o=e===null||e===void 0?void 0:e.dataset)===null||o===void 0?void 0:o.index))}};this.onMonthKeydown=t=>{if(t.key==="Escape"||t.key==="Esc"){this.toggleChange.emit({close:true});return}const n=t.target.dataset.index;if(!n)return;if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.selectMonth(Number(n))}else{const o=this.moveMonth(this.monthGrid,Number(n),t);this.focusMonth(o)}};this.moveMonth=(t,n,o)=>{const e=t.length;const i=t[0].length;const r=Math.floor(n/i);const a=n%i;const s=[r,a];if(o.key==="ArrowUp"){o.stopPropagation();o.preventDefault();return t[Math.max(0,s[0]-1)][s[1]]}else if(o.key==="ArrowDown"){o.stopPropagation();o.preventDefault();return t[Math.min(e-1,s[0]+1)][s[1]]}else if(o.key==="ArrowLeft"){o.stopPropagation();o.preventDefault();return Math.max(0,n-1)}else if(o.key==="ArrowRight"){o.stopPropagation();o.preventDefault();return Math.min(this.months.length-1,n+1)}else{return t[s[0]][s[1]]}};this.focusMonth=t=>{const n=this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);if(n){this.focusedIndex=t;n.focus()}};this.selectMonth=t=>{var n,o,e;this.selectedIndex=t;this.focusedIndex=t;const i=this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);(n=this.hostElement.shadowRoot.querySelectorAll(`.month-button`))===null||n===void 0?void 0:n.forEach((t=>t.classList.remove("active")));i===null||i===void 0?void 0:i.classList.add("active");i===null||i===void 0?void 0:i.focus();const r={view:"day",monthIndex:t,selectedYear:this.year};(e=(o=this.hostElement).onchange)===null||e===void 0?void 0:e.call(o,new CustomEvent("click",{bubbles:true,detail:r}));this.viewChange.emit(r)};this.selectYear=t=>{this.year=Math.max(1970,t)};this.year=Number((new Date).toLocaleString("en-US",{year:"numeric"}));this.disabledMonths=undefined;this.today=undefined;this.selectedIndex=0;this.focusedIndex=0;this.showYearLayer=false}componentDidRender(){var t;(t=this.scheduledAfterRender)===null||t===void 0?void 0:t.forEach((t=>t()));this.scheduledAfterRender=[]}componentDidLoad(){r(this.hostElement)}render(){return o("div",{class:"month-container",onKeyDown:this.onMonthKeydown},o("div",{class:"navigation"},o("q2-btn",{class:"year-btn",onClick:()=>this.viewChange.emit({view:"year",selectedYear:this.year})},o("span",{class:"year"},this.year),o("q2-icon",{class:"year-icon off",type:"chevron-down"})),o("div",{class:"month-controller"},o("div",{class:"cal-year-prev-next"},o("q2-btn",{label:i("tecton.element.calendar.previousYear"),"hide-label":true,class:"cal-nav-btn prev-year","test-id":"previousYearButton",onClick:()=>this.selectYear(this.year-1)},o("q2-icon",{type:"arrow-left"})),o("q2-btn",{label:i("tecton.element.calendar.nextYear"),"hide-label":true,class:"cal-nav-btn next-year","test-id":"nextYearButton",onClick:()=>this.selectYear(this.year+1)},o("q2-icon",{type:"arrow-right"}))))),o("div",{class:"month-list",onClick:this.onMonthSelection},this.months.map(((t,n)=>o("div",{class:"month"},o("span",{role:"button",class:"month-button","data-index":n,"aria-label":t.label,tabindex:n===this.focusedIndex?0:-1},t.abbr))))),this.today&&o("div",{class:"today-label"},i("tecton.element.calendar.today"),": ",this.today))}get hostElement(){return e(this)}};s.style=a;export{s as q2_month_picker};
+//# sourceMappingURL=p-107f07f2.entry.js.map

package/dist/q2-tecton-elements/{p-4abbd0b1.entry.js.map → p-107f07f2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2MonthPickerCss","Q2MonthPicker","this","scheduledAfterRender","monthGrid","months","map","mon","label","loc","abbr","onMonthSelection","event","targetElement","target","closest","_a","dataset","index","selectMonth","Number","_b","onMonthKeydown","key","toggleChange","emit","close","monthIndex","preventDefault","stopPropagation","nextMonthIndex","moveMonth","focusMonth","grid","rows","length","cols","row","Math","floor","col","current","max","min","nextMonth","hostElement","shadowRoot","querySelector","focusedIndex","focus","selectedIndex","querySelectorAll","forEach","el","classList","remove","add","value","view","selectedYear","year","_c","onchange","call","CustomEvent","bubbles","detail","viewChange","selectYear","Date","toLocaleString","componentDidRender","fn","componentDidLoad","overrideFocus","render","h","class","onKeyDown","onClick","type","month","role","tabindex","today"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) year: number = Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    );\n    @Prop({ reflect: true }) disabledMonths: string[];\n    @Prop() today: string;\n    @Element() hostElement: HTMLElement;\n    @Event() viewChange: EventEmitter;\n    @Event() toggleChange: EventEmitter;\n    @State() selectedIndex: number = 0;\n    @State() focusedIndex: number = 0;\n    @State() showYearLayer: boolean = false;\n    scheduledAfterRender: (() => void)[] = [];\n\n    private monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    private months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2MonthPickerCss","Q2MonthPicker","this","scheduledAfterRender","monthGrid","months","map","mon","label","loc","abbr","onMonthSelection","event","targetElement","target","closest","_a","dataset","index","selectMonth","Number","_b","onMonthKeydown","key","toggleChange","emit","close","monthIndex","preventDefault","stopPropagation","nextMonthIndex","moveMonth","focusMonth","grid","rows","length","cols","row","Math","floor","col","current","max","min","nextMonth","hostElement","shadowRoot","querySelector","focusedIndex","focus","selectedIndex","querySelectorAll","forEach","el","classList","remove","add","value","view","selectedYear","year","_c","onchange","call","CustomEvent","bubbles","detail","viewChange","selectYear","Date","toLocaleString","componentDidRender","fn","componentDidLoad","overrideFocus","render","h","class","onKeyDown","onClick","type","month","role","tabindex","today"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) year: number = Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    );\n    @Prop({ reflect: true }) disabledMonths: string[];\n    @Prop() today: string;\n    @Element() hostElement: HTMLElement;\n    @Event() viewChange: EventEmitter;\n    @Event() toggleChange: EventEmitter;\n    @State() selectedIndex: number = 0;\n    @State() focusedIndex: number = 0;\n    @State() showYearLayer: boolean = false;\n    scheduledAfterRender: (() => void)[] = [];\n\n    private monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    private months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-145849d0.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as o}from"./p-277dc8cd.js";import{r,o as n,l as a,i as l}from"./p-f34521a4.js";import{s as c,a as s}from"./p-788adb51.js";const p="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";const d=class{constructor(e){t(this,e);this.change=i(this,"change",7);var o;this.scheduledAfterRender=[];this.syncValueProperties=()=>{const{value:t,selectedOptions:i}=this;if(!!(i===null||i===void 0?void 0:i.length))this.selectedOptionsChanged(i);else if(t)this.valueChanged(t)};this.getOption=async t=>{if(this.optionList){const i=await this.optionList.getOptions();return i.find((i=>i.value===t))}else{return this.hostElement.querySelector(`q2-option[value="${t}"]`)}};this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i=[]}=this;const e=i.map((t=>t.value));const o=await((t=this.optionList)===null||t===void 0?void 0:t.getOptions());if(this.optionCount)this.active=!!e.length;this.selectedOptionElements=(o===null||o===void 0?void 0:o.filter((t=>e.includes(t.value))))||[]};this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.clearSelectedOptions=()=>{this.selectedOptions=[];this.value=null;this.active=false;this.open=false;this.primaryBtn.focus();this.change.emit({value:null,values:[],active:false});this.scheduledAfterRender.push(r)};this.handleClick=async t=>{t.stopPropagation();if(this.disabled)return;if(this.optionCount){if(c(this)){this.executeActionSheet(t)}else{await this.popoverElement.toggle()}}else{const{value:t,label:i}=this;const e=this.active=!this.active;const o=e?[{value:t,display:i}]:[];this.selectedOptions=o;this.change.emit({value:t,values:o,active:e})}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(!this.optionCount||this.disabled||i)return;t.preventDefault();if(c(this,t)){this.executeActionSheet(t)}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const e=t.relatedTarget;if((i=(e===null||e===void 0?void 0:e.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;this.handleSelectionChanges(t.detail)};this.handleWrapperClick=()=>{this.primaryBtn.focus();this.primaryBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.hoist=!!((o=window.Tecton)===null||o===void 0?void 0:o.useActionSheets);this.disabled=undefined;this.active=undefined;this.open=undefined;this.multiple=undefined;this.maxLength=undefined;this.label=undefined;this.value=undefined;this.theme=undefined;this.selectedOptions=[];this.popoverMinHeight=150;this.popoverDirection=undefined;this.popoverAlignment="right";this.optionListLabel=undefined;this.optionCount=undefined;this.selectedOptionElements=[]}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement);this.syncValueProperties()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:e,optionCount:o}=this;if(!o||e.length===0)return a(t);else if(e.length===1)return a(e[0].display);return a("tecton.element.pill.activeCount",{count:i.length})}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;if(t)return i.length>t?`${i.substring(0,t)}…`:i;else return i}async executeActionSheet(t){const i=await s(this,t);this.handleSelectionChanges(i)}async handleSelectionChanges(t){const{multiple:i}=this;const{value:e="",values:o=[]}=t;const r=i?!!o.length:!!e;if(!this.hostElement.onchange){if(i){this.selectedOptions=o;this.value=undefined}else{const t=await this.getOption(e);this.selectedOptions=t?[{value:t.value,display:t.display}]:[];this.value=(t===null||t===void 0?void 0:t.value)||undefined}}this.change.emit({value:e,values:o,active:r})}async valueChanged(t){var i,e;const{multiple:o,selectedOptions:r}=this;const n=(e=(i=r===null||r===void 0?void 0:r[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o)return;if(t===n)this.updateSelectedOptionElements();else{const i=await this.getOption(t);const{value:e,display:o}=i||{value:t,display:null};this.selectedOptions=e?[{value:e,display:o}]:[]}}selectedOptionsChanged(t){var i,e;const{multiple:o}=this;const r=(e=(i=t===null||t===void 0?void 0:t[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o){if(this.value)this.value=null;this.updateSelectedOptionElements()}else if(this.value===r){this.updateSelectedOptionElements()}else{this.value=r}}delegateFocus(t){if(!l(t,this.hostElement))return;this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}handleSelectedDisplay(){if(this.multiple)return;this.updateSelectedOptionElements()}generateIcon(){const{optionCount:t,active:i}=this;const o=t&&i;const r=o?"button":"div";const n=o||!t?"close":"chevron-down";return e(r,{class:"btn-close",onClick:o&&this.clearSelectedOptions,disabled:o&&this.disabled,"aria-label":o&&a("tecton.element.pill.clearSelection"),type:o&&"button"},e("q2-icon",{type:n}))}generateHiddenElement(){return e("div",{id:"option-description",class:"sr","aria-hidden":"true"},a("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,active:i,open:o}=this;const r=["btn-wrapper"];if(t||i)r.push("has-icon");if(t)r.push("has-options");return e("click-elsewhere",{onChange:this.onClickElsewhere},e("div",{class:r.join(" ")},e("div",{class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},e("button",{class:"btn-primary","test-id":"btn-control",type:"button",role:"combobox",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,disabled:this.disabled,"aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-expanded":t&&`${!!o}`||undefined,"aria-label":this.maxLength&&this.buttonContent,"aria-describedby":t&&"option-description"||undefined},this.truncatedButtonContent,!t&&i&&e("span",{class:"sr"},"(",a("tecton.element.pill.active"),")"))),this.generateIcon(),this.generateHiddenElement()),this.optionCount>0&&e("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},e("q2-option-list",{type:"listbox",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements(),label:a("tecton.element.optionList.label",[this.optionListLabel])},e("slot",null))))}get hostElement(){return o(this)}static get watchers(){return{value:["valueChanged"],selectedOptions:["selectedOptionsChanged"]}}};d.style=p;export{d as q2_pill};
+//# sourceMappingURL=p-145849d0.entry.js.map

package/dist/q2-tecton-elements/p-145849d0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Pill","this","scheduledAfterRender","syncValueProperties","value","selectedOptions","length","selectedOptionsChanged","valueChanged","getOption","async","optionList","options","getOptions","find","option","hostElement","querySelector","updateSelectedOptionElements","selectedValues","map","_a","optionCount","active","selectedOptionElements","filter","includes","determineOptionCount","numberOfOptions","querySelectorAll","clearSelectedOptions","open","primaryBtn","focus","change","emit","values","push","resizeIframe","handleClick","event","stopPropagation","disabled","shouldShowActionSheet","executeActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","handleExternalKeydown","handleButtonFocusout","relatedTarget","tagName","handleChange","handleSelectionChanges","detail","handleWrapperClick","click","onClickElsewhere","target","localName","window","Tecton","useActionSheets","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","disconnectedCallback","disconnect","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","result","showActionSheetList","changeDetails","multiple","onchange","undefined","selectedOption","newValue","firstValue","_b","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","handleSelectedDisplay","generateIcon","isButton","TagName","iconName","h","class","onClick","type","generateHiddenElement","id","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","onReady","optionListLabel"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    :host(:not(:empty)) &,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #61c4ff)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #61c4ff)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #d9e1e6)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #d9e1e6)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #f4fafe)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #f4fafe)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentColor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n    tag: 'q2-pill',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true, mutable: true }) active: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) multiple: boolean;\n    @Prop({ reflect: true }) maxLength: number;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string;\n\n    @State() optionCount: number;\n    @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n    scheduledAfterRender: (() => void)[] = [];\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n    popoverElement: HTMLQ2PopoverElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    /// Helpers ///\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value,\n            values,\n            active: isActive,\n        });\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    /// Watchers ///\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (multiple) return;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n    /// Event Handlers ///\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    /// DOM ///\n    generateIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={isButton && this.clearSelectedOptions}\n                disabled={isButton && this.disabled}\n                aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n                type={isButton && 'button'}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role=\"combobox\"\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={optionCount && 'option-list'}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.maxLength && this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.generateIcon()}\n                    {this.generateHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <q2-option-list\n                            type=\"listbox\"\n                            ref={el => (this.optionList = el)}\n                            id=\"option-list\"\n                            onChange={this.handleChange}\n                            multiple={this.multiple}\n                            selectedOptions={this.selectedOptions}\n                            onReady={() => this.updateSelectedOptionElements()}\n                            label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        >\n                            <slot />\n                        </q2-option-list>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-14e3c48f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as e,F as a,g as i}from"./p-277dc8cd.js";import{k as s,c as o,s as n,h as p,o as c,p as d,l as u,i as f,n as l,m as h,g as m}from"./p-f34521a4.js";function x(t="",r={prefix:"",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:"",allowDecimal:false,allowNegative:true},e=false){const a=t[0]==="-";let i=t;const s=!!r.allowDecimal&&!!r.decimals;if(e){const t=i.replace(/[^\d.]/g,"");i=t&&Number(t).toFixed(s?r.decimals:0)||""}i=i.replace(/[^\d]/g,"");let{integerString:o,decimalString:n}=v(i,s,r.decimals);let p=r.decimalSeparator;if(!s){p="";n=""}const c=r.allowNegative&&a?"-":"";i=`${c}${o}${p}${n}`;o=o.replace(/\B(?=(\d{3})+(?!\d))/g,r.thousandsSeparator);const d=c||o?`${c}${o}${p}${n}`:"";const u=c||o?`${c}${r.prefix}${o}${p}${n}${r.suffix}`:"";let f=d.length-i.length;if(p){f=f+r.decimalSeparator.length}const l=r.prefix||r.suffix;const h=Number.MAX_SAFE_INTEGER.toString().length+f+n.length;const m=`${o.replace(/[^0-9]/g,"")}${n}`.replace(/^0+/,"");return{value:i,formattedValue:d,fullyFormattedValue:u,prefix:l,suffix:"",formattingCharacterCount:f,maxlength:h,unformattedValue:m}}function v(t,r=false,e){if(!r){return{integerString:t,decimalString:""}}const a=t.length-e;let i=t.substring(0,a).padStart(1,"0");if(i.length>1&&i[0]==="0"){i=i.substring(1)}const s=t.substring(a).padStart(e,"0");return{integerString:i,decimalString:s}}function S(t="",r="",e){const a=e&&e.prefix||"";const i=e&&e.suffix||"";if(!t||!r){const r=`${a}${t}${i}`;return{value:t,formattedValue:t,fullyFormattedValue:r,prefix:a.trim()||i.trim(),formattingCharacterCount:0,unformattedValue:t}}const{unformattedValue:s,formattedValue:o,formattingCharacterCount:n}=D(t,r);const p=`${a}${o}${i}`;const c=r.length;const d=L(r,a,i);return{value:s,formattedValue:o,fullyFormattedValue:p,prefix:a.trim()||i.trim(),formattingCharacterCount:n,maxlength:c,minFormattedLength:d,unformattedValue:s}}const b=["?"];function g(t){return b.includes(t)}const k=["#","@","*",...b];function w(t){return k.includes(t)}function M(t){const r=k.join("|");const e=t.replace(new RegExp(`[${r}]`,"g"),"").split("");return new Set(e)}function y(t,r){return r.has(t)}function C(t,r){switch(r){case"#":t=t.replace(/[^\d]/g,"");break;case"@":t=t.toUpperCase().replace(/[^A-Z]+/g,"");break;case"*":t=t.toUpperCase().replace(/[^\dA-Z]+/g,"");break;case"?":t=t.replace(/[^\d]/g,"");break;default:return t}return t}function D(t,r){const e=r.split("");const a=M(r);let i=0;let s=0;let o="";const n=e.reduce(((r,e)=>{if(i>=t.length){return r}if(g(e)&&y(t[i],a)){return r}if(w(e)){i=A(t,i,a);if(i>=t.length){return r}const s=C(t[i],e);r+=s;o+=s;i++}else{r+=e;s++;if(e===t[i]){i++}}return r}),"");return{unformattedValue:o,formattedValue:n,formattingCharacterCount:s}}function A(t,r,e){if(y(t[r],e)){r++;return A(t,r,e)}return r}function L(t,r,e){return t.replace(new RegExp(`[${b.join("|")}]`,"g"),"").length+r.length+e.length}const Y={AED:{prefix:"",suffix:"د.إ",decimals:2,decimalSeparator:".",thousandsSeparator:","},AFN:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ALL:{prefix:"L",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},AMD:{prefix:"դր.",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ANG:{prefix:"ƒ",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},AOA:{prefix:"Kz",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ARS:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},AUD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},AWG:{prefix:"ƒ",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},AZN:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BAM:{prefix:"КМ",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BBD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BDT:{prefix:"৳",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BGN:{prefix:"৳",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BHD:{prefix:"",suffix:"ب.د",decimals:3,decimalSeparator:".",thousandsSeparator:","},BIF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},BMD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BND:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BOB:{prefix:"Bs.",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BRL:{prefix:"R$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BSD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BTN:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BWP:{prefix:"P",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},BYN:{prefix:"Br",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},BZD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CAD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CDF:{prefix:"Fr",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CHF:{prefix:"Fr",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CLF:{prefix:"Fr",suffix:"",decimals:4,decimalSeparator:".",thousandsSeparator:","},CLP:{prefix:"$",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},CNY:{prefix:"¥",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},COP:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CRC:{prefix:"₡",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CUC:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CUP:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},CVE:{prefix:"$",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},CZK:{prefix:"Kč",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},DJF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},DKK:{prefix:"kr",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},DOP:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},DZD:{prefix:"",suffix:"د.ج",decimals:2,decimalSeparator:".",thousandsSeparator:","},EEK:{prefix:"KR",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},EGP:{prefix:"£",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ERN:{prefix:"Nfk",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ETB:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},EUR:{prefix:"€",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},FJD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},FKP:{prefix:"£",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},GBP:{prefix:"£",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},GEL:{prefix:"ლ",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},GHS:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},GIP:{prefix:"£",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},GMD:{prefix:"D",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},GNF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},GTQ:{prefix:"Q",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},GYD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},HKD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},HNL:{prefix:"L",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},HRK:{prefix:"kn",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},HTG:{prefix:"G",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},HUF:{prefix:"Ft",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},IDR:{prefix:"Rs",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ILS:{prefix:"₪",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},INR:{prefix:"₨",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},IQD:{prefix:"",suffix:"ع.د",decimals:3,decimalSeparator:".",thousandsSeparator:","},IRR:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ISK:{prefix:"kr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},JMD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},JOD:{prefix:"",suffix:"د.ا",decimals:3,decimalSeparator:".",thousandsSeparator:","},JPY:{prefix:"¥",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},KES:{prefix:"Sh",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},KGS:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},KHR:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},KMF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},KPW:{prefix:"₩",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},KRW:{prefix:"₩",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},KWD:{prefix:"د.ك",suffix:"",decimals:3,decimalSeparator:".",thousandsSeparator:","},KYD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},KZT:{prefix:"〒",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},LAK:{prefix:"₭",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},LBP:{prefix:"",suffix:"ل.ل",decimals:2,decimalSeparator:".",thousandsSeparator:","},LKR:{prefix:"Rs",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},LRD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},LSL:{prefix:"L",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},LTL:{prefix:"Lt",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},LVL:{prefix:"Ls",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},LYD:{prefix:"",suffix:"ل.د",decimals:3,decimalSeparator:".",thousandsSeparator:","},MAD:{prefix:"",suffix:"د.م.",decimals:2,decimalSeparator:".",thousandsSeparator:","},MDL:{prefix:"L",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MGA:{prefix:"¤",suffix:"",decimals:1,decimalSeparator:".",thousandsSeparator:","},MKD:{prefix:"ден",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MMK:{prefix:"K",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MNT:{prefix:"₮",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MOP:{prefix:"P",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MRU:{prefix:"UM",suffix:"",decimals:1,decimalSeparator:".",thousandsSeparator:","},MUR:{prefix:"₨",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MVR:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MWK:{prefix:"MK",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MXN:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MYR:{prefix:"RM",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},MZN:{prefix:"MTn",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},NAD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},NGN:{prefix:"₦",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},NIO:{prefix:"C$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},NOK:{prefix:"kr",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},NPR:{prefix:"₨",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},NZD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},OMR:{prefix:"",suffix:"ر.ع.",decimals:3,decimalSeparator:".",thousandsSeparator:","},PAB:{prefix:"B/.",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},PEN:{prefix:"S/.",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},PGK:{prefix:"K",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},PHP:{prefix:"p",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},PKR:{prefix:"₨",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},PLN:{prefix:"zł",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},PYG:{prefix:"¤",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},QAR:{prefix:"",suffix:"ر.ق",decimals:2,decimalSeparator:".",thousandsSeparator:","},RON:{prefix:"L",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},RSD:{prefix:"дин.",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},RUB:{prefix:"руб.",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},RWF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},SAR:{prefix:"",suffix:"ر.س",decimals:2,decimalSeparator:".",thousandsSeparator:","},SBD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SCR:{prefix:"₨",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SDG:{prefix:"£",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SEK:{prefix:"kr",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SGD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SHP:{prefix:"£",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SKK:{prefix:"Sk",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SLL:{prefix:"Le",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SOS:{prefix:"Sh",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SRD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},STN:{prefix:"Db",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SVC:{prefix:"₡",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SYP:{prefix:"£",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},SZL:{prefix:"L",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},THB:{prefix:"฿",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},TJS:{prefix:"ЅМ",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},TMM:{prefix:"m",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},TND:{prefix:"",suffix:"د.ت",decimals:3,decimalSeparator:".",thousandsSeparator:","},TOP:{prefix:"T$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},TRY:{prefix:"YTL",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},TTD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},TWD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},TZS:{prefix:"Sh",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},UAH:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},UGX:{prefix:"Sh",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},USD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},UYU:{prefix:"$",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},UZS:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},VEF:{prefix:"Bs F",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},VND:{prefix:"₫",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},VUV:{prefix:"Vt",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},WST:{prefix:"T",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},XAF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},XCD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},XOF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},XPF:{prefix:"Fr",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:","},YER:{prefix:"¤",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ZAR:{prefix:"R",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ZMW:{prefix:"ZK",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","},ZWD:{prefix:"$",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:","}};function I(t,r="USD",e=false){let a=r||"";let i=true;if(a.includes("-integer")){a=a.split("-integer")[0];i=false}const s=Y[a];if(!s){return S(t)}const o=Object.assign(Object.assign({},s),{allowDecimal:i&&s.decimals>0,allowNegative:false});return x(t,o,e)}const F={AF:{mask:"(##) #######",prefix:"+93 "},AL:{mask:"#######",prefix:"+355 "},DZ:{mask:"(##) ###-###",prefix:"+213 "},AD:{mask:"(#) #####",prefix:"+376 "},AO:{mask:"#########",prefix:"+244 "},AI:{mask:"(###) ###-####",prefix:"+1 "},AG:{mask:"(###) ###-####",prefix:"+1 "},AR:{mask:"##########",prefix:"+54 "},AM:{mask:"########",prefix:"+375 "},AQ:{mask:"##-####",prefix:"+672 "},AW:{mask:"###-####",prefix:"+297 "},AU:{mask:"(##) ####-####",prefix:"+61 "},AT:{mask:"#############",prefix:"+43 "},AZ:{mask:"#########",prefix:"+994 "},BS:{mask:"(###) ###-####",prefix:"+1 "},BH:{mask:"####-####",prefix:"+973 "},BD:{mask:"#########",prefix:"+880 "},BB:{mask:"(###) ###-####",prefix:"+1 "},BY:{mask:"#########",prefix:"+375 "},BE:{mask:"########??",prefix:"+32 "},BZ:{mask:"#######",prefix:"+501 "},BJ:{mask:"(##) ###-###",prefix:"+229 "},BM:{mask:"(###) ###-####",prefix:"+1 "},BT:{mask:"(#) ###-###",prefix:"+975 "},BO:{mask:"(#) ###-####",prefix:"+591 "},BA:{mask:"(##) ##-##-##",prefix:"+387 "},BW:{mask:"########",prefix:"+267 "},BR:{mask:"(##) ####-####",prefix:"+55 "},BN:{mask:"###-####",prefix:"+673 "},BG:{mask:"#######?",prefix:"+359 "},BF:{mask:"##-##-##-##",prefix:"+226 "},BI:{mask:"####-####",prefix:"+257 "},KH:{mask:"(##) ######",prefix:"+855 "},CM:{mask:"####-####",prefix:"+237 "},CA:{mask:"(###) ###-####",prefix:"+1 "},CV:{mask:"###-####",prefix:"+238 "},KY:{mask:"(###) ###-####",prefix:"+1 "},CF:{mask:"###-###",prefix:"+236 "},TD:{mask:"###-##-##",prefix:"+235 "},CL:{mask:"#########",prefix:"+56 "},CN:{mask:"###########",prefix:"+86 "},CO:{mask:"##########",prefix:"57 "},KM:{mask:"###-####",prefix:"+269 "},CD:{mask:"###-####",prefix:"+243 "},CG:{mask:"###-####",prefix:"+242 "},CR:{mask:"####-####",prefix:"+506 "},CI:{mask:"####-####",prefix:"+225 "},HR:{mask:"########?",prefix:"+385 "},CU:{mask:"###########",prefix:"+53 "},CY:{mask:"####-####",prefix:"+357 "},CZ:{mask:"#########",prefix:"+420 "},DK:{mask:"####-####",prefix:"+45 "},DJ:{mask:"##-##-##-##",prefix:"+253 "},DM:{mask:"(###) ###-####",prefix:"+1 "},DO:{mask:"(###) ###-####",prefix:"+1 "},TL:{mask:"###-####",prefix:"+670 "},EC:{mask:"(##) ###-####",prefix:"+593 "},EG:{mask:"##########",prefix:"+20 "},SV:{mask:"####-####",prefix:"+503 "},GQ:{mask:"##-####",prefix:"+240 "},EE:{mask:"#######?",prefix:"+372 "},ET:{mask:"(##) ###-####",prefix:"+251 "},FK:{mask:"#####",prefix:"+500 "},FO:{mask:"######",prefix:"+298 "},FJ:{mask:"###-####",prefix:"+679 "},FI:{mask:"############",prefix:"+358 "},FR:{mask:"#########",prefix:"+33 "},GF:{mask:"##########",prefix:"+594 "},PF:{mask:"######",prefix:"+689 "},GA:{mask:"######?",prefix:"+241 "},GM:{mask:"###-####",prefix:"+220 "},GE:{mask:"########",prefix:"+995 "},DE:{mask:"###########",prefix:"+49 "},GH:{mask:"#########",prefix:"+233 "},GI:{mask:"####-####",prefix:"+350 "},GR:{mask:"##########",prefix:"+30 "},GL:{mask:"###-###",prefix:"+299 "},GD:{mask:"(###) ###-####",prefix:"+1 "},GP:{mask:"##########",prefix:"+590 "},GU:{mask:"(###) ###-####",prefix:"+1 "},GT:{mask:"####-####",prefix:"+502 "},GN:{mask:"####-####",prefix:"+224 "},GW:{mask:"###-####",prefix:"+245 "},GY:{mask:"(###) ####",prefix:"+592 "},HK:{mask:"####-####",prefix:"+852 "},HN:{mask:"########",prefix:"+504 "},HT:{mask:"####-####",prefix:"+509 "},HU:{mask:"########??",prefix:"+36 "},IS:{mask:"#########",prefix:"+354 "},IN:{mask:"##########",prefix:"+91 "},ID:{mask:"#######??????",prefix:"+62 "},IR:{mask:"##########",prefix:"+98 "},IQ:{mask:"##########",prefix:"+964 "},IE:{mask:"#########",prefix:"+353 "},IL:{mask:"#########",prefix:"+972 "},IT:{mask:"##########",prefix:"+39 "},JM:{mask:"(###) ###-####",prefix:"+1 "},JP:{mask:"#########",prefix:"+81 "},JO:{mask:"#########",prefix:"+962 "},KZ:{mask:"(###) ####-###",prefix:"+7 "},KE:{mask:"##########",prefix:"+254 "},KI:{mask:"##-###",prefix:"+686 "},KR:{mask:"##########",prefix:"+82 "},KW:{mask:"####-####",prefix:"+965 "},KG:{mask:"#########",prefix:"+996 "},LA:{mask:"########?",prefix:"+856 "},LV:{mask:"####-####",prefix:"+371 "},LB:{mask:"#######?",prefix:"+961 "},LS:{mask:"##-###-###",prefix:"+266 "},LY:{mask:"########?",prefix:"+218 "},LI:{mask:"###-####",prefix:"+423 "},LT:{mask:"########",prefix:"+370 "},LU:{mask:"###########",prefix:"+352 "},MO:{mask:"####-####",prefix:"+853 "},MK:{mask:"########",prefix:"+389 "},MG:{mask:"##-##-###-##",prefix:"+261 "},MW:{mask:"#########",prefix:"+265 "},MY:{mask:"##########",prefix:"+60 "},MV:{mask:"###-####",prefix:"+960 "},ML:{mask:"####-####",prefix:"+223 "},MT:{mask:"##-##-##-##",prefix:"+356 "},MH:{mask:"###-####",prefix:"+692 "},MQ:{mask:"###-######",prefix:"+596 "},MU:{mask:"###-####",prefix:"+230 "},MX:{mask:"(###) ###-####",prefix:"+52 "},MD:{mask:"########",prefix:"+373 "},MC:{mask:"####-####",prefix:"+377 "},MN:{mask:"###########",prefix:"+976 "},MS:{mask:"(###) ###-####",prefix:"+1 "},MA:{mask:"#########?",prefix:"+212 "},MZ:{mask:"#########",prefix:"+258 "},MM:{mask:"########",prefix:"+95 "},NA:{mask:"##########",prefix:"+264 "},NP:{mask:"##########",prefix:"+977 "},NL:{mask:"#########",prefix:"+31 "},AN:{mask:"########",prefix:"+599 "},NC:{mask:"###-###",prefix:"+687 "},NZ:{mask:"##########",prefix:"+64 "},NI:{mask:"####-####",prefix:"+505 "},NE:{mask:"##-###-###",prefix:"+227 "},NG:{mask:"##########",prefix:"+234 "},MP:{mask:"(###) ###-####",prefix:"+1 "},NO:{mask:"####-####",prefix:"+47 "},OM:{mask:"####-####",prefix:"+968 "},PK:{mask:"##########",prefix:"+92 "},PW:{mask:"###-####",prefix:"+680 "},PA:{mask:"########",prefix:"+507 "},PG:{mask:"########",prefix:"+675 "},PE:{mask:"###########",prefix:"+51 "},PH:{mask:"##########",prefix:"+63 "},PL:{mask:"#########",prefix:"+48 "},PT:{mask:"#-####-####",prefix:"+351 "},PR:{mask:"(###) ###-####",prefix:"+1 "},QA:{mask:"###-####",prefix:"+974 "},RE:{mask:"###-###-###",prefix:"+262 "},RO:{mask:"#########",prefix:"+40 "},RU:{mask:"##########",prefix:"+7 "},RW:{mask:"###-###-###",prefix:"+250 "},SH:{mask:"#-###",prefix:"+290 "},KN:{mask:"(###) ###-####",prefix:"+1 "},LC:{mask:"(###) ###-####",prefix:"+1 "},VC:{mask:"(###) ###-####",prefix:"+1 "},ST:{mask:"##-####",prefix:"+239 "},SA:{mask:"#########",prefix:"+966 "},SN:{mask:"##-###-####",prefix:"+221 "},SC:{mask:"###-###",prefix:"+248 "},SL:{mask:"(##) ###-###",prefix:"+232 "},SG:{mask:"####-####",prefix:"+65 "},SK:{mask:"#########",prefix:"+421 "},SI:{mask:"########",prefix:"+386 "},SB:{mask:"##-###",prefix:"+677 "},ZA:{mask:"(##) ###-####",prefix:"+27 "},ES:{mask:"###-###-###",prefix:"+34 "},LK:{mask:"(##) ###-####",prefix:"+94 "},SD:{mask:"##-###-####",prefix:"+249 "},SR:{mask:"######?",prefix:"+597 "},SZ:{mask:"###-####",prefix:"+268 "},SE:{mask:"###########",prefix:"+46 "},CH:{mask:"(##) ###-####",prefix:"+41 "},SY:{mask:"#########",prefix:"+963 "},TJ:{mask:"#########",prefix:"+992 "},TZ:{mask:"#########",prefix:"+255 "},TH:{mask:"#########",prefix:"+66 "},TG:{mask:"###-####",prefix:"+228 "},TT:{mask:"(###) ###-####",prefix:"+1 "},TN:{mask:"##-###-###",prefix:"+216 "},TR:{mask:"(###) ###-####",prefix:"+90 "},TM:{mask:"########",prefix:"+993 "},TC:{mask:"(###) ###-####",prefix:"+1 "},UG:{mask:"#########",prefix:"+256 "},UA:{mask:"(##) ###-####",prefix:"+380 "},AE:{mask:"#########",prefix:"+971 "},GB:{mask:"#########????",prefix:"+44 "},UY:{mask:"########?",prefix:"+598 "},UZ:{mask:"(##) ###-####",prefix:"+998 "},VE:{mask:"(###) ###-####",prefix:"+58 "},VN:{mask:"#######????",prefix:"+84 "},VG:{mask:"(###) ###-####",prefix:"+1 "},VI:{mask:"(###) ###-####",prefix:"+1 "},YE:{mask:"#########",prefix:"+967 "},ZM:{mask:"#########",prefix:"+260 "},ZW:{mask:"#########",prefix:"+263 "},AC:{mask:"####",prefix:"+247 "},ME:{mask:"(##) ###-####",prefix:"+382 "},PS:{mask:"#########",prefix:"+970 "},RS:{mask:"#########",prefix:"+381 "},TW:{mask:"#########",prefix:"+886 "},CW:{mask:"#-###-####",prefix:"+599 "},US:{mask:"(###) ###-####",prefix:""}};function N(t,r="US"){const{mask:e,prefix:a}=F[r]||F.US;const i={prefix:a};const s=t||"";if(r==="BR"&&s.replace(/[^0-9]/g,"").length===11){return S(s,"(##) #####-####",i)}else{return S(s,e,i)}}function O(t){return S(t,"###-##-####")}function R(t){return S(t,"##-#######")}function $(t){const r=(t||"").replace(/[^\da-zA-Z]/g,"");return S(r)}function B(t,r){let e=t||"";if(r==="spaced"){e=e.replace(/[^a-zA-Z ]/g,"")}else{e=e.replace(/[^a-zA-Z]/g,"")}return S(e)}const G={delimited:{prefix:"",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:",",allowDecimal:false,allowNegative:true},integer:{prefix:"",suffix:"",decimals:0,decimalSeparator:".",thousandsSeparator:"",allowDecimal:true,allowNegative:true},dec:{prefix:"",suffix:"",decimals:2,decimalSeparator:".",thousandsSeparator:",",allowDecimal:true,allowNegative:true}};function P(t){let r;if(t.includes("dec")){r=Number(t.replace("dec",""));t="dec"}let e=G[t];if(!e){return}e=Object.assign({},e);if(r){e.decimals=r}return e}function T(t="",r="",e=false){const a=P(r);if(!a){const r=(t||"").replace(/[^\d.,-]/g,"");return S(r)}return x(t,a,e)}function K(t="",r="",e=false){const a=P(r);if(!a){const r=(t||"").replace(/[^\d.,-]/g,"");return S(r,undefined,{suffix:"%"})}a.suffix="%";return x(t,a,e)}const E={AF:"####",AL:"####",DZ:"#####",AC:"ASCN 1ZZ",AD:"AD###",AR:"####","AR+":"@####@@@",AI:"AI-2640",AM:"####",AS:"#####","AS+4":"#####-####",AU:"####",AT:"####",AZ:"AZ ####",BH:"###?",BD:"####",BB:"BB#####",BY:"######",BE:"####",BM:"@@ **",BT:"#####",BA:"######",BR:"#####","BR+3":"#####-###",VG:"VG####",BN:"@@####",BG:"####",KH:"#####",KY:"KY#-####",CA:"@#@ #@#",CL:"###-####",CN:"######",CX:"####",CC:"####",CO:"######",CR:"#####","CR+4":"#####-####",CV:"####",HR:"#####",CU:"#####",CY:"####",CZ:"### ##",DK:"####",DO:"#####",EC:"######",SV:"####",EG:"#####",EE:"#####",ET:"####",FK:"FIQQ 1ZZ",FO:"###",FI:"#####",FR:"#####",GF:"973##",PF:"987##",GI:"GX11 1AA",GE:"####",DE:"#####",GR:"### ##",GL:"####",GP:"971##",GU:"#####","GU+4":"#####-####",GT:"#####",GG:"GY#? #@@",GN:"###",GS:"SIQQ 1ZZ",GW:"####",HT:"####",HN:"@@####","HN-":"#####",HU:"####",IS:"###",IN:"### ###",ID:"#####",IE:"*** ****",IR:"##########",IQ:"#####",IM:"IM#? #@@",IL:"#######",IT:"#####",JM:"##",JP:"###-####",JE:"JE#? #@@",JO:"#####",KZ:"######",KE:"#####",KR:"#####",KN:"KN####",XK:"#####",KW:"#####",KG:"######",LA:"#####",LV:"LV-####",LB:"####? ????",LS:"###",LR:"####",LI:"####",LT:"#####",LU:"####",MK:"####",MG:"###",MY:"#####",MV:"#####",MT:"@@@ ####",MH:"#####","MH+4":"#####-####",MU:"#####",MQ:"972##",MW:"######",YT:"976##",MX:"#####",FM:"#####","FM+4":"#####-####",MD:"####",MC:"980##",MN:"#####",ME:"#####",MA:"#####",MZ:"####",MM:"#####",NA:"#####",NP:"#####",NC:"988##",NZ:"####",NI:"#####",NE:"####",NG:"######",NF:"####",MP:"#####",NO:"####",OM:"###",PK:"#####",PW:"#####","PW+4":"#####-####",PS:"###",PA:"####",PG:"###",PY:"####",PE:"#####","PE+":"####",PH:"####",PL:"##-###",PT:"####","PT+3":"####-###",PR:"#####","PR+4":"#####-####",RE:"974##",PM:"975##",PN:"PCRN 1ZZ",RO:"######",RU:"######",LC:"LC## ###",VC:"####",WS:"####",SM:"4879#",SA:"#####","SA+4":"#####-####",SN:"#####",RS:"#####",SG:"######",SH:"@@@@ 1ZZ",SK:"### ##",SI:"####",SO:"@@ #####",ZA:"####",ES:"#####",LK:"#####",SD:"#####",SZ:"@###",SE:"### ##",CH:"####",SJ:"####",TW:"###","TW+2":"###-##?",TJ:"######",TZ:"#####",TH:"#####",TT:"######",TN:"####",TR:"#####",TM:"######",UA:"#####",UY:"#####",VI:"#####","VI+4":"#####-####",UZ:"######",VE:"####","VE-":"####-@",VN:"#####?",YU:"#####",WF:"986##",ZM:"#####",US:"#####","US+4":"#####-####"};function V(t,r="US"){const e=E[r];if(!e){return $(t)}return S(t,e)}const Z={"MM/DD/YYYY":"##/##/####","M/D/YYYY":"#?/#?/####","MM/DD/YY":"##/##/##","M/D/YY":"#?/#?/##","MM/YY":"##/##","M/YY":"#?/##","DD/MM/YYYY":"##/##/####","D/M/YYYY":"#?/#?/####","DD/MM/YY":"##/##/##","D/M/YY":"#?/#?/##","MM-DD-YYYY":"##-##-####","M-D-YYYY":"#?-#?-####","MM-DD-YY":"##-##-##","M-D-YY":"#?-#?-##","MM-YY":"##-##","M-YY":"#?-##","DD-MM-YYYY":"##-##-####","D-M-YYYY":"#?-#?-####","DD-MM-YY":"##-##-##","D-M-YY":"#?-#?-##"};function z(t,r="MM/DD/YYYY"){const e=Z[r===null||r===void 0?void 0:r.toUpperCase()]||Z["MM/DD/YYYY"];const a=S(t,e);return Object.assign(Object.assign({},a),{value:a.formattedValue})}function U(t){const r=tt.detectCreditCardTypeFromValue(t);const e=X[r](t);if(t.length<2&&r==="unknown"){e.leftIcon="card"}return e}const H=function t(r){const e=S(r,"#### #### #### ####");return Object.assign(Object.assign({},e),{type:"unknown",leftIcon:"card-unknown",leftIconMuted:r.length<16})};const W=function t(r){const e=S(r,"#### ###### #####");return Object.assign(Object.assign({},e),{type:"amex",leftIcon:"card-amex-color",leftIconMuted:r.length<15})};const j=function t(r){const e=S(r,"#### #### #### ####");return Object.assign(Object.assign({},e),{type:"discover",leftIcon:"card-discover-color",leftIconMuted:r.length<16})};const J=function t(r){const e=S(r,"#### #### #### ####");return Object.assign(Object.assign({},e),{type:"masterCard",leftIcon:"card-mastercard-color",leftIconMuted:r.length<16})};const Q=function t(r){const e=S(r,"#### #### #### ####");return Object.assign(Object.assign({},e),{type:"visa",leftIcon:"card-visa-color",leftIconMuted:r.length<16})};const q=function t(r){const e=S(r,"#### ###### ####");return Object.assign(Object.assign({},e),{type:"dinersClub",leftIcon:"card-dinersclub-color",leftIconMuted:r.length<14})};const X={discover:j,amex:W,masterCard:J,visa:Q,dinersClub:q,unknown:H};function _(t){const r=parseInt(t.charAt(0));const e=parseInt(t.charAt(1));switch(r){case 2:if(e>1&&e<8){if(t.length>=4){const r=parseInt(t.substr(0,4));if(r>=2221&&r<2721){return"masterCard"}}else{return"masterCard"}}break;case 3:if(e===4||e===7){return"amex"}if(e===0){if(t.length>2){const r=parseInt(t.charAt(2));if(r<6||r===9){return"dinersClub"}}else{return"dinersClub"}}if(e===6||e===8||e===9){return"dinersClub"}break;case 4:return"visa";case 5:if(e>0&&e<6){return"masterCard"}break;case 6:if(e===0){if(t.length>3){const r=t.substr(0,4);if(r==="6011"){return"discover"}}else{return"discover"}}if(e===4){if(t.length>2){const r=parseInt(t.substr(0,3));if(r>643){return"discover"}}else{return"discover"}}if(e===5){return"discover"}if(e===2){if(t.length>5){const r=parseInt(t.substr(0,6));if(r>=622126&&r<=622925){return"discover"}}else{return"discover"}}break;default:return"unknown"}return"unknown"}const tt={detectCreditCardTypeFromValue:_,format:U,amexFormatter:W,dinersClubInternationalFormatter:q,discoverFormatter:j,masterCardFormatter:J,visaFormatter:Q,unknownFormatter:H};const rt='*{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))}.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, #c30000));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, #c30000)));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, #c30000)));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, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.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 et={text:"text",tel:"tel",number:"number",password:"text",search:"search",url:"url",email:"email",currency:"text",phone:"tel",ssn:"text",alphanumeric:"text",alpha:"text",numeric:"text",percentage:"text",postal:"text",date:"text","credit-card":"text"};const at=class{constructor(e){t(this,e);this.input=r(this,"input",7);this.change=r(this,"change",7);this.clear=r(this,"clear",7);this.formatted=r(this,"formatted",7);this.scheduledAfterRender=[];this.isMobile=s();this.onMutationObserved=()=>{this.checkSlotCount=this.checkSlotCount+1};this.guid=o();this.onToggleVisibility=()=>{this.hostElement.dispatchEvent(new FocusEvent("focus"));this.textHidden=!this.textHidden};this.onInputClick=()=>{if(this.shouldCursorStayAtEnd)this.placeCursorAtEnd()};this.onInputFocus=()=>{if(this.inputField.tagName==="INPUT"){this.scheduledAfterRender.push((()=>this.shouldCursorStayAtEnd?this.placeCursorAtEnd():this.setCursorPosition(this.calculateCursorPositionOnFocus())))}this.hasFocus=true;n(this);this.valueOnFocus=this.value};this.onInputBlur=()=>{this.hasFocus=false;n(this);if(this.valueOnFocus!==this.formattedValueObject.value){this.valueOnFocus=this.formattedValueObject.value;this.change.emit(Object.assign({value:this.formattedValueObject.value,formattedValue:this.formattedValueObject.fullyFormattedValue,minFormattedLength:this.formattedValueObject.minFormattedLength},this.formattedValueObject.type&&{type:this.formattedValueObject.type}))}};this.onInputInput=t=>{t.stopPropagation();if(this.type==="currency")this.handleCurrencyDeletion(t);const r=this.getFormattedValue(t.target.value,false);this.handleDataInput(r)};this.onInputPaste=t=>{if(this.type==="currency"){const r=t.clipboardData.getData("text");const e=this.getFormattedValue(r,true);t.preventDefault();this.handleDataInput(e)}};this.handleValueAndCursor=()=>{const t=this.calculateCursorPositionOnInput();if(this.type!=="number")this.inputField.value=this.formattedValueObject.formattedValue;this.input.emit(Object.assign({value:this.formattedValueObject.value,formattedValue:this.formattedValueObject.fullyFormattedValue,minFormattedLength:this.formattedValueObject.minFormattedLength},this.formattedValueObject.type&&{type:this.formattedValueObject.type}));if(!this.formattedValueObject.value){this.clear.emit()}this.setCursorPosition(t)};this.handleCurrencyKeydown=t=>{if(t.key!=="Backspace"&&t.key!=="Delete")return;const r=this.inputField;this.textSelectedForDeletion=r.selectionStart!==r.selectionEnd};this.onInputKeydown=t=>{const r=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"];const{key:e}=t;if(this.type==="currency")this.handleCurrencyKeydown(t);if(this.shouldCursorStayAtEnd&&r.includes(e))t.preventDefault();if(e==="Enter"&&this.valueOnFocus!==this.formattedValueObject.value){this.valueOnFocus=this.formattedValueObject.value;this.change.emit(Object.assign({value:this.formattedValueObject.value,formattedValue:this.formattedValueObject.fullyFormattedValue,minFormattedLength:this.formattedValueObject.minFormattedLength},this.formattedValueObject.type&&{type:this.formattedValueObject.type}))}};this.onClearInput=()=>{const t={value:"",formattedValue:"",minFormattedLength:this.formattedValueObject.minFormattedLength};this.input.emit(t);this.change.emit(t);this.clear.emit();this.inputField.focus()};this.value=undefined;this.label=undefined;this.hideLabel=undefined;this.type="text";this.placeholder=undefined;this.disabled=false;this.autocomplete=undefined;this.autocorrect=undefined;this.autocapitalize=undefined;this.autofocus=undefined;this.hideMessages=undefined;this.iconLeft=undefined;this.iconRight=undefined;this.readonly=undefined;this.showCount=undefined;this.clearable=undefined;this.optional=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.formatModifier=undefined;this.maxlength=undefined;this.pseudo=undefined;this.showVisibilityToggle=false;this.textHidden=undefined;this.badgeValue=undefined;this.badgeTheme=undefined;this.role=undefined;this.ariaControls=undefined;this.ariaOwns=undefined;this.ariaHaspopup=undefined;this.ariaExpanded=undefined;this.ariaActivedescendant=undefined;this.current=undefined;this.ariaLabel=undefined;this.errors=undefined;this.hints=undefined;this.formattedValueObject=undefined;this.hasFocus=undefined;this.isSmall=false;this.checkSlotCount=0}componentWillLoad(){if(isNaN(this.maxlength)){this.maxlength=undefined}this.formattedValueObject=this.getFormattedValue(this.stringValue,true);Object.defineProperty(this.hostElement,"formattedValue",{get:()=>{var t,r;return(r=(t=this.formattedValueObject)===null||t===void 0?void 0:t.formattedValue)!==null&&r!==void 0?r:""}});p(this);if(this.textHidden===undefined){this.textHidden=this.type==="password"}this.manageClearableResizeObserver(this.clearable)}componentDidLoad(){if(!this.pseudo){this.inputField.value=this.formattedValueObject.formattedValue}if(this.autofocus===true){this.inputField.focus()}c(this.hostElement);const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true});this.mutationObserver=t}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){var t;this.manageClearableResizeObserver();(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null}getFormattedValue(t,r){const e={currency:I,phone:N,ssn:O,tin:R,alphanumeric:$,alpha:B,numeric:T,percentage:K,postal:V,date:z,"credit-card":tt.format};if(e[this.type]){return e[this.type](t,this.formatModifier,r)}return{value:t,formattedValue:t,fullyFormattedValue:t,formattingCharacterCount:0,unformattedValue:t}}get hasCustomDisplaySlot(){return!!this.hostElement.querySelector("[slot=custom-display]")}get canClear(){var t;return this.clearable&&!!(((t=this.inputField)===null||t===void 0?void 0:t.value)||this.value)}get shouldCursorStayAtEnd(){return this.isMobile&&this.type==="currency"}get hasError(){return Array.isArray(this.errors)&&this.errors.length>0}get messages(){return this.errors&&this.errors.length>0&&this.errors||this.hints&&this.hints.length>0&&this.hints||[]}get inputField(){return this.hostElement.shadowRoot.querySelector(".input-field")}get showMessages(){return this.messages.length>0&&!this.hideMessages}get inputId(){return`input-guid-${this.guid}`}get inputDescribedBy(){return this.showMessages?`${this.inputId}-description`:undefined}get hasInputLeftSlot(){return d(this.hostElement,"input-left")}get hasInputRightSlot(){return d(this.hostElement,"input-right")}get isMaskedType(){const t=["currency","phone","ssn","tin","alphanumeric","alpha","numeric","percentage","postal","date","credit-card"];return t.includes(this.type)}get wrapperClasses(){const t=["field-container"];if(this.hasError)t.push("has-error");if(!!this.value)t.push("has-value");if(this.clearable&&!!this.value)t.push("has-clear");if(this.hasFocus)t.push("has-focus");if(this.isSmall)t.push("is-small");if(this.formattedValueObject.prefix)t.push("has-prefix");if(this.computedIconLeft)t.push("has-icon-left");if(this.showIconSeparator)t.push("has-icon-separator");if(this.formattedValueObject.suffix)t.push("has-suffix");if(!this.formattedValueObject.suffix&&this.iconRight)t.push("has-icon-right");if(this.type==="currency")t.push("right-aligned");else t.push("left-aligned");if(this.hasCustomDisplaySlot)t.push("has-custom-display");return t.join(" ")}get computedType(){if(["password","text","ssn"].includes(this.type)&&this.textHidden){return"password"}else{return this.type&&et[this.type]||"text"}}get computedAutocomplete(){if(this.type==="currency")return"transaction-amount";return this.autocomplete||"off"}get computedIconLeft(){if(this.formattedValueObject.prefix){return}if(this.type==="search"){return"search"}if(this.formattedValueObject.leftIcon){return this.formattedValueObject.leftIcon}return this.iconLeft}get showIconSeparator(){return this.type==="credit-card"||!!this.formattedValueObject.prefix}get computedClassForIconLeft(){let t="icon-left";if(this.formattedValueObject.leftIconMuted){t+=" icon-left-muted"}return t}get stringValue(){return this.value&&String(this.value)||""}get canSetSelection(){return!["email","number"].includes(this.computedType)}get visibilityToggleText(){return u(`tecton.element.input.toggle.${this.textHidden?"show":"hide"}`)}formatAndUpdateValueFromProp(){this.formattedValueObject=this.getFormattedValue(this.stringValue,true);if(!this.pseudo){const t=()=>{this.inputField.value=this.formattedValueObject.formattedValue};this.inputField?t():this.scheduledAfterRender.push((()=>t()))}}get inputMode(){const t={currency:"numeric",ssn:"numeric",tin:"numeric",numeric:"decimal",percentage:"decimal",postal:"numeric",date:"numeric","credit-card":"numeric"};return this.type&&t[this.type]||undefined}manageClearableResizeObserver(t){var r;const e=190;if(t){if(this.resizeObserver)return;this.resizeObserver=new ResizeObserver((([t])=>{this.isSmall=e>t.contentRect.width}));this.resizeObserver.observe(this.hostElement)}else{this.isSmall=false;(r=this.resizeObserver)===null||r===void 0?void 0:r.unobserve(this.hostElement);this.resizeObserver=null}}ariaLabelObserver(){p(this)}valueObserver(){this.formatAndUpdateValueFromProp()}formattedValueObjectObserver(){this.formatted.emit(this.formattedValueObject)}typeObserver(){this.formatAndUpdateValueFromProp()}formatModifierObserver(){this.formatAndUpdateValueFromProp()}hintsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>n(this)))}errorsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>n(this)))}setValue(t){const{inputField:r}=this;r.focus();r.dispatchEvent(new FocusEvent("focus"));r.value=t;r.dispatchEvent(new InputEvent("input"))}clearValue(){if(!this.clearable)return;this.onClearInput()}onHostElementFocus(t){if(!f(t,this.hostElement))return;this.inputField.focus()}onHostElementChange(t){t.stopPropagation();if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}handleCurrencyDeletion(t){if(this.textSelectedForDeletion){this.textSelectedForDeletion=false;return}if(t.inputType!=="deleteContentBackward"&&t.inputType!=="deleteContentForward")return;const r=t.target;const e=r.selectionStart;const{formattedValue:a}=this.formattedValueObject;if(e===null)return;let i;switch(t.inputType){case"deleteContentBackward":const t=a.substring(0,e+1);const r=/[a-zA-Z0-9]$/.test(t);i={leftIndex:r?e:e-1,rightIndex:r?e+1:e,afterCursorOffset:0,newCursorOffset:1};break;case"deleteContentForward":const s=a.substring(e);const o=/^[a-zA-Z0-9]/.test(s);i={leftIndex:o?e:e+1,rightIndex:o?e+1:e+2,afterCursorOffset:1,newCursorOffset:0};break;default:return}const s=[a.substring(0,i.leftIndex),a.substring(i.rightIndex)].join("");const o=a.length-e-i.afterCursorOffset;const n=this.getFormattedValue(s,false).formattedValue;const p=Math.max(n.length-o+i.newCursorOffset,0);r.value=n;r.setSelectionRange(p,p);if(p===0){l((()=>r.setSelectionRange(p,p)))}}handleDataInput(t){if(this.maxlength===undefined||t.unformattedValue.length<=this.maxlength||t.unformattedValue.length<=this.formattedValueObject.unformattedValue.length){this.formattedValueObject=t}else if(this.maxlength){t=this.getFormattedValue(t.unformattedValue.substring(0,this.maxlength),false);this.formattedValueObject=t}this.handleValueAndCursor()}render(){return e("div",{class:this.wrapperClasses},e("div",{class:"label-wrapper"},m(this),this.countDOM()),this.inputContainerDOM(),h(this))}countDOM(){if(!this.showCount)return;const{maxlength:t,formattedValueObject:r}=this;return e("div",{class:"count-tag"},r.unformattedValue.length,t&&`/${t}`)}inputContainerDOM(){const{hasInputLeftSlot:t,hasInputRightSlot:r}=this;return e("div",{class:"input-container",tabindex:-1,"test-id":"inputContainer"},e("div",{class:"input-icons-container-left"},this.formattedValueObject.prefix&&e("div",{class:"input-prefix"},this.formattedValueObject.prefix),this.computedIconLeft&&e("div",null,e("q2-icon",{type:this.computedIconLeft,class:this.computedClassForIconLeft})),t&&e("slot",{name:"input-left"}),this.showIconSeparator&&e("div",{class:"vertical-separator"}),this.hasError&&this.type==="currency"&&e("div",null,e("q2-icon",{type:"error",class:"icon-error","test-id":"iconError"}))),this.pseudo?this.pseudoInputDOM():this.standardInputDOM(),e("div",{class:"input-icons-container-right"},this.canClear&&e("q2-btn",{class:"btn-clear",ariaLabel:u("tecton.element.input.clear",[this.label]),"test-id":"clearButton",onClick:this.onClearInput},e("q2-icon",{type:"close",class:"icon-clear"})),["password","text","ssn","tin"].includes(this.type)&&this.showVisibilityToggle&&e("q2-btn",{class:"btn-visibility-toggle","test-id":"toggleVisibilityButton",onClick:this.onToggleVisibility},this.visibilityToggleText),this.formattedValueObject.suffix&&e("span",{class:"input-suffix"},this.formattedValueObject.suffix),this.badgeValue&&e("q2-badge",{size:"large",theme:this.badgeTheme},this.badgeValue),this.hasError&&this.type!=="currency"&&e("div",null,e("q2-icon",{type:"error",class:"icon-error","test-id":"iconError"})),this.iconRight&&!this.formattedValueObject.suffix&&e("div",null,e("q2-icon",{type:this.iconRight,class:"icon-right"})),r&&e("slot",{name:"input-right"})))}standardInputDOM(){const{hasCustomDisplaySlot:t}=this;const r=["input-field"];if(t)r.push("sr");return e(a,null,t&&e("div",{class:"custom-display-container"},e("slot",{name:"custom-display"})),e("input",{class:r.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&&u(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}))}pseudoInputDOM(){const t=!this.value&&!!this.placeholder;return e("div",{class:"pseudo-input-container"},e("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},e("div",{class:"custom-display-container"},e("slot",{name:"custom-display"},e("span",{class:t?"placeholder-text":""},t?this.placeholder:this.value)))))}placeCursorAtEnd(){const{inputField:t}=this;t.selectionStart=t.selectionEnd=t.value.length}calculateCursorPositionOnInput(){const t=this.inputField;const r=this.formattedValueObject.formattedValue.length;const e=t.value.length;const a=this.type==="currency"?r:0;return{startingPosition:t&&t.selectionStart||a,valueLength:r,previousValueLength:t&&e,hasSelection:false}}calculateCursorPositionOnFocus(){var t,r,e;const{inputField:a}=this;const i=(r=(t=a===null||a===void 0?void 0:a.value)===null||t===void 0?void 0:t.length)!==null&&r!==void 0?r:0;const s=(e=a===null||a===void 0?void 0:a.selectionStart)!==null&&e!==void 0?e:i;return{startingPosition:s,valueLength:i,previousValueLength:i,hasSelection:getSelection().toString().length>0}}setCursorPosition(t){if(this.canSetSelection&&!t.hasSelection){const r=this.inputField;const{valueLength:e,previousValueLength:a,startingPosition:i}=t;if(this.type==="currency"){if(a-e===1){r.setSelectionRange(i-1,i-1)}else{const t=a-e;r.setSelectionRange(i-t,i-t)}}if(this.type!=="currency"){const t=e-a;const s=i+(t>0?t:0);r.setSelectionRange(s,s)}}}get hostElement(){return i(this)}static get watchers(){return{clearable:["manageClearableResizeObserver"],ariaLabel:["ariaLabelObserver"],value:["valueObserver"],formattedValueObject:["formattedValueObjectObserver"],type:["typeObserver"],formatModifier:["formatModifierObserver"],hints:["hintsObserver"],errors:["errorsObserver"]}}};at.style=rt;export{at as q2_input};
+//# sourceMappingURL=p-14e3c48f.entry.js.map