q2-tecton-elements 1.34.0 → 1.35.1

package/dist/q2-tecton-elements/p-b9478703.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,g as i}from"./p-277dc8cd.js";import{o as e,i as r}from"./p-065b910b.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 #33b4ff #06C)}: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}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';const n=class{constructor(o){t(this,o);this.animationEndCount=0;this.label=undefined;this.block=undefined;this.multiline=undefined;this.persistent=undefined;this.immediate=undefined;this.focusable=false;this.position="n";this.focusClass=undefined}componentDidLoad(){e(this.hostElement)}get shouldBeVisible(){if(this.persistent)return true;return this.hostElement.matches(":hover, :focus-within")}checkFocusClass(){if(!this.shouldBeVisible)return;const t=!!this.findFocusVisibleElement(document.activeElement);this.focusClass=t?"has-keyboard-focus":"has-generic-focus";if(t)return}hideTooltip(){if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}animationEndHandler(){this.animationEndCount=this.animationEndCount+1;const{focusClass:t,animationEndCount:o}=this;if(t==="has-generic-focus-out"||t==="has-generic-focus"&&o===4){this.focusClass=null;this.animationEndCount=0}}findFocusVisibleElement(t){if(!t)return;if(t.shadowRoot)t=this.findFocusVisibleElement(t.shadowRoot.activeElement);return(t===null||t===void 0?void 0:t.matches(":focus-visible"))?t:null}keyUpHandler(t){switch(t.key){case"Esc":case"Escape":this.hideTooltip();break}}focusCaptureHandler(){this.checkFocusClass()}focusHandler(t){if(!r(t,this.hostElement))return;if(!this.focusable)return;this.tooltipElement.focus()}focusOutHandler(){if(this.shouldBeVisible)return;if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}render(){const{focusClass:t}=this;const i=["tooltip"];if(t)i.push(t);return this.label?o("div",{tabindex:this.focusable?0:undefined,ref:t=>this.tooltipElement=t,class:i.join(" "),"aria-label":this.label,onAnimationEnd:()=>this.animationEndHandler(),role:"tooltip","test-id":"tooltipContainer"},o("slot",null)):o("slot",null)}get hostElement(){return i(this)}};n.style=a;export{n as q2_tooltip};
-//# sourceMappingURL=p-b9478703.entry.js.map

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

@@ -1 +0,0 @@
-{"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(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,0sM,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-c299667d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2Optgroup","this","guid","createGuid","setHidden","hidden","options","every","opt","_multiSelectHidden","componentWillLoad","observer","MutationObserver","observe","hostElement","childList","attributes","subtree","mutationObserver","disabledWatcher","disabled","disconnectedCallback","disconnect","headerId","Array","from","querySelectorAll","forEach","disabledGroup","render","h","class","role","id","label","loc","Q2Option","mutationHandler","mutations","display","trim","textContent","_a","multiline","mut","type","attributeName","ariaSelected","displayChanged","emit","value","initDisplay","componentDidLoad","characterData","_b","selected","isDisabled","Host","tabindex","undefined"],"sources":["./src/components/q2-optgroup/styles.scss?tag=q2-optgroup&encapsulation=shadow","./src/components/q2-optgroup/index.tsx","./src/components/q2-option/styles.scss?tag=q2-option&encapsulation=shadow","./src/components/q2-option/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --tct-gray-13,\n        --t-gray-13,\n        --tct-gray-l2,\n        --app-gray-l2,\n        #e6e6e6\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n    position: sticky;\n    top: calc(var(--comp-multi-select-header-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover of focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-optgroup',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Optgroup implements ComponentInterface {\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) label: string;\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), 26px)};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    border: 1px solid #33b4ff;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'q2-option',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n    @Prop({ mutable: true }) display: string;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,s+C,MCQLC,EAAU,M,yBAKnBC,KAAAC,KAAeC,IAoBfF,KAAAG,UAAY,KACRH,KAAKI,OAASJ,KAAKK,QAAQC,OAAMC,GAAOA,EAAIH,QAAUG,EAAIC,oBAAmB,E,cAzBpC,M,iCAGlB,K,CAM3BC,oBACI,MAAMC,EAAW,IAAIC,iBAAiBX,KAAKG,WAC3CO,EAASE,QAAQZ,KAAKa,YAAa,CAAEC,UAAW,KAAMC,WAAY,KAAMC,QAAS,OACjFhB,KAAKiB,iBAAmBP,EAGxBV,KAAKG,YACLH,KAAKkB,gBAAgBlB,KAAKmB,S,CAG9BC,uBACIpB,KAAKiB,iBAAiBI,aACtBrB,KAAKiB,iBAAmB,I,CAOxBK,eACA,MAAO,sBAAsBtB,KAAKC,M,CAGlCI,cACA,OAAOkB,MAAMC,KAAKxB,KAAKa,YAAYY,iBAAiB,a,CAMxDP,gBAAgBC,GACZnB,KAAKK,QAAQqB,SAAQnB,IACjBA,EAAIoB,gBAAkBR,CAAQ,G,CAItCS,SACI,OACIC,EAAA,OACIC,MAAM,wBACN1B,OAAQJ,KAAKI,OAAM,kBACFJ,KAAKsB,SACtBS,KAAK,SAELF,EAAA,OACIC,MAAM,qBACNE,GAAIhC,KAAKsB,UAEPtB,KAAKiC,OAASC,EAAIlC,KAAKiC,QAAW,IAExCJ,EAAA,OAAKC,MAAM,uBACPD,EAAA,c,yGCrEpB,MAAM/B,EAAY,qrE,MCOLqC,EAAQ,M,wEAwDjBnC,KAAAoC,gBAAmBC,I,MACf,MAAMC,GAAWtC,KAAKsC,SAAW,IAAIC,OACrC,MAAMC,KAAeC,EAAAzC,KAAKa,eAAW,MAAA4B,SAAA,SAAAA,EAAED,cAAe,IAAID,OAC1D,GAAID,IAAYE,GAAexC,KAAK0C,UAAW,OAC/C,IAAK,MAAMC,KAAON,EAAW,CACzB,GAAIM,EAAIC,OAAS,aAAeD,EAAIC,OAAS,gBAAiB,CAC1D5C,KAAKsC,QAAUE,C,MACZ,GAAIG,EAAIC,OAAS,cAAgBD,EAAIE,gBAAkB,UAAW,CACrE7C,KAAKa,YAAY2B,YAAcF,C,EAGvC,GAAItC,KAAKa,YAAYiC,aAAc9C,KAAK+C,eAAeC,KAAK,CAAEV,QAAStC,KAAKsC,QAASW,MAAOjD,KAAKiD,OAAQ,E,UA7DrE,S,gMAwBgD,K,CAOxFxC,oBACIT,KAAKkD,a,CAGTC,mBACI,MAAMzC,EAAW,IAAIC,iBAAiBX,KAAKoC,iBAC3C1B,EAASE,QAAQZ,KAAKa,YAAa,CAAEC,UAAW,KAAME,QAAS,KAAMD,WAAY,KAAMqC,cAAe,OACtGpD,KAAKiB,iBAAmBP,C,CAG5BwC,c,QACI,GAAIlD,KAAK0C,UAAW,OACpB,GAAI1C,KAAKsC,YAAYe,GAAAZ,EAAAzC,KAAKa,eAAW,MAAA4B,SAAA,SAAAA,EAAED,eAAW,MAAAa,SAAA,SAAAA,EAAEd,QAAQ,CACxDvC,KAAKa,YAAY2B,YAAcxC,KAAKsC,O,MACjC,IAAKtC,KAAKsC,SAAWtC,KAAKa,YAAY2B,YAAYD,OAAQ,CAC7DvC,KAAKsC,QAAUtC,KAAKa,YAAY2B,YAAYD,M,EAkBpDX,SACI,MAAMT,SAAEA,EAAQQ,cAAEA,EAAa2B,SAAEA,EAAQ9C,mBAAEA,GAAuBR,KAClE,MAAMuD,EAAapC,GAAYQ,EAE/B,OACIE,EAAC2B,EAAI,CACDC,SAAS,KAAI,gBACEF,EAAa,OAASG,UAAS,gBAC/B,KAAKJ,IAAU,cACjB9C,EAAqB,OAASkD,UAC3CpB,QAAStC,KAAKsC,SAEbtC,KAAKsD,UAAYzB,EAAA,WAASe,KAAK,cAChCf,EAAA,OAAKC,MAAM,WACPD,EAAA,c"}

package/dist/q2-tecton-elements/p-dce9e778.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as s}from"./p-277dc8cd.js";import{l,h as o,o as r,d as a,i as n,e as c}from"./p-065b910b.js";import{s as d,a as h}from"./p-a1926e65.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 #33b4ff #06C)}: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.multi-select-header legend{padding:0;float:left}.multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.multi-select-header input:checked+label,.multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const u=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.scheduledAfterRender=[];this.showSelectedOptions=()=>{this.showSelected=true};this.showAllOptions=()=>{this.showSelected=false};this.onMutationObserved=()=>{const t=this.hostElement.querySelector(".custom-display-content");const e=this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');const i=!!e?e.assignedNodes().length>0:t.children.length>0;if(this.hasCustomDisplay!==i){this.hasCustomDisplay=i}};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.popoverStateChanged=({detail:{open:t}})=>{if(this.open===t)return;this.open=t;if(t&&!this.searchText)return;this.optionList.setActiveElement(null);this.inputField.focus()};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const e=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(d(this,t)){return this.executeActionSheet(t)}if(this.searchable&&!e.includes(t.key))return;if(this.shouldClearSearchText(t))this.clearSearchText();this.optionList.handleExternalKeydown(t)};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();this.optionList.setDefaultActiveElement()}};this.inputClickHandler=async t=>{t.stopPropagation();if(d(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputInputHandler=t=>{t.stopPropagation();const e=this.inputField.value;const i=t.detail.value;const s=e!==i;const l=!!this.value&&s;if(l)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=i;this.input.emit({query:i})};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation();if(!this.open)return;this.closeDropdown()};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.label=undefined;this.hideLabel=undefined;this.value=undefined;this.selectedOptions=[];this.disabled=false;this.readonly=false;this.invalid=undefined;this.listLabel=l("tecton.element.select.listLabel");this.errors=undefined;this.multiple=false;this.minRows=3;this.popDirection=undefined;this.searchable=false;this.multilineOptions=false;this.optional=false;this.placeholder=undefined;this.hoist=!!((s=window.Tecton)===null||s===void 0?void 0:s.useActionSheets);this.ariaLabel=undefined;this.open=false;this.showSelected=false;this.searchText="";this.hasCustomDisplay=false;this.inputFocused=false;this.statusMessage=undefined;this.prioritizeSearch=false;this.structuredSelectedOptions=[]}componentWillLoad(){o(this);this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved();r(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null}get innerInputField(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-field")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;if(this.open&&this.searchable)return i?`${i}`:null;else return i>1?`+${i-1}`:null}get popoverMinHeight(){const{minRows:t}=this;const e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;if(!i||i==="0px")i="44px";return t*parseInt(i)}get selectedDisplay(){if(this.prioritizeSearch||this.searchText)return this.searchText;if(this.hasCustomDisplay)return"";return this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null||t===void 0?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this;const e=["q2-select-container"];if(Array.isArray(t)&&t.length>0)e.push("has-error");if(this.inputFocused)e.push("is-focused");if(this.searchable)e.push("is-searchable");return e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;if(t){this.structuredSelectedOptions=!!(e===null||e===void 0?void 0:e.length)?e.map((t=>typeof t==="string"?{value:t}:t)):[]}else{this.structuredSelectedOptions=i?[{value:i}]:[]}}ariaLabelObserver(){o(this)}valueUpdated(){if(this.multiple)return;this.clearSearchText()}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((()=>{const{multiple:e,multiSelectHeader:i,popoverElement:s}=this;const l=t&&e&&(i===null||i===void 0?void 0:i.offsetHeight)||0;if(l){s.style.setProperty("--comp-multi-select-header-height",`${l}px`)}else{s.style.removeProperty("--comp-multi-select-header-height")}}))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){if(this.readonly||this.disabled)return;if(t.target!==this.hostElement||this.hostElement.onchange)return;if(this.multiple){this.value=null;this.selectedOptions=t.detail.selectedOptions}else{this.value=t.detail.value;this.selectedOptions=[]}}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const l=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:o="",innerText:r=""}=t;const a=[o,l,r];const n=a.some((t=>{var e;return(e=t===null||t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!n;if(n)s++}));const o=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const r=i?s:e.length;this.setStatusMessage(l(o,[r]))}delegateFocus(t){const e=a(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(n(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=c(t,this.hostElement);if(e)this.closeDropdown();this.prioritizeSearch=!e&&this.searchable}handleSelectedDisplay(t){if(this.multiple)return;this.inputField.value=t.detail.display}async executeActionSheet(t){const e=await h(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:l}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:l?undefined:e,selectedOptions:l?s:undefined})}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:o,multilineOptions:r}=this;if(!o)return"";if(s===null||s===void 0?void 0:s.display)return l(s.display);if(r&&this.searchable)return this.searchText;if(r)return"";return(i=(e=(t=s===null||s===void 0?void 0:s.textContent)===null||t===void 0?void 0:t.trim())!==null&&e!==void 0?e:s===null||s===void 0?void 0:s.value)!==null&&i!==void 0?i:o}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null||e===void 0?void 0:e.display)&&l(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&l(e.display)||((t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||this.value||""}}openDropdownWithoutActiveElement(){if(this.readonly||this.disabled)return;this.optionList.setActiveElement(null);this.open=true}closeDropdown(){this.open=false;this.clearSearchText()}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}toggleDropdown(){if(this.readonly||this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}focusInput(){var t;(t=this.inputField)===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null||t===void 0?void 0:t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:l,firstSelectedOptionElement:o,prioritizeSearch:r}=this;const a=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(r||!l||a)return this.clearSelectedDisplay();if(!o||o.display)return this.clearSelectedDisplay();const n=o.firstElementChild.cloneNode(true);n.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==n.outerHTML){t.replaceChild(n,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(n);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}render(){const t=!this.searchable;return i("click-elsewhere",{class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{"aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&l(this.label)||"",value:this.selectedDisplay,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>l(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:this.readonly,placeholder:this.placeholder||undefined,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox",role:this.searchable?"combobox":null,pseudo:t,"test-id":"toggleDropdown","hide-messages":true,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":undefined},this.renderCustomDisplay()),i("div",{class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputField,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,onPopoverStateChanged:this.popoverStateChanged,block:true},i("div",{class:"popover-content",tabindex:"-1"},i("q2-option-list",{ref:t=>this.optionList=t,id:"option-list","show-selected":this.showSelected,"aria-label":this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),this.multiple&&this.visibilityToggle()))}visibilityToggle(){var t,e;const s=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;const{showSelected:o}=this;return i("div",{class:"multi-select-header",ref:t=>this.multiSelectHeader=t},i("fieldset",null,i("legend",{"aria-label":l("tecton.element.select.multiHeader.showing")},l("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!o,"aria-label":l("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},l("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:s===0,name:"viewDisplay",value:"selected","aria-label":l("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:o,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},l("tecton.element.select.multiHeader.selected",[s])))))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};u.style=p;export{u as q2_select};
-//# sourceMappingURL=p-dce9e778.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2Select","this","scheduledAfterRender","showSelectedOptions","showSelected","showAllOptions","onMutationObserved","slotContainer","hostElement","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","onOptionListChange","event","stopPropagation","values","detail","handleSelectionChanges","popoverStateChanged","open","searchText","optionList","setActiveElement","inputField","focus","inputKeydownHandler","readonly","disabled","keysForOptionListToHandle","shouldShowActionSheet","executeActionSheet","searchable","includes","key","shouldClearSearchText","clearSearchText","handleExternalKeydown","visibilityToggleKeyDown","isShiftTab","shiftKey","isRadioControlKey","setDefaultActiveElement","inputClickHandler","async","toggleDropdown","focusInput","inputInputHandler","inputValue","value","eventValue","didChangeText","shouldClearValue","clearValue","openDropdownWithoutActiveElement","prioritizeSearch","input","emit","query","inputFocusHandler","inputFocused","inputBlurHandler","inputChangeHandler","clickedElsewhere","target","localName","closeDropdown","onCustomDisplayClick","loc","_a","window","Tecton","useActionSheets","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","disconnectedCallback","disconnect","innerInputField","_b","badgeValue","multiple","optionsLength","selectedOptions","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","firstSelectedValue","firstSelectedOptionElement","optionElements","find","Array","from","querySelectorAll","wrapperClasses","errors","classes","isArray","push","join","structuredSelectedOptions","map","option","ariaLabelObserver","valueUpdated","newValue","oldValue","element","multiline","openChanged","isOpen","multiSelectHeader","popoverElement","height","offsetHeight","style","setProperty","removeProperty","keydownHandler","onHostElementChange","onchange","onHostElementInput","oninput","options","trim","toLocaleLowerCase","matchedCount","hidden","title","firstElementChild","tagName","display","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","handleSelectedDisplay","result","showActionSheetList","changeDetails","selectedOptionValues","change","undefined","_c","textContent","dispatchEvent","FocusEvent","message","clearTimeout","statusMessageTimer","statusMessage","remove","namedSlot","hasNoValue","selectionClone","cloneNode","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","renderCustomDisplay","hasSelectedDisplay","h","name","render","showAsPseudo","class","onChange","role","ref","el","label","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","pseudo","iconRight","onClick","onInput","onKeyDown","onFocus","onBlur","badgeTheme","optionsDropdown","controlElement","direction","popDirection","onPopoverStateChanged","block","tabindex","id","listLabel","visibilityToggle","selectedOptionsCount","type","checked","htmlFor"],"sources":["./src/components/q2-select/styles.scss?tag=q2-select&encapsulation=shadow","./src/components/q2-select/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.multi-select-header {\n    padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    background: var(--app-white);\n    display: flex;\n    gap: var-list(--app-scale-2x, 10px);\n    align-items: center;\n\n    fieldset {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n    }\n\n    legend {\n        padding: 0;\n        float: left;\n    }\n\n    label {\n        cursor: pointer;\n        padding: var-list(\n            var-prefixer(select-multi-select-option-padding),\n            var-prefixer(btn-badge-padding),\n            unquote('2px 5px')\n        );\n        font-size: var-list(\n            var-prefixer(select-multi-select-option-font-size),\n            var-prefixer(btn-badge-font-size),\n            inherit\n        );\n        border-radius: var-list(\n            var-prefixer(select-multi-select-option-radius),\n            var-prefixer(btn-badge-border-radius),\n            --app-border-radius-1,\n            3px\n        );\n        background: var-list(\n            --tct-select-multi-select-option-background,\n            var-prefixer(select-multi-select-option-bg),\n            --tct-badge-background,\n            var-prefixer(btn-badge-bg),\n            transparent\n        );\n        color: var-list(var-prefixer(select-multi-select-option-color), var-prefixer(btn-badge-font-color), inherit);\n\n        &:hover {\n            background: var-list(\n                --tct-select-multi-select-option-hover-background,\n                var-prefixer(select-multi-select-option-hover-background-color),\n                var-prefixer(btn-badge-hover-bg),\n                var-prefixer(gray-14),\n                --app-gray-l3,\n                #f2f2f2\n            );\n            color: var-list(\n                --tct-select-multi-select-option-hover-color,\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-hover-font-color),\n                var-prefixer(gray-5),\n                --app-gray-d2,\n                #404040\n            );\n        }\n    }\n\n    input {\n        &:checked + label {\n            &,\n            &:enabled:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-active-background,\n                    var-prefixer(select-multi-select-option-active-background-color),\n                    var-prefixer(btn-primary-bg),\n                    #2e2e2e\n                );\n                color: var-list(\n                    var-prefixer(select-multi-select-option-active-color),\n                    var-prefixer(btn-primary-font-color),\n                    --app-white,\n                    #ffffff\n                );\n            }\n        }\n\n        &:disabled + label {\n            opacity: var-list(\n                var-prefixer(select-multi-select-option-active-color),\n                var-prefixer(btn-disabled-opacity),\n                --app-disabled-opacity,\n                0.4\n            );\n            cursor: not-allowed;\n        }\n\n        &:focus + label {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n    tag: 'q2-select',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Select implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ mutable: true }) selectedOptions: string[] = [];\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) invalid: boolean;\n    @Prop() listLabel: string = loc('tecton.element.select.listLabel');\n    @Prop() errors: string[];\n    @Prop({ reflect: true }) multiple: boolean = false;\n    @Prop() minRows: number = 3;\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n    @Prop({ reflect: true }) searchable: boolean = false;\n    @Prop({ reflect: true }) multilineOptions: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() open: boolean = false;\n    @State() showSelected: boolean = false;\n    @State() searchText: string = '';\n    @State() hasCustomDisplay: boolean = false;\n    @State() inputFocused: boolean = false;\n    @State() statusMessage: string;\n    @State() prioritizeSearch: boolean = false;\n    @State() structuredSelectedOptions: IOptionValue[] = [];\n\n    inputField?: HTMLQ2InputElement | HTMLButtonElement;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    multiSelectHeader?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    mutationObserver: MutationObserver;\n\n    /// Lifecycle Hooks ///\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get innerInputField(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    /// Watchers ///\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen) {\n        this.scheduledAfterRender.push(() => {\n            const { multiple, multiSelectHeader, popoverElement } = this;\n            const height = (isOpen && multiple && multiSelectHeader?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-multi-select-header-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-multi-select-header-height');\n            }\n        });\n    }\n\n    /// Events ///\n    @Event() change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n    @Event() input: EventEmitter;\n\n    /// Listeners ///\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    /// Helpers ///\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    onMutationObserved = () => {\n        const slotContainer = this.hostElement.querySelector('.custom-display-content');\n        const displaySlot = this.hostElement.shadowRoot.querySelector<HTMLSlotElement>(\n            'slot[name=\"q2-select-display\"]'\n        );\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    statusMessageTimer: NodeJS.Timeout;\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    /// Event handlers ///\n    popoverStateChanged = ({ detail: { open } }: CustomEvent<{ open: boolean }>) => {\n        if (this.open === open) return;\n        this.open = open;\n        if (open && !this.searchText) return;\n        this.optionList.setActiveElement(null);\n        this.inputField.focus();\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n        if (shouldShowActionSheet(this, event)) {\n            return this.executeActionSheet(event);\n        }\n        if (this.searchable && !keysForOptionListToHandle.includes(event.key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const inputValue = this.inputField.value;\n        const eventValue = event.detail.value;\n        const didChangeText = inputValue !== eventValue;\n        const shouldClearValue = !!this.value && didChangeText;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n        if (!this.open) return;\n        this.closeDropdown();\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    /// DOM ///\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    render() {\n        const showAsPseudo = !this.searchable;\n\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    role={this.searchable ? 'combobox' : null}\n                    pseudo={showAsPseudo}\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.optionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    optionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputField}\n                open={this.open}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                onPopoverStateChanged={this.popoverStateChanged}\n                block\n            >\n                <div\n                    class=\"popover-content\"\n                    tabindex=\"-1\"\n                >\n                    <q2-option-list\n                        ref={el => (this.optionList = el)}\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        aria-label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    {this.multiple && this.visibilityToggle()}\n                </div>\n            </q2-popover>\n        );\n    }\n\n    visibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div\n                class=\"multi-select-header\"\n                ref={el => (this.multiSelectHeader = el)}\n            >\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-e50113ee.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as e,H as i,g as n}from"./p-277dc8cd.js";import{l as o,o as h,w as a,n as r,i as c}from"./p-065b910b.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";const d=class{constructor(e){t(this,e);this.change=s(this,"change",7);this.popoverState=s(this,"popoverState",7);this.ready=s(this,"ready",3);this.scheduledAfterRender=[];this.keyStore={queue:[],lastPressedAt:new Date};this.searchAndFocus=(t,s)=>{const e=()=>{this.pivotIndex=this.pivotIndex===undefined?0:(this.activeIndex||0)+1;const t=this.allOptions.map(((t,s)=>({element:t,index:s})));return[...t.slice(this.pivotIndex),...t.slice(0,this.pivotIndex)]};const i=()=>{const s=new Date;if(s.getTime()-this.keyStore.lastPressedAt.getTime()>1e3){this.keyStore.queue.length=0}if(this.keyStore.queue.length!==1||this.keyStore.queue[0]!==t){this.keyStore.queue.push(t)}this.keyStore.lastPressedAt=s};const n=t=>{const s=this.keyStore.queue.join("");return t.find((t=>!t.element.disabled&&t.element.display&&(t.element.display.match(new RegExp(`^${s}`,"i"))||t.element.display.replace(/\s/g,"").match(new RegExp(`^${s}`,"i")))))};const o=({index:t})=>{if(this.multiple){this.openDropdownWithActiveElement(t)}else{this.activeIndex=t;if(s)this.selectOption(this.allOptions[t]);else this.setActiveElement(t)}};i();const h=n(e());if(h){o(h)}};this.externalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:s,customSearch:e,allOptions:i}=this;const{key:n}=t;let o;switch(n){case" ":if(this.searchString){if(e)break;this.searchOptions(n,true);break}else if(this.role==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement()}break;case"Enter":if(this.role==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement()}break;case"ArrowUp":t.preventDefault();this.activeIndex=0;o=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(-1);if(o===-1)break;this.openDropdownWithActiveElement(o);break;case"ArrowDown":t.preventDefault();this.activeIndex=0;o=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(0);if(o===-1)break;this.openDropdownWithActiveElement(o);break;case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max((s||0)-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min((s||0)+10,i.length-1));break;case"Tab":this.popoverState.emit({open:false,action:"close"});break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(e)break;if(!n.match(/^[\w]$/))break;this.searchOptions(n,true);break}};this.internalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:s,customSearch:e,allOptions:i}=this;const{key:n,shiftKey:o}=t;let h;switch(n){case" ":if(this.searchString&&!this.multiple){if(e)break;this.searchOptions(n,false);break}t.preventDefault();h=i.find((t=>t.active));if(!h||h.disabled)break;this.selectOption(h);break;case"Enter":t.preventDefault();h=i.find((t=>t.active));if(!h||h.disabled)break;this.selectOption(h);break;case"ArrowUp":t.preventDefault();const a=s===0;if(a)break;if(s===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(-1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-s);break}case"ArrowDown":t.preventDefault();const r=s===i.length-1;if(r)break;if(s===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-s);break}case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max(s-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min(s+10,i.length-1));break;case"Tab":if(o)break;if(this.multiple&&this.role==="listbox")break;h=i.find((t=>t.active));if(!h||h.disabled)return;this.selectOption(h);break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(e)break;if(!n.match(/^[\w]$/))break;this.searchOptions(n,false);break}};this.focusoutHandler=t=>{const{relatedTarget:s}=t;const e=this.allOptions.includes(s);const i=!e&&this.hostElement.contains(s);if(e||i){t.stopPropagation()}};this.clickHandler=t=>{const s=t.target;const e=s.closest("q2-option");this.selectOption(e)};this.role="listbox";this.customSearch=undefined;this.noSelect=undefined;this.align=undefined;this.selectedOptions=[];this.multiple=undefined;this.disabled=undefined;this.showSelected=undefined;this.type=undefined;this.label=o("tecton.element.optionList.label");this.hasOptions=undefined}componentWillLoad(){this.hasOptions=!!this.hostElement.querySelectorAll("q2-option").length}componentDidLoad(){h(this.hostElement);this.checkOptions();this.selectedOptionsUpdated();this.ready.emit()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}get allContents(){const t=this.getRootSlot(this.hostElement);const s=["Q2-OPTGROUP","Q2-OPTION"];return t.filter((t=>s.includes(t.tagName)))}get allOptions(){const t=this.allContents;const s=t=>t.reduce(((t,e)=>{if(e.tagName==="Q2-OPTGROUP"){return[...t,...s(Array.from(e.children))]}else if(e.tagName==="Q2-OPTION"){return[...t,e]}else{return t}}),[]);return s(t)}get allVisibleOptions(){return this.allOptions.filter((t=>!t.hidden&&!t._multiSelectHidden&&!t.disabled&&!t.disabledGroup))}async checkOptions(){const{type:t}=this;const s=await this.getOptions();if(!t)return;const e=t==="menu"?"menuitem":"option";s.forEach((t=>{t.role=e}))}getRootSlot(t){var s;const e=t.querySelector("slot");const i=(s=e===null||e===void 0?void 0:e.assignedElements())!==null&&s!==void 0?s:Array.from(t.children);const n=!!i.length&&i[0].tagName==="SLOT";if(n){return this.getRootSlot(i[0])}else{return i}}scrollToActiveOption(){const t=this.allOptions[this.activeIndex];t===null||t===void 0?void 0:t.scrollIntoView({block:"nearest"})}async openDropdownWithActiveElement(t){if(this.disabled)return;this.activeIndex=t;this.popoverState.emit({open:true,action:"open"});await a();this.setActiveOption();await a();this.setFocusedOption();this.scrollToActiveOption()}getDefaultActiveIndex(){const{allOptions:t}=this;const s=t.findIndex((t=>t.selected));if(s>-1)return s;const e=t.findIndex((t=>!t.hidden));if(e>-1)return e;return 0}updateSingleOptionAttrs(){var t;const{allOptions:s,selectedOptions:e}=this;const i=((t=e[0])===null||t===void 0?void 0:t.value)||undefined;s.forEach((t=>{t.selected=t.value===i}))}updateMultipleOptionAttrs(){const{allOptions:t,selectedOptions:s}=this;const e=s.map((({value:t})=>t));t.forEach((t=>{t.selected=e.includes(t.value)}))}setActiveOption(){const t=this.activeIndex;this.allOptions.forEach(((s,e)=>{s.active=t===e}))}setFocusedOption(){const t=this.allOptions[this.activeIndex];if(!t)return;const s=!!this.hostElement.offsetParent;if(s)t.focus();else r((()=>t.focus()))}getNextVisibleIndex(t){const{allVisibleOptions:s,allOptions:e,activeIndex:i}=this;const n=e[i];const o=s.indexOf(n);let h=o+t;if(h<0){h=s.length-1}else if(h>s.length-1){h=0}const a=s[h];return e.indexOf(a)}focusSelectedSibling(t){const{allVisibleOptions:s,allOptions:e}=this;const i=s.length<2;if(i){this.showSelected=false;return}const n=s.indexOf(t);const o=n?n-1:n+1;const h=s[o];const a=e.indexOf(h);this.activeIndex=a;this.setFocusedOption();this.scheduledAfterRender.push((()=>{t._multiSelectHidden=!t.selected}))}selectOption(t){const{multiple:s,noSelect:e,showSelected:i}=this;if(!t||t.disabled||t.disabledGroup)return;const n=t.value;const o={value:n,display:t.display||t.innerText.trim()};let h=[];if(s){const{selectedOptions:s}=this;const e=s.find((t=>t.value===n));if(e){h=s.filter((({value:t})=>t!==n))}else{h=[...s,o]}if(i)this.focusSelectedSibling(t)}else{h=[o]}if(e)this.setActiveElement(null);else this.selectedOptions=h;this.change.emit({value:n,values:h});if(s)return;this.popoverState.emit({open:false,action:"select"})}adjustActiveOptionAndScroll(t){this.activeIndex+=t;this.setActiveOption();this.setFocusedOption();this.scrollToActiveOption()}resetTimer(){if(this.searchStringTimer){clearTimeout(this.searchStringTimer)}this.searchStringTimer=window.setTimeout((()=>{this.searchString=null}),2e3)}searchOptions(t,s){this.searchString=t;this.searchAndFocus(t,s)}showSelectedUpdated(t){if(t&&this.selectedOptions.length===0){this.showSelected=false;return}this.allOptions.forEach((s=>s._multiSelectHidden=t?!s.selected:false))}selectedOptionsUpdated(){if(this.multiple){this.updateMultipleOptionAttrs()}else{this.updateSingleOptionAttrs()}}delegateFocus(t){if(!c(t,this.hostElement))return;this.popoverState.emit({open:true,action:"open"});const{activeIndex:s}=this;if(typeof s==="number"&&s>-1){this.setActiveOption();this.setFocusedOption()}else{this.setDefaultActiveElement()}}handleClick(t){t.stopPropagation()}async setDefaultActiveElement(){this.activeIndex=this.getDefaultActiveIndex();this.setActiveOption();this.setFocusedOption()}async setActiveElement(t){this.activeIndex=t;this.setActiveOption();this.setFocusedOption()}async handleExternalKeydown(t){this.externalKeydownHandler(t)}async getContents(){return this.allContents}async getOptions(){return this.allOptions}render(){return e(i,null,e("div",{class:"content",ref:t=>this.contentElement=t,onFocusout:this.focusoutHandler},e("div",{class:"options","aria-label":o("tecton.element.optionList.label",[this.label]),role:this.type||"listbox",onKeyDown:this.internalKeydownHandler,onClick:this.clickHandler},e("slot",null))))}get hostElement(){return n(this)}static get watchers(){return{showSelected:["showSelectedUpdated"],selectedOptions:["selectedOptionsUpdated"]}}};d.style=l;export{d as q2_option_list};
-//# sourceMappingURL=p-e50113ee.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2OptionList","this","scheduledAfterRender","keyStore","queue","lastPressedAt","Date","searchAndFocus","keyValue","shouldSelect","reorder","pivotIndex","undefined","activeIndex","list","allOptions","map","element","index","slice","buildQueue","now","getTime","length","push","searchIndex","keyStr","join","find","v","disabled","display","match","RegExp","replace","setFocus","multiple","openDropdownWithActiveElement","selectOption","setActiveElement","matched","externalKeydownHandler","event","stopPropagation","customSearch","key","nextIndex","searchString","searchOptions","role","setDefaultActiveElement","preventDefault","selectedOptions","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","popoverState","emit","open","action","noSelect","internalKeydownHandler","shiftKey","newOption","active","isFirstOptionActive","adjustActiveOptionAndScroll","isLastOptionActive","focusoutHandler","relatedTarget","isInDropdown","includes","isInLightDom","hostElement","contains","clickHandler","target","option","closest","loc","componentWillLoad","hasOptions","querySelectorAll","componentDidLoad","overrideFocus","checkOptions","selectedOptionsUpdated","ready","componentDidRender","forEach","fn","allContents","rootSlot","getRootSlot","acceptedTags","filter","tagName","contents","extractOptions","elements","reduce","acc","Array","from","children","allVisibleOptions","hidden","_multiSelectHidden","disabledGroup","async","type","options","getOptions","optionRole","slot","querySelector","assignedElements","_a","hasAnotherSlot","scrollToActiveOption","activeOption","scrollIntoView","block","waitForNextPaint","setActiveOption","setFocusedOption","firstSelected","findIndex","selected","firstEnabled","updateSingleOptionAttrs","selectedValue","value","updateMultipleOptionAttrs","selectedValues","elementIndex","isHostElementVisible","offsetParent","focus","nextPaint","direction","visibleActiveOptionIndex","indexOf","nextVisibleOptionIndex","nextVisibleOption","focusSelectedSibling","hasNoSiblings","showSelected","selectedOptionVisibleIndex","nextVisibleSiblingIndex","nextVisibleSibling","nextSiblingIndex","selectedOption","valueObject","innerText","trim","values","isAlreadySelected","change","numToAdd","resetTimer","searchStringTimer","clearTimeout","window","setTimeout","showSelectedUpdated","delegateFocus","isEventFromElement","handleClick","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick"],"sources":["./src/components/q2-option-list/styles.scss?tag=q2-option-list&encapsulation=shadow","./src/components/q2-option-list/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n    line-height: var-list(var-prefixer(option-list-line-height),--app-line-height, 1.428571429em);\n}\n\n.content {\n    text-align: start;\n\n    :host([is-sizeable]) & {\n        display: block;\n        height: auto;\n    }\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Event,\n    State,\n    Element,\n    ComponentInterface,\n    Host,\n    EventEmitter,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, waitForNextPaint } from 'src/utils';\n\nexport interface IOptionValue {\n    value: string;\n    display?: string;\n}\n\n@Component({\n    tag: 'q2-option-list',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2OptionList implements ComponentInterface {\n    /**\n     * The role of the option list.\n     * @type {('listbox' | 'menu')}\n     */\n    @Prop({ reflect: true }) role: string = 'listbox';\n    @Prop({ reflect: true }) customSearch: boolean;\n    @Prop({ reflect: true }) noSelect: boolean;\n    @Prop({ reflect: true }) align: 'left' | 'right';\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n    @Prop({ reflect: true }) multiple: boolean;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true, mutable: true }) showSelected: boolean;\n    @Prop() type: 'menu' | 'listbox';\n    @Prop() label: string = loc('tecton.element.optionList.label');\n\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n    @Event() popoverState: EventEmitter<{ open: boolean; action: 'close' | 'select' | 'open' }>;\n    @Event({ bubbles: false }) ready: EventEmitter;\n    @State() hasOptions: boolean;\n    contentElement: HTMLElement;\n    activeIndex: number;\n    pivotIndex: number;\n    scheduledAfterRender: (() => void)[] = [];\n    searchString: string;\n    searchStringTimer: number;\n    keyStore: {\n        queue: string[];\n        lastPressedAt: Date;\n    } = {\n        queue: [],\n        lastPressedAt: new Date(),\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.checkOptions();\n        this.selectedOptionsUpdated();\n        this.ready.emit();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    /// Getters ///\n    get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[] {\n        const rootSlot = this.getRootSlot(this.hostElement);\n        const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];\n        return rootSlot.filter(element => acceptedTags.includes(element.tagName)) as (\n            | HTMLQ2OptgroupElement\n            | HTMLQ2OptionElement\n        )[];\n    }\n\n    get allOptions(): HTMLQ2OptionElement[] {\n        const contents = this.allContents;\n\n        const extractOptions = (\n            elements: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | Element)[]\n        ): HTMLQ2OptionElement[] => {\n            return elements.reduce((acc, element) => {\n                if (element.tagName === 'Q2-OPTGROUP') {\n                    return [...acc, ...extractOptions(Array.from(element.children))];\n                } else if (element.tagName === 'Q2-OPTION') {\n                    return [...acc, element];\n                } else {\n                    return acc;\n                }\n            }, []);\n        };\n\n        return extractOptions(contents);\n    }\n\n    get allVisibleOptions(): HTMLQ2OptionElement[] {\n        return this.allOptions.filter(\n            option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup\n        );\n    }\n\n    /// Helpers ///\n    async checkOptions() {\n        const { type } = this;\n        const options = await this.getOptions();\n        if (!type) return;\n        const optionRole = type === 'menu' ? 'menuitem' : 'option';\n        options.forEach(option => {\n            option.role = optionRole;\n        });\n    }\n\n    getRootSlot(element: Element): Element[] {\n        const slot = element.querySelector('slot');\n        const assignedElements = slot?.assignedElements() ?? Array.from(element.children);\n        const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';\n        if (hasAnotherSlot) {\n            return this.getRootSlot(assignedElements[0]);\n        } else {\n            return assignedElements;\n        }\n    }\n\n    scrollToActiveOption() {\n        const activeOption = this.allOptions[this.activeIndex];\n        activeOption?.scrollIntoView({ block: 'nearest' });\n    }\n\n    async openDropdownWithActiveElement(activeIndex: number) {\n        if (this.disabled) return;\n        this.activeIndex = activeIndex;\n        this.popoverState.emit({ open: true, action: 'open' });\n        await waitForNextPaint();\n        this.setActiveOption();\n        await waitForNextPaint();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    getDefaultActiveIndex() {\n        const { allOptions } = this;\n        const firstSelected = allOptions.findIndex(element => element.selected);\n        if (firstSelected > -1) return firstSelected;\n\n        const firstEnabled = allOptions.findIndex(element => !element.hidden);\n        if (firstEnabled > -1) return firstEnabled;\n\n        return 0;\n    }\n\n    updateSingleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValue = selectedOptions[0]?.value || undefined;\n        allOptions.forEach(element => {\n            element.selected = element.value === selectedValue;\n        });\n    }\n\n    updateMultipleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValues = selectedOptions.map(({ value }) => value);\n        allOptions.forEach(element => {\n            element.selected = selectedValues.includes(element.value);\n        });\n    }\n\n    setActiveOption() {\n        const activeIndex = this.activeIndex;\n\n        this.allOptions.forEach((element, elementIndex) => {\n            element.active = activeIndex === elementIndex;\n        });\n    }\n\n    setFocusedOption() {\n        const option = this.allOptions[this.activeIndex];\n        if (!option) return;\n\n        const isHostElementVisible = !!this.hostElement.offsetParent;\n        if (isHostElementVisible) option.focus();\n        else nextPaint(() => option.focus());\n    }\n\n    getNextVisibleIndex(direction) {\n        const { allVisibleOptions, allOptions, activeIndex } = this;\n        const activeOption = allOptions[activeIndex];\n        const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);\n        let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;\n\n        if (nextVisibleOptionIndex < 0) {\n            nextVisibleOptionIndex = allVisibleOptions.length - 1;\n        } else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {\n            nextVisibleOptionIndex = 0;\n        }\n\n        const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];\n        return allOptions.indexOf(nextVisibleOption);\n    }\n\n    focusSelectedSibling(option: HTMLQ2OptionElement) {\n        const { allVisibleOptions, allOptions } = this;\n        const hasNoSiblings = allVisibleOptions.length < 2;\n        if (hasNoSiblings) {\n            this.showSelected = false;\n            return;\n        }\n\n        const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);\n        const nextVisibleSiblingIndex = selectedOptionVisibleIndex\n            ? selectedOptionVisibleIndex - 1\n            : selectedOptionVisibleIndex + 1;\n        const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];\n        const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);\n\n        this.activeIndex = nextSiblingIndex;\n        this.setFocusedOption();\n        this.scheduledAfterRender.push(() => {\n            option._multiSelectHidden = !option.selected;\n        });\n    }\n\n    selectOption(selectedOption: HTMLQ2OptionElement) {\n        const { multiple, noSelect, showSelected } = this;\n        if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup) return;\n        const selectedValue = selectedOption.value;\n        const valueObject = {\n            value: selectedValue,\n            display: selectedOption.display || selectedOption.innerText.trim(),\n        };\n\n        let values: IOptionValue[] = [];\n        if (multiple) {\n            const { selectedOptions } = this;\n            const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);\n\n            if (isAlreadySelected) {\n                values = selectedOptions.filter(({ value }) => value !== selectedValue);\n            } else {\n                values = [...selectedOptions, valueObject];\n            }\n\n            if (showSelected) this.focusSelectedSibling(selectedOption);\n        } else {\n            values = [valueObject];\n        }\n\n        if (noSelect) this.setActiveElement(null);\n        else this.selectedOptions = values;\n\n        this.change.emit({ value: selectedValue, values });\n\n        if (multiple) return;\n        this.popoverState.emit({ open: false, action: 'select' });\n    }\n\n    adjustActiveOptionAndScroll(numToAdd: number) {\n        this.activeIndex += numToAdd;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    resetTimer() {\n        if (this.searchStringTimer) {\n            clearTimeout(this.searchStringTimer);\n        }\n\n        this.searchStringTimer = window.setTimeout(() => {\n            this.searchString = null;\n        }, 2000);\n    }\n\n    searchAndFocus = (keyValue: string, shouldSelect: boolean) => {\n        // pseudo search in non-searchable select\n        const reorder = () => {\n            this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;\n            const list = this.allOptions.map((element, index) => ({ element, index }));\n            return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];\n        };\n\n        const buildQueue = () => {\n            const now = new Date();\n            if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {\n                // empty stored keys if delay > 1s\n                this.keyStore.queue.length = 0;\n            }\n            if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {\n                this.keyStore.queue.push(keyValue);\n            }\n            this.keyStore.lastPressedAt = now;\n        };\n\n        const searchIndex = (list: any[]) => {\n            const keyStr = this.keyStore.queue.join('');\n            return list.find(v => {\n                return (\n                    !v.element.disabled &&\n                    v.element.display &&\n                    (v.element.display.match(new RegExp(`^${keyStr}`, 'i')) ||\n                        v.element.display.replace(/\\s/g, '').match(new RegExp(`^${keyStr}`, 'i')))\n                );\n            });\n        };\n\n        const setFocus = ({ index }) => {\n            if (this.multiple) {\n                // multiple: should open to make sure that which options are selected\n                this.openDropdownWithActiveElement(index);\n            } else {\n                this.activeIndex = index;\n                if (shouldSelect) this.selectOption(this.allOptions[index]);\n                else this.setActiveElement(index);\n            }\n        };\n\n        buildQueue();\n        const matched = searchIndex(reorder());\n        if (matched) {\n            setFocus(matched);\n        }\n    };\n\n    searchOptions(key: string, shouldSelect?: boolean) {\n        this.searchString = key;\n        this.searchAndFocus(key, shouldSelect);\n    }\n\n    /// Watchers ///\n    @Watch('showSelected')\n    showSelectedUpdated(showSelected: boolean) {\n        if (showSelected && this.selectedOptions.length === 0) {\n            this.showSelected = false;\n            return;\n        }\n        this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsUpdated() {\n        if (this.multiple) {\n            this.updateMultipleOptionAttrs();\n        } else {\n            this.updateSingleOptionAttrs();\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        const { activeIndex } = this;\n        if (typeof activeIndex === 'number' && activeIndex > -1) {\n            this.setActiveOption();\n            this.setFocusedOption();\n        } else {\n            this.setDefaultActiveElement();\n        }\n    }\n\n    @Listen('click')\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    /// Public Methods ///\n    @Method()\n    async setDefaultActiveElement() {\n        this.activeIndex = this.getDefaultActiveIndex();\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async setActiveElement(index: number) {\n        this.activeIndex = index;\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async handleExternalKeydown(event: KeyboardEvent) {\n        this.externalKeydownHandler(event);\n    }\n\n    @Method()\n    async getContents(): Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]> {\n        return this.allContents;\n    }\n\n    @Method()\n    async getOptions(): Promise<HTMLQ2OptionElement[]> {\n        return this.allOptions;\n    }\n\n    /// Event Handlers ///\n    /* tslint:disable:cyclomatic-complexity */\n    externalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions } = this;\n        const { key } = event;\n\n        let nextIndex;\n        switch (key) {\n            case ' ':\n                if (this.searchString) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, true);\n                    break;\n                } else if (this.role === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                }\n                break;\n\n            case 'Enter':\n                if (this.role === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                }\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.activeIndex = 0;\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.activeIndex = 0;\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, true);\n                break;\n        }\n    };\n\n    internalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions } = this;\n        const { key, shiftKey } = event;\n\n        let newOption;\n        switch (key) {\n            case ' ':\n                if (this.searchString && !this.multiple) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, false);\n                    break;\n                }\n\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                break;\n\n            case 'Enter':\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                const isFirstOptionActive = activeIndex === 0;\n                if (isFirstOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(-1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'ArrowDown':\n                event.preventDefault();\n                const isLastOptionActive = activeIndex === allOptions.length - 1;\n                if (isLastOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                if (shiftKey) break;\n                if (this.multiple && this.role === 'listbox') break;\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) return;\n                this.selectOption(newOption);\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, false);\n                break;\n        }\n    };\n    /* tslint:enable:cyclomatic-complexity */\n\n    focusoutHandler = (event: FocusEvent) => {\n        const { relatedTarget } = event as unknown as { relatedTarget: HTMLQ2OptionElement };\n        const isInDropdown = this.allOptions.includes(relatedTarget);\n        const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);\n        if (isInDropdown || isInLightDom) {\n            event.stopPropagation();\n        }\n    };\n\n    clickHandler = (event: Event) => {\n        const target = event.target as HTMLQ2OptionElement;\n        const option = target.closest('q2-option');\n        this.selectOption(option);\n    };\n\n    /// DOM ///\n    render() {\n        return (\n            <Host>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                    onFocusout={this.focusoutHandler}\n                >\n                    <div\n                        class=\"options\"\n                        aria-label={loc('tecton.element.optionList.label', [this.label])}\n                        role={this.type || 'listbox'}\n                        onKeyDown={this.internalKeydownHandler}\n                        onClick={this.clickHandler}\n                    >\n                        <slot />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-fdf8abed.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t,F as r,g as e}from"./p-277dc8cd.js";import{l as c,h as a,p as n,o as i,i as l}from"./p-065b910b.js";import{s as v}from"./p-f7ebeeb0.js";const d='*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);border-radius:var(--tct-btn-border-radius);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size="2"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size="3"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size="4x"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size="4"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 12px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 32px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-primary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-primary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-primary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-primary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-primary-outline-color, var(--comp-outline-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-color, var(--comp-color));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-style:var(--tct-btn-primary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-primary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-style:var(--tct-btn-primary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-primary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-style:var(--tct-btn-primary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-primary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){color:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-color, red)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg));--comp-color:var(--tct-btn-secondary-font-color);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-secondary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-secondary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-secondary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-secondary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-secondary-outline-color, var(--comp-outline-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-color, var(--comp-color));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-style:var(--tct-btn-secondary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-style:var(--tct-btn-secondary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-style:var(--tct-btn-secondary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){color:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-color, red)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #c30000));--comp-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-destroy-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-destroy-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-destroy-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));outline-style:var(--tct-btn-destroy-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-destroy-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-destroy-outline-color, var(--comp-outline-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-color, var(--comp-color));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-style:var(--tct-btn-destroy-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-style:var(--tct-btn-destroy-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-style:var(--tct-btn-destroy-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){color:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-color, red)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-escape-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-escape-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-escape-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));outline-style:var(--tct-btn-escape-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-escape-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-escape-outline-color, var(--comp-outline-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-color, var(--comp-color));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-style:var(--tct-btn-escape-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-escape-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-style:var(--tct-btn-escape-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-escape-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-style:var(--tct-btn-escape-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-escape-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){color:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-color, red)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-color, var(--comp-color));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-style:var(--tct-btn-neutral-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-style:var(--tct-btn-neutral-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){color:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-color, red)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-text-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-text-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-text-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-text-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-text-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-color, var(--comp-color));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-style:var(--tct-btn-neutral-text-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-text-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-style:var(--tct-btn-neutral-text-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){color:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-color, red)))}:host([color=primary][loading]) button,:host([intent=workflow-primary][loading]) button{--comp-background:var(--tct-btn-primary-loading-background, #0063a0)}:host([intent=workflow-escape][loading]) button{--comp-background:var(--tct-btn-escape-loading-background, var(--comp-background-alternative))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}';const b=class{constructor(e){o(this,e);this.handleSlotChange=()=>{this.handleIcons()};this.handleIcons=()=>{const o=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((o,t)=>{if(o)t.remove();else o=t;return o}),null);const t=!!o;const r=!!this.hostElement.querySelector("q2-loc");const e=!!this.hostElement.textContent.trim();const c=(r||e)&&t&&this.hostElement.firstElementChild===o;const a=(r||e)&&t&&this.hostElement.lastElementChild===o;const n=!c&&!a&&t;let i;if(n)i="only";else if(c)i="left";else if(a)i="right";this.iconPosition=i};this.renderButton=()=>{const{ariaExpanded:o,ariaHasPopup:e,ariaSelected:a,ariaPressed:n,description:i,disabled:l,type:v,tabindex:d}=this.buttonAttributes;const{iconPosition:b,loading:s,badge:u,label:p,hideLabel:h}=this;const m=b||s;const f=!b||u;return t(r,null,t("button",{ref:o=>this.primaryBtn=o!==null&&o!==void 0?o:this.primaryBtn,"aria-expanded":o,"aria-haspopup":e,"aria-label":h&&c(p),"aria-selected":a,"aria-pressed":n,disabled:l,type:v,tabindex:d,"test-id":"q2BtnInnerButton",class:b?`icon-${b}`:"","aria-describedby":!!i?"hidden-description":undefined},t("div",null,m&&t("q2-loading",{hidden:!s,modifiers:f?"inline":undefined}),!h&&p?c(p):t("slot",{onSlotchange:this.handleSlotChange}))),!!i&&t("div",{id:"hidden-description","aria-hidden":"true",class:"sr"},i))};this.render=()=>this.size==="small"?t("div",{class:"btn-height-wrapper",ref:o=>this.primaryBtnWrapper=o!==null&&o!==void 0?o:this.primaryBtnWrapper,tabIndex:-1},this.renderButton()):this.renderButton();this.ariaExpanded=undefined;this.ariaHasPopup=undefined;this.ariaControls=undefined;this.ariaSelected=undefined;this.ariaPressed=undefined;this.description=undefined;this.label=undefined;this.hideLabel=undefined;this.tabIndex=undefined;this.intent=undefined;this.disabled=undefined;this.type=undefined;this.size=undefined;this.loading=undefined;this.badge=undefined;this.active=undefined;this.block=undefined;this.color=undefined;this.fab=undefined;this.ariaLabel=undefined;this.iconPosition=undefined}componentWillLoad(){this.handleIcons();a(this);n(this)}componentDidLoad(){i(this.hostElement)}disable(o){if(this.disabled){o.stopImmediatePropagation()}this.primaryBtn.focus()}delegateFocus(o){if(!l(o,this.hostElement))return;this.primaryBtn.focus()}ariaLabelObserver(){a(this)}get buttonAttributes(){var o,t,r;return{ariaExpanded:this.ariaExpanded!==undefined?`${((o=this.ariaExpanded)===null||o===void 0?void 0:o.toString())==="true"}`:undefined,ariaHasPopup:this.ariaHasPopup!==undefined?`${this.ariaHasPopup==="true"||this.ariaHasPopup==="menu"}`:undefined,ariaLabel:this.label&&this.hideLabel?c(this.label):undefined,ariaSelected:this.ariaSelected!==undefined?`${((t=this.ariaSelected)===null||t===void 0?void 0:t.toString())==="true"}`:undefined,ariaPressed:this.ariaPressed!==undefined?`${((r=this.ariaPressed)===null||r===void 0?void 0:r.toString())==="true"}`:undefined,description:this.description!==undefined?this.description:undefined,disabled:this.disabled||false,type:this.type||"button",tabindex:this.tabIndex||undefined}}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};b.style=d;const s="*{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 #33b4ff #06C)}: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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-a11y-gray-color-AA, #949494)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";const u=class{constructor(r){o(this,r);this.halfCircleSpinner=()=>t("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},t("div",{class:"circle circle-1"}),t("div",{class:"circle circle-2"}));this.spinner=()=>this.halfCircleSpinner();this.skeletonLoader=()=>t("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},this.shape==="custom"?t("slot",null):this.skeletonShape,t("div",{class:"q2-loading-skeleton-shimmer"}));this.type=undefined;this.shape=undefined;this.modifiers=undefined;this.counts=undefined;this.label=undefined;this.inline=undefined;this.ariaLabel=undefined}get loader(){const o={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return o[this.type]||o.default}get modifiersSet(){if(this.type!=="skeleton"||!this.modifiers){return undefined}return new Set(this.modifiers.split("-"))}get countsArray(){if(this.type!=="skeleton"||!this.counts){return undefined}return this.counts.split("x").map(Number)}get skeletonShape(){var o,t;return(t=(o=v[this.shape])===null||o===void 0?void 0:o.call(v,this.countsArray,this.modifiersSet))!==null&&t!==void 0?t:""}get spinnerShape(){const o={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return o[this.type]||o.default}get localizedLabel(){return c(this.label||"tecton.element.loading.ariaLabel")}componentWillLoad(){a(this)}ariaLabelObserver(){a(this)}render(){return this.loader()}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};u.style=s;export{b as q2_btn,u as q2_loading};
-//# sourceMappingURL=p-fdf8abed.entry.js.map