q2-tecton-elements 1.46.1 → 1.48.0

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,F as s,g as i}from"./p-a5f18e27.js";import{d as n}from"./p-6559c942.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}";const r=a;const o=class{constructor(t){e(this,t);this.syncTimer=null;this.trimSuffix=false;this.baseDate=undefined;this.locale=document.documentElement.lang||"en-US";this.messageFormat="short";this.numeric="auto";this.sync=true;this.date=undefined;this.unit=undefined;this.displayedMessage=undefined}componentWillLoad(){this.updateMessage()}connectedCallback(){this.syncUpdated()}disconnectedCallback(){window.clearInterval(this.syncTimer);this.syncTimer=null}get shouldShow(){return!!this.displayedMessage}get validDate(){const e=new Date(this.date);return n.isValid(e)}get handleDate(){if(!this.validDate)console.warn("Error: Invalid date provided to q2-relative-time.");return new Date(this.date)}get validBaseDate(){const e=new Date(this.baseDate);return n.isValid(e)}get handleBaseDate(){if(this.validBaseDate){this.trimSuffix=true;this.sync=false;return new Date(this.baseDate)}else{this.trimSuffix=false;this.sync=true;return new Date}}get isValidUnit(){if(["second","minute","hour","day","month","quarter","year"].includes(this.unit))return true;return false}get handleNumeric(){if(this.validBaseDate)return"always";return this.numeric}syncUpdated(){if(this.sync){this.syncTimer=window.setInterval((()=>{this.updateMessage()}),1e3)}else{window.clearInterval(this.syncTimer);this.syncTimer=null}}updateMessage(){const{validDate:e,handleDate:t,handleBaseDate:s,locale:i,handleNumeric:a,messageFormat:r,isValidUnit:o,unit:d,trimSuffix:h}=this;if(!e){this.sync=false;this.displayedMessage="Invalid Date Provided";return}const l=n.intlFormatDistance(new Date(t),new Date(s),{locale:i,localeMatcher:"best fit",numeric:a,style:r,unit:o?d:null});if(h){this.displayedMessage=this.trimMessage(l)}else{this.displayedMessage=l}}trimMessage(e){return e.replace(/^in\s?/,"").replace(/\sago$/,"")}async displayedMessageValue(){return this.displayedMessage}render(){const{shouldShow:e,displayedMessage:i}=this;return t(s,{key:"26e452a6b2cda738835ac8675aea30b50846920a"},e?t("time",{dateTime:i},i):null)}get hostElement(){return i(this)}static get watchers(){return{sync:["syncUpdated"],messageFormat:["updateMessage"],locale:["updateMessage"],date:["updateMessage"],baseDate:["updateMessage"],numeric:["updateMessage"],unit:["updateMessage"]}}};o.style=r;export{o as q2_relative_time};
-//# sourceMappingURL=p-ca0d7eb3.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2RelativeTimeCss","Q2RelativeTimeStyle0","Q2RelativeTime","this","syncTimer","trimSuffix","document","documentElement","lang","componentWillLoad","updateMessage","connectedCallback","syncUpdated","disconnectedCallback","window","clearInterval","shouldShow","displayedMessage","validDate","targetDate","Date","date","isValidDate","handleDate","console","warn","validBaseDate","baseDate","handleBaseDate","sync","isValidUnit","includes","unit","handleNumeric","numeric","setInterval","locale","messageFormat","message","intlFormatDistance","localeMatcher","style","trimMessage","replace","displayedMessageValue","render","h","Fragment","key","dateTime"],"sources":["src/components/q2-relative-time/q2-relative-time.scss?tag=q2-relative-time&encapsulation=shadow","src/components/q2-relative-time/q2-relative-time.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline;\n}\n","import { Component, Prop, State, Method, Watch, Element, h, ComponentInterface, Fragment } from '@stencil/core';\nimport { isValid as isValidDate, intlFormatDistance } from 'date-fns';\n\n@Component({ tag: 'q2-relative-time', shadow: true, styleUrl: 'q2-relative-time.scss' })\nexport class Q2RelativeTime implements ComponentInterface {\n    /**\n     * If you want to compare two specific dates, you can provide a valid `date` and `baseDate`, and the component will tell you the elapsed time between the two dates.\n     * If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and now.\n     * @warning\n     * - Requires a valid `date` value.\n     * - Providing a valid `baseDate` will disable `sync` and remove the \"in\"/\"ago\" suffixes in the time message.\n     * - Must be a valid ISO date string.\n     */\n    @Prop({ reflect: true }) baseDate: Date | string;\n\n    /**\n     * The language used for the relative time message.\n     * @info\n     * It is recommended to use the BCP 47 Language Tags in the ['language-extlang' format](https://www.w3.org/International/articles/language-tags/).\n     */\n    @Prop({ reflect: true }) locale: string = document.documentElement.lang || 'en-US';\n\n    /** The length of the relative time message. */\n    @Prop({ reflect: true }) messageFormat: 'long' | 'short' | 'narrow' = 'short';\n\n    /** Set this to `always` to force the use of numeric values (e.g. \"1 day ago\") rather than relative ones (e.g. \"yesterday\") in the time message. */\n    @Prop({ reflect: true }) numeric: 'always' | 'auto' = 'auto';\n\n    /**\n     * Keep the displayed message updated as time passes in the webpage.\n     * @warning\n     * If a valid `baseDate` is provided, `sync` will be set to `false`.\n     */\n    @Prop({ reflect: true, mutable: true }) sync: boolean = true;\n\n    /**\n     * The date you want to calculate relative time from.\n     * @warning\n     * Must be a valid ISO date string.\n     */\n    @Prop({ reflect: true }) date: Date | string;\n\n    /** Force the unit of measurement. */\n    @Prop({ reflect: true }) unit: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';\n\n    /**\n     * @private\n     * Used to manage the sync timer that updates the time since the component was connected to the DOM.\n     * Will be set to null if a valid `baseDate` is provided.\n     */\n    syncTimer = null;\n\n    /** @private Will be set to true if a valid `baseDate` is provided. */\n    trimSuffix: boolean = false;\n\n    @State() displayedMessage: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /// Lifecycle Hooks ///\n\n    componentWillLoad(): void | Promise<void> {\n        this.updateMessage();\n    }\n\n    connectedCallback(): void {\n        this.syncUpdated();\n    }\n\n    disconnectedCallback(): void {\n        window.clearInterval(this.syncTimer);\n        this.syncTimer = null;\n    }\n\n    /// Getters ///\n    get shouldShow(): boolean {\n        return !!this.displayedMessage;\n    }\n\n    get validDate(): boolean {\n        const targetDate = new Date(this.date);\n        return isValidDate(targetDate);\n    }\n\n    get handleDate(): Date {\n        if (!this.validDate) console.warn('Error: Invalid date provided to q2-relative-time.');\n        return new Date(this.date);\n    }\n\n    get validBaseDate(): boolean {\n        const baseDate = new Date(this.baseDate);\n        return isValidDate(baseDate);\n    }\n\n    get handleBaseDate(): Date {\n        if (this.validBaseDate) {\n            this.trimSuffix = true;\n            this.sync = false;\n            return new Date(this.baseDate);\n        } else {\n            this.trimSuffix = false;\n            this.sync = true;\n            return new Date();\n        }\n    }\n\n    get isValidUnit(): boolean {\n        if (['second', 'minute', 'hour', 'day', 'month', 'quarter', 'year'].includes(this.unit)) return true;\n        return false;\n    }\n\n    get handleNumeric(): 'always' | 'auto' {\n        if (this.validBaseDate) return 'always';\n        return this.numeric;\n    }\n\n    /// Watchers ///\n    @Watch('sync')\n    syncUpdated() {\n        if (this.sync) {\n            this.syncTimer = window.setInterval(() => {\n                this.updateMessage();\n            }, 1000);\n        } else {\n            window.clearInterval(this.syncTimer);\n            this.syncTimer = null;\n        }\n    }\n\n    @Watch('messageFormat')\n    @Watch('locale')\n    @Watch('date')\n    @Watch('baseDate')\n    @Watch('numeric')\n    @Watch('unit')\n    updateMessage() {\n        const {\n            validDate,\n            handleDate,\n            handleBaseDate,\n            locale,\n            handleNumeric,\n            messageFormat,\n            isValidUnit,\n            unit,\n            trimSuffix,\n        } = this;\n\n        if (!validDate) {\n            this.sync = false;\n            this.displayedMessage = 'Invalid Date Provided';\n            return;\n        }\n\n        const message = intlFormatDistance(new Date(handleDate), new Date(handleBaseDate), {\n            locale,\n            localeMatcher: 'best fit',\n            numeric: handleNumeric,\n            style: messageFormat,\n            unit: isValidUnit ? unit : null,\n        });\n\n        if (trimSuffix) {\n            this.displayedMessage = this.trimMessage(message);\n        } else {\n            this.displayedMessage = message;\n        }\n    }\n\n    /// Helpers ///\n    trimMessage(message: string): string {\n        return message.replace(/^in\\s?/, '').replace(/\\sago$/, '');\n    }\n\n    /// Methods ///\n    /** Retrieves the value of the displayed messages. */\n    @Method()\n    async displayedMessageValue(): Promise<string> {\n        return this.displayedMessage;\n    }\n\n    /// DOM ///\n\n    render() {\n        const { shouldShow, displayedMessage } = this;\n\n        return <Fragment>{shouldShow ? <time dateTime={displayedMessage}>{displayedMessage}</time> : null}</Fragment>;\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,+qBAC1B,MAAAC,EAAeD,E,MCGFE,EAAc,M,yBA8CvBC,KAAAC,UAAY,KAGZD,KAAAE,WAAsB,M,oCAjCoBC,SAASC,gBAAgBC,MAAQ,Q,mBAGL,Q,aAGhB,O,UAOE,K,wEA4BxD,iBAAAC,GACIN,KAAKO,e,CAGT,iBAAAC,GACIR,KAAKS,a,CAGT,oBAAAC,GACIC,OAAOC,cAAcZ,KAAKC,WAC1BD,KAAKC,UAAY,I,CAIrB,cAAIY,GACA,QAASb,KAAKc,gB,CAGlB,aAAIC,GACA,MAAMC,EAAa,IAAIC,KAAKjB,KAAKkB,MACjC,OAAOC,UAAYH,E,CAGvB,cAAII,GACA,IAAKpB,KAAKe,UAAWM,QAAQC,KAAK,qDAClC,OAAO,IAAIL,KAAKjB,KAAKkB,K,CAGzB,iBAAIK,GACA,MAAMC,EAAW,IAAIP,KAAKjB,KAAKwB,UAC/B,OAAOL,UAAYK,E,CAGvB,kBAAIC,GACA,GAAIzB,KAAKuB,cAAe,CACpBvB,KAAKE,WAAa,KAClBF,KAAK0B,KAAO,MACZ,OAAO,IAAIT,KAAKjB,KAAKwB,S,KAClB,CACHxB,KAAKE,WAAa,MAClBF,KAAK0B,KAAO,KACZ,OAAO,IAAIT,I,EAInB,eAAIU,GACA,GAAI,CAAC,SAAU,SAAU,OAAQ,MAAO,QAAS,UAAW,QAAQC,SAAS5B,KAAK6B,MAAO,OAAO,KAChG,OAAO,K,CAGX,iBAAIC,GACA,GAAI9B,KAAKuB,cAAe,MAAO,SAC/B,OAAOvB,KAAK+B,O,CAKhB,WAAAtB,GACI,GAAIT,KAAK0B,KAAM,CACX1B,KAAKC,UAAYU,OAAOqB,aAAY,KAChChC,KAAKO,eAAe,GACrB,I,KACA,CACHI,OAAOC,cAAcZ,KAAKC,WAC1BD,KAAKC,UAAY,I,EAUzB,aAAAM,GACI,MAAMQ,UACFA,EAASK,WACTA,EAAUK,eACVA,EAAcQ,OACdA,EAAMH,cACNA,EAAaI,cACbA,EAAaP,YACbA,EAAWE,KACXA,EAAI3B,WACJA,GACAF,KAEJ,IAAKe,EAAW,CACZf,KAAK0B,KAAO,MACZ1B,KAAKc,iBAAmB,wBACxB,M,CAGJ,MAAMqB,EAAUC,qBAAmB,IAAInB,KAAKG,GAAa,IAAIH,KAAKQ,GAAiB,CAC/EQ,SACAI,cAAe,WACfN,QAASD,EACTQ,MAAOJ,EACPL,KAAMF,EAAcE,EAAO,OAG/B,GAAI3B,EAAY,CACZF,KAAKc,iBAAmBd,KAAKuC,YAAYJ,E,KACtC,CACHnC,KAAKc,iBAAmBqB,C,EAKhC,WAAAI,CAAYJ,GACR,OAAOA,EAAQK,QAAQ,SAAU,IAAIA,QAAQ,SAAU,G,CAM3D,2BAAMC,GACF,OAAOzC,KAAKc,gB,CAKhB,MAAA4B,GACI,MAAM7B,WAAEA,EAAUC,iBAAEA,GAAqBd,KAEzC,OAAO2C,EAACC,EAAQ,CAAAC,IAAA,4CAAEhC,EAAa8B,EAAA,QAAMG,SAAUhC,GAAmBA,GAA2B,K"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as o,g as i,h as e}from"./p-a5f18e27.js";import{t as r,w as s}from"./p-42302f6f.js";const n=class{constructor(i){t(this,i);this.change=o(this,"change",7);this.mouseEventList=["mousedown","dragstart","touchstart"];this.isCurrentlyFocused=false;this.mouseHandler=t=>{const o=this.shadowContains(this.findActiveElement());const i=this.shadowContains(this.shadowEventTarget(t))||this.originatesInSlots(t.target);if(!i&&(this.isCurrentlyFocused||o)){this.isCurrentlyFocused=false;this.change.emit();return}this.isCurrentlyFocused=i||o};this.windowBlurHandler=()=>{this.isCurrentlyFocused=false;this.change.emit()}}componentWillLoad(){}connectedCallback(){this.mouseEventList.forEach((t=>{document.addEventListener(t,this.mouseHandler)}));window.addEventListener("blur",this.windowBlurHandler)}disconnectedCallback(){this.mouseEventList.forEach((t=>{document.removeEventListener(t,this.mouseHandler)}));window.removeEventListener("blur",this.windowBlurHandler)}findActiveElement(){let t=document.activeElement;while(true){if(!t||!t.shadowRoot){return t}t=t.shadowRoot.activeElement}}shadowEventTarget(t){return t.composedPath()[0]||t.target}shadowContains(t){while(true){if(t===this.hostElement){return true}if(!t){return false}t=t.parentNode||t.host}}originatesInSlots(t){const o=this.hostElement.querySelectorAll("slot");for(const i of Array.from(o)){const o=i&&i.assignedNodes&&i.assignedNodes()||this.hostElement.childNodes;for(const i of Array.from(o)){if(i.contains(t)){return true}}}return false}get hostElement(){return i(this)}};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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";const c=a;const p=class{constructor(i){t(this,i);this.popoverStateChanged=o(this,"popoverStateChanged",7);this.displayBuffer=10;this.orientationChanged=false;this.handleMinHeight=()=>{if(this.minHeight){r(this,"minHeight","prop")}};this.viewPortChanged=()=>{if(!this.open)return;this.determinePopDirection()};this.viewPortOrientationChanged=()=>{this.orientationChanged=true;this.viewPortChanged()};this.setFixedCSSProperties=async()=>{var t,o;const{controlElement:i,containerElement:e,currentDirection:r}=this;const{top:n,bottom:a,left:c,right:p}=(o=(t=i===null||i===void 0?void 0:i.getBoundingClientRect)===null||t===void 0?void 0:t.call(i))!==null&&o!==void 0?o:{top:0,bottom:0,left:0,right:0};const h=c;const l=window.visualViewport.width-p;if(this.block)e.style.setProperty("--comp-pop-width",`${i.offsetWidth||0}px`);e.style.setProperty("--comp-pop-left",`${h}px`);e.style.setProperty("--comp-pop-right",`${l}px`);if(r==="up"){e.style.setProperty("--comp-pop-bottom",`${window.visualViewport.height-n}px`)}if(r==="down"){e.style.setProperty("--comp-pop-top",`${a}px`)}await s();e.style.setProperty("--comp-pop-opacity","1")};this.setAbsoluteCSSProperties=async()=>{const{controlElement:t,containerElement:o,currentDirection:i,align:e}=this;if(e==="right"){o.style.setProperty("--comp-pop-right","0");o.style.setProperty("--comp-pop-left","unset")}else{o.style.setProperty("--comp-pop-left","0");o.style.setProperty("--comp-pop-right","unset")}if(this.block){o.style.setProperty("--comp-pop-width","100%")}if(i==="up"){const i=getComputedStyle(t);const e=parseInt(i.height||"0")+parseInt(i.borderTopWidth||"0")+parseInt(i.borderBottomWidth||"0");o.style.setProperty("--comp-pop-bottom",`${e}px`)}await s();o.style.setProperty("--comp-pop-opacity","1")};this.direction=undefined;this.align=undefined;this.open=undefined;this.block=undefined;this.controlElement=undefined;this.mode=null;this.minHeight=undefined;this.currentDirection=undefined;this.show=false}componentDidLoad(){this.handleMinHeight();if(this.open)this.determinePopDirection()}disconnectedCallback(){this.removeViewportListeners()}async toggle(){this.open=!this.open}async scrollContainerTo(t){this.containerElement.scrollTo(t)}async openChanged(t){this.popoverStateChanged.emit({open:t});if(t){this.addViewportListeners();this.determinePopDirection()}else{this.removeViewportListeners();this.currentDirection=undefined;this.show=false;await s();this.clearCSSProperties()}}minHeightProvided(){this.handleMinHeight()}popoverStateHandler(t){const{detail:{open:o}}=t;if(o===this.open)return;this.open=o;t.stopPropagation()}get actualDirection(){const{direction:t}=this;switch(t){case"up":case"down":return t;default:return undefined}}get isModule(){var t,o;const i=window!==window.top;const e=Object.keys((o=(t=window.Tecton)===null||t===void 0?void 0:t.platformDimensions)!==null&&o!==void 0?o:{}).length>0;return i&&e}addViewportListeners(){var t;window.addEventListener("resize",this.viewPortOrientationChanged);window.addEventListener("scroll",this.viewPortChanged,{passive:true,capture:true});(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.addEventListener("change",this.viewPortOrientationChanged);window.addEventListener("orientationchange",this.viewPortOrientationChanged)}removeViewportListeners(){var t;window.removeEventListener("resize",this.viewPortOrientationChanged);window.removeEventListener("scroll",this.viewPortChanged);(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.removeEventListener("orientationchange",this.viewPortOrientationChanged);window.removeEventListener("orientationchange",this.viewPortOrientationChanged)}clearCSSProperties(){this.containerElement.style.removeProperty("--comp-pop-max-height");this.containerElement.style.removeProperty("--comp-pop-top");this.containerElement.style.removeProperty("--comp-pop-bottom");this.containerElement.style.removeProperty("--comp-pop-left");this.containerElement.style.removeProperty("--comp-pop-right");this.containerElement.style.removeProperty("--comp-pop-width");this.containerElement.style.removeProperty("--comp-pop-opacity")}setDirectionAndShow(t){const o=this.open;if(!o)return;this.currentDirection=t;this.show=true;if(this.mode==="legacy"){this.setAbsoluteCSSProperties()}else{this.setFixedCSSProperties()}}async determinePopDirection(){var t,o,i;const{containerElement:e,controlElement:r,actualDirection:n,displayBuffer:a}=this;if(e)e.style.maxHeight=null;await s();const{isModule:c}=this;const{top:p,bottom:h}=(o=(t=r===null||r===void 0?void 0:r.getBoundingClientRect)===null||t===void 0?void 0:t.call(r))!==null&&o!==void 0?o:{top:0,bottom:0};let l;let d;let u;if(c){const t=(i=window.Tecton)===null||i===void 0?void 0:i.platformDimensions;const o=window.visualViewport.height-h;const e=t.innerHeight-(t.outletOffset+h);const r=o<e;l=t.innerHeight;d=(t.outletOffset>0?p:p+t.outletOffset)-a;u=r?o-a:e-a}else{l=window.visualViewport.height;d=p-a;u=l-h-a}const f=d>u?"up":"down";const w=!e.style.getPropertyValue("--comp-pop-max-height")||this.orientationChanged;this.orientationChanged=false;const m=this.currentDirection||n||f;switch(m){case"up":if(w){e.style.setProperty("--comp-pop-max-height",`${d}px`)}this.setDirectionAndShow("up");break;case"down":if(w){e.style.setProperty("--comp-pop-max-height",`${u}px`)}this.setDirectionAndShow("down");break}}render(){const t=["container",this.currentDirection];if(this.show)t.push("show");if(this.mode==="legacy")t.push("legacy");return e("div",{key:"e30d8c33a5c1ef22fe5721daa2b48e22118d2476",ref:t=>this.containerElement=t,class:t.join(" "),"test-id":"outerContainer"},e("div",{key:"b8e6bcc629445b9649498f491676baf73cd3957a",ref:t=>this.contentElement=t,class:"content"},e("slot",{key:"e6b3e6d397e471cb3d2ecaa534106fd04b74c41e"})))}get hostElement(){return i(this)}static get watchers(){return{open:["openChanged"],minHeight:["minHeightProvided"]}}};p.style=c;export{n as click_elsewhere,p as q2_popover};
-//# sourceMappingURL=p-ca7dad64.entry.js.map

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2OptionListCss","Q2OptionListStyle0","Q2OptionList","this","scheduledAfterRender","keyStore","queue","lastPressedAt","Date","searchAndFocus","keyValue","shouldSelect","reorder","pivotIndex","undefined","activeIndex","list","allOptions","map","element","index","slice","buildQueue","now","getTime","length","push","searchIndex","keyStr","join","find","v","disabled","display","match","RegExp","replace","setFocus","multiple","openDropdownWithActiveElement","selectOption","popoverState","emit","open","action","setActiveElement","matched","externalKeydownHandler","event","stopPropagation","customSearch","key","nextIndex","searchString","searchOptions","type","setDefaultActiveElement","nextPaint","preventDefault","selectedOptions","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","noSelect","internalKeydownHandler","shiftKey","newOption","active","isFirstOptionActive","adjustActiveOptionAndScroll","isLastOptionActive","focusoutHandler","relatedTarget","isInQ2OptionList","includes","isInLightDom","hostElement","contains","clickHandler","target","option","closest","loc","componentWillLoad","hasOptions","querySelectorAll","componentDidLoad","overrideFocus","checkOptions","selectedOptionsUpdated","ready","componentDidRender","forEach","fn","allContents","rootSlot","getRootSlot","acceptedTags","filter","tagName","contents","extractOptions","elements","reduce","acc","Array","from","children","allVisibleOptions","hidden","_multiSelectHidden","disabledGroup","options","getOptions","optionRole","role","slot","querySelector","assignedElements","_a","hasAnotherSlot","scrollToActiveOption","activeOption","scrollIntoView","block","waitForNextPaint","setActiveOption","setFocusedOption","firstSelected","findIndex","selected","firstEnabled","updateSingleOptionAttrs","selectedValue","value","updateMultipleOptionAttrs","selectedValues","elementIndex","isOptionVisible","isVisible","focus","direction","visibleActiveOptionIndex","indexOf","nextVisibleOptionIndex","nextVisibleOption","focusSelectedSibling","hasNoSiblings","showSelected","selectedOptionVisibleIndex","nextVisibleSiblingIndex","nextVisibleSibling","nextSiblingIndex","selectedOption","valueObject","innerText","trim","values","isAlreadySelected","change","numToAdd","resetTimer","searchStringTimer","clearTimeout","window","setTimeout","showSelectedUpdated","delegateFocus","isEventFromElement","handleClick","handleExternalKeydown","getContents","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick"],"sources":["src/components/q2-option-list/q2-option-list.scss?tag=q2-option-list&encapsulation=shadow","src/components/q2-option-list/q2-option-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n    line-height: var-list(var-prefixer(option-list-line-height),--app-line-height, 1.428571429em);\n}\n\n.content {\n    text-align: start;\n\n    :host([is-sizeable]) & {\n        display: block;\n        height: auto;\n    }\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Event,\n    State,\n    Element,\n    ComponentInterface,\n    Host,\n    EventEmitter,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport { isEventFromElement, isVisible, loc, nextPaint, overrideFocus, waitForNextPaint } from 'src/utils';\n\nexport interface IOptionValue {\n    value: string;\n    display?: string;\n}\n\n@Component({ tag: 'q2-option-list', shadow: true, styleUrl: 'q2-option-list.scss' })\nexport class Q2OptionList implements ComponentInterface {\n    @Prop({ reflect: true }) align: 'left' | 'right';\n\n    /** Indicates a custom search is being implemented for the option list. */\n    @Prop({ reflect: true }) customSearch: boolean;\n\n    /** Disables the option list. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop() label: string = loc('tecton.element.optionList.label');\n\n    /**\n     * Enables the multi-select ability for the option list.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true }) multiple: boolean;\n\n    /** Disables the logic that handles selecting and focusing an option in the option list. */\n    @Prop({ reflect: true }) noSelect: boolean;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n\n    /** Applies focus to the selected option. */\n    @Prop({ reflect: true, mutable: true }) showSelected: boolean;\n\n    /** Translates to the role of the option list */\n    @Prop() type: 'menu' | 'listbox' = 'listbox';\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     */\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n\n    /**\n     * Emitted to indicate the intended state of the popover.\n     * @private\n     */\n    @Event() popoverState: EventEmitter<{ open: boolean; action: 'close' | 'select' | 'open' }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false }) ready: EventEmitter<undefined>;\n    @State() hasOptions: boolean;\n    contentElement: HTMLElement;\n    activeIndex: number;\n    pivotIndex: number;\n    scheduledAfterRender: (() => void)[] = [];\n    searchString: string;\n    searchStringTimer: number;\n    keyStore: {\n        queue: string[];\n        lastPressedAt: Date;\n    } = {\n        queue: [],\n        lastPressedAt: new Date(),\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.checkOptions();\n        this.selectedOptionsUpdated();\n        this.ready.emit();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    /// Getters ///\n    get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[] {\n        const rootSlot = this.getRootSlot(this.hostElement);\n        const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];\n        return rootSlot.filter(element => acceptedTags.includes(element.tagName)) as (\n            | HTMLQ2OptgroupElement\n            | HTMLQ2OptionElement\n        )[];\n    }\n\n    get allOptions(): HTMLQ2OptionElement[] {\n        const contents = this.allContents;\n\n        const extractOptions = (\n            elements: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | Element)[]\n        ): HTMLQ2OptionElement[] => {\n            return elements.reduce((acc, element) => {\n                if (element.tagName === 'Q2-OPTGROUP') {\n                    return [...acc, ...extractOptions(Array.from(element.children))];\n                } else if (element.tagName === 'Q2-OPTION') {\n                    return [...acc, element];\n                } else {\n                    return acc;\n                }\n            }, []);\n        };\n\n        return extractOptions(contents);\n    }\n\n    get allVisibleOptions(): HTMLQ2OptionElement[] {\n        return this.allOptions.filter(\n            option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup\n        );\n    }\n\n    /// Helpers ///\n    async checkOptions() {\n        const { type } = this;\n        const options = await this.getOptions();\n        if (!type) return;\n        const optionRole = type === 'menu' ? 'menuitem' : 'option';\n        options.forEach(option => {\n            option.role = optionRole;\n        });\n    }\n\n    getRootSlot(element: Element): Element[] {\n        const slot = element.querySelector('slot');\n        const assignedElements = slot?.assignedElements() ?? Array.from(element.children);\n        const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';\n        if (hasAnotherSlot) {\n            return this.getRootSlot(assignedElements[0]);\n        } else {\n            return assignedElements;\n        }\n    }\n\n    scrollToActiveOption() {\n        const activeOption = this.allOptions[this.activeIndex];\n        activeOption?.scrollIntoView({ block: 'nearest' });\n    }\n\n    async openDropdownWithActiveElement(activeIndex: number) {\n        if (this.disabled) return;\n        this.activeIndex = activeIndex;\n        this.popoverState.emit({ open: true, action: 'open' });\n        await waitForNextPaint();\n        this.setActiveOption();\n        await waitForNextPaint();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    getDefaultActiveIndex() {\n        const { allOptions } = this;\n        const firstSelected = allOptions.findIndex(element => element.selected);\n        if (firstSelected > -1) return firstSelected;\n\n        const firstEnabled = allOptions.findIndex(element => !element.hidden);\n        if (firstEnabled > -1) return firstEnabled;\n\n        return 0;\n    }\n\n    updateSingleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValue = selectedOptions[0]?.value || undefined;\n        allOptions.forEach(element => {\n            element.selected = element.value === selectedValue;\n        });\n    }\n\n    updateMultipleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValues = selectedOptions.map(({ value }) => value);\n        allOptions.forEach(element => {\n            element.selected = selectedValues.includes(element.value);\n        });\n    }\n\n    setActiveOption() {\n        const activeIndex = this.activeIndex;\n\n        this.allOptions.forEach((element, elementIndex) => {\n            element.active = activeIndex === elementIndex;\n        });\n    }\n\n    setFocusedOption() {\n        const option = this.allOptions[this.activeIndex];\n        if (!option) return;\n\n        const isOptionVisible = isVisible(option);\n        if (isOptionVisible) option.focus();\n        else nextPaint(() => option.focus());\n    }\n\n    getNextVisibleIndex(direction) {\n        const { allVisibleOptions, allOptions, activeIndex } = this;\n        const activeOption = allOptions[activeIndex];\n        const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);\n        let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;\n\n        if (nextVisibleOptionIndex < 0) {\n            nextVisibleOptionIndex = allVisibleOptions.length - 1;\n        } else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {\n            nextVisibleOptionIndex = 0;\n        }\n\n        const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];\n        return allOptions.indexOf(nextVisibleOption);\n    }\n\n    focusSelectedSibling(option: HTMLQ2OptionElement) {\n        const { allVisibleOptions, allOptions } = this;\n        const hasNoSiblings = allVisibleOptions.length < 2;\n        if (hasNoSiblings) {\n            this.showSelected = false;\n            return;\n        }\n\n        const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);\n        const nextVisibleSiblingIndex = selectedOptionVisibleIndex\n            ? selectedOptionVisibleIndex - 1\n            : selectedOptionVisibleIndex + 1;\n        const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];\n        const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);\n\n        this.activeIndex = nextSiblingIndex;\n        this.setFocusedOption();\n        this.scheduledAfterRender.push(() => {\n            option._multiSelectHidden = !option.selected;\n        });\n    }\n\n    selectOption(selectedOption: HTMLQ2OptionElement) {\n        const { multiple, noSelect, showSelected } = this;\n        if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup) return;\n        const selectedValue = selectedOption.value;\n        const valueObject = {\n            value: selectedValue,\n            display: selectedOption.display || selectedOption.innerText.trim(),\n        };\n\n        let values: IOptionValue[] = [];\n        if (multiple) {\n            const { selectedOptions } = this;\n            const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);\n\n            if (isAlreadySelected) {\n                values = selectedOptions.filter(({ value }) => value !== selectedValue);\n            } else {\n                values = [...selectedOptions, valueObject];\n            }\n\n            if (showSelected) this.focusSelectedSibling(selectedOption);\n        } else {\n            values = [valueObject];\n        }\n\n        if (noSelect) this.setActiveElement(null);\n        else this.selectedOptions = values;\n\n        this.change.emit({ value: selectedValue, values });\n    }\n\n    adjustActiveOptionAndScroll(numToAdd: number) {\n        this.activeIndex += numToAdd;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    resetTimer() {\n        if (this.searchStringTimer) {\n            clearTimeout(this.searchStringTimer);\n        }\n\n        this.searchStringTimer = window.setTimeout(() => {\n            this.searchString = null;\n        }, 2000);\n    }\n\n    searchAndFocus = (keyValue: string, shouldSelect: boolean) => {\n        // pseudo search in non-searchable select\n        const reorder = () => {\n            this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;\n            const list = this.allOptions.map((element, index) => ({ element, index }));\n            return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];\n        };\n\n        const buildQueue = () => {\n            const now = new Date();\n            if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {\n                // empty stored keys if delay > 1s\n                this.keyStore.queue.length = 0;\n            }\n            if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {\n                this.keyStore.queue.push(keyValue);\n            }\n            this.keyStore.lastPressedAt = now;\n        };\n\n        const searchIndex = (list: any[]) => {\n            const keyStr = this.keyStore.queue.join('');\n            return list.find(v => {\n                return (\n                    !v.element.disabled &&\n                    v.element.display &&\n                    (v.element.display.match(new RegExp(`^${keyStr}`, 'i')) ||\n                        v.element.display.replace(/\\s/g, '').match(new RegExp(`^${keyStr}`, 'i')))\n                );\n            });\n        };\n\n        const setFocus = ({ index }) => {\n            if (this.multiple) {\n                // multiple: should open to make sure that which options are selected\n                this.openDropdownWithActiveElement(index);\n            } else {\n                this.activeIndex = index;\n                if (shouldSelect) {\n                    this.selectOption(this.allOptions[index]);\n                    this.popoverState.emit({ open: false, action: 'select' });\n                } else this.setActiveElement(index);\n            }\n        };\n\n        buildQueue();\n        const matched = searchIndex(reorder());\n        if (matched) {\n            setFocus(matched);\n        }\n    };\n\n    searchOptions(key: string, shouldSelect?: boolean) {\n        this.searchString = key;\n        this.searchAndFocus(key, shouldSelect);\n    }\n\n    /// Watchers ///\n    @Watch('showSelected')\n    showSelectedUpdated(showSelected: boolean) {\n        if (showSelected && this.selectedOptions.length === 0) {\n            this.showSelected = false;\n            return;\n        }\n        this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsUpdated() {\n        if (this.multiple) {\n            this.updateMultipleOptionAttrs();\n        } else {\n            this.updateSingleOptionAttrs();\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        const { activeIndex } = this;\n        if (typeof activeIndex === 'number' && activeIndex > -1) {\n            this.setActiveOption();\n            this.setFocusedOption();\n        } else {\n            this.setDefaultActiveElement();\n        }\n    }\n\n    @Listen('click')\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    /// Public Methods ///\n    @Method()\n    async setDefaultActiveElement() {\n        this.activeIndex = this.getDefaultActiveIndex();\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async setActiveElement(index: number) {\n        this.activeIndex = index;\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async handleExternalKeydown(event: KeyboardEvent) {\n        this.externalKeydownHandler(event);\n    }\n\n    @Method()\n    async getContents(): Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]> {\n        return this.allContents;\n    }\n\n    @Method()\n    async getOptions(): Promise<HTMLQ2OptionElement[]> {\n        return this.allOptions;\n    }\n\n    /// Event Handlers ///\n    /* tslint:disable:cyclomatic-complexity */\n    externalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions } = this;\n        const { key } = event;\n\n        let nextIndex;\n        switch (key) {\n            case ' ':\n                if (this.searchString) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, true);\n                    break;\n                } else if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'Enter':\n                if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.activeIndex = 0;\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.activeIndex = 0;\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, true);\n                break;\n        }\n    };\n\n    internalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions, multiple } = this;\n        const { key, shiftKey } = event;\n\n        let newOption;\n        switch (key) {\n            case ' ':\n                if (this.searchString && !this.multiple) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, false);\n                    break;\n                }\n\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\n                break;\n\n            case 'Enter':\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                const isFirstOptionActive = activeIndex === 0;\n                if (isFirstOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(-1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'ArrowDown':\n                event.preventDefault();\n                const isLastOptionActive = activeIndex === allOptions.length - 1;\n                if (isLastOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                if (shiftKey) break;\n                if (this.multiple && this.type === 'listbox') break;\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) return;\n                this.selectOption(newOption);\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, false);\n                break;\n        }\n    };\n    /* tslint:enable:cyclomatic-complexity */\n\n    focusoutHandler = (event: FocusEvent) => {\n        const { relatedTarget } = event as unknown as { relatedTarget: HTMLQ2OptionElement };\n        const isInQ2OptionList = this.allOptions.includes(relatedTarget);\n        const isInLightDom = !isInQ2OptionList && this.hostElement.contains(relatedTarget);\n        if (isInQ2OptionList || isInLightDom) {\n            event.stopPropagation();\n        }\n    };\n\n    clickHandler = (event: Event) => {\n        const target = event.target as HTMLQ2OptionElement;\n        const option = target.closest('q2-option');\n        this.selectOption(option);\n        if (this.multiple) return;\n        this.popoverState.emit({ open: false, action: 'select' });\n    };\n\n    /// DOM ///\n    render() {\n        return (\n            <Host>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                    onFocusout={this.focusoutHandler}\n                >\n                    <div\n                        class=\"options\"\n                        aria-label={loc('tecton.element.optionList.label', [this.label])}\n                        aria-multiselectable={`${!!this.multiple}`}\n                        role={this.type || 'listbox'}\n                        onKeyDown={this.internalKeydownHandler}\n                        onClick={this.clickHandler}\n                    >\n                        <slot />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"uIAAA,MAAMA,EAAkB,q5BACxB,MAAAC,EAAeD,E,MCqBFE,EAAY,M,gIAsDrBC,KAAAC,qBAAuC,GAGvCD,KAAAE,SAGI,CACAC,MAAO,GACPC,cAAe,IAAIC,MAkOvBL,KAAAM,eAAiB,CAACC,EAAkBC,KAEhC,MAAMC,EAAU,KACZT,KAAKU,WAAaV,KAAKU,aAAeC,UAAY,GAAKX,KAAKY,aAAe,GAAK,EAChF,MAAMC,EAAOb,KAAKc,WAAWC,KAAI,CAACC,EAASC,KAAK,CAAQD,UAASC,YACjE,MAAO,IAAIJ,EAAKK,MAAMlB,KAAKU,eAAgBG,EAAKK,MAAM,EAAGlB,KAAKU,YAAY,EAG9E,MAAMS,EAAa,KACf,MAAMC,EAAM,IAAIf,KAChB,GAAIe,EAAIC,UAAYrB,KAAKE,SAASE,cAAciB,UAAY,IAAM,CAE9DrB,KAAKE,SAASC,MAAMmB,OAAS,C,CAEjC,GAAItB,KAAKE,SAASC,MAAMmB,SAAW,GAAKtB,KAAKE,SAASC,MAAM,KAAOI,EAAU,CACzEP,KAAKE,SAASC,MAAMoB,KAAKhB,E,CAE7BP,KAAKE,SAASE,cAAgBgB,CAAG,EAGrC,MAAMI,EAAeX,IACjB,MAAMY,EAASzB,KAAKE,SAASC,MAAMuB,KAAK,IACxC,OAAOb,EAAKc,MAAKC,IAERA,EAAEZ,QAAQa,UACXD,EAAEZ,QAAQc,UACTF,EAAEZ,QAAQc,QAAQC,MAAM,IAAIC,OAAO,IAAIP,IAAU,OAC9CG,EAAEZ,QAAQc,QAAQG,QAAQ,MAAO,IAAIF,MAAM,IAAIC,OAAO,IAAIP,IAAU,QAE9E,EAGN,MAAMS,EAAW,EAAGjB,YAChB,GAAIjB,KAAKmC,SAAU,CAEfnC,KAAKoC,8BAA8BnB,E,KAChC,CACHjB,KAAKY,YAAcK,EACnB,GAAIT,EAAc,CACdR,KAAKqC,aAAarC,KAAKc,WAAWG,IAClCjB,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,U,MAC3CzC,KAAK0C,iBAAiBzB,E,GAIrCE,IACA,MAAMwB,EAAUnB,EAAYf,KAC5B,GAAIkC,EAAS,CACTT,EAASS,E,GA+EjB3C,KAAA4C,uBAA0BC,IACtBA,EAAMC,kBACN,MAAMlC,YAAEA,EAAWmC,aAAEA,EAAYjC,WAAEA,GAAed,KAClD,MAAMgD,IAAEA,GAAQH,EAEhB,IAAII,EACJ,OAAQD,GACJ,IAAK,IACD,GAAIhD,KAAKkD,aAAc,CACnB,GAAIH,EAAc,MAElB/C,KAAKmD,cAAcH,EAAK,MACxB,K,MACG,GAAIhD,KAAKoD,OAAS,OAAQ,CAC7BpD,KAAKY,YAAc,EACnBZ,KAAKoC,8BAA8B,E,KAChC,CACHpC,KAAKqD,0BACLC,GAAU,IAAMtD,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,U,CAEjE,MAEJ,IAAK,QACD,GAAIzC,KAAKoD,OAAS,OAAQ,CACtBpD,KAAKY,YAAc,EACnBZ,KAAKoC,8BAA8B,E,KAChC,CACHpC,KAAKqD,0BACLC,GAAU,IAAMtD,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,U,CAEjE,MAEJ,IAAK,UACDI,EAAMU,iBACNvD,KAAKY,YAAc,EACnBqC,IAAcjD,KAAKwD,gBAAgBlC,OAAStB,KAAKyD,wBAA0BzD,KAAK0D,qBAAqB,GACrG,GAAIT,KAAe,EAAG,MACtBjD,KAAKoC,8BAA8Ba,GACnC,MAEJ,IAAK,YACDJ,EAAMU,iBACNvD,KAAKY,YAAc,EACnBqC,IAAcjD,KAAKwD,gBAAgBlC,OAAStB,KAAKyD,wBAA0BzD,KAAK0D,oBAAoB,GACpG,GAAIT,KAAe,EAAG,MACtBjD,KAAKoC,8BAA8Ba,GACnC,MAEJ,IAAK,OACDJ,EAAMU,iBACNvD,KAAKoC,8BAA8B,GACnC,MAEJ,IAAK,MACDS,EAAMU,iBACNvD,KAAKoC,8BAA8BtB,EAAWQ,OAAS,GACvD,MAEJ,IAAK,SACDuB,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKC,KAAKhD,GAAe,GAAK,GAAI,IACrE,MAEJ,IAAK,WACDiC,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKE,KAAKjD,GAAe,GAAK,GAAIE,EAAWQ,OAAS,IACzF,MAEJ,IAAK,MACDtB,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAC9C,MAEJ,IAAK,MACL,IAAK,SACD,GAAIzC,KAAK8D,SAAU9D,KAAK0C,iBAAiB,MACzC1C,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAC9C,MAEJ,QACI,GAAIM,EAAc,MAClB,IAAKC,EAAIjB,MAAM,UAAW,MAE1B/B,KAAKmD,cAAcH,EAAK,MACxB,M,EAIZhD,KAAA+D,uBAA0BlB,IACtBA,EAAMC,kBACN,MAAMlC,YAAEA,EAAWmC,aAAEA,EAAYjC,WAAEA,EAAUqB,SAAEA,GAAanC,KAC5D,MAAMgD,IAAEA,EAAGgB,SAAEA,GAAanB,EAE1B,IAAIoB,EACJ,OAAQjB,GACJ,IAAK,IACD,GAAIhD,KAAKkD,eAAiBlD,KAAKmC,SAAU,CACrC,GAAIY,EAAc,MAElB/C,KAAKmD,cAAcH,EAAK,OACxB,K,CAGJH,EAAMU,iBACNU,EAAYnD,EAAWa,MAAKX,GAAWA,EAAQkD,SAC/C,IAAKD,GAAaA,EAAUpC,SAAU,MACtC7B,KAAKqC,aAAa4B,GAClB,GAAI9B,EAAU,MACdnC,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,WAC9C,MAEJ,IAAK,QACDI,EAAMU,iBACNU,EAAYnD,EAAWa,MAAKX,GAAWA,EAAQkD,SAC/C,IAAKD,GAAaA,EAAUpC,SAAU,MACtC7B,KAAKqC,aAAa4B,GAClB,GAAI9B,EAAU,MACdnC,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,WAC9C,MAEJ,IAAK,UACDI,EAAMU,iBACN,MAAMY,EAAsBvD,IAAgB,EAC5C,GAAIuD,EAAqB,MACzB,GAAIvD,IAAgBD,UAAW,CAC3BX,KAAKqD,0BACL,K,KACG,CACH,MAAMJ,EAAYjD,KAAK0D,qBAAqB,GAC5C,GAAIT,KAAe,EAAG,MACtBjD,KAAKoE,4BAA4BnB,EAAYrC,GAC7C,K,CAGR,IAAK,YACDiC,EAAMU,iBACN,MAAMc,EAAqBzD,IAAgBE,EAAWQ,OAAS,EAC/D,GAAI+C,EAAoB,MACxB,GAAIzD,IAAgBD,UAAW,CAC3BX,KAAKqD,0BACL,K,KACG,CACH,MAAMJ,EAAYjD,KAAK0D,oBAAoB,GAC3C,GAAIT,KAAe,EAAG,MACtBjD,KAAKoE,4BAA4BnB,EAAYrC,GAC7C,K,CAGR,IAAK,OACDiC,EAAMU,iBACNvD,KAAKoC,8BAA8B,GACnC,MAEJ,IAAK,MACDS,EAAMU,iBACNvD,KAAKoC,8BAA8BtB,EAAWQ,OAAS,GACvD,MAEJ,IAAK,SACDuB,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKC,IAAIhD,EAAc,GAAI,IAC9D,MAEJ,IAAK,WACDiC,EAAMU,iBACNvD,KAAKoC,8BAA8BuB,KAAKE,IAAIjD,EAAc,GAAIE,EAAWQ,OAAS,IAClF,MAEJ,IAAK,MACD,GAAI0C,EAAU,MACd,GAAIhE,KAAKmC,UAAYnC,KAAKoD,OAAS,UAAW,MAC9Ca,EAAYnD,EAAWa,MAAKX,GAAWA,EAAQkD,SAC/C,IAAKD,GAAaA,EAAUpC,SAAU,OACtC7B,KAAKqC,aAAa4B,GAClB,MAEJ,IAAK,MACL,IAAK,SACD,GAAIjE,KAAK8D,SAAU9D,KAAK0C,iBAAiB,MACzC1C,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAC9C,MAEJ,QACI,GAAIM,EAAc,MAClB,IAAKC,EAAIjB,MAAM,UAAW,MAE1B/B,KAAKmD,cAAcH,EAAK,OACxB,M,EAKZhD,KAAAsE,gBAAmBzB,IACf,MAAM0B,cAAEA,GAAkB1B,EAC1B,MAAM2B,EAAmBxE,KAAKc,WAAW2D,SAASF,GAClD,MAAMG,GAAgBF,GAAoBxE,KAAK2E,YAAYC,SAASL,GACpE,GAAIC,GAAoBE,EAAc,CAClC7B,EAAMC,iB,GAId9C,KAAA6E,aAAgBhC,IACZ,MAAMiC,EAASjC,EAAMiC,OACrB,MAAMC,EAASD,EAAOE,QAAQ,aAC9BhF,KAAKqC,aAAa0C,GAClB,GAAI/E,KAAKmC,SAAU,OACnBnC,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,MAAOC,OAAQ,UAAW,E,oFAlmBrCwC,EAAI,mC,qEAa+B,G,sCAMxB,U,0BAuCnC,iBAAAC,GACIlF,KAAKmF,aAAenF,KAAK2E,YAAYS,iBAAiB,aAAa9D,M,CAGvE,gBAAA+D,GACIC,EAActF,KAAK2E,aACnB3E,KAAKuF,eACLvF,KAAKwF,yBACLxF,KAAKyF,MAAMlD,M,CAGf,kBAAAmD,GACI1F,KAAKC,qBAAqB0F,SAAQC,GAAMA,MACxC5F,KAAKC,qBAAuB,E,CAIhC,eAAI4F,GACA,MAAMC,EAAW9F,KAAK+F,YAAY/F,KAAK2E,aACvC,MAAMqB,EAAe,CAAC,cAAe,aACrC,OAAOF,EAASG,QAAOjF,GAAWgF,EAAavB,SAASzD,EAAQkF,U,CAMpE,cAAIpF,GACA,MAAMqF,EAAWnG,KAAK6F,YAEtB,MAAMO,EACFC,GAEOA,EAASC,QAAO,CAACC,EAAKvF,KACzB,GAAIA,EAAQkF,UAAY,cAAe,CACnC,MAAO,IAAIK,KAAQH,EAAeI,MAAMC,KAAKzF,EAAQ0F,W,MAClD,GAAI1F,EAAQkF,UAAY,YAAa,CACxC,MAAO,IAAIK,EAAKvF,E,KACb,CACH,OAAOuF,C,IAEZ,IAGP,OAAOH,EAAeD,E,CAG1B,qBAAIQ,GACA,OAAO3G,KAAKc,WAAWmF,QACnBlB,IAAWA,EAAO6B,SAAW7B,EAAO8B,qBAAuB9B,EAAOlD,WAAakD,EAAO+B,e,CAK9F,kBAAMvB,GACF,MAAMnC,KAAEA,GAASpD,KACjB,MAAM+G,QAAgB/G,KAAKgH,aAC3B,IAAK5D,EAAM,OACX,MAAM6D,EAAa7D,IAAS,OAAS,WAAa,SAClD2D,EAAQpB,SAAQZ,IACZA,EAAOmC,KAAOD,CAAU,G,CAIhC,WAAAlB,CAAY/E,G,MACR,MAAMmG,EAAOnG,EAAQoG,cAAc,QACnC,MAAMC,GAAmBC,EAAAH,IAAI,MAAJA,SAAI,SAAJA,EAAME,sBAAkB,MAAAC,SAAA,EAAAA,EAAId,MAAMC,KAAKzF,EAAQ0F,UACxE,MAAMa,IAAmBF,EAAiB/F,QAAU+F,EAAiB,GAAGnB,UAAY,OACpF,GAAIqB,EAAgB,CAChB,OAAOvH,KAAK+F,YAAYsB,EAAiB,G,KACtC,CACH,OAAOA,C,EAIf,oBAAAG,GACI,MAAMC,EAAezH,KAAKc,WAAWd,KAAKY,aAC1C6G,IAAY,MAAZA,SAAY,SAAZA,EAAcC,eAAe,CAAEC,MAAO,W,CAG1C,mCAAMvF,CAA8BxB,GAChC,GAAIZ,KAAK6B,SAAU,OACnB7B,KAAKY,YAAcA,EACnBZ,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,eACvCmF,IACN5H,KAAK6H,wBACCD,IACN5H,KAAK8H,mBACL9H,KAAKwH,sB,CAGT,qBAAA/D,GACI,MAAM3C,WAAEA,GAAed,KACvB,MAAM+H,EAAgBjH,EAAWkH,WAAUhH,GAAWA,EAAQiH,WAC9D,GAAIF,GAAiB,EAAG,OAAOA,EAE/B,MAAMG,EAAepH,EAAWkH,WAAUhH,IAAYA,EAAQ4F,SAC9D,GAAIsB,GAAgB,EAAG,OAAOA,EAE9B,OAAO,C,CAGX,uBAAAC,G,MACI,MAAMrH,WAAEA,EAAU0C,gBAAEA,GAAoBxD,KACxC,MAAMoI,IAAgBd,EAAA9D,EAAgB,MAAE,MAAA8D,SAAA,SAAAA,EAAEe,QAAS1H,UACnDG,EAAW6E,SAAQ3E,IACfA,EAAQiH,SAAWjH,EAAQqH,QAAUD,CAAa,G,CAI1D,yBAAAE,GACI,MAAMxH,WAAEA,EAAU0C,gBAAEA,GAAoBxD,KACxC,MAAMuI,EAAiB/E,EAAgBzC,KAAI,EAAGsH,WAAYA,IAC1DvH,EAAW6E,SAAQ3E,IACfA,EAAQiH,SAAWM,EAAe9D,SAASzD,EAAQqH,MAAM,G,CAIjE,eAAAR,GACI,MAAMjH,EAAcZ,KAAKY,YAEzBZ,KAAKc,WAAW6E,SAAQ,CAAC3E,EAASwH,KAC9BxH,EAAQkD,OAAStD,IAAgB4H,CAAY,G,CAIrD,gBAAAV,GACI,MAAM/C,EAAS/E,KAAKc,WAAWd,KAAKY,aACpC,IAAKmE,EAAQ,OAEb,MAAM0D,EAAkBC,EAAU3D,GAClC,GAAI0D,EAAiB1D,EAAO4D,aACvBrF,GAAU,IAAMyB,EAAO4D,S,CAGhC,mBAAAjF,CAAoBkF,GAChB,MAAMjC,kBAAEA,EAAiB7F,WAAEA,EAAUF,YAAEA,GAAgBZ,KACvD,MAAMyH,EAAe3G,EAAWF,GAChC,MAAMiI,EAA2BlC,EAAkBmC,QAAQrB,GAC3D,IAAIsB,EAAyBF,EAA2BD,EAExD,GAAIG,EAAyB,EAAG,CAC5BA,EAAyBpC,EAAkBrF,OAAS,C,MACjD,GAAIyH,EAAyBpC,EAAkBrF,OAAS,EAAG,CAC9DyH,EAAyB,C,CAG7B,MAAMC,EAAoBrC,EAAkBoC,GAC5C,OAAOjI,EAAWgI,QAAQE,E,CAG9B,oBAAAC,CAAqBlE,GACjB,MAAM4B,kBAAEA,EAAiB7F,WAAEA,GAAed,KAC1C,MAAMkJ,EAAgBvC,EAAkBrF,OAAS,EACjD,GAAI4H,EAAe,CACflJ,KAAKmJ,aAAe,MACpB,M,CAGJ,MAAMC,EAA6BzC,EAAkBmC,QAAQ/D,GAC7D,MAAMsE,EAA0BD,EAC1BA,EAA6B,EAC7BA,EAA6B,EACnC,MAAME,EAAqB3C,EAAkB0C,GAC7C,MAAME,EAAmBzI,EAAWgI,QAAQQ,GAE5CtJ,KAAKY,YAAc2I,EACnBvJ,KAAK8H,mBACL9H,KAAKC,qBAAqBsB,MAAK,KAC3BwD,EAAO8B,oBAAsB9B,EAAOkD,QAAQ,G,CAIpD,YAAA5F,CAAamH,GACT,MAAMrH,SAAEA,EAAQ2B,SAAEA,EAAQqF,aAAEA,GAAiBnJ,KAC7C,IAAKwJ,GAAkBA,EAAe3H,UAAY2H,EAAe1C,cAAe,OAChF,MAAMsB,EAAgBoB,EAAenB,MACrC,MAAMoB,EAAc,CAChBpB,MAAOD,EACPtG,QAAS0H,EAAe1H,SAAW0H,EAAeE,UAAUC,QAGhE,IAAIC,EAAyB,GAC7B,GAAIzH,EAAU,CACV,MAAMqB,gBAAEA,GAAoBxD,KAC5B,MAAM6J,EAAoBrG,EAAgB7B,MAAKoD,GAAUA,EAAOsD,QAAUD,IAE1E,GAAIyB,EAAmB,CACnBD,EAASpG,EAAgByC,QAAO,EAAGoC,WAAYA,IAAUD,G,KACtD,CACHwB,EAAS,IAAIpG,EAAiBiG,E,CAGlC,GAAIN,EAAcnJ,KAAKiJ,qBAAqBO,E,KACzC,CACHI,EAAS,CAACH,E,CAGd,GAAI3F,EAAU9D,KAAK0C,iBAAiB,WAC/B1C,KAAKwD,gBAAkBoG,EAE5B5J,KAAK8J,OAAOvH,KAAK,CAAE8F,MAAOD,EAAewB,U,CAG7C,2BAAAxF,CAA4B2F,GACxB/J,KAAKY,aAAemJ,EACpB/J,KAAK6H,kBACL7H,KAAK8H,mBACL9H,KAAKwH,sB,CAGT,UAAAwC,GACI,GAAIhK,KAAKiK,kBAAmB,CACxBC,aAAalK,KAAKiK,kB,CAGtBjK,KAAKiK,kBAAoBE,OAAOC,YAAW,KACvCpK,KAAKkD,aAAe,IAAI,GACzB,I,CAuDP,aAAAC,CAAcH,EAAaxC,GACvBR,KAAKkD,aAAeF,EACpBhD,KAAKM,eAAe0C,EAAKxC,E,CAK7B,mBAAA6J,CAAoBlB,GAChB,GAAIA,GAAgBnJ,KAAKwD,gBAAgBlC,SAAW,EAAG,CACnDtB,KAAKmJ,aAAe,MACpB,M,CAEJnJ,KAAKc,WAAW6E,SAAQZ,GAAWA,EAAO8B,mBAAqBsC,GAAgBpE,EAAOkD,SAAW,O,CAIrG,sBAAAzC,GACI,GAAIxF,KAAKmC,SAAU,CACfnC,KAAKsI,2B,KACF,CACHtI,KAAKmI,yB,EAMb,aAAAmC,CAAczH,GACV,IAAK0H,EAAmB1H,EAAO7C,KAAK2E,aAAc,OAClD3E,KAAKsC,aAAaC,KAAK,CAAEC,KAAM,KAAMC,OAAQ,SAC7C,MAAM7B,YAAEA,GAAgBZ,KACxB,UAAWY,IAAgB,UAAYA,GAAe,EAAG,CACrDZ,KAAK6H,kBACL7H,KAAK8H,kB,KACF,CACH9H,KAAKqD,yB,EAKb,WAAAmH,CAAY3H,GACRA,EAAMC,iB,CAKV,6BAAMO,GACFrD,KAAKY,YAAcZ,KAAKyD,wBACxBzD,KAAK6H,kBACL7H,KAAK8H,kB,CAIT,sBAAMpF,CAAiBzB,GACnBjB,KAAKY,YAAcK,EACnBjB,KAAK6H,kBACL7H,KAAK8H,kB,CAIT,2BAAM2C,CAAsB5H,GACxB7C,KAAK4C,uBAAuBC,E,CAIhC,iBAAM6H,GACF,OAAO1K,KAAK6F,W,CAIhB,gBAAMmB,GACF,OAAOhH,KAAKc,U,CAsNhB,MAAA6J,GACI,OACIC,EAACC,EAAI,CAAA7H,IAAA,4CACD4H,EAAA,OAAA5H,IAAA,2CACI8H,MAAM,UACNC,IAAKC,GAAOhL,KAAKiL,eAAiBD,EAClCE,WAAYlL,KAAKsE,iBAEjBsG,EAAA,OAAA5H,IAAA,2CACI8H,MAAM,UAAS,aACH7F,EAAI,kCAAmC,CAACjF,KAAKmL,QAAO,uBAC1C,KAAKnL,KAAKmC,WAChC+E,KAAMlH,KAAKoD,MAAQ,UACnBgI,UAAWpL,KAAK+D,uBAChBsH,QAASrL,KAAK6E,cAEd+F,EAAA,QAAA5H,IAAA,+C"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2TabContainerCss","Q2TabContainerStyle0","Q2TabContainer","this","guid","createGuid","scheduledAfterRender","lastScrolled","Date","getTime","updateTabData","updateTabPaneProps","setTabs","tabPanes","forEach","tab","index","selected","value","selectedTabValue","tabs","map","label","badgeCount","badgeDescription","badgeTheme","badgeStatus","loc","onTabClick","event","targetValue","target","closest","dataset","isAlreadySelected","change","emit","onTabKeyDown","key","preventDefault","moveToAdjacentTab","direction","indexOf","newIndex","Math","min","length","max","moveFocus","preventScroll","focusedValue","focusedTab","listElement","querySelector","focus","left","offsetLeft","clientWidth","scrollTo","behavior","checkScrollState","scrollLeft","scrollWidth","scrollEnabled","showScrollLeft","showScrollRight","ceil","onScrollBtnClick","halfWidth","floor","scrollAmount","abs","scrollBy","onSlotChange","resizeIframe","_b","_a","window","TectonElements","call","hostElement","querySelectorAll","Array","from","filter","pane","name","tabList","shadowRoot","defaultChangeHandler","onchange","detail","onResize","onFocus","isEventFromElement","findIndex","el","onBadge","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","resizeObserver","ResizeObserver","componentDidRender","fn","settled","componentDidLoad","overrideFocus","push","hasTabs","blur","disconnectedCallback","disconnect","valueObserver","nameObserver","render","h","Fragment","class","hidden","onClick","type","onScroll","ref","noPrint","role","generateTab","onSlotchange","isSelected","id","tabIndex","onKeyDown","undefined","generateTabWithBadge","theme","description","status"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(var-prefixer(tab-content-padding), --comp-tab-content-padding);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true }) color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true }) name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true }) noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true }) type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true }) value: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event() settled: EventEmitter<undefined>;\n\n    guid: number = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    lastScrolled: number = new Date(null).getTime();\n    @State() hasLeft: boolean = false;\n    @State() hasRight: boolean = false;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    @State() tabs: TabPane[];\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    ///////// Default Handler /////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveFocus(index);\n    }\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    ///////// Lifecycle Hooks /////////\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveFocus(Math.max(index, 0));\n            this.value = tab.dataset.value;\n            tab.blur();\n        });\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    ///////// Observers /////////\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveFocus(index, false));\n        }\n    }\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    ///////// Actions /////////\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveFocus(newIndex, false);\n    };\n\n    moveFocus = (index: number, preventScroll: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        focusedTab.focus({ preventScroll });\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.generateTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    generateTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    generateTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}