q2-tecton-elements 1.50.1 → 1.51.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2CheckboxGroupCss","Q2CheckboxGroupStyle0","Q2CheckboxGroup","this","_id","createGuid","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","onMutationObserved","updateValue","updateDisabled","updateReadonly","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","subtree","onHostElementChange","target","onchange","detail","setValue","values","valuesSet","Set","Array","isArray","has","click","disabledObserver","readonlyObserver","valueObserver","from","querySelectorAll","inputId","protectedValue","inputDom","h","groupDisabled","disabled","checkbox","slotReadonly","readonly","hasOwnProperty","render","showLabel","label","optional","key","hideLabel","class","labelDOM","hasError","onChange","undefined","type"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 4px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        return (\n            <div>\n                {showLabel && !this.hideLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                >\n                    {this.label || this.optional ? <legend class=\"sr-only\">{labelDOM(this)}</legend> : ''}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,oiEAC3B,MAAAC,EAAeD,E,MCcFE,EAAe,M,wDAGxBC,KAAAC,IAAc,kBAAkBC,MAwJhCF,KAAAG,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBC,YAAW,KACPP,KAAKQ,iBAAiBC,SAAQC,IAC1BJ,EAAWI,EAAMC,SAAWD,EAAME,OAAO,IAE7CZ,KAAKa,OAAOC,KAAKR,EAAW,GAC7B,EAAE,EAGTN,KAAAe,mBAAqB,KACjBf,KAAKgB,cACLhB,KAAKiB,iBACLjB,KAAKkB,gBAAgB,E,mKA/FzB,oBAAAC,GACI,GAAInB,KAAKoB,iBAAkB,CACvBpB,KAAKoB,iBAAiBC,aACtBrB,KAAKoB,iBAAmB,I,EAIhC,iBAAAE,GACItB,KAAKkB,gB,CAGT,gBAAAK,GACI,MAAMC,EAAW,IAAIC,iBAAiBzB,KAAKe,oBAC3CS,EAASE,QAAQ1B,KAAK2B,YAAa,CAAEC,UAAW,KAAMC,QAAS,OAC/D7B,KAAKoB,iBAAmBI,EACxBxB,KAAKe,oB,CAOT,mBAAAe,CAAoB1B,GAChB,GAAIA,EAAM2B,SAAW/B,KAAK2B,cAAgB3B,KAAK2B,YAAYK,SAAU,CACjEhC,KAAKW,MAAQP,EAAM6B,M,EAa3B,QAAAC,CAASC,GACL,MAAMC,EAAY,IAAIC,IAAIC,MAAMC,QAAQJ,GAAUA,EAAS,CAACA,IAC5DnC,KAAKQ,iBAAiBC,SAAQC,IAC1B,GAAI0B,EAAUI,IAAI9B,EAAMC,OAAQD,EAAM+B,OAAO,G,CAQrD,gBAAAC,GACI1C,KAAKiB,gB,CAIT,gBAAA0B,GACI3C,KAAKkB,gB,CAIT,aAAA0B,GACI5C,KAAKgB,a,CAMT,oBAAIR,GACA,OAAO8B,MAAMO,KAAK7C,KAAK2B,YAAYmB,iBAAiB,e,CAGxD,WAAIC,GACA,OAAO/C,KAAKC,G,CAGhB,kBAAI+C,GACA,OAAOhD,KAAKW,OAAS,E,CAGzB,QAAAsC,GACI,OAAOC,EAAA,Y,CAoBX,cAAAjC,GACI,MAAMkC,EAAgBnD,KAAKoD,SAC3BpD,KAAKQ,iBAAiBC,SAAQ4C,IAC1BA,EAASF,cAAgBA,CAAa,G,CAI9C,cAAAjC,GACI,MAAMoC,EAAetD,KAAKuD,SAC1BvD,KAAKQ,iBAAiBC,SAAQ4C,IAC1BA,EAASC,aAAeA,CAAY,G,CAI5C,WAAAtC,GACI,GAAIhB,KAAKuD,SAAU,OACnBvD,KAAKQ,iBAAiBC,SAAQC,IAC1B,GAAIV,KAAKgD,eAAeQ,eAAe9C,EAAMC,OAAQ,CACjDD,EAAME,QAAUZ,KAAKW,MAAMD,EAAMC,M,KAQ7C,MAAA8C,GACI,MAAMC,EAAY1D,KAAK2D,OAAS3D,KAAK4D,UAAY5D,KAAKuD,SACtD,OACIL,EAAA,OAAAW,IAAA,4CACKH,IAAc1D,KAAK8D,WAAaZ,EAAA,OAAAW,IAAA,2CAAKE,MAAM,gBAAgBC,EAAShE,OACrEkD,EAAA,YAAAW,IAAA,2CACIE,MAAO,wBAAwB/D,KAAKiE,SAAW,YAAc,KAC7DC,SAAUlE,KAAKG,sBAAqB,eACtBH,KAAKiE,WAAaE,UAAYA,UAAY,GAAGnE,KAAKiE,YAE/DjE,KAAK2D,OAAS3D,KAAK4D,SAAWV,EAAA,UAAQa,MAAM,WAAWC,EAAShE,OAAkB,GAClFA,KAAKiE,SACFf,EAAA,OAAKa,MAAO,wBAAwB/D,KAAK2D,OAAS3D,KAAK4D,SAAW,GAAK,cACnEV,EAAA,WACIa,MAAM,qBACNK,KAAK,WAEP,GAITpE,KAAKiD,Y"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,F as o,g as a}from"./p-a5f18e27.js";import{j as s,l as r,w as n}from"./p-9a1a4bc0.js";const c='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--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, 4px)));--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}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}';const d=c;var l=undefined&&undefined.__rest||function(t,e){var i={};for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0)i[o]=t[o];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,o=Object.getOwnPropertySymbols(t);a<o.length;a++){if(e.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a]))i[o[a]]=t[o[a]]}return i};const h=class{constructor(a){t(this,a);this.close=e(this,"close",7);this.ready=e(this,"ready",3);this.initialSelectedOptions=[];this.maxHeight=.75;this.minHeight=.2;this.selectedOptions={values:[],value:""};this.generateOptgroup=t=>{const e=document.createElement("q2-optgroup");if(t.label)e.setAttribute("label",t.label);if(t.disabled)e.setAttribute("disabled","");if(!!t.options.length)t.options.forEach((t=>e.appendChild(this.generateOption(t))));return e};this.generateOption=t=>{const e=document.createElement("q2-option");const{innerHTML:i}=t,o=l(t,["innerHTML"]);if(i)e.innerHTML=s(i);Object.entries(o).forEach((([t,i])=>{if(i===undefined)return;if(typeof i==="boolean"){if(i)e.setAttribute(t,"")}else{e.setAttribute(t,i)}}));return e};this.onCancel=t=>{var e,i;t.preventDefault();const{initialSelectedOptions:o}=this;this.hide({value:(i=(e=o===null||o===void 0?void 0:o[0])===null||e===void 0?void 0:e.value)!==null&&i!==void 0?i:"",values:o,type:"cancel"})};this.onClick=t=>{const e=t.target;if(!(e instanceof HTMLElement))return;const i=!!e.closest(".interior, q2-action-sheet");if(i)return;this.onCancel(t)};this.onListChange=t=>{this.selectedOptions=t.detail};this.onListDone=()=>{this.hide(Object.assign(Object.assign({},this.selectedOptions),{type:"confirm"}))};this.onListPopoverStateChange=t=>{if(t.detail.open)return;if(t.detail.action==="close"){this.onCancel(t)}else{this.onListDone()}};this.renderList=({data:t})=>{const{listProps:e}=t;return i(o,null,i("div",{class:"content",ref:t=>this.contentElement=t},i("q2-option-list",{ref:t=>this.optionListElement=t,multiple:e.multiple,noSelect:e.noSelect,onChange:this.onListChange,onPopoverState:this.onListPopoverStateChange,selectedOptions:e.selectedOptions},i("slot",null))),i("footer",null,e.multiple&&i("q2-btn",{"test-id":"btnDone",intent:"workflow-primary",onClick:this.onListDone},r("tecton.element.actionSheet.done"))))};this.renderMessage=({data:t})=>i("q2-message",{type:t.type},t.title&&i("h2",null,t.title),t.description&&i("p",null,t.description));this.renderSlot=()=>i("div",{class:"content",ref:t=>this.contentElement=t},i("slot",null));this.isScrollable=false;this.renderStatus="is-closing";this.data=undefined;this.hideClose=undefined;this.title=undefined}disconnectedCallback(){this.dialogElement.removeEventListener("cancel",this.onCancel)}componentDidLoad(){this.dialogElement.addEventListener("cancel",this.onCancel);this.ready.emit()}async hide(t={value:"",values:[],type:"confirm"}){this.close.emit(t);this.renderStatus="is-closing";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-closing")return;this.dialogElement.close();this.renderStatus=null;this.data=undefined;this.initialSelectedOptions=[];this.selectedOptions={values:[],value:""};this.hidePostHook()}),{once:true})}async show(){this.showPreHook();await n();this.updateDialogMinMaxHeight();this.storeInitialValues();if(this.dialogElement.open)return;this.dialogElement.showModal();this.renderStatus="is-opening";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-opening")return;this.renderStatus="is-open";this.focusContent()}),{once:true})}focusContent(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){const{event:e}=t;if(e instanceof KeyboardEvent){this.optionListElement.handleExternalKeydown(e)}else{this.optionListElement.focus()}}}hidePostHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null}}showPreHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null;t.options.forEach((t=>{this.hostElement.appendChild("options"in t?this.generateOptgroup(t):this.generateOption(t))}))}}storeInitialValues(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.initialSelectedOptions=t.listProps.selectedOptions}}updateDialogMinMaxHeight(){const t=window.innerHeight;this.dialogElement.style.setProperty("--comp-action-sheet-computed-min-height",`${Math.floor(t*this.minHeight)}px`);this.dialogElement.style.setProperty("--comp-action-sheet-computed-max-height",`${Math.floor(t*this.maxHeight)}px`)}render(){var t;const{data:e}=this;const o=(e===null||e===void 0?void 0:e.title)||this.title||!this.hideClose;const a=this.renderStatus||"";let s=null;switch(e===null||e===void 0?void 0:e.appearance){case"message":s=this.renderMessage;break;case"list":s=this.renderList;break;default:s=this.renderSlot;break}const r=(e===null||e===void 0?void 0:e.appearance)||"slot";const n=`interior is-${r}`;return i("dialog",{key:"c99b589b75c39372357eb770fa5372d659049ea9",ref:t=>this.dialogElement=t,class:a,onClick:this.onClick},i("div",{key:"eb9104dbb4b18b509acbbf3af0714242eacf8cc3",class:n},o&&i("header",{key:"fd2c1d17be91b019d619bf3ad02a8275e1845591"},i("div",{key:"107f884557c370cfb762a9108ce25af68c72e518",class:"title"},(e===null||e===void 0?void 0:e.title)||this.title),!this.hideClose&&i("q2-btn",{key:"539c266789fe661ab28b1070fbd7e38f4f0b5707",class:"btn-close","test-id":"btnClose",onClick:this.onCancel,label:"tecton.element.actionSheet.close","hide-label":true},i("q2-icon",{key:"deb33ad52b81f09b7cbf9cbc156c6b439bc1ac99",type:"close"}))),((t=this.data)===null||t===void 0?void 0:t.description)&&i("p",{key:"76f62ec201aed93b7e00a3d9aeb130b69f7a804a"},e.description),s&&i(s,{key:"3afef7d044a72faa8a5a337671a3b579b6ea065d",data:this.data})))}get hostElement(){return a(this)}};h.style=d;export{h as q2_action_sheet};
-//# sourceMappingURL=p-cf966a0f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2ActionSheetCss","Q2ActionSheetStyle0","Q2ActionSheet","this","initialSelectedOptions","maxHeight","minHeight","selectedOptions","values","value","generateOptgroup","option","optgroupElement","document","createElement","label","setAttribute","disabled","options","length","forEach","opt","appendChild","generateOption","optionElement","innerHTML","attributes","__rest","sanitizeHTMLString","Object","entries","key","undefined","onCancel","event","preventDefault","hide","_b","_a","type","onClick","eventTarget","target","HTMLElement","isInContent","closest","onListChange","detail","onListDone","assign","onListPopoverStateChange","open","action","renderList","data","listProps","h","Fragment","class","ref","el","contentElement","optionListElement","multiple","noSelect","onChange","onPopoverState","intent","loc","renderMessage","title","description","renderSlot","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","ready","emit","close","renderStatus","hidePostHook","once","show","showPreHook","waitForNextPaint","updateDialogMinMaxHeight","storeInitialValues","showModal","focusContent","appearance","KeyboardEvent","handleExternalKeydown","focus","hostElement","windowHeight","window","innerHeight","style","setProperty","Math","floor","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["src/components/q2-action-sheet/q2-action-sheet.scss?tag=q2-action-sheet&encapsulation=shadow","src/components/q2-action-sheet/q2-action-sheet.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, sanitizeHTMLString, waitForNextPaint } from 'src/utils';\n\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as o,g as i,h as e}from"./p-a5f18e27.js";import{h as r,w as s}from"./p-9a1a4bc0.js";const n=class{constructor(i){t(this,i);this.change=o(this,"change",7);this.isCurrentlyFocused=false;this.mouseEventList=["mousedown","dragstart","touchstart"];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()}}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)}componentWillLoad(){}findActiveElement(){let t=document.activeElement;while(true){if(!t||!t.shadowRoot){return t}t=t.shadowRoot.activeElement}}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}shadowContains(t){while(true){if(t===this.hostElement){return true}if(!t){return false}t=t.parentNode||t.host}}shadowEventTarget(t){return t.composedPath()[0]||t.target}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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));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, 4px)));--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.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.setFixedCSSProperties=async()=>{var t,o;const{controlElement:i,containerElement:e,currentDirection:r,rootElementRect:n}=this;const{top:a,bottom:c,left:p,right:h}=(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 l=p-n.left;if(this.block)e.style.setProperty("--comp-pop-width",`${i.offsetWidth||0}px`);e.style.setProperty("--comp-pop-left",`${l}px`);e.style.setProperty("--comp-pop-right",`${n.width+n.left-h}px`);if(r==="up"){e.style.setProperty("--comp-pop-bottom",`${n.height+n.top-a}px`)}if(r==="down"){e.style.setProperty("--comp-pop-top",`${c-n.top}px`)}await s();e.style.setProperty("--comp-pop-opacity","1")};this.viewPortChanged=()=>{if(!this.open)return;this.determinePopDirection()};this.viewPortOrientationChanged=()=>{this.orientationChanged=true;this.viewPortChanged()};this.currentDirection=undefined;this.show=false;this.align=undefined;this.block=undefined;this.controlElement=undefined;this.direction=undefined;this.minHeight=undefined;this.mode=null;this.open=undefined}disconnectedCallback(){this.removeViewportListeners()}componentDidLoad(){this.handleMinHeight();if(this.open)this.determinePopDirection()}popoverStateHandler(t){const{detail:{open:o}}=t;if(o===this.open)return;this.open=o;t.stopPropagation()}async scrollContainerTo(t){this.containerElement.scrollTo(t)}async toggle(){this.open=!this.open}minHeightProvided(){this.handleMinHeight()}async openChanged(t){this.setRootElement();this.popoverStateChanged.emit({open:t});if(t){this.addViewportListeners();this.determinePopDirection()}else{this.removeViewportListeners();this.currentDirection=undefined;this.show=false;await s();this.clearCSSProperties()}}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)}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")}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{outletOffset:t=0,innerHeight:o=window.innerHeight}=((i=window.Tecton)===null||i===void 0?void 0:i.platformDimensions)||{};const e=window.visualViewport.height-h;const r=o-(t+h);const s=e<r;l=o;d=(t>0?p:p+t)-a;u=s?e-a:r-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}}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)}setDirectionAndShow(t){this.setRootElement();const o=this.open;if(!o)return;this.currentDirection=t;this.show=true;if(this.mode==="legacy"){this.setAbsoluteCSSProperties()}else{this.setFixedCSSProperties()}}setRootElement(){let t=this.hostElement;while(t&&t!==document.documentElement){const o=window.getComputedStyle(t);if(o.transform!=="none"||o.filter!=="none"||o.perspective!=="none"||o.containerType!=="normal"||["transform","perspective","filter"].includes(o.willChange)||["layout","paint","strict","content"].includes(o.contain)){this.rootElementRect=t.getBoundingClientRect();return}const i=t.getRootNode();const e=typeof ShadowRoot!=="undefined"&&i instanceof ShadowRoot&&i.host instanceof HTMLElement;if(e){t=i.host}else{t=t.parentElement}}this.rootElementRect={top:0,bottom:0,left:0,right:0,height:window.visualViewport.height,width:window.visualViewport.width}}render(){const t=["container",this.currentDirection];if(this.show)t.push("show");if(this.mode==="legacy")t.push("legacy");return e("div",{key:"570cccbfa3c4830d4b9d52c9564c5355ed357e4f",ref:t=>this.containerElement=t,class:t.join(" "),"test-id":"outerContainer"},e("div",{key:"7729d8f39d61e866de0cf3fe6d65fa8205af8a18",ref:t=>this.contentElement=t,class:"content"},e("slot",{key:"315ce34d31a84a0a0d6688982567d2267452161c"})))}get hostElement(){return i(this)}static get watchers(){return{minHeight:["minHeightProvided"],open:["openChanged"]}}};p.style=c;export{n as click_elsewhere,p as q2_popover};
-//# sourceMappingURL=p-dc77bf66.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","isCurrentlyFocused","mouseEventList","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","connectedCallback","forEach","eventName","document","addEventListener","window","disconnectedCallback","removeEventListener","componentWillLoad","workingElement","activeElement","shadowRoot","slots","hostElement","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","child","parentNode","host","composedPath","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","setAbsoluteCSSProperties","async","controlElement","containerElement","currentDirection","align","style","setProperty","block","controlStyle","getComputedStyle","controlSize","parseInt","height","borderTopWidth","borderBottomWidth","waitForNextPaint","setFixedCSSProperties","rootElementRect","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","offsetWidth","width","viewPortChanged","open","determinePopDirection","viewPortOrientationChanged","undefined","removeViewportListeners","componentDidLoad","popoverStateHandler","detail","stopPropagation","scrollContainerTo","options","scrollTo","toggle","minHeightProvided","openChanged","setRootElement","popoverStateChanged","addViewportListeners","show","clearCSSProperties","actualDirection","direction","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","passive","capture","screen","orientation","removeProperty","maxHeight","windowHeight","maxSpaceAbove","maxSpaceBelow","outletOffset","innerHeight","_c","distanceToIframeBottom","visualViewport","viewableSpaceBelow","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","setDirectionAndShow","isOpen","mode","currentElement","documentElement","computedStyle","transform","filter","perspective","containerType","includes","willChange","contain","rootNode","getRootNode","isRootNodeWebComponent","ShadowRoot","HTMLElement","parentElement","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    // #region Own Properties\n\n    isCurrentlyFocused: boolean = false;\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\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the user clicks outside the element\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\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    /* 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\n    // #endregion\n    // #region Local Methods\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    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    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    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    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\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(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\"));\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    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    /** remove when Popover API is supported in iOS */\n    orientationChanged: boolean = false;\n    rootElementRect: DOMRect;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\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 })\n    direction: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\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    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.setRootElement();\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    // #endregion\n    // #region Local Methods\n\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    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\n        // #endregion\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    async determinePopDirection() {\n        const { containerElement, controlElement, actualDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\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\n        // #endregion\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    setDirectionAndShow(direction: 'up' | 'down') {\n        this.setRootElement();\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    setFixedCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, rootElementRect } = 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 - rootElementRect.left;\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(\n            '--comp-pop-right',\n            `${rootElementRect.width + rootElementRect.left - controlRight}px`\n        );\n\n        if (currentDirection === 'up') {\n            containerElement.style.setProperty(\n                '--comp-pop-bottom',\n                `${rootElementRect.height + rootElementRect.top - controlTop}px`\n            );\n        }\n        if (currentDirection === 'down') {\n            containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}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    setRootElement() {\n        let currentElement: HTMLElement = this.hostElement;\n\n        while (currentElement && currentElement !== document.documentElement) {\n            const computedStyle = window.getComputedStyle(currentElement);\n\n            // Check if the element has any styles applied that create a new containg block\n            if (\n                computedStyle.transform !== 'none' ||\n                computedStyle.filter !== 'none' ||\n                computedStyle.perspective !== 'none' ||\n                computedStyle.containerType !== 'normal' ||\n                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||\n                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)\n            ) {\n                this.rootElementRect = currentElement.getBoundingClientRect();\n                return;\n            }\n\n            const rootNode = currentElement.getRootNode();\n            const isRootNodeWebComponent =\n                typeof ShadowRoot !== 'undefined' &&\n                rootNode instanceof ShadowRoot &&\n                rootNode.host instanceof HTMLElement;\n            if (isRootNodeWebComponent) {\n                currentElement = rootNode.host;\n            } else {\n                currentElement = currentElement.parentElement;\n            }\n        }\n\n        // Return the document's bounding rect if no element is found\n        this.rootElementRect = {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            height: window.visualViewport.height,\n            width: window.visualViewport.width,\n        } as DOMRect;\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    // #endregion\n    // #region Render Methods\n\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    // #endregion\n}\n"],"mappings":"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"}