q2-tecton-elements 1.50.1 → 1.51.0

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as n}from"./p-a5f18e27.js";import{n as a,o,i as s,l as r}from"./p-9a1a4bc0.js";const c="*{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:flex;width:100%;justify-content:flex-end}:host([alignment=center]){justify-content:center}:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}";const d=c;const h=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.checkSize=()=>{const{hostElement:t,containerElement:e}=this;const i=this.containerWidth>t.clientWidth;this.isSmall=i;if(i)return;a((()=>{const t=this.containerWidth===e.clientWidth;if(t)return;this.containerWidth=e.clientWidth;this.checkSize()}))};this.handlePageChange=t=>{const{totalPages:e,inputField:i}=this;if(t<1){t=1}else if(t>e){t=e}if(i.value!==`${t}`)i.value=`${t}`;if(!this.hostElement.onchange){this.page=t}this.change.emit({page:t})};this.handlePerPageChange=t=>{this.perPage=t.detail.value*1};this.isSmall=undefined;this.alignment=undefined;this.autoSize=true;this.page=undefined;this.pages=undefined;this.pagesOnly=undefined;this.perPage=undefined;this.perPageIncrements=undefined;this.recordsOnly=undefined;this.recordType=undefined;this.total=undefined}disconnectedCallback(){this.removeResizeObserver()}componentWillLoad(){this.manageResizeObserver()}componentDidLoad(){this.containerWidth=this.containerElement.clientWidth;o(this.hostElement)}onHostElementFocus(t){var e;if(!s(t,this.hostElement))return;const{isFullViewHidden:i,containerElement:n,inputField:a}=this;if(i){(e=n.querySelector("q2-btn:not([disabled])"))===null||e===void 0?void 0:e.focus()}else{a.focus()}}manageResizeObserver(){if(this.autoSize&&!this.recordsOnly&&!this.pagesOnly){if(this.resizeObserver)return;this.resizeObserver=new ResizeObserver((()=>this.checkSize()));this.resizeObserver.observe(this.hostElement);window.addEventListener("resize",this.checkSize)}else{this.isSmall=false;this.removeResizeObserver()}}get currentRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=(i-1)*t+1;const a=Math.min(i*t,e);return`${n} - ${a}`}get isFullViewHidden(){return this.isSmall||this.recordsOnly||this.pagesOnly}get nextRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=i*t+1;const a=Math.min((i+1)*t,e);return`${n} - ${a}`}get pageWithDefault(){return this.page||1}get perPageWithDefault(){return this.perPage||10}get prevRange(){const{perPageWithDefault:t,pageWithDefault:e}=this;const i=Math.max(1,(e-2)*t+1);const n=(e-1)*t;return`${i} - ${n}`}get recordTypeWithDefault(){return this.recordType||r("tecton.element.pagination.defaultRecordType")}get totalPages(){const{pagesOnly:t,totalWithDefault:e,perPageWithDefault:i,pages:n}=this;if(t&&n&&!isNaN(parseInt(`${n}`)))return n;return Math.ceil(e/i)}get totalWithDefault(){return this.total||0}removeResizeObserver(){var t;if(this.resizeObserver){(t=this.resizeObserver)===null||t===void 0?void 0:t.unobserve(this.hostElement);this.resizeObserver=null;window.removeEventListener("resize",this.checkSize)}}renderPerPage(){var t;if(!((t=this.perPageIncrements)===null||t===void 0?void 0:t.length)){return""}this.perPageIncrements=this.perPageIncrements.filter((t=>!isNaN(t))).map((t=>t*1)).sort(((t,e)=>t-e));if(this.perPage===undefined)this.perPage=this.perPageIncrements[0];return i("q2-select",{onChange:this.handlePerPageChange,value:this.perPageIncrements.includes(this.perPage)?`${this.perPage}`:undefined},this.perPageIncrements.map((t=>i("q2-option",{value:`${t}`,display:`${r("tecton.element.pagination.view")} ${t}`},`${r("tecton.element.pagination.view")} ${t}`))))}render(){var t;const{pagesOnly:e,recordsOnly:n,isFullViewHidden:a,recordTypeWithDefault:o,totalPages:s,totalWithDefault:c,pageWithDefault:d,currentRange:h,nextRange:l,prevRange:p}=this;const g=d===1;const f=d===s;let u=r("tecton.element.pagination.goToNext");let b=r("tecton.element.pagination.goToPrevious");if(e){b=r("tecton.element.pagination.goToPages",{next:d-1,total:s});u=r("tecton.element.pagination.goToPages",{next:d+1,total:s})}else if(n){b=r("tecton.element.pagination.goToRecords",{range:p,recordType:o.toLowerCase(),total:c});u=r("tecton.element.pagination.goToRecords",{range:l,recordType:o.toLowerCase(),total:c})}return i("nav",{key:"e501aad97cfb7e43c4126bdd18902f0c1b1f77c6",class:"container",ref:t=>this.containerElement=t,"aria-label":r("tecton.element.pagination.title")},i("div",{key:"268b28bc350d718b66ece79418564dd2235fea93",class:"description","test-id":"description"},e?r("tecton.element.pagination.pages",{current:d,total:s}):r("tecton.element.pagination.description",{range:h,recordType:o.toLowerCase(),total:c.toLocaleString()})),i("div",{key:"8e27861cab2a435ede48ab2650033616b9d09d53",class:"btn-group"},i("q2-btn",{key:"9cdd1187767349a5645d9463aedc56685ffe02bf",label:r("tecton.element.pagination.goToFirstPage"),disabled:g,hidden:a,onClick:()=>this.handlePageChange(1),"test-id":"firstPageBtn","hide-label":true},i("q2-icon",{key:"bb60151a25cf029fb4dec2aa5ae3596cf10d9fcf",type:"chevron-double-left"})),i("q2-btn",{key:"36d57ac9a5e65e7e19ce55dbac6d05d4975d733b",label:b,disabled:g,onClick:()=>this.handlePageChange(d-1),"test-id":"prevPageBtn","hide-label":true},i("q2-icon",{key:"f2f7e0cadd9d9c5a8dee3f4d8b07b4a556457cbf",type:"chevron-left"}))),i("div",{key:"bf92ddcd317f0422135b197216349f85463fa25f",class:"controls",hidden:a,"test-id":"controls"},i("span",{key:"22ebbb53459423fa8adb8730c0a4113161a905e8","aria-hidden":"true"},r("tecton.element.pagination.page")),i("div",{key:"15c79963fb6dc7d5065e914131b258a348689292",class:"input-wrapper",onClick:()=>this.inputField.dispatchEvent(new FocusEvent("focus"))},i("q2-input",{key:"47050a9a458b5ef7bd21637f6e3cad0d395afe64",type:"number",value:`${d}`,min:1,max:this.totalPages,hideLabel:true,optional:true,label:`${r("tecton.element.pagination.page")} (${r("tecton.element.pagination.ofPages",[s.toLocaleString()])})`,onChange:t=>this.handlePageChange(t.detail.value),"test-id":"pageInput",current:"page",ref:t=>this.inputField=t})),i("span",{key:"0ff4acfb55fba8dee282afb378d2dc72b472cf4e","aria-hidden":"true"},r("tecton.element.pagination.ofPages",[s.toLocaleString()]))),i("div",{key:"d9b8b4b6631df6d4520b68dcb516af262b2b9136",class:"btn-group"},i("q2-btn",{key:"b53b81c0613122be511d943624d6242fed3576a8",label:u,disabled:f,onClick:()=>this.handlePageChange(d+1),"test-id":"nextPageBtn","hide-label":true},i("q2-icon",{key:"a09c849be760fb2f1ff91375ea13c94a2b593c88",type:"chevron-right"})),i("q2-btn",{key:"6d2f35af70859cd5c3b383d3b99a7462d5c15c17",label:"tecton.element.pagination.goToLastPage",disabled:f,hidden:a,onClick:()=>this.handlePageChange(s),"test-id":"lastPageBtn","hide-label":true},i("q2-icon",{key:"a46d892e6acf87af73121feb0a132e9f4b379a0c",type:"chevron-double-right"}))),i("div",{key:"583cde036e73427c99b1187917b81b66ca3e2e7f",class:"per-page",hidden:a||!((t=this.perPageIncrements)===null||t===void 0?void 0:t.length)},this.renderPerPage()))}get hostElement(){return n(this)}static get watchers(){return{recordsOnly:["manageResizeObserver"],pagesOnly:["manageResizeObserver"],autoSize:["manageResizeObserver"]}}};h.style=d;export{h as q2_pagination};
-//# sourceMappingURL=p-adec9275.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2PaginationCss","Q2PaginationStyle0","Q2Pagination","this","checkSize","hostElement","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","handlePageChange","page","totalPages","inputField","value","onchange","change","emit","handlePerPageChange","event","perPage","detail","disconnectedCallback","removeResizeObserver","componentWillLoad","manageResizeObserver","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","isFullViewHidden","_a","querySelector","focus","autoSize","recordsOnly","pagesOnly","resizeObserver","ResizeObserver","observe","window","addEventListener","currentRange","perPageWithDefault","totalWithDefault","total","pageWithDefault","start","end","Math","min","nextRange","prevRange","max","recordTypeWithDefault","recordType","loc","pages","isNaN","parseInt","ceil","unobserve","removeEventListener","renderPerPage","perPageIncrements","length","filter","map","sort","a","b","undefined","h","onChange","includes","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","ref","el","current","toLocaleString","label","disabled","hidden","onClick","type","dispatchEvent","FocusEvent","hideLabel","optional"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: flex;\n    width: 100%;\n    justify-content: flex-end;\n}\n\n:host([alignment=\"center\"]) {\n    justify-content: center;\n}\n\n:host([alignment=\"left\"]) {\n    justify-content: flex-start;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.container {\n    display: inline-flex;\n    column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n    align-items: center;\n    height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n    white-space: nowrap;\n}\n\n.controls {\n    display: grid;\n    grid-template-columns: auto 50px auto;\n    align-items: center;\n    gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n    &[hidden] {\n        display: none;\n    }\n}\n\n.input-wrapper {\n    height: var-list(var-prefixer(pagination-height), 44px);\n    display: flex;\n    align-items: center;\n}\n\nq2-btn {\n    --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n    --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n    color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n    --tct-input-margin-top: 0;\n    --tct-input-margin-bottom: 0;\n    --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n    --tct-input-min-height: var(--tct-input-height);\n    --tct-input-align: center;\n}\n\nq2-select {\n    --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n    min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLElement;\n    containerWidth: number;\n    inputField: HTMLQ2InputElement;\n    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isSmall: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Indicates the horizontal alignment of children elements */\n    @Prop()\n    alignment: string;\n\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\n\n    /** The current page that is being displayed. */\n    @Prop({ reflect: true, mutable: true })\n    page: number;\n\n    /**\n     * The number of pages that can be displayed.\n     * @info\n     * Only referenced when `pagesOnly` is true.\n     */\n    @Prop({ reflect: true, mutable: true })\n    pages: number;\n\n    /** Indicates to only display the current and total pages. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\n    @Prop()\n    perPage: number;\n\n    /** The list of perPage to operate pagination. e.g.) [10, 25, 50] */\n    @Prop()\n    perPageIncrements: number[];\n\n    /** Indicates to only display the current and total records. */\n    @Prop({ reflect: true, mutable: true })\n    recordsOnly: boolean;\n\n    /** Description of the record type to be displayed alongside the record count. */\n    @Prop()\n    recordType: string;\n\n    /** The total number of records to paginate. */\n    @Prop({ reflect: true })\n    total: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\n        this.manageResizeObserver();\n    }\n\n    componentDidLoad(): void {\n        this.containerWidth = this.containerElement.clientWidth;\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const { isFullViewHidden, containerElement, inputField } = this;\n        if (isFullViewHidden) {\n            containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n        } else {\n            inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n            if (this.resizeObserver) return;\n            this.resizeObserver = new ResizeObserver(() => this.checkSize());\n            this.resizeObserver.observe(this.hostElement);\n            window.addEventListener('resize', this.checkSize);\n        } else {\n            this.isSmall = false;\n            this.removeResizeObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = (page - 1) * perPage + 1;\n        const end = Math.min(page * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get isFullViewHidden() {\n        return this.isSmall || this.recordsOnly || this.pagesOnly;\n    }\n\n    get nextRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = page * perPage + 1;\n        const end = Math.min((page + 1) * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get pageWithDefault() {\n        return this.page || 1;\n    }\n\n    get perPageWithDefault() {\n        return this.perPage || 10;\n    }\n\n    get prevRange() {\n        const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n        const start = Math.max(1, (page - 2) * perPage + 1);\n        const end = (page - 1) * perPage;\n        return `${start} - ${end}`;\n    }\n\n    get recordTypeWithDefault() {\n        return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n    }\n\n    get totalPages() {\n        const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n        if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n        return Math.ceil(total / perPage);\n    }\n\n    get totalWithDefault() {\n        return this.total || 0;\n    }\n\n    checkSize = () => {\n        const { hostElement, containerElement } = this;\n        const isOverflowing = this.containerWidth > hostElement.clientWidth;\n        this.isSmall = isOverflowing;\n        if (isOverflowing) return;\n\n        nextPaint(() => {\n            const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n            if (containerWidthHasNotChanged) return;\n            this.containerWidth = containerElement.clientWidth;\n            this.checkSize();\n        });\n    };\n\n    handlePageChange = (page: number) => {\n        const { totalPages, inputField } = this;\n        if (page < 1) {\n            page = 1;\n        } else if (page > totalPages) {\n            page = totalPages;\n        }\n\n        if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n        if (!this.hostElement.onchange) {\n            this.page = page;\n        }\n\n        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderPerPage() {\n        if (!this.perPageIncrements?.length) {\n            return '';\n        }\n        this.perPageIncrements = this.perPageIncrements\n            .filter(perPage => !isNaN(perPage))\n            .map(perPage => perPage * 1)\n            .sort((a, b) => a - b);\n        if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];\n        return (\n            <q2-select\n                onChange={this.handlePerPageChange}\n                value={this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined}\n            >\n                {this.perPageIncrements.map(perPage => (\n                    <q2-option\n                        value={`${perPage}`}\n                        display={`${loc('tecton.element.pagination.view')} ${perPage}`}\n                    >{`${loc('tecton.element.pagination.view')} ${perPage}`}</q2-option>\n                ))}\n            </q2-select>\n        );\n    }\n\n    render() {\n        const {\n            pagesOnly,\n            recordsOnly,\n            isFullViewHidden,\n            recordTypeWithDefault: recordType,\n            totalPages,\n            totalWithDefault: total,\n            pageWithDefault: page,\n            currentRange,\n            nextRange,\n            prevRange,\n        } = this;\n        const onFirstPage = page === 1;\n        const onLastPage = page === totalPages;\n\n        let nextButtonLabel: string = loc('tecton.element.pagination.goToNext');\n        let prevButtonLabel: string = loc('tecton.element.pagination.goToPrevious');\n        if (pagesOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n            nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n        } else if (recordsOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: prevRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n            nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: nextRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n        }\n\n        return (\n            <nav\n                class=\"container\"\n                ref={el => (this.containerElement = el)}\n                aria-label={loc('tecton.element.pagination.title')}\n            >\n                <div\n                    class=\"description\"\n                    test-id=\"description\"\n                >\n                    {pagesOnly\n                        ? loc('tecton.element.pagination.pages', {\n                              current: page,\n                              total: totalPages,\n                          })\n                        : loc('tecton.element.pagination.description', {\n                              range: currentRange,\n                              recordType: recordType.toLowerCase(),\n                              total: total.toLocaleString(),\n                          })}\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(1)}\n                        test-id=\"firstPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-left\" />\n                    </q2-btn>\n                    <q2-btn\n                        label={prevButtonLabel}\n                        disabled={onFirstPage}\n                        onClick={() => this.handlePageChange(page - 1)}\n                        test-id=\"prevPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-left\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\n                >\n                    <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n                    <div\n                        class=\"input-wrapper\"\n                        onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n                    >\n                        <q2-input\n                            type=\"number\"\n                            value={`${page}`}\n                            min={1}\n                            max={this.totalPages}\n                            hideLabel\n                            optional\n                            label={`${loc('tecton.element.pagination.page')} (${loc(\n                                'tecton.element.pagination.ofPages',\n                                [totalPages.toLocaleString()]\n                            )})`}\n                            onChange={event => this.handlePageChange(event.detail.value)}\n                            test-id=\"pageInput\"\n                            current=\"page\"\n                            ref={el => (this.inputField = el)}\n                        ></q2-input>\n                    </div>\n                    <span aria-hidden=\"true\">\n                        {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n                    </span>\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        label={nextButtonLabel}\n                        disabled={onLastPage}\n                        onClick={() => this.handlePageChange(page + 1)}\n                        test-id=\"nextPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-right\" />\n                    </q2-btn>\n                    <q2-btn\n                        label=\"tecton.element.pagination.goToLastPage\"\n                        disabled={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(totalPages)}\n                        test-id=\"lastPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-right\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"per-page\"\n                    hidden={isFullViewHidden || !this.perPageIncrements?.length}\n                >\n                    {this.renderPerPage()}\n                </div>\n            </nav>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"6GAAA,MAAMA,EAAkB,8+EACxB,MAAAC,EAAeD,E,MCcFE,EAAY,M,wDAkLrBC,KAAAC,UAAY,KACR,MAAMC,YAAEA,EAAWC,iBAAEA,GAAqBH,KAC1C,MAAMI,EAAgBJ,KAAKK,eAAiBH,EAAYI,YACxDN,KAAKO,QAAUH,EACf,GAAIA,EAAe,OAEnBI,GAAU,KACN,MAAMC,EAA8BT,KAAKK,iBAAmBF,EAAiBG,YAC7E,GAAIG,EAA6B,OACjCT,KAAKK,eAAiBF,EAAiBG,YACvCN,KAAKC,WAAW,GAClB,EAGND,KAAAU,iBAAoBC,IAChB,MAAMC,WAAEA,EAAUC,WAAEA,GAAeb,KACnC,GAAIW,EAAO,EAAG,CACVA,EAAO,C,MACJ,GAAIA,EAAOC,EAAY,CAC1BD,EAAOC,C,CAGX,GAAIC,EAAWC,QAAU,GAAGH,IAAQE,EAAWC,MAAQ,GAAGH,IAE1D,IAAKX,KAAKE,YAAYa,SAAU,CAC5Bf,KAAKW,KAAOA,C,CAGhBX,KAAKgB,OAAOC,KAAK,CAAEN,QAAO,EAG9BX,KAAAkB,oBAAuBC,IACnBnB,KAAKoB,QAAUD,EAAME,OAAOP,MAAQ,CAAC,E,8DArLrB,K,oMAmDpB,oBAAAQ,GACItB,KAAKuB,sB,CAGT,iBAAAC,GACIxB,KAAKyB,sB,CAGT,gBAAAC,GACI1B,KAAKK,eAAiBL,KAAKG,iBAAiBG,YAE5CqB,EAAc3B,KAAKE,Y,CAOvB,kBAAA0B,CAAmBT,G,MACf,IAAKU,EAAmBV,EAAOnB,KAAKE,aAAc,OAClD,MAAM4B,iBAAEA,EAAgB3B,iBAAEA,EAAgBU,WAAEA,GAAeb,KAC3D,GAAI8B,EAAkB,EAClBC,EAAA5B,EAAiB6B,cAA2B,6BAAyB,MAAAD,SAAA,SAAAA,EAAEE,O,KACpE,CACHpB,EAAWoB,O,EAUnB,oBAAAR,GACI,GAAIzB,KAAKkC,WAAalC,KAAKmC,cAAgBnC,KAAKoC,UAAW,CACvD,GAAIpC,KAAKqC,eAAgB,OACzBrC,KAAKqC,eAAiB,IAAIC,gBAAe,IAAMtC,KAAKC,cACpDD,KAAKqC,eAAeE,QAAQvC,KAAKE,aACjCsC,OAAOC,iBAAiB,SAAUzC,KAAKC,U,KACpC,CACHD,KAAKO,QAAU,MACfP,KAAKuB,sB,EAOb,gBAAImB,GACA,MAAQC,mBAAoBvB,EAASwB,iBAAkBC,EAAOC,gBAAiBnC,GAASX,KACxF,MAAM+C,GAASpC,EAAO,GAAKS,EAAU,EACrC,MAAM4B,EAAMC,KAAKC,IAAIvC,EAAOS,EAASyB,GACrC,MAAO,GAAGE,OAAWC,G,CAGzB,oBAAIlB,GACA,OAAO9B,KAAKO,SAAWP,KAAKmC,aAAenC,KAAKoC,S,CAGpD,aAAIe,GACA,MAAQR,mBAAoBvB,EAASwB,iBAAkBC,EAAOC,gBAAiBnC,GAASX,KACxF,MAAM+C,EAAQpC,EAAOS,EAAU,EAC/B,MAAM4B,EAAMC,KAAKC,KAAKvC,EAAO,GAAKS,EAASyB,GAC3C,MAAO,GAAGE,OAAWC,G,CAGzB,mBAAIF,GACA,OAAO9C,KAAKW,MAAQ,C,CAGxB,sBAAIgC,GACA,OAAO3C,KAAKoB,SAAW,E,CAG3B,aAAIgC,GACA,MAAQT,mBAAoBvB,EAAS0B,gBAAiBnC,GAASX,KAC/D,MAAM+C,EAAQE,KAAKI,IAAI,GAAI1C,EAAO,GAAKS,EAAU,GACjD,MAAM4B,GAAOrC,EAAO,GAAKS,EACzB,MAAO,GAAG2B,OAAWC,G,CAGzB,yBAAIM,GACA,OAAOtD,KAAKuD,YAAcC,EAAI,8C,CAGlC,cAAI5C,GACA,MAAMwB,UAAEA,EAAWQ,iBAAkBC,EAAOF,mBAAoBvB,EAAOqC,MAAEA,GAAUzD,KAEnF,GAAIoC,GAAaqB,IAAUC,MAAMC,SAAS,GAAGF,MAAW,OAAOA,EAE/D,OAAOR,KAAKW,KAAKf,EAAQzB,E,CAG7B,oBAAIwB,GACA,OAAO5C,KAAK6C,OAAS,C,CAsCzB,oBAAAtB,G,MACI,GAAIvB,KAAKqC,eAAgB,EACrBN,EAAA/B,KAAKqC,kBAAc,MAAAN,SAAA,SAAAA,EAAE8B,UAAU7D,KAAKE,aACpCF,KAAKqC,eAAiB,KACtBG,OAAOsB,oBAAoB,SAAU9D,KAAKC,U,EAOlD,aAAA8D,G,MACI,MAAKhC,EAAA/B,KAAKgE,qBAAiB,MAAAjC,SAAA,SAAAA,EAAEkC,QAAQ,CACjC,MAAO,E,CAEXjE,KAAKgE,kBAAoBhE,KAAKgE,kBACzBE,QAAO9C,IAAYsC,MAAMtC,KACzB+C,KAAI/C,GAAWA,EAAU,IACzBgD,MAAK,CAACC,EAAGC,IAAMD,EAAIC,IACxB,GAAItE,KAAKoB,UAAYmD,UAAWvE,KAAKoB,QAAUpB,KAAKgE,kBAAkB,GACtE,OACIQ,EAAA,aACIC,SAAUzE,KAAKkB,oBACfJ,MAAOd,KAAKgE,kBAAkBU,SAAS1E,KAAKoB,SAAW,GAAGpB,KAAKoB,UAAYmD,WAE1EvE,KAAKgE,kBAAkBG,KAAI/C,GACxBoD,EAAA,aACI1D,MAAO,GAAGM,IACVuD,QAAS,GAAGnB,EAAI,qCAAqCpC,KACvD,GAAGoC,EAAI,qCAAqCpC,O,CAM9D,MAAAwD,G,MACI,MAAMxC,UACFA,EAASD,YACTA,EAAWL,iBACXA,EACAwB,sBAAuBC,EAAU3C,WACjCA,EACAgC,iBAAkBC,EAClBC,gBAAiBnC,EAAI+B,aACrBA,EAAYS,UACZA,EAASC,UACTA,GACApD,KACJ,MAAM6E,EAAclE,IAAS,EAC7B,MAAMmE,EAAanE,IAASC,EAE5B,IAAImE,EAA0BvB,EAAI,sCAClC,IAAIwB,EAA0BxB,EAAI,0CAClC,GAAIpB,EAAW,CACX4C,EAAkBxB,EAAI,sCAAuC,CAAEyB,KAAMtE,EAAO,EAAGkC,MAAOjC,IACtFmE,EAAkBvB,EAAI,sCAAuC,CAAEyB,KAAMtE,EAAO,EAAGkC,MAAOjC,G,MACnF,GAAIuB,EAAa,CACpB6C,EAAkBxB,EAAI,wCAAyC,CAC3D0B,MAAO9B,EACPG,WAAYA,EAAW4B,cACvBtC,UAEJkC,EAAkBvB,EAAI,wCAAyC,CAC3D0B,MAAO/B,EACPI,WAAYA,EAAW4B,cACvBtC,S,CAIR,OACI2B,EAAA,OAAAY,IAAA,2CACIC,MAAM,YACNC,IAAKC,GAAOvF,KAAKG,iBAAmBoF,EAAG,aAC3B/B,EAAI,oCAEhBgB,EAAA,OAAAY,IAAA,2CACIC,MAAM,cAAa,UACX,eAEPjD,EACKoB,EAAI,kCAAmC,CACnCgC,QAAS7E,EACTkC,MAAOjC,IAEX4C,EAAI,wCAAyC,CACzC0B,MAAOxC,EACPa,WAAYA,EAAW4B,cACvBtC,MAAOA,EAAM4C,oBAG3BjB,EAAA,OAAAY,IAAA,2CAAKC,MAAM,aACPb,EAAA,UAAAY,IAAA,2CACIM,MAAOlC,EAAI,2CACXmC,SAAUd,EACVe,OAAQ9D,EACR+D,QAAS,IAAM7F,KAAKU,iBAAiB,GAAE,UAC/B,eAAc,mBAGtB8D,EAAA,WAAAY,IAAA,2CAASU,KAAK,yBAElBtB,EAAA,UAAAY,IAAA,2CACIM,MAAOV,EACPW,SAAUd,EACVgB,QAAS,IAAM7F,KAAKU,iBAAiBC,EAAO,GAAE,UACtC,cAAa,mBAGrB6D,EAAA,WAAAY,IAAA,2CAASU,KAAK,mBAGtBtB,EAAA,OAAAY,IAAA,2CACIC,MAAM,WACNO,OAAQ9D,EAAgB,UAChB,YAER0C,EAAA,QAAAY,IAAA,yDAAkB,QAAQ5B,EAAI,mCAC9BgB,EAAA,OAAAY,IAAA,2CACIC,MAAM,gBACNQ,QAAS,IAAM7F,KAAKa,WAAWkF,cAAc,IAAIC,WAAW,WAE5DxB,EAAA,YAAAY,IAAA,2CACIU,KAAK,SACLhF,MAAO,GAAGH,IACVuC,IAAK,EACLG,IAAKrD,KAAKY,WACVqF,UAAS,KACTC,SAAQ,KACRR,MAAO,GAAGlC,EAAI,sCAAsCA,EAChD,oCACA,CAAC5C,EAAW6E,sBAEhBhB,SAAUtD,GAASnB,KAAKU,iBAAiBS,EAAME,OAAOP,OAAM,UACpD,YACR0E,QAAQ,OACRF,IAAKC,GAAOvF,KAAKa,WAAa0E,KAGtCf,EAAA,QAAAY,IAAA,yDAAkB,QACb5B,EAAI,oCAAqC,CAAC5C,EAAW6E,qBAG9DjB,EAAA,OAAAY,IAAA,2CAAKC,MAAM,aACPb,EAAA,UAAAY,IAAA,2CACIM,MAAOX,EACPY,SAAUb,EACVe,QAAS,IAAM7F,KAAKU,iBAAiBC,EAAO,GAAE,UACtC,cAAa,mBAGrB6D,EAAA,WAAAY,IAAA,2CAASU,KAAK,mBAElBtB,EAAA,UAAAY,IAAA,2CACIM,MAAM,yCACNC,SAAUb,EACVc,OAAQ9D,EACR+D,QAAS,IAAM7F,KAAKU,iBAAiBE,GAAW,UACxC,cAAa,mBAGrB4D,EAAA,WAAAY,IAAA,2CAASU,KAAK,2BAGtBtB,EAAA,OAAAY,IAAA,2CACIC,MAAM,WACNO,OAAQ9D,MAAqBC,EAAA/B,KAAKgE,qBAAiB,MAAAjC,SAAA,SAAAA,EAAEkC,SAEpDjE,KAAK+D,iB"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2OptionListCss","Q2OptionListStyle0","Q2OptionList","this","keyStore","queue","lastPressedAt","Date","scheduledAfterRender","clickHandler","event","target","option","closest","selectOption","multiple","popoverState","emit","open","action","externalKeydownHandler","stopPropagation","activeIndex","customSearch","allOptions","key","nextIndex","searchString","searchOptions","type","openDropdownWithActiveElement","setDefaultActiveElement","nextPaint","preventDefault","selectedOptions","length","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","noSelect","setActiveElement","match","focusoutHandler","relatedTarget","isInQ2OptionList","includes","isInLightDom","hostElement","contains","internalKeydownHandler","allVisibleOptions","shiftKey","newOption","find","element","active","disabled","isFirstVisibleOptionActive","undefined","adjustActiveOptionAndScroll","isLastVisibleOptionActive","searchAndFocus","keyValue","shouldSelect","reorder","pivotIndex","list","map","index","slice","buildQueue","now","getTime","push","searchIndex","keyStr","join","v","display","RegExp","replace","setFocus","matched","loc","componentWillLoad","hasOptions","querySelectorAll","componentDidLoad","overrideFocus","checkOptions","selectedOptionsUpdated","ready","componentDidRender","forEach","fn","handleClick","delegateFocus","isEventFromElement","setActiveOption","setFocusedOption","getContents","allContents","getOptions","handleExternalKeydown","updateMultipleOptionAttrs","updateSingleOptionAttrs","showSelectedUpdated","showSelected","_multiSelectHidden","selected","rootSlot","getRootSlot","acceptedTags","filter","tagName","contents","extractOptions","elements","reduce","acc","Array","from","children","hidden","disabledGroup","numToAdd","scrollToActiveOption","options","optionRole","role","focusSelectedSibling","hasNoSiblings","selectedOptionVisibleIndex","indexOf","nextVisibleSiblingIndex","nextVisibleSibling","nextSiblingIndex","firstSelected","findIndex","firstEnabled","direction","activeOption","visibleActiveOptionIndex","nextVisibleOptionIndex","nextVisibleOption","slot","querySelector","assignedElements","_a","hasAnotherSlot","waitForNextPaint","resetTimer","searchStringTimer","clearTimeout","window","setTimeout","scrollIntoView","block","selectedOption","selectedValue","value","valueObject","innerText","trim","values","isAlreadySelected","change","elementIndex","isOptionVisible","isVisible","focus","selectedValues","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    // #region Own Properties\n\n    activeIndex: number;\n    contentElement: HTMLElement;\n    keyStore: {\n        queue: string[];\n        lastPressedAt: Date;\n    } = {\n        queue: [],\n        lastPressedAt: new Date(),\n    };\n    pivotIndex: number;\n    scheduledAfterRender: (() => void)[] = [];\n    searchString: string;\n    searchStringTimer: number;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasOptions: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates a custom search is being implemented for the option list. */\n    @Prop({ reflect: true })\n    customSearch: boolean;\n\n    /** Disables the option list. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    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 })\n    multiple: boolean;\n\n    /** Disables the logic that handles selecting and focusing an option in the option list. */\n    @Prop({ reflect: true })\n    noSelect: boolean;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** Applies focus to the selected option. */\n    @Prop({ reflect: true, mutable: true })\n    showSelected: boolean;\n\n    /** Translates to the role of the option list */\n    @Prop()\n    type: 'menu' | 'listbox' = 'listbox';\n\n    // #endregion\n    // #region Events\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()\n    change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n\n    /**\n     * Emitted to indicate the intended state of the popover.\n     * @private\n     */\n    @Event()\n    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 })\n    ready: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\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    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\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    // #endregion\n    // #region Public Methods API\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    @Method()\n    async handleExternalKeydown(event: KeyboardEvent) {\n        this.externalKeydownHandler(event);\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 setDefaultActiveElement() {\n        this.activeIndex = this.getDefaultActiveIndex();\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsUpdated() {\n        if (this.multiple) {\n            this.updateMultipleOptionAttrs();\n        } else {\n            this.updateSingleOptionAttrs();\n        }\n    }\n\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    // #endregion\n    // #region Local Methods\n\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    adjustActiveOptionAndScroll(numToAdd: number) {\n        this.activeIndex += numToAdd;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\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    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    /* 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                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                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(1);\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    /* 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    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    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    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    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    internalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions, allVisibleOptions, multiple } = this;\n        const { key, shiftKey } = event;\n\n        let newOption: HTMLQ2OptionElement;\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 isFirstVisibleOptionActive = allVisibleOptions[0].active;\n                if (isFirstVisibleOptionActive) 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 isLastVisibleOptionActive = allVisibleOptions[allVisibleOptions.length - 1].active;\n                if (isLastVisibleOptionActive) 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                if (this.type === 'menu') {\n                    this.popoverState.emit({ open: false, action: 'close' });\n                    break;\n                }\n\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\n    async openDropdownWithActiveElement(activeIndex: number) {\n        if (this.disabled) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        await waitForNextPaint();\n        this.activeIndex = activeIndex;\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    scrollToActiveOption() {\n        const activeOption = this.allOptions[this.activeIndex];\n        activeOption?.scrollIntoView({ block: 'center' });\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    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    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    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    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    // #endregion\n    // #region Render Methods\n\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    // #endregion\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2PillCss","Q2PillStyle0","Q2Pill","this","scheduledAfterRender","clearSelectedOptions","selectedOptions","value","active","open","primaryBtn","focus","change","emit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","handleButtonFocusout","relatedTarget","tagName","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","syncValueProperties","selectedOptionsChanged","valueChanged","updateSelectedOptionElements","selectedValues","map","_a","selectedOptionElements","filter","includes","window","Tecton","useActionSheets","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","onReady","optionListLabel"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentcolor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions: HTMLQ2OptionElement[] = await this.optionList?.getOptions();\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION') return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <q2-option-list\n                            type=\"listbox\"\n                            ref={el => (this.optionList = el)}\n                            id=\"option-list\"\n                            onChange={this.handleChange}\n                            multiple={this.multiple}\n                            selectedOptions={this.selectedOptions}\n                            onReady={() => this.updateSelectedOptionElements()}\n                            label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        >\n                            <slot />\n                        </q2-option-list>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2TooltipCss","Q2TooltipStyle0","Q2Tooltip","this","animationEndCount","componentDidLoad","overrideFocus","hostElement","focusCaptureHandler","checkFocusClass","focusHandler","event","isEventFromElement","focusable","tooltipElement","focus","focusOutHandler","shouldBeVisible","focusClass","keyUpHandler","key","hideTooltip","persistent","matches","animationEndHandler","isKeyboardFocus","findFocusVisibleElement","document","activeElement","element","shadowRoot","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 4px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"6FAAA,MAAMA,EAAe,ouMACrB,MAAAC,EAAeD,E,MCGFE,EAAS,M,yBAGlBC,KAAAC,kBAAoB,E,8DA4BC,M,+GAoByC,G,CAK9D,gBAAAC,GACIC,EAAcH,KAAKI,Y,CAOvB,mBAAAC,GACIL,KAAKM,iB,CAIT,YAAAC,CAAaC,GACT,IAAKC,EAAmBD,EAAOR,KAAKI,aAAc,OAClD,IAAKJ,KAAKU,UAAW,OACrBV,KAAKW,eAAeC,O,CAIxB,eAAAC,GACI,GAAIb,KAAKc,gBAAiB,OAC1B,GAAId,KAAKe,aAAe,oBAAqBf,KAAKe,WAAa,6BAC1Df,KAAKe,WAAa,I,CAI3B,YAAAC,CAAaR,GACT,OAAQA,EAAMS,KACV,IAAK,MACL,IAAK,SACDjB,KAAKkB,cACL,M,CAOZ,mBAAIJ,GACA,GAAId,KAAKmB,WAAY,OAAO,KAC5B,OAAOnB,KAAKI,YAAYgB,QAAQ,wB,CAGpC,mBAAAC,GACIrB,KAAKC,kBAAoBD,KAAKC,kBAAoB,EAClD,MAAMc,WAAEA,EAAUd,kBAAEA,GAAsBD,KAK1C,GAAIe,IAAe,yBAA4BA,IAAe,qBAAuBd,IAAsB,EAAI,CAC3GD,KAAKe,WAAa,KAClBf,KAAKC,kBAAoB,C,EAIjC,eAAAK,GACI,IAAKN,KAAKc,gBAAiB,OAC3B,MAAMQ,IAAoBtB,KAAKuB,wBAAwBC,SAASC,eAChEzB,KAAKe,WAAaO,EAAkB,qBAAuB,oBAC3D,GAAIA,EAAiB,M,CAGzB,uBAAAC,CAAwBG,GACpB,IAAKA,EAAS,OACd,GAAIA,EAAQC,WAAYD,EAAU1B,KAAKuB,wBAAwBG,EAAQC,WAAWF,eAClF,OAAOC,IAAO,MAAPA,SAAO,SAAPA,EAASN,QAAQ,mBAAoBM,EAAU,I,CAG1D,WAAAR,GACI,GAAIlB,KAAKe,aAAe,oBAAqBf,KAAKe,WAAa,6BAC1Df,KAAKe,WAAa,I,CAM3B,MAAAa,GACI,MAAMb,WAAEA,GAAef,KACvB,MAAM6B,EAAU,CAAC,WACjB,GAAId,EAAYc,EAAQC,KAAKf,GAE7B,OAAOf,KAAK+B,MACRC,EAAA,OACIC,SAAUjC,KAAKU,UAAY,EAAIwB,UAC/BC,IAAKC,GAAOpC,KAAKW,eAAiByB,EAClCC,MAAOR,EAAQS,KAAK,KAAI,aACZtC,KAAK+B,MACjBQ,eAAgB,IAAMvC,KAAKqB,sBAC3BmB,KAAK,UAAS,UACN,oBAERR,EAAA,cAGJA,EAAA,Y"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2RadioGroupCss","Q2RadioGroupStyle0","Q2RadioGroup","this","_id","createGuid","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","value","length","tabIndex","onInnerRadioChange","event","stopImmediatePropagation","readonly","change","emit","detail","onMutationObserved","valueUpdated","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","mutationObserver","overrideFocus","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","setValue","forEach","click","groupDisabled","disabled","name","groupReadonly","groupTileLayout","newVal","removeAttribute","inputId","Array","from","querySelectorAll","inputDom","tileAlignment","alignment","includes","h","class","render","showLabel","label","optional","hasError","showLabelRow","Fragment","labelDOM","type","onChange"],"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, 4px);\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    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    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 })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    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 })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\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    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\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('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    @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    // #endregion\n    // #region Local Methods\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    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    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    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\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    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"mappings":"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"}