q2-tecton-elements 1.54.3 → 1.55.0

package/dist/esm/q2-loc.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc } from './index-504f1a9e.js';
+import { r as registerInstance, g as getElement } from './index-7a5365e2.js';
+import { l as loc } from './index-f2a66217.js';
 
 const q2LocCss = "*{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 Q2LocStyle0 = q2LocCss;
@@ -7,31 +7,27 @@ const Q2LocStyle0 = q2LocCss;
 const Q2Loc = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        // #endregion
-        // #region Local Methods
         this.initMutationObserver = () => {
+            if (!('MutationObserver' in window))
+                return;
             const observer = new MutationObserver(this.mutationHandler);
             observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });
             this.mutationObserver = observer;
         };
-        this.initValue = async () => {
-            const textContent = this.hostElement.textContent.trim();
-            if (!this.value && textContent) {
-                this.value = textContent;
-                this.hostElement.textContent = null;
-            }
-            else {
-                this.propHandler();
+        this.initValue = () => {
+            const { hostTextContent } = this;
+            this.hostElement.textContent = null;
+            if (!this.value && hostTextContent) {
+                this.value = hostTextContent;
             }
         };
-        this.mutationHandler = async () => {
-            const textContent = this.hostElement.textContent.trim();
-            if (textContent && this.value !== textContent) {
-                this.value = textContent;
+        this.mutationHandler = () => {
+            const { hostTextContent } = this;
+            if (hostTextContent && this.translatedValue !== hostTextContent) {
                 this.hostElement.textContent = null;
+                this.value = hostTextContent;
             }
         };
-        this.displayValue = undefined;
         this.substitutions = undefined;
         this.value = undefined;
     }
@@ -46,24 +42,22 @@ const Q2Loc = class {
         this.initValue();
     }
     componentDidLoad() {
-        if ('MutationObserver' in window)
-            this.initMutationObserver();
+        this.initMutationObserver();
     }
     // #endregion
-    // #region Watchers
-    propHandler() {
-        this.displayValue = loc(this.value, this.substitutions);
+    // #region Local Methods
+    get hostTextContent() {
+        return this.hostElement.textContent.trim();
+    }
+    get translatedValue() {
+        return loc(this.value, this.substitutions);
     }
     // #endregion
     // #region Render Methods
     render() {
-        return h("span", { key: '8774b0a4bfb39826f6d7be0640c7a0244ab22a09' }, this.displayValue);
+        return this.translatedValue;
     }
     get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["propHandler"],
-        "substitutions": ["propHandler"]
-    }; }
 };
 Q2Loc.style = Q2LocStyle0;
 

package/dist/esm/q2-loc.entry.js.map

@@ -1 +1 @@
-{"file":"q2-loc.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8qBAA8qB,CAAC;AAChsB,oBAAe,QAAQ;;MCGV,KAAK;;;;;QA4Dd,yBAAoB,GAAG;YACnB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAC5F,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;SACpC,CAAC;QAEF,cAAS,GAAG;YACR,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,EAAE;gBAC5B,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;gBACzB,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;aACvC;iBAAM;gBACH,IAAI,CAAC,WAAW,EAAE,CAAC;aACtB;SACJ,CAAC;QAEF,oBAAe,GAAG;YACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE;gBAC3C,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;gBACzB,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;aACvC;SACJ,CAAC;;;;;;;IA/CF,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAED,iBAAiB;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;KACpB;IAED,gBAAgB;QACZ,IAAI,kBAAkB,IAAI,MAAM;YAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACjE;;;IAOD,WAAW;QACP,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC3D;;;IAgCD,MAAM;QACF,OAAO,+DAAO,IAAI,CAAC,YAAY,CAAQ,CAAC;KAC3C;;;;;;;;;;;","names":[],"sources":["src/components/q2-loc/q2-loc.scss?tag=q2-loc&encapsulation=shadow","src/components/q2-loc/q2-loc.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline\n}","import { Element, Component, Prop, State, Watch, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\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    displayValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /**\n     * The reference to the localization key you would like to display the localized output of.\n     * If no value is provided, any text inside the element will be used as a fallback.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initValue();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('substitutions')\n    propHandler() {\n        this.displayValue = loc(this.value, this.substitutions);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    initValue = async () => {\n        const textContent = this.hostElement.textContent.trim();\n        if (!this.value && textContent) {\n            this.value = textContent;\n            this.hostElement.textContent = null;\n        } else {\n            this.propHandler();\n        }\n    };\n\n    mutationHandler = async () => {\n        const textContent = this.hostElement.textContent.trim();\n        if (textContent && this.value !== textContent) {\n            this.value = textContent;\n            this.hostElement.textContent = null;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <span>{this.displayValue}</span>;\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-loc.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8qBAA8qB,CAAC;AAChsB,oBAAe,QAAQ;;MCGV,KAAK;;;QAqDd,yBAAoB,GAAG;YACnB,IAAI,EAAE,kBAAkB,IAAI,MAAM,CAAC;gBAAE,OAAO;YAC5C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAC5F,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;SACpC,CAAC;QAEF,cAAS,GAAG;YACR,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;YACpC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE;gBAChC,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;aAChC;SACJ,CAAC;QAEF,oBAAe,GAAG;YACd,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;YACjC,IAAI,eAAe,IAAI,IAAI,CAAC,eAAe,KAAK,eAAe,EAAE;gBAC7D,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;gBACpC,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;aAChC;SACJ,CAAC;;;;;;IA7CF,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAED,iBAAiB;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;KACpB;IAED,gBAAgB;QACZ,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;;;IAKD,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KAC9C;IAED,IAAI,eAAe;QACf,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC9C;;;IA4BD,MAAM;QACF,OAAO,IAAI,CAAC,eAAe,CAAC;KAC/B;;;;;;;","names":[],"sources":["src/components/q2-loc/q2-loc.scss?tag=q2-loc","src/components/q2-loc/q2-loc.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline\n}","import { Element, Component, Prop } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: false, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Own Properties\n\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    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /**\n     * The reference to the localization key you would like to display the localized output of.\n     * If no value is provided, any text inside the element will be used as a fallback.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initValue();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hostTextContent(): string {\n        return this.hostElement.textContent.trim();\n    }\n\n    get translatedValue(): string {\n        return loc(this.value, this.substitutions);\n    }\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    initValue = () => {\n        const { hostTextContent } = this;\n        this.hostElement.textContent = null;\n        if (!this.value && hostTextContent) {\n            this.value = hostTextContent;\n        }\n    };\n\n    mutationHandler = () => {\n        const { hostTextContent } = this;\n        if (hostTextContent && this.translatedValue !== hostTextContent) {\n            this.hostElement.textContent = null;\n            this.value = hostTextContent;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.translatedValue;\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/esm/q2-message.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-504f1a9e.js';
+import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-f2a66217.js';
 
 const q2MessageCss = "*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 const Q2MessageStyle0 = q2MessageCss;
@@ -62,7 +62,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '862e4f7aa7ae624a695ce6727f72ed8759584173', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '84084e80aac97b4e4e33a2bcf348094cd88279fb', class: "sr" }), h("div", { key: '4a437099dce9df5657a7f5039a55f5b326d2ee58', class: "sr message-label" }, messageLabel), h("div", { key: '8bf021fb84aa6d4973546060acaddae5d059d351', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '1790d7a0df5758d13c8b76577a4703808cddc832' }))));
+        return (h("div", { key: 'ccca9e80908f73482c73f865743e5f7cd6438d99', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'a9937495e83a7e0852034c36639d8c60ea3c30ac', class: "sr" }), h("div", { key: 'e650f7ef7c2544e44f63ce7a23f33f04145a7e83', class: "sr message-label" }, messageLabel), h("div", { key: 'daa66069373ac3030fb33dc3c88c0621c91bb6a4', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '464a52a941be194c1267beee2c1b307ece17f964' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-modal.entry.js

@@ -0,0 +1,168 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
+import { p as debounce, w as waitForNextPaint, e as hasSlotContent } from './index-f2a66217.js';
+import { s as sanitizeHTMLString } from './sanitize-html-string-735c19f5.js';
+
+const q2ModalCss = "*{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);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-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-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-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}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}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-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.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)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 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:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}";
+const Q2ModalStyle0 = q2ModalCss;
+
+const Q2Modal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tctClick = createEvent(this, "tctClick", 7);
+        this.tctClose = createEvent(this, "tctClose", 7);
+        this.tctOpen = createEvent(this, "tctOpen", 7);
+        this.tctReady = createEvent(this, "tctReady", 3);
+        // #region Own Properties
+        // to prevent background scroll when modal scrolls
+        this.bodyOverflow = '';
+        this.scheduledAfterRender = [];
+        // #endregion
+        // #region Local Methods
+        // to be removed
+        this.iconStyle = () => {
+            const styleObject = {};
+            if (this.iconStrokePrimary)
+                styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;
+            if (this.iconStrokeSecondary)
+                styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;
+            if (this.iconFillColor)
+                styleObject['--tct-icon-fill'] = this.iconFillColor;
+            if (this.iconStrokeWidth)
+                styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;
+            return styleObject;
+        };
+        this.initializeModal = () => {
+            // limits 4 buttons in action slot
+            this.hostElement.querySelectorAll('[slot="action"]').forEach((el, i) => {
+                if (i >= this.maxActionButtons) {
+                    console.warn(`q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`);
+                    el.hidden = true;
+                }
+            });
+            this.contentElement.scrollTo({ top: 0 });
+            this.debouncedScroll();
+        };
+        this.onCancel = (event) => {
+            event.preventDefault();
+            this.closeModal();
+        };
+        this.onClick = (event) => {
+            event.stopPropagation();
+            const eventTarget = event.target;
+            if (!(eventTarget instanceof HTMLElement))
+                return;
+            const slot = eventTarget.getAttribute('slot');
+            if (slot === 'action') {
+                this.tctClick.emit({ value: eventTarget.dataset.value });
+                this.onCancel(event);
+            }
+            else {
+                const isInContent = !!eventTarget.closest('.interior , q2-modal');
+                if (isInContent)
+                    return;
+                this.onCancel(event);
+            }
+        };
+        this.onContentScroll = () => {
+            var _a;
+            const scrollHeight = this.contentElement.scrollHeight;
+            const scrollTop = Math.ceil(this.contentElement.scrollTop);
+            const contentHeight = Math.ceil(((_a = this.contentElement.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height) || 0);
+            // to show bottom gradient when more contents available
+            if (scrollHeight > contentHeight) {
+                scrollHeight <= contentHeight + scrollTop
+                    ? this.contentElement.classList.remove('more-gradient')
+                    : this.contentElement.classList.add('more-gradient');
+            }
+            else {
+                this.contentElement.classList.remove('more-gradient');
+            }
+        };
+        this.maxActionButtons = 4;
+        this.renderStatus = 'is-closing';
+        this.closable = true;
+        this.customMarkup = undefined;
+        this.description = undefined;
+        this.icon = undefined;
+        this.iconFillColor = undefined;
+        this.iconStrokePrimary = undefined;
+        this.iconStrokeSecondary = undefined;
+        this.iconStrokeWidth = undefined;
+        this.imageSrc = undefined;
+        this.title = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        this.dialogElement.removeEventListener('cancel', this.onCancel);
+        (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.debouncedScroll);
+    }
+    componentDidLoad() {
+        this.dialogElement.addEventListener('cancel', this.onCancel);
+        this.tctReady.emit();
+        this.bodyOverflow = document.body.style.overflow;
+        this.debouncedScroll = debounce(this.onContentScroll, 100);
+        this.contentElement.addEventListener('scroll', this.debouncedScroll);
+    }
+    componentDidRender() {
+        var _a;
+        (_a = this.scheduledAfterRender) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
+        this.scheduledAfterRender = [];
+    }
+    // #endregion
+    // #region Public Methods API
+    async closeModal(data) {
+        this.tctClose.emit(data);
+        this.renderStatus = 'is-closing';
+        document.body.style.overflow = this.bodyOverflow;
+        this.dialogElement.addEventListener('transitionend', () => {
+            if (this.renderStatus !== 'is-closing')
+                return;
+            this.dialogElement.close();
+            this.renderStatus = null;
+        }, { once: true });
+    }
+    async openModal(option) {
+        var _a;
+        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.open)
+            return;
+        this.tctOpen.emit(option);
+        await waitForNextPaint();
+        // overwrite the properties if option provided
+        if (option) {
+            this.title = (option === null || option === void 0 ? void 0 : option.title) || this.title;
+            this.description = (option === null || option === void 0 ? void 0 : option.description) || this.description;
+            this.imageSrc = (option === null || option === void 0 ? void 0 : option.imageSrc) || this.imageSrc;
+            this.icon = (option === null || option === void 0 ? void 0 : option.icon) || this.icon;
+            this.iconStrokePrimary = (option === null || option === void 0 ? void 0 : option.iconStrokePrimary) || this.iconStrokePrimary;
+            this.iconStrokeSecondary = (option === null || option === void 0 ? void 0 : option.imageSrc) || this.imageSrc;
+            this.iconFillColor = (option === null || option === void 0 ? void 0 : option.iconFillColor) || this.iconFillColor;
+            this.iconStrokeWidth = (option === null || option === void 0 ? void 0 : option.iconStrokeWidth) || this.iconStrokeWidth;
+            this.description = (option === null || option === void 0 ? void 0 : option.description) || this.description;
+        }
+        this.dialogElement.showModal();
+        this.dialogElement.open = true;
+        document.body.style.overflow = 'hidden';
+        this.initializeModal();
+        this.renderStatus = 'is-opening';
+        this.dialogElement.addEventListener('transitionend', () => {
+            if (this.renderStatus !== 'is-opening')
+                return;
+            this.renderStatus = 'is-open';
+        }, { once: true });
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const interiorClasses = `interior`;
+        const renderStatus = `${this.renderStatus || ''}`;
+        return (h("dialog", { key: '73f146b4e163c9395837b932588870487645b6ce', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '4219e99c0186ffe1a7e0d3a9e81334adb02a4979', class: interiorClasses }, this.title && (h("header", { key: '77d134b2d00f7e4221b25917ab46714446c19b22' }, this.title && h("h2", { key: '0f43942c22bd5b9ca7784bcd4c637c6fc3fb1203', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '6dcf3f2a05cf76a78cf8e2fddd4566d88ddb7421', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '8cdf1b3e2b4990547381f04527e0ca3116802949', type: "close" }))))), h("div", { key: 'e1bcef9f5eca9e2f4504abbbd4d90ba690e4a6d2', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '0bd5d3ca0d3f13c3879b752202697841fffabf94', class: "icon" }, h("q2-icon", { key: 'f236ba5a6f0b14fa865ace8f69813634fa65494c', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '9c2978ebff4bdc67930fe2a5232b5fb92822e3c9', class: "image" }, h("img", { key: '6c5ac47ad9f780e6496b3c8464f003a7f76cbb58', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'cd4bb02b38c02115a5c8601cc0c4371cbe01611d', name: "content" }), this.description && h("p", { key: 'e94d10a5b24629b9a8c965b28a5b439a83e1324b', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'cfc781b852faeba9d089355a92809873f0efdda0', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '57c18d04f08e1e00bf3e869d84e8e2f9d8901ae5' }, h("q2-action-group", { key: '9f27a49f45568166416acf2a9df83d3d0da58cb2', "full-width": true }, h("slot", { key: '64a30e7f6ebaf5f5b99264235d5510835826f566', name: "action" }))))));
+    }
+    get hostElement() { return getElement(this); }
+};
+Q2Modal.style = Q2ModalStyle0;
+
+export { Q2Modal as q2_modal };
+
+//# sourceMappingURL=q2-modal.entry.js.map

package/dist/esm/q2-modal.entry.js.map

@@ -0,0 +1 @@
+{"file":"q2-modal.entry.js","mappings":"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","names":[],"sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.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-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-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    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\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\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .message {\n        font-size: 1rem;\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 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    &.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: flex;\n    justify-content: space-between;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n        padding-top: 0.5rem;\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","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { ModalOption, ModalResponse } from 'q2-tecton-common/lib/utility/modal';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of close button on top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it'll be sanitized as needed for security purpose.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * Plain text, description of the modal.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * Icon type, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * Icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconFillColor: string;\n\n    /**\n     * Icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokePrimary: string;\n\n    /**\n     * Icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeSecondary: string;\n\n    /**\n     * Icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeWidth: string;\n\n    /**\n     * Image URL in modal content, it renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * Plain text, title of the modal on top area.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action button is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.iconStrokePrimary = option?.iconStrokePrimary || this.iconStrokePrimary;\n            this.iconStrokeSecondary = option?.imageSrc || this.imageSrc;\n            this.iconFillColor = option?.iconFillColor || this.iconFillColor;\n            this.iconStrokeWidth = option?.iconStrokeWidth || this.iconStrokeWidth;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\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            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    // to be removed\n\n    iconStyle = () => {\n        const styleObject = {};\n        if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n        if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n        if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n        if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n        return styleObject;\n    };\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon\n                                    type={this.icon}\n                                    style={this.iconStyle()}\n                                ></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/esm/q2-month-picker.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc, o as overrideFocus } from './index-504f1a9e.js';
+import { l as loc, o as overrideFocus } from './index-f2a66217.js';
 
 const q2MonthPickerCss = "*{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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 const Q2MonthPickerStyle0 = q2MonthPickerCss;
@@ -141,10 +141,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a25f142e55a4b9fa27dd0be8a50a965ba79bb544', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '14c16da95a5ff20603d87e8f5bec76037d2df0dc', class: "navigation" }, h("q2-btn", { key: 'f42fcd35aa88a0fd9455e2b10fa9f71d9e706727', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '9208eb9402c7bd1d9a9d52db3153d4b027e2d676', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: 'e6a68034e723e758d9c9824d1a88aeefa73d4ef5', class: "navigation" }, h("q2-btn", { key: '552ca23bfaedc6a787ca78b6db0c027f13b94713', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '48482c7f65b28b1caa86d06d04f5c0294e4effb4', class: "year" }, this.year), h("q2-icon", { key: 'e0dea457dbbeb54609bc75d4b5215893853874bc', class: "year-icon off", type: "chevron-down" })), h("div", { key: '24b722a65945224c964e54944ad810da3ae077e3', class: "month-controller" }, h("div", { key: 'a101dbfe3b8e3a071e3b835eddc1b39455391ab5', class: "cal-year-prev-next" }, h("q2-btn", { key: '8895ef11b257dc13295939d0b8cd2ab933016cd2', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'af38ef5e10c5754e4a0f57a3131e7c12b6792a89', type: "arrow-left" })), h("q2-btn", { key: '03a9b7c64770e77affe5eb60e165e46f63b6d6b6', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '951ecf4a0c546878351fef33efbfaa641c451c8e', type: "arrow-right" }))))), h("div", { key: '48084e3520d2ab0a3dd0f59387e4d4183d958679', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '5a18fa4aef615742b863fd96c3066964186b8f92', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '758eeb0b67194fb19c191965684ec1f96663fb0e', class: "year" }, this.year), h("q2-icon", { key: 'c510bb62e965091cf52213ca7ea6b14fd5f00746', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'b523d3a4d99316266e494b1375ba0f7630e5a2b5', class: "month-controller" }, h("div", { key: '22ad01820573025add8690107ad17a173fee2551', class: "cal-year-prev-next" }, h("q2-btn", { key: '9305d7ea801adc18e2fa613f395c2ad3bcaf16b8', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '01e0409616245ff1f468a3945bf570697a745f7c', type: "arrow-left" })), h("q2-btn", { key: 'c89e7e4c668ab6c69caa767746e9eccbc127e321', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'd15cd07ed6ecc9d0ca4f6b2c1c66e7804195a912', type: "arrow-right" }))))), h("div", { key: 'bc5f547b283296e8caff1d10ab0babd269ff5d80', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '1ad90d319a3589309eec05791fe289c5a8813df9', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-optgroup.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { c as createGuid, l as loc } from './index-504f1a9e.js';
+import { c as createGuid, l as loc } from './index-f2a66217.js';
 
 const q2OptgroupCss = "*{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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 const Q2OptgroupStyle0 = q2OptgroupCss;
@@ -49,7 +49,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '306cf0d06e8664a616974421d45a3083235bc03b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '738affcd788d0f9e2fdf548f4f14d6d98b8a1c7e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'cff8fad7e158854df77ad3d9cb85ea578aa0edc5', class: "q2-optgroup-options" }, h("slot", { key: 'd5daf0a105b29ace1c1f0daf5b99ec6bc8fc684c' }))));
+        return (h("div", { key: '72e78e35e909a826dbff58572ccf2eb922992ad8', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '3c25d95961cf0b41f1633782647a708043033bea', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '126e87b4daeb27564289a5c183f2fa155f8b086f', class: "q2-optgroup-options" }, h("slot", { key: '21e7c0f8f8992915b029343ce917ebb20f0579b5' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-option-list_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7a5365e2.js';
-import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, h as handleDeprecationWarning } from './index-504f1a9e.js';
+import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, h as handleDeprecationWarning } from './index-f2a66217.js';
 
 function sanitizeRegexString(regexString) {
     return regexString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -130,24 +130,26 @@ const Q2OptionList = class {
                         this.searchOptions(key, false);
                         break;
                     }
-                    event.preventDefault();
                     newOption = allOptions.find(element => element.active);
                     if (!newOption || newOption.disabled)
                         break;
                     this.selectOption(newOption);
                     if (multiple)
                         break;
-                    this.popoverState.emit({ open: false, action: 'select' });
+                    this.hostElement.addEventListener('tctClick', () => {
+                        this.popoverState.emit({ open: false, action: 'select' });
+                    }, { once: true });
                     break;
                 case 'Enter':
-                    event.preventDefault();
                     newOption = allOptions.find(element => element.active);
                     if (!newOption || newOption.disabled)
                         break;
                     this.selectOption(newOption);
                     if (multiple)
                         break;
-                    this.popoverState.emit({ open: false, action: 'select' });
+                    this.hostElement.addEventListener('tctClick', () => {
+                        this.popoverState.emit({ open: false, action: 'select' });
+                    }, { once: true });
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -571,7 +573,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '16e12e08dcd1d6514aa59ad8dd20dbf33d352bbe' }, h("div", { key: 'b0eb152206ccb8b93e98d11c32894cb136ffc9a9', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'bccbd0eb8bc8fc92db4629be02ab23e050e32fe9', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '9b5a130d4d0a1a5f594b47669607febf39c0ea87' })))));
+        return (h(Host, { key: '5708785bddc01b545a3b2a94417ad415c6cba32e' }, h("div", { key: 'e6f36e235609824dae19e93edc14d8f8504eb860', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'cbdf42235da01a1fc10efcc0798edeb653fe26ae', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'cec72b3912c96f09a12c171e4227efd29a9097c9' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -879,7 +881,7 @@ const Q2Popover = class {
             containerClasses.push('show');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: 'ec69329181e23e7c8f46fc2d2f5b9453f0f866d1', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '7814ab2ab64fe363d76d1ed34005b7512c877d17', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '7a3fec41c603d97be3bcaa0d7fd48c0517b92f7c' }))));
+        return (h("div", { key: 'dec077f6a9efa7573210773db9eca95d48fb527b', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '4e7ad06454bddbc6443922b4dac5d27f50a8b2c8', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '9128e4469499778c779b32561547358e1f6bd747' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {