q2-tecton-elements 1.47.0 → 1.48.1-alpha.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2SectionCss","Q2SectionStyle0","Q2Section","this","titleId","contentId","onHeaderClick","change","emit","expanded","onTransitionEnd","contentHeight","undefined","hideContent","setTimeout","clearResizeInterval","onHeaderSlotChange","hasSlotContent","hostElement","querySelector","hasYieldedHeader","resizerFn","clearInterval","addHeaderSlotListener","headerSlot","addEventListener","observer","MutationObserver","observe","headerSlotWrapper","childList","headerSlotMutationObserver","removeHeaderSlotListener","removeEventListener","disconnect","addContentSlotListener","contentSlot","resizeIframe","contentContainer","subtree","contentSlotMutationObserver","removeContentSlotListener","componentWillLoad","collapsible","componentDidLoad","overrideFocus","disconnectedCallback","defaultChangeHandler","event","target","onchange","detail","delegateFocus","isEventFromElement","focus","expandedObserver","setInterval","expandSection","collapseSection","contentContainerHeight","nextPaint","currentHeight","collapsibleObserver","offsetHeight","render","hasHeader","label","wrapperClasses","push","showDefaultHeader","h","key","class","id","onClick","loc","ref","el","name","noCollapseIcon","ariaExpanded","ariaControls","type","join","role","style","height","tabindex"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n    display: block;\n    background: var-list(\n        --tct-section-background,\n        var-prefixer(section-background-color),\n        var-prefixer(section-bg),\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n    border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 3px);\n    margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n    border-width: var-list(--tct-section-border-width, 0);\n    border-style: var-list(--tct-section-border-style, solid);\n    border-color: var-list(--tct-section-border-color, none);\n\n    @media screen and (max-width: 767px) {\n        --comp-default-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n    }\n\n    @media print {\n        --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n    }\n}\n\n.wrapper {\n    --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n    --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n    display: block;\n    padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n    &:hover {\n        box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n    }\n\n    :host([collapsible]) & {\n        --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n    }\n}\n\nheader {\n    --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n    display: flex;\n\n    @media print {\n        padding: var-list(--tct-section-header-print-padding, 0);\n    }\n\n    &.has-header {\n        min-height: var-list(var-prefixer(section-header-min-height), 44px);\n    }\n}\n\n.header-content {\n    flex: 1 1 100%;\n    min-width: 0;\n    align-self: center;\n\n    :host([collapsible]) & {\n        cursor: pointer;\n    }\n}\n\n.title {\n    margin: var-list(--tct-section-title-margin, 0);\n    font-size: var-list(--tct-section-title-font-size, 20px);\n    font-weight: var-list(--tct-section-title-font-weight, 600);\n    text-transform: var-list(--tct-section-title-text-transform, uppercase);\n    letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n    transition: transform var(--comp-tween);\n\n    :host(:not([expanded])) &,\n    :host([expanded='false']) & {\n        transform: rotate(180deg);\n    }\n}\n\n.content-wrapper {\n    height: auto;\n\n    &.is-closed {\n        display: none;\n        overflow: hidden;\n    }\n\n    &.is-transitioning {\n        overflow: hidden;\n    }\n\n    :host([collapsible]) & {\n        transition: height var(--comp-tween);\n    }\n}\n\n.content {\n    --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n    @media print {\n        padding: var-list(--tct-section-content-print-padding, 0);\n    }\n\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([collapsible]) :host(:not([expanded])) & {\n        visibility: hidden;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Listen,\n    State,\n    Watch,\n    h,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n    /** Determines if the section is collapsible. */\n    @Prop({ reflect: true }) collapsible: boolean;\n\n    /** Indicates if the `q2-section` is in an expanded state or not. */\n    @Prop({ reflect: true, mutable: true }) expanded: boolean;\n\n    /** The text to display above the `q2-section`. Renders as an `<h2>` element. */\n    @Prop({ reflect: true }) label: string;\n\n    /** Determines if the collapse chevron icon should show in the `q2-section` header. */\n    @Prop({ reflect: true }) noCollapseIcon: boolean;\n\n    @Element() hostElement: HTMLElement;\n    @State() contentHeight: string;\n    @State() hideContent: boolean = false;\n    @State() hasYieldedHeader: boolean = false;\n\n    titleId: string = 'title';\n    contentId: string = 'content';\n    resizerFn: NodeJS.Timer | undefined;\n    headerSlotMutationObserver: MutationObserver;\n    contentSlotMutationObserver: MutationObserver;\n    contentContainer: HTMLDivElement;\n    headerSlotWrapper: HTMLDivElement;\n    headerSlot: HTMLSlotElement;\n    contentSlot: HTMLSlotElement;\n\n    componentWillLoad() {\n        this.onHeaderSlotChange();\n        const { collapsible, expanded } = this;\n        this.contentHeight = collapsible && expanded ? undefined : '0px';\n        this.hideContent = !expanded;\n    }\n\n    componentDidLoad() {\n        this.addHeaderSlotListener();\n        this.addContentSlotListener();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.removeHeaderSlotListener();\n        this.removeContentSlotListener();\n    }\n\n    /// Listeners ///\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n            this.expanded = event.detail.expanded;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.contentContainer.focus();\n    }\n\n    /// Watchers ///\n    @Watch('expanded')\n    async expandedObserver(expanded: boolean) {\n        this.clearResizeInterval();\n        this.resizerFn = setInterval(resizeIframe, 5);\n\n        if (expanded) {\n            this.expandSection();\n        } else {\n            this.collapseSection();\n        }\n    }\n\n    async collapseSection() {\n        this.contentHeight = this.contentContainerHeight;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    async expandSection() {\n        this.hideContent = false;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    @Watch('collapsible')\n    collapsibleObserver() {\n        this.contentHeight = this.currentHeight;\n    }\n\n    /// Events ///\n    /**\n     * Emitted when the section is expanded or collapsed.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ expanded: boolean }>;\n\n    /// Event Handlers ///\n    onHeaderClick = () => {\n        this.change.emit({\n            expanded: !this.expanded,\n        });\n    };\n\n    onTransitionEnd = () => {\n        if (this.expanded) {\n            this.contentHeight = undefined;\n        } else {\n            this.hideContent = true;\n        }\n\n        setTimeout(() => {\n            // This gives enough time for all values to get passed over\n            // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n            // Will revisit in TCT-599\n            this.clearResizeInterval();\n        }, 1000);\n    };\n\n    onHeaderSlotChange = () => {\n        const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n        if (this.hasYieldedHeader !== hasSlotContent) {\n            this.hasYieldedHeader = !!hasSlotContent;\n        }\n    };\n\n    /// Getters ///\n    get currentHeight() {\n        const { collapsible, expanded } = this;\n        if (!collapsible) {\n            return null;\n        } else if (expanded) {\n            return this.contentContainerHeight;\n        } else {\n            return '0';\n        }\n    }\n\n    get contentContainerHeight() {\n        return `${this.contentContainer.offsetHeight || 0}px`;\n    }\n\n    /// Helpers ///\n    clearResizeInterval = () => {\n        this.resizerFn && clearInterval(this.resizerFn);\n    };\n\n    addHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        const observer = new MutationObserver(this.onHeaderSlotChange);\n        observer.observe(this.headerSlotWrapper, { childList: true });\n        this.headerSlotMutationObserver = observer;\n    };\n\n    removeHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        this.headerSlotMutationObserver.disconnect();\n    };\n\n    addContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.addEventListener('slotchange', resizeIframe);\n            return;\n        }\n\n        const observer = new MutationObserver(resizeIframe);\n        observer.observe(this.contentContainer, { childList: true, subtree: true });\n        this.contentSlotMutationObserver = observer;\n    };\n\n    removeContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.removeEventListener('slotchange', resizeIframe);\n            return;\n        }\n        this.contentSlotMutationObserver.disconnect();\n    };\n\n    render() {\n        const hasHeader = this.label || this.hasYieldedHeader;\n        const wrapperClasses = ['content-wrapper'];\n        const { collapsible, hideContent, contentHeight } = this;\n        if (collapsible) {\n            if (hideContent) wrapperClasses.push('is-closed');\n            else if (contentHeight) wrapperClasses.push('is-transitioning');\n        }\n\n        const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n        return (\n            <section class=\"wrapper\">\n                <header class={hasHeader ? 'has-header' : ''}>\n                    <div\n                        class=\"header-content\"\n                        id={this.titleId}\n                        onClick={this.collapsible && this.onHeaderClick}\n                    >\n                        {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n                        <div\n                            ref={el => (this.headerSlotWrapper = el)}\n                            class=\"header-slot-wrapper\"\n                        >\n                            <slot\n                                ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n                                name=\"q2-section-header\"\n                            />\n                        </div>\n                    </div>\n                    {this.collapsible && !this.noCollapseIcon && (\n                        <q2-btn\n                            label={loc(this.label || 'tecton.element.section.defaultToggleLabel')}\n                            ariaExpanded={`${!!this.expanded}`}\n                            ariaControls={this.contentId}\n                            test-id=\"toggleButton\"\n                            hide-label\n                            onClick={this.onHeaderClick}\n                        >\n                            <q2-icon type=\"chevron-up\" />\n                        </q2-btn>\n                    )}\n                </header>\n                <div\n                    class={wrapperClasses.join(' ')}\n                    id={this.contentId}\n                    aria-labelledby={this.titleId}\n                    role=\"region\"\n                    onTransitionEnd={this.onTransitionEnd}\n                    style={\n                        this.collapsible && {\n                            height: this.contentHeight,\n                        }\n                    }\n                >\n                    <div\n                        ref={el => (this.contentContainer = el)}\n                        class=\"content\"\n                        tabindex=\"-1\"\n                    >\n                        <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n                    </div>\n                </div>\n            </section>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-8a00552f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,F as a,g as o}from"./p-a5f18e27.js";import{c as r,o as n,i as s,e as d}from"./p-84190698.js";const l='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}';const c=l;const p=class{constructor(e){t(this,e);this.change=i(this,"change",7);this._id=`radio-group-${r()}`;this.onMutationObserved=()=>{this.valueUpdated(this.value);this.nameUpdated();this.disabledUpdated();this.readonlyUpdated();this.tileLayoutUpdated(this.tileLayout)};this.onInnerRadioChange=t=>{t.stopImmediatePropagation();if(this.readonly)return;this.change.emit({value:t.detail.value})};this.checkedRadioExists=()=>{const t=this.radioElements.find((t=>t.checked===true))||undefined;if(!this.value&&!!t){this.value=t.value}else if(!this.value&&!t){if(this.radioElements.length)this.radioElements[0].tabIndex=0}};this.disabled=false;this.hasError=false;this.hideLabel=undefined;this.label=undefined;this.name=undefined;this.optional=undefined;this.readonly=undefined;this.tileAlignment="center";this.tileLayout=undefined;this.value=undefined;this.tilelayout=undefined}get inputId(){return this._id}get radioElements(){return Array.from(this.hostElement.querySelectorAll("q2-radio"))}componentWillLoad(){this.checkedRadioExists();this.onMutationObserved();this.handleDeprecatedTilelayout(this.tilelayout)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true});this.mutationObserver=t;n(this.hostElement);this.checkedRadioExists()}valueUpdated(t){this.radioElements.forEach((i=>{i.checked=t===i.value;if(!i.checked){i.removeAttribute("checked");i.tabIndex=-1}else if(i.checked){i.tabIndex=0}}))}nameUpdated(){this.radioElements.forEach((t=>{t.name=this.name||this._id}))}disabledUpdated(){this.radioElements.forEach((t=>{t.groupDisabled=this.disabled}))}readonlyUpdated(){const t=this.readonly;this.radioElements.forEach((i=>i.groupReadonly=t))}handleDeprecatedTilelayout(t){if(typeof t!=="boolean")return;this.tileLayout=t;this.tilelayout=undefined}tileLayoutUpdated(t){this.radioElements.forEach((i=>{i.groupTileLayout=t}))}setValue(t){this.radioElements.forEach((i=>{if(t!==i.value)return;i.click()}))}onHostElementChange(t){if(t.target===this.hostElement){if(!this.hostElement.onchange){this.value=t.detail.value}}}delegateFocus(t){if(!s(t,this.hostElement))return;const i=this.hostElement.querySelector("q2-radio[checked]")||this.hostElement.querySelector("q2-radio");i===null||i===void 0?void 0:i.dispatchEvent(new FocusEvent("focus"))}keydownHandler(t){const i=t.target.getAttribute("value")||this.value;let e=this.radioElements.findIndex((e=>e===t.target||e.getAttribute("value")===i));let a=0;switch(t.key){case"ArrowLeft":case"ArrowUp":a=-1;break;case"ArrowRight":case"ArrowDown":a=1;break}if(e===-1||a===0){return}e+=a;e=a<0?Math.max(0,e):Math.min(this.radioElements.length-1,e);t.preventDefault();if(!this.readonly){this.value=this.radioElements[e].value}this.radioElements[e].dispatchEvent(new FocusEvent("focus"))}render(){const t=this.label||this.optional||this.readonly;const{hasError:i}=this;const o=t||i;return e(a,{key:"5fc0ba8dc6df9631a891e6997e520e663671dbf8"},o&&e("div",{key:"d65d48917b4dfa90b498467baf1b0d546f57df1b",class:"label-row"},t&&e("div",{key:"43e5db86c270d7e0822c1683d1eca97cb64e72c2",class:"group-legend"},d(this)),i&&e("q2-icon",{key:"f57ca3a0da21160ac81d00cac3c85a069fd3d9e5",type:"error","test-id":"iconError"})),e("fieldset",{key:"e85a89714c71b43670d392ba311d436a4c73038b",onChange:this.onInnerRadioChange,"aria-invalid":`${this.hasError}`},t&&e("legend",{key:"701af7a401c2871f9cbc472ffa27edac8b3e109e",class:"sr"},d(this)),this.inputDom()))}inputDom(){if(this.tileLayout){const{tileAlignment:t}=this;const i=["left","center","right"].includes(t)?t:"center";return e("div",{class:`tile-container ${i}`},e("div",{class:"options-container"},e("slot",null)))}else{return e("div",{class:"options-container"},e("slot",null))}}get hostElement(){return o(this)}static get watchers(){return{value:["valueUpdated"],name:["nameUpdated"],disabled:["disabledUpdated"],readonly:["readonlyUpdated"],tilelayout:["handleDeprecatedTilelayout"],tileLayout:["tileLayoutUpdated"]}}};p.style=c;export{p as q2_radio_group};
-//# sourceMappingURL=p-8a00552f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2RadioGroupCss","Q2RadioGroupStyle0","Q2RadioGroup","this","_id","createGuid","onMutationObserved","valueUpdated","value","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","onInnerRadioChange","event","stopImmediatePropagation","readonly","change","emit","detail","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","length","tabIndex","inputId","Array","from","hostElement","querySelectorAll","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","childList","mutationObserver","overrideFocus","newVal","forEach","removeAttribute","name","groupDisabled","disabled","groupReadonly","groupTileLayout","setValue","click","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","render","showLabel","label","optional","hasError","showLabelRow","h","Fragment","class","labelDOM","type","onChange","inputDom","tileAlignment","alignment","includes"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-scale-2, --app-scale-2x, 10px);\n}\n\nfieldset {\n    padding: 0;\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    gap: var-list(--app-scale-1x, 5px);\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\n.optional-tag {\n    margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(input-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(input-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-border-radius-1, --app-border-radius-1, 2px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true }) name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    /////// LIFECYCLE HOOK ///////\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    /////// OBSERVERS ///////\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string }>;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{labelDOM(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-9eafabd5.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as e,h as c,g as t}from"./p-a5f18e27.js";import{c as r,h,o as a,i,l}from"./p-84190698.js";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 #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]:not([checked=false])) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}:host([has-error]) .toggle-track{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]:not([checked=false])) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]:not([checked=false])) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host([has-error]) .toggle-circle,:host([has-error]:focus-within) .toggle-circle,:host([has-error]:hover) .toggle-circle{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}.toggle-hover-circle{stroke-width:0}:host(:focus-within) .toggle-hover-circle,:host(:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-hover-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([has-error]) .toggle-hover-circle,:host([has-error]:focus-within) .toggle-hover-circle,:host([has-error]:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}:host([checked]:not([checked=false])) .off,:host(:is(:not([checked]),[checked=false])) .on{opacity:0}';const k=s;const b=class{constructor(c){o(this,c);this.change=e(this,"change",7);this._id=`checkbox-${r()}`;this.onInputClick=o=>{o.stopPropagation();o.preventDefault();const e=this.disabled||this.readonly||this.slotReadonly;if(e)return;if(!(o.target instanceof HTMLInputElement))return;const{value:c,checked:t}=o.target;this.change.emit({value:c,checked:t});this.inputElement.focus()};this.alignment=undefined;this.checked=false;this.description=undefined;this.disabled=undefined;this.hasError=false;this.hideLabel=undefined;this.indeterminate=undefined;this.label=undefined;this.name=undefined;this.readonly=undefined;this.slotReadonly=undefined;this.type=undefined;this.value=undefined;this.groupDisabled=undefined;this.ariaLabel=undefined}componentWillLoad(){h(this)}componentDidLoad(){a(this.hostElement);this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(o){setTimeout((()=>this.handleChangeEvent(o)),0)}delegateFocus(o){if(!i(o,this.hostElement))return;this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){h(this)}handleChangeEvent(o){if(this.readonly||this.disabled||this.hostElement.onchange||o.defaultPrevented||o.target!==this.hostElement||!o.detail){return}this.checked=o.detail.checked}render(){const o=["label-text"];if(this.hideLabel)o.push("sr");return c("div",{key:"f71504e3c4a400cc2793d5db532637bb04989bb8",class:"container"},c("input",{key:"aa1fbc10ed45975184fa3b0e571c8d651fc548cc",ref:o=>this.inputElement=o,"aria-describedby":this.description?"description":undefined,"aria-invalid":`${this.hasError}`,checked:this.indeterminate||this.checked||false,class:"sr",disabled:!!this.disabled||!!this.groupDisabled,id:this._id,name:this.name||this._id,onClick:this.onInputClick,"test-id":"q2CheckboxInnerCheckBox",type:"checkbox",value:this.value}),c("label",{key:"57a9f3ad41317c6c1804179cd81caf11d18038a2",htmlFor:this._id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),c("div",{key:"a36286a3e670e3de961b8a0191b4509caedbb78e",class:o.join(" ")},c("label",{key:"7e0894a98ccbb7f1101384f0d256160a70db8c36","test-id":"checkboxLabel",htmlFor:this._id},l(this.label),c("slot",{key:"cc3171e6df7743d3e80757267a336b6e2b99020d"}))),this.description&&c("div",{key:"cde56109f516026ee00ca00857897c5766cc0459",class:"description-text","test-id":"checkboxDescription",id:"description"},l(this.description)))}generateCheckboxSVG(){if(this.type==="favorite"){return c("q2-icon",{type:"star",class:"checkbox-icon"})}if(this.type==="toggle"){return this.generateToggleSVG()}return c("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false"},c("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){if(this.indeterminate){return c("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"})}return c("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return c("div",{class:"toggle-svg"},c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track","test-id":"toggleTrack"},c("rect",{width:"36",height:"14",rx:"7",x:"5"})),c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator","test-id":"toggleIndicator"},c("circle",{class:"toggle-hover-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),c("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),c("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return t(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};b.style=k;export{b as q2_checkbox};
-//# sourceMappingURL=p-9eafabd5.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2CheckboxCss","Q2CheckboxStyle0","Q2Checkbox","this","_id","createGuid","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","checked","change","emit","inputElement","focus","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","onchange","defaultPrevented","detail","render","textLabelClasses","hideLabel","push","h","key","class","ref","el","description","undefined","hasError","indeterminate","groupDisabled","id","name","onClick","type","htmlFor","generateCheckboxSVG","join","loc","label","generateToggleSVG","width","height","viewBox","focusable","x","y","rx","generateCheckBoxSVGFill","x1","y1","x2","y2","points","cx","cy","r"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-checkbox-padding: #{var-list(\n            --tct-checkbox-padding,\n            unquote('#{var-list(var-prefixer(checkbox-vertical-padding), --tct-scale-2, --app-scale-2x, 10px)} 0')\n        )};\n    display: block;\n    position: relative;\n    padding: var(--comp-checkbox-padding);\n}\n\n.container {\n    --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\n    --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n    --comp-checkbox-default-row-gap: 0;\n    --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n    --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 46px)};\n    --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n    --comp-checkbox-outer-stroke-color: #{var-list(\n            var-prefixer(checkbox-outer-stroke-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-checkbox-outer-fill-color: #{var-list(\n            var-prefixer(checkbox-outer-fill-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            var-prefixer(checkbox-check-stroke-color),\n            --t-checkbox-fill,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    --comp-control-width: var(--comp-checkbox-size);\n    --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n    :host([type='favorite']) & {\n        --comp-checkbox-favorite-stroke-color: #{var-list(\n                var-prefixer(checkbox-favorite-stroke-color),\n                --t-a11y-gray-color-AA,\n                #949494\n            )};\n        --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n    }\n\n    display: grid;\n    grid-template-areas:\n        'svg label'\n        'svg description';\n    align-items: center;\n    gap: var(--comp-checkbox-gap);\n    grid-template-columns: var(--comp-control-width) calc(\n            100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n        );\n\n    :host([hide-label]:not([hide-label='false'])) & {\n        grid-template-areas: 'svg';\n        grid-template-columns: var(--comp-control-width);\n    }\n\n    :host([type='toggle']) & {\n        --comp-control-width: var(--comp-checkbox-toggle-width);\n    }\n\n    :host([alignment='right']) &,\n    :host([type='toggle']:not([alignment])) & {\n        grid-template-areas:\n            'label svg'\n            'description svg';\n        grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n                --comp-control-width\n            );\n    }\n}\n\n.label-control {\n    align-items: center;\n    display: flex;\n}\n\n.label-text {\n    grid-area: label;\n    font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n    :host([description]) & {\n        font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false'])) & {\n        font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n    }\n    :host(:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host(:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host([description]:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):hover) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-hover-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n    :host([description]:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):focus-within) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-focused-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n}\n\n.description-text {\n    grid-area: description;\n    font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n    :host(:hover) & {\n        font-weight: var-list(\n            --tct-checkbox-hover-description-font-weight,\n            var-prefixer(checkbox-description-font-weight),\n            400\n        );\n    }\n}\n\nlabel {\n    color: var-list(--tct-checkbox-label-color);\n    cursor: pointer;\n    hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n    word-break: var-list(--tct-checkbox-label-word-break, break-word);\n    word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n    label {\n        cursor: not-allowed;\n    }\n}\n\n.checkbox-icon {\n    width: var(--comp-checkbox-size);\n    height: var(--comp-checkbox-size);\n    border-radius: var-list(\n        var-prefixer(checkbox-outer-border-radius),\n        --tct-border-radius-1,\n        --app-border-radius-1,\n        3px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n\n    :host([checked]:not([checked='false']):not([type='favorite'])) & {\n        stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n        fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n    }\n\n    :host([has-error]:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n        fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-error-box-shadow);\n    }\n\n    :host(:hover:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n        fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-hover-box-shadow);\n    }\n    :host(:hover[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-hover-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-hover-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-hover-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --tct-checkbox-hover-box-shadow\n        );\n    }\n\n    :host(:focus-within:not([type='favorite'])) & {\n        --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n            var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n        stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n        fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--comp-checkbox-focused-box-shadow);\n    }\n    :host(:focus-within[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-focused-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-focused-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-focused-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --comp-checkbox-focused-box-shadow\n        );\n    }\n\n    // Favorite\n    :host([type='favorite']) & {\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n        --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host(:hover[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    // Checked favorite\n    :host([checked]:not([checked='false'])[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-stroke-color,\n                --tct-checkbox-favorite-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-hover-stroke-color,\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-fill-primary: #{var-list(\n                --tct-checkbox-favorite-checked-fill-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-focused-stroke-color,\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([has-error][type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n    :host([has-error][type='favorite'][checked]:not([checked='false'])) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n}\n\n.checkbox-fill {\n    stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n}\n\n.checked-fill {\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    :host([type='toggle']) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n        transition: opacity var(--comp-checkbox-tween);\n    }\n    :host([type='toggle'][checked]:not([checked='false'])) & {\n        stroke: var-list(\n            var-prefixer(checkbox-toggle-checked-icon-stroke),\n            --t-checkbox-text,\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n    }\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.toggle-track {\n    fill: var-list(\n        var-prefixer(checkbox-toggle-track-color),\n        var-prefixer(gray-11),\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    height: 14px;\n    width: 46px;\n\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        opacity: 0.5;\n    }\n    :host([has-error]) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n        opacity: 0.5;\n    }\n}\n\n.toggle-indicator {\n    transition: left var(--comp-checkbox-tween);\n    height: 30px;\n    width: 30px;\n    left: 0;\n    border-radius: 50%;\n\n    :host([checked]:not([checked='false'])) & {\n        left: 21px;\n    }\n}\n\n.toggle-circle {\n    fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n.toggle-hover-circle {\n    stroke-width: 0;\n\n    :host(:focus-within) &,\n    :host(:hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        stroke-width: 10px;\n        stroke-opacity: 0.5;\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n:host([checked]:not([checked='false'])) .off,\n:host(:is(:not([checked]), [checked='false'])) .on {\n    opacity: 0;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true }) alignment: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true }) description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true }) indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true }) name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    //////// Host Element Events ////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    /////// View Methods ///////\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={`${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.generateCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    generateCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.generateToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-hover-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as r}from"./p-a5f18e27.js";import{c as o,e as s}from"./p-84190698.js";const n="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";const a=n;const d=class{constructor(i){t(this,i);this.change=e(this,"change",7);this._id=`checkbox-group-${o()}`;this.onMutationObserved=()=>{this.updateValue();this.updateDisabled();this.updateReadonly()};this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};setTimeout((()=>{this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked}));this.change.emit(e)}),0)};this.disabled=undefined;this.hasError=undefined;this.hideLabel=undefined;this.label=undefined;this.optional=undefined;this.readonly=undefined;this.value=undefined}get inputId(){return this._id}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}updateValue(){if(this.readonly)return;this.checkboxElements.forEach((t=>{if(this.protectedValue.hasOwnProperty(t.value)){t.checked=this.value[t.value]}}))}updateDisabled(){const t=this.disabled;this.checkboxElements.forEach((e=>{e.groupDisabled=t}))}updateReadonly(){const t=this.readonly;this.checkboxElements.forEach((e=>{e.slotReadonly=t}))}componentWillLoad(){this.updateReadonly()}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}valueObserver(){this.updateValue()}disabledObserver(){this.updateDisabled()}readonlyObserver(){this.updateReadonly()}setValue(t){const e=new Set(Array.isArray(t)?t:[t]);this.checkboxElements.forEach((t=>{if(e.has(t.value))t.click()}))}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail}}render(){const t=this.label||this.optional||this.readonly;return i("div",{key:"6b4c836a5d3c97b6271a5feeac64dfe58b692b25"},t&&!this.hideLabel&&i("div",{key:"09840d56ff72f32cb1bf3fc9fce63e8565aa5ea7",class:"group-legend"},s(this)),i("fieldset",{key:"d7307cee9962d82e242547ab15d275832be3424f",class:`q2-checkbox-fieldset ${this.hasError?"has-error":""}`,onChange:this.onInnerCheckboxChange,"aria-invalid":`${this.hasError}`},this.label||this.optional?i("legend",{class:"sr-only"},s(this)):"",this.hasError?i("div",{class:`error-icon-container ${this.label||this.optional?"":"no-label"}`},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],disabled:["disabledObserver"],readonly:["readonlyObserver"]}}};d.style=a;export{d as q2_checkbox_group};
-//# sourceMappingURL=p-a03c29f3.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2CheckboxGroupCss","Q2CheckboxGroupStyle0","Q2CheckboxGroup","this","_id","createGuid","onMutationObserved","updateValue","updateDisabled","updateReadonly","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","inputId","Array","from","hostElement","querySelectorAll","protectedValue","readonly","hasOwnProperty","groupDisabled","disabled","checkbox","slotReadonly","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","disconnectedCallback","disconnect","valueObserver","disabledObserver","readonlyObserver","setValue","values","valuesSet","Set","isArray","has","click","onHostElementChange","target","onchange","detail","render","showLabel","label","optional","h","key","hideLabel","class","labelDOM","hasError","onChange","type","inputDom"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true }) value: object;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get inputId() {\n        return this._id;\n    }\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly();\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    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        return (\n            <div>\n                {showLabel && !this.hideLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? <legend class=\"sr-only\">{labelDOM(this)}</legend> : ''}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,oiEAC3B,MAAAC,EAAeD,E,MCcFE,EAAe,M,wDA6CxBC,KAAAC,IAAc,kBAAkBC,MAehCF,KAAAG,mBAAqB,KACjBH,KAAKI,cACLJ,KAAKK,iBACLL,KAAKM,gBAAgB,EAGzBN,KAAAO,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBC,YAAW,KACPX,KAAKY,iBAAiBC,SAAQC,IAC1BJ,EAAWI,EAAMC,SAAWD,EAAME,OAAO,IAE7ChB,KAAKiB,OAAOC,KAAKR,EAAW,GAC7B,EAAE,E,mKA1BT,WAAIS,GACA,OAAOnB,KAAKC,G,CAGhB,oBAAIW,GACA,OAAOQ,MAAMC,KAAKrB,KAAKsB,YAAYC,iBAAiB,e,CAGxD,kBAAIC,GACA,OAAOxB,KAAKe,OAAS,E,CAoBzB,WAAAX,GACI,GAAIJ,KAAKyB,SAAU,OACnBzB,KAAKY,iBAAiBC,SAAQC,IAC1B,GAAId,KAAKwB,eAAeE,eAAeZ,EAAMC,OAAQ,CACjDD,EAAME,QAAUhB,KAAKe,MAAMD,EAAMC,M,KAK7C,cAAAV,GACI,MAAMsB,EAAgB3B,KAAK4B,SAC3B5B,KAAKY,iBAAiBC,SAAQgB,IAC1BA,EAASF,cAAgBA,CAAa,G,CAI9C,cAAArB,GACI,MAAMwB,EAAe9B,KAAKyB,SAC1BzB,KAAKY,iBAAiBC,SAAQgB,IAC1BA,EAASC,aAAeA,CAAY,G,CAM5C,iBAAAC,GACI/B,KAAKM,gB,CAGT,gBAAA0B,GACI,MAAMC,EAAW,IAAIC,iBAAiBlC,KAAKG,oBAC3C8B,EAASE,QAAQnC,KAAKsB,YAAa,CAAEc,UAAW,KAAMC,QAAS,OAC/DrC,KAAKsC,iBAAmBL,EACxBjC,KAAKG,oB,CAGT,oBAAAoC,GACI,GAAIvC,KAAKsC,iBAAkB,CACvBtC,KAAKsC,iBAAiBE,aACtBxC,KAAKsC,iBAAmB,I,EAKhC,aAAAG,GACIzC,KAAKI,a,CAIT,gBAAAsC,GACI1C,KAAKK,gB,CAIT,gBAAAsC,GACI3C,KAAKM,gB,CAUT,QAAAsC,CAASC,GACL,MAAMC,EAAY,IAAIC,IAAI3B,MAAM4B,QAAQH,GAAUA,EAAS,CAACA,IAC5D7C,KAAKY,iBAAiBC,SAAQC,IAC1B,GAAIgC,EAAUG,IAAInC,EAAMC,OAAQD,EAAMoC,OAAO,G,CASrD,mBAAAC,CAAoB3C,GAChB,GAAIA,EAAM4C,SAAWpD,KAAKsB,cAAgBtB,KAAKsB,YAAY+B,SAAU,CACjErD,KAAKe,MAAQP,EAAM8C,M,EAI3B,MAAAC,GACI,MAAMC,EAAYxD,KAAKyD,OAASzD,KAAK0D,UAAY1D,KAAKyB,SACtD,OACIkC,EAAA,OAAAC,IAAA,4CACKJ,IAAcxD,KAAK6D,WAAaF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,gBAAgBC,EAAS/D,OACrE2D,EAAA,YAAAC,IAAA,2CACIE,MAAO,wBAAwB9D,KAAKgE,SAAW,YAAc,KAC7DC,SAAUjE,KAAKO,sBAAqB,eACtB,GAAGP,KAAKgE,YAErBhE,KAAKyD,OAASzD,KAAK0D,SAAWC,EAAA,UAAQG,MAAM,WAAWC,EAAS/D,OAAkB,GAClFA,KAAKgE,SACFL,EAAA,OAAKG,MAAO,wBAAwB9D,KAAKyD,OAASzD,KAAK0D,SAAW,GAAK,cACnEC,EAAA,WACIG,MAAM,qBACNI,KAAK,WAEP,GAITlE,KAAKmE,Y,CAMtB,QAAAA,GACI,OAAOR,EAAA,Y"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2OptionListCss","Q2OptionListStyle0","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","popoverState","emit","open","action","setActiveElement","matched","externalKeydownHandler","event","stopPropagation","customSearch","key","nextIndex","searchString","searchOptions","type","setDefaultActiveElement","nextPaint","preventDefault","selectedOptions","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","noSelect","internalKeydownHandler","shiftKey","newOption","active","isFirstOptionActive","adjustActiveOptionAndScroll","isLastOptionActive","focusoutHandler","relatedTarget","isInQ2OptionList","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","options","getOptions","optionRole","role","slot","querySelector","assignedElements","_a","hasAnotherSlot","scrollToActiveOption","activeOption","scrollIntoView","block","waitForNextPaint","setActiveOption","setFocusedOption","firstSelected","findIndex","selected","firstEnabled","updateSingleOptionAttrs","selectedValue","value","updateMultipleOptionAttrs","selectedValues","elementIndex","isOptionVisible","isVisible","focus","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","handleExternalKeydown","getContents","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick"],"sources":["src/components/q2-option-list/q2-option-list.scss?tag=q2-option-list&encapsulation=shadow","src/components/q2-option-list/q2-option-list.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, isVisible, loc, nextPaint, overrideFocus, waitForNextPaint } from 'src/utils';\n\nexport interface IOptionValue {\n    value: string;\n    display?: string;\n}\n\n@Component({ tag: 'q2-option-list', shadow: true, styleUrl: 'q2-option-list.scss' })\nexport class Q2OptionList implements ComponentInterface {\n    @Prop({ reflect: true }) align: 'left' | 'right';\n\n    /** Indicates a custom search is being implemented for the option list. */\n    @Prop({ reflect: true }) customSearch: boolean;\n\n    /** Disables the option list. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop() label: string = loc('tecton.element.optionList.label');\n\n    /**\n     * Enables the multi-select ability for the option list.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true }) multiple: boolean;\n\n    /** Disables the logic that handles selecting and focusing an option in the option list. */\n    @Prop({ reflect: true }) noSelect: boolean;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n\n    /** Applies focus to the selected option. */\n    @Prop({ reflect: true, mutable: true }) showSelected: boolean;\n\n    /** Translates to the role of the option list */\n    @Prop() type: 'menu' | 'listbox' = 'listbox';\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     */\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n\n    /**\n     * Emitted to indicate the intended state of the popover.\n     * @private\n     */\n    @Event() popoverState: EventEmitter<{ open: boolean; action: 'close' | 'select' | 'open' }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false }) ready: EventEmitter<undefined>;\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 isOptionVisible = isVisible(option);\n        if (isOptionVisible) 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\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) {\n                    this.selectOption(this.allOptions[index]);\n                    this.popoverState.emit({ open: false, action: 'select' });\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.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'Enter':\n                if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\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, multiple } = 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                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\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                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\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.type === '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 isInQ2OptionList = this.allOptions.includes(relatedTarget);\n        const isInLightDom = !isInQ2OptionList && this.hostElement.contains(relatedTarget);\n        if (isInQ2OptionList || 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        if (this.multiple) return;\n        this.popoverState.emit({ open: false, action: 'select' });\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                        aria-multiselectable={`${!!this.multiple}`}\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-e25194ce.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","componentWillLoad","connectedCallback","forEach","eventName","document","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","activeElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","viewPortChanged","open","determinePopDirection","viewPortOrientationChanged","setFixedCSSProperties","async","controlElement","containerElement","currentDirection","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","popoverRight","visualViewport","width","block","style","setProperty","offsetWidth","height","waitForNextPaint","setAbsoluteCSSProperties","align","controlStyle","getComputedStyle","controlSize","parseInt","borderTopWidth","borderBottomWidth","undefined","componentDidLoad","removeViewportListeners","toggle","scrollContainerTo","options","scrollTo","openChanged","popoverStateChanged","addViewportListeners","show","clearCSSProperties","minHeightProvided","popoverStateHandler","detail","stopPropagation","actualDirection","direction","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","passive","capture","screen","orientation","removeProperty","setDirectionAndShow","isOpen","mode","maxHeight","windowHeight","maxSpaceAbove","maxSpaceBelow","outletOffset","innerHeight","_c","distanceToIframeBottom","viewableSpaceBelow","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","render","containerClasses","push","h","key","ref","el","class","join","contentElement"],"sources":["src/components/click-elsewhere/click-elsewhere.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n    isCurrentlyFocused: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the user clicks outside the element\n     */\n    @Event() change: EventEmitter;\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n            child = child.parentNode || child.host;\n        }\n    }\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    windowBlurHandler = (): void => {\n        this.isCurrentlyFocused = false;\n        this.change.emit();\n    };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n    display: none;\n}\n\n.show {\n    display: block;\n    position: fixed;\n    z-index: var-list(--tct-popover-z-index, 50);\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    min-width: var-list(--tct-popover-min-width, 135px);\n    margin-block: var-list(--tct-popover-margin-block, 0);\n    box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n    border-width: var-list(--tct-popover-border-width, 0);\n    border-style: solid;\n    border-color: var-list(--tct-popover-border-color, transparent);\n    border-radius: var-list(--tct-popover-border-radius, 0);\n    // the following --comp variables are set via JS\n    max-height: var(--comp-pop-max-height);\n    left: var(--comp-pop-left);\n    opacity: var(--comp-pop-opacity, 0);\n\n    :host([block]) & {\n        right: unset;\n        width: var(--comp-pop-width);\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    :host([align='left']) & {\n        left: var(--comp-pop-left);\n        right: unset;\n    }\n\n    :host([align='right']) & {\n        right: var(--comp-pop-right);\n        left: unset;\n    }\n\n    &.down {\n        top: var-list(--tct-popover-top, --comp-pop-top);\n        bottom: unset;\n    }\n\n    &.up {\n        top: unset;\n        bottom: var(--comp-pop-bottom);\n    }\n\n    &.legacy {\n        position: absolute;\n    }\n\n    @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true }) direction: 'up' | 'down';\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true }) align: 'left' | 'right';\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop() controlElement: HTMLElement;\n\n    @Prop() mode: 'legacy' = null;\n\n    /** @deprecated */\n    @Prop() minHeight: number;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    @State() currentDirection: 'down' | 'up' = undefined;\n    // remove `show` when Popover API is supported in iOS\n    @State() show: boolean = false;\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n\n    /** remove when Popover API is supported in iOS */\n    orientationChanged: boolean = false;\n\n    /// Lifecycle hooks ///\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    /// Methods ///\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    /// Watchers ///\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    /// Listeners ///\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    /// Getters ///\n    get actualDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    /// Helpers ///\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n        // #endregion\n    }\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.removeEventListener('scroll', this.viewPortChanged);\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        // #endregion\n    }\n\n    setFixedCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n        const popoverLeft: number = controlLeft;\n        const popoverRight: number = window.visualViewport.width - controlRight;\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);\n        containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n        containerElement.style.setProperty('--comp-pop-right', `${popoverRight}px`);\n\n        if (currentDirection === 'up') {\n            containerElement.style.setProperty('--comp-pop-bottom', `${window.visualViewport.height - controlTop}px`);\n        }\n        if (currentDirection === 'down') {\n            containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        this.show = true;\n        if (this.mode === 'legacy') {\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setFixedCSSProperties();\n        }\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, actualDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    /// DOM ///\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{h as r,l as n}from"./p-84190698.js";const i="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";const d=i;const a=class{constructor(e){t(this,e);this.onItemClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"select",value:this.value||""},bubbles:true}))};this.onItemKeydown=t=>{if(["ArrowRight","Right"].includes(t.key)){this.focusRemoveBtn()}};this.onItemFocus=t=>{t.stopPropagation()};this.onRemoveBtnClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"remove",value:this.value||""},bubbles:true}))};this.onRemoveBtnKeydown=t=>{if(["ArrowLeft","Left"].includes(t.key)){this.focusItem()}};this.onRemoveBtnFocus=t=>{t.stopPropagation()};this.disabled=undefined;this.label=undefined;this.removable=undefined;this.separator=undefined;this.value=undefined;this.ariaLabel=undefined}componentWillLoad(){r(this)}ariaLabelObserver(){r(this)}get removeLabel(){return n("tecton.element.dropdownItem.remove",[this.label||""])}get dropdownItemBtn(){return this.hostElement.shadowRoot.querySelector(".dropdown-item")}get innerLabel(){return this.label||this.hostElement.textContent}get removeBtn(){return this.hostElement.shadowRoot.querySelector(".remove-dropdown-item")}onHostElementFocus(){if(event.target===this.hostElement){this.focusItem()}}focusItem(){this.dropdownItemBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}focusRemoveBtn(){this.removeBtn&&this.removeBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}render(){if(!!this.separator){return this.separatorDOM()}return this.itemDOM()}separatorDOM(){return e("div",{class:"dropdown-separator",role:"separator","test-id":"dropdownItemSeparator"})}itemDOM(){return e("div",{class:"dropdown-item-wrapper"},e("q2-btn",{class:"dropdown-item",label:this.innerLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onItemClick,onKeyDown:this.onItemKeydown,onFocus:this.onItemFocus,"test-id":"dropdownItem"},e("div",{class:"dropdown-item-content"},e("slot",null))),!!this.removable&&e("q2-btn",{class:"remove-dropdown-item",label:this.removeLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onRemoveBtnClick,onKeyDown:this.onRemoveBtnKeydown,onFocus:this.onRemoveBtnFocus,"test-id":"removeDropdownItem"},e("q2-icon",{type:"close"})))}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};a.style=d;export{a as q2_dropdown_item};
-//# sourceMappingURL=p-f450db0b.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","onItemClick","event","stopImmediatePropagation","hostElement","dispatchEvent","CustomEvent","detail","type","value","bubbles","onItemKeydown","includes","key","focusRemoveBtn","onItemFocus","stopPropagation","onRemoveBtnClick","onRemoveBtnKeydown","focusItem","onRemoveBtnFocus","componentWillLoad","handleAriaLabel","ariaLabelObserver","removeLabel","loc","label","dropdownItemBtn","shadowRoot","querySelector","innerLabel","textContent","removeBtn","onHostElementFocus","target","FocusEvent","render","separator","separatorDOM","itemDOM","h","class","role","disabled","_role","onClick","onKeyDown","onFocus","removable"],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` emitting on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,25EAC1B,MAAAC,EAAeD,E,MCIFE,EAAc,M,yBA6EvBC,KAAAC,YAAeC,IACXA,EAAMC,2BACNH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAW,cAAiBT,IACb,GAAI,CAAC,aAAc,SAASU,SAASV,EAAMW,KAAM,CAC7Cb,KAAKc,gB,GAIbd,KAAAe,YAAeb,IACXA,EAAMc,iBAAiB,EAG3BhB,KAAAiB,iBAAoBf,IAChBA,EAAMC,2BAENH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAkB,mBAAsBhB,IAClB,GAAI,CAAC,YAAa,QAAQU,SAASV,EAAMW,KAAM,CAC3Cb,KAAKmB,W,GAIbnB,KAAAoB,iBAAoBlB,IAChBA,EAAMc,iBAAiB,E,6IAxF3B,iBAAAK,GACIC,EAAgBtB,K,CAMpB,iBAAAuB,GACID,EAAgBtB,K,CAGpB,eAAIwB,GACA,OAAOC,EAAI,qCAAsC,CAACzB,KAAK0B,OAAS,I,CAGpE,mBAAIC,GACA,OAAO3B,KAAKI,YAAYwB,WAAWC,cAAc,iB,CAGrD,cAAIC,GACA,OAAO9B,KAAK0B,OAAS1B,KAAKI,YAAY2B,W,CAG1C,aAAIC,GACA,OAAOhC,KAAKI,YAAYwB,WAAWC,cAAc,wB,CAKrD,kBAAAI,GACI,GAAI/B,MAAMgC,SAAWlC,KAAKI,YAAa,CACnCJ,KAAKmB,W,EAKb,SAAAA,GACInB,KAAK2B,gBAAgBtB,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAG1E,cAAAI,GACId,KAAKgC,WAAahC,KAAKgC,UAAU3B,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAkDtF,MAAA0B,GACI,KAAMpC,KAAKqC,UAAW,CAClB,OAAOrC,KAAKsC,c,CAGhB,OAAOtC,KAAKuC,S,CAGhB,YAAAD,GACI,OACIE,EAAA,OACIC,MAAM,qBACNC,KAAK,YAAW,UACR,yB,CAKpB,OAAAH,GACI,OACIC,EAAA,OAAKC,MAAM,yBACPD,EAAA,UACIC,MAAM,gBACNf,MAAO1B,KAAK8B,WAAU,kBAEtBa,WAAY3C,KAAK2C,SACjBC,MAAM,WACNC,QAAS7C,KAAKC,YACd6C,UAAW9C,KAAKW,cAChBoC,QAAS/C,KAAKe,YAAW,UACjB,gBAERyB,EAAA,OAAKC,MAAM,yBACPD,EAAA,iBAGLxC,KAAKgD,WACJR,EAAA,UACIC,MAAM,uBACNf,MAAO1B,KAAKwB,YAAW,kBAEvBmB,WAAY3C,KAAK2C,SACjBC,MAAM,WACNC,QAAS7C,KAAKiB,iBACd6B,UAAW9C,KAAKkB,mBAChB6B,QAAS/C,KAAKoB,iBAAgB,UACtB,sBAERoB,EAAA,WAAShC,KAAK,W"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as a,h as e,F as i,g as r}from"./p-a5f18e27.js";import{c as o,l as n,i as s,o as c}from"./p-84190698.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, inherit);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";const b=l;const d=class{constructor(e){t(this,e);this.change=a(this,"change",7);this.settled=a(this,"settled",7);this.guid=o();this.scheduledAfterRender=[];this.lastScrolled=new Date(null).getTime();this.updateTabData=()=>{this.updateTabPaneProps();this.setTabs()};this.updateTabPaneProps=()=>{this.tabPanes.forEach(((t,a)=>{t.selected=t.value===this.selectedTabValue;t.guid=this.guid;t.index=a}))};this.setTabs=()=>{this.tabs=this.tabPanes.map((({label:t,value:a,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})=>({label:t&&n(t)||"",value:a,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})))};this.onTabClick=t=>{const a=t.target.closest('button[role="tab"]').dataset.value;const e=this.value===a;if(e)return;this.change.emit({value:a})};this.onTabKeyDown=t=>{const a=t.target.dataset.value;switch(t.key){case"ArrowRight":t.preventDefault();this.moveToAdjacentTab(a,"next");break;case"ArrowLeft":t.preventDefault();this.moveToAdjacentTab(a,"prev");break;case"Home":t.preventDefault();this.moveToAdjacentTab(a,"first");break;case"End":t.preventDefault();this.moveToAdjacentTab(a,"last");break;case"Space":case"Enter":t.preventDefault();this.change.emit({value:a});break}};this.moveToAdjacentTab=(t,a)=>{const e=this.tabs.map((({value:t})=>t)).indexOf(t);let i;switch(a){case"next":i=Math.min(e+1,this.tabs.length-1);break;case"prev":i=Math.max(e-1,0);break;case"first":i=0;break;case"last":i=this.tabs.length-1;break}if(e===i)return;this.moveFocus(i,false)};this.moveFocus=(t,a=true)=>{const e=this.tabs[t].value;const i=this.listElement.querySelector(`[data-value="${e}"]`);i.focus({preventScroll:a});const r=i.offsetLeft-this.listElement.clientWidth/2;this.listElement.scrollTo({left:r,behavior:"smooth"});return i};this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:e}=this.listElement;this.scrollEnabled=a>e;this.showScrollLeft=t>0;this.showScrollRight=a>Math.ceil(t)+e};this.onScrollBtnClick=t=>{const{scrollLeft:a,scrollWidth:e,clientWidth:i}=this.listElement;const r=Math.floor(i/2);let o=0;if(t==="left"){o=-Math.min(r,Math.abs(a))}else{o=Math.min(r,Math.abs(e-a-i))}this.listElement.scrollBy({left:o,behavior:"smooth"})};this.onSlotChange=()=>{this.checkScrollState()};this.color=undefined;this.name=undefined;this.noPrint=false;this.type=undefined;this.value=undefined;this.hasLeft=false;this.hasRight=false;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false;this.tabs=undefined}resizeIframe(){var t,a;return(a=(t=window.TectonElements)===null||t===void 0?void 0:t.resizeIframe)===null||a===void 0?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");if(t.length===0){return[]}return Array.from(t).filter((t=>t.name===this.name))}get selectedTabValue(){return this.value||this.tabPanes[0].value||""}get tabList(){return this.hostElement.shadowRoot.querySelector(".tab-list")}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}onResize(){this.checkScrollState()}onFocus(t){if(!s(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}onBadge(){this.setTabs()}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t;this.resizeObserver=new ResizeObserver((()=>this.checkScrollState()));this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.settled.emit()}componentDidLoad(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.observe(this.listElement);this.checkScrollState();c(this.hostElement);const a=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{const t=this.tabs.length>0;if(!t)return;const e=this.moveFocus(Math.max(a,0));this.value=e.dataset.value;e.blur()}))}disconnectedCallback(){this.resizeObserver.disconnect();this.mutationObserver.disconnect();this.resizeObserver=null;this.mutationObserver=null}valueObserver(){this.updateTabData();this.scheduledAfterRender.push(this.resizeIframe);const t=this.tabs.findIndex((t=>t.value===this.value));if(t>-1){this.scheduledAfterRender.push((()=>this.moveFocus(t,false)))}}nameObserver(){this.updateTabData()}render(){return e(i,{key:"09622574aaa5bca54c9b37398fb46edeb577cfc6"},e("div",{key:"c2e864d343919252f6b42f34cb413e13e3503cad",class:"tab-container"},this.scrollEnabled&&e(i,{key:"f4b70c0b8731ba26d3603d34f67d4064dedb406b"},e("div",{key:"57f8a4ea2334e6067be3264e5c0d7a96fc61f839",class:"gradient-left",hidden:!this.showScrollLeft}),e("div",{key:"a00e6c0e2e927603924db4dfb8a1561425471138",class:"gradient-right",hidden:!this.showScrollRight}),e("q2-btn",{key:"e89500dd1bd69fb6d36cf84a5a29bd9388d7ced2",class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},e("q2-icon",{key:"2b8216d238f83144f4169f156850a75d342e7533",type:"chevron-left",label:"scroll left"})),e("q2-btn",{key:"af48812b20977617efd714a864af725c9cac4a82",class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},e("q2-icon",{key:"455339159c7c9b3254428e0bce20578c663a7264",type:"chevron-right",label:"scroll right"}))),e("ul",{key:"e4d34f7a48a6b616e75e0acc96ad7edf3f7c87a2",onScroll:this.checkScrollState,ref:t=>this.listElement=t,class:this.noPrint?"no-print":null,role:"tablist"},this.tabs.map(((t,a)=>this.generateTab(t,a))))),e("div",{key:"1e2471c87e744f1e1f096d13749bce78c420a4fb",class:"tab-content"},e("slot",{key:"6694c82b4d54c05aca9796f94e4970a16e896398",onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:i,value:r}=t;const o=this.selectedTabValue===r;return e("li",{role:"presentation"},e("button",{id:`tab-${this.guid}-${a}`,"data-value":r,"test-id":"tabLink",tabIndex:o?0:-1,role:"tab","aria-selected":o?"true":"false",onClick:this.onTabClick,onKeyDown:this.onTabKeyDown},t.badgeCount===undefined?i:this.generateTabWithBadge(t,o)))}generateTabWithBadge(t,a){let i;if(!t.badgeStatus&&a)i=t.badgeTheme||"primary";let r;if(t.badgeDescription)r=n(t.badgeDescription);else if(t.badgeStatus)r=n(`tecton.element.tab.pane.${t.badgeStatus}`,[t.badgeCount]);else r=n("tecton.element.tab.pane.new");return e("div",{class:"tab-pane-badge","aria-label":`${t.label}, ${t.badgeCount} ${r}`},t.label,e("q2-badge",{value:t.badgeCount,theme:i,status:t.badgeStatus}))}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};d.style=b;export{d as q2_tab_container};
-//# sourceMappingURL=p-fce6bc58.entry.js.map