q2-tecton-elements 1.54.5 → 1.55.1

package/dist/q2-tecton-elements/q2-legend.entry.js

@@ -1,10 +1,10 @@
 import { r as t, c as e, h as i } from "./index-7a5365e2.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, var(--app-scale-9x, 45px));opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, var(--app-line-height, 1.428571429em));text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, var(--app-line-height, 1.428571429em));text-align:right}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, 24px);opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, var(--app-line-height, 1.428571429em));text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, var(--app-line-height, 1.428571429em));text-align:right}";
 
 const s = n;
 
-const a = class {
+const o = class {
   constructor(i) {
     t(this, i);
     this.click = e(this, "click", 7);
@@ -103,10 +103,10 @@ const a = class {
   // #region Render Methods
   render() {
     return i("click-elsewhere", {
-      key: "b80e97d61b66d2a3950c0e680d8f6fdf0594391a",
+      key: "17df977aa81845d2b4e6db411b2860495ba61e4b",
       onChange: () => this.onClickElsewhere(this)
     }, i("ul", {
-      key: "14dc772fa9b1608e415573e90d4c2780c12adef5"
+      key: "21d4f05b1b2e5f5374e04a8a93249704043ed447"
     }, this.dataWithClasses.map((t => i("li", {
       class: "item"
     }, i("button", {
@@ -140,7 +140,7 @@ const a = class {
   }
 };
 
-a.style = s;
+o.style = s;
 
-export { a as q2_legend };
+export { o as q2_legend };
 //# sourceMappingURL=q2-legend.entry.js.map

package/dist/q2-tecton-elements/q2-legend.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","componentWillLoad","this","watchHoveredItemId","hoveredItemId","watchSelectedItemId","selectedItemId","newItemId","newItemIndex","getDataIndexForId","hoveredItemIndex","selectedItemIndex","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    height: var-list(--tct-legend-item-height, --app-scale-9x, 45px);\n    opacity: 1;\n    padding-block: 0;\n    padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var-list(--tct-legend-item-name-line-height, --app-line-height, 1.428571429em);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-legend-item-value-font-weight, 400);\n    line-height: var-list(--tct-legend-item-value-line-height, --app-line-height, 1.428571429em);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            this.click.emit(null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        this.click.emit(this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        this.mouseenter.emit(this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        this.mouseleave.emit(this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","componentWillLoad","this","watchHoveredItemId","hoveredItemId","watchSelectedItemId","selectedItemId","newItemId","newItemIndex","getDataIndexForId","hoveredItemIndex","selectedItemIndex","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    height: var-list(--tct-legend-item-height, 24px);\n    opacity: 1;\n    padding-block: 0;\n    padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var-list(--tct-legend-item-name-line-height, --app-line-height, 1.428571429em);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-legend-item-value-font-weight, 400);\n    line-height: var-list(--tct-legend-item-value-line-height, --app-line-height, 1.428571429em);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            this.click.emit(null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        this.click.emit(this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        this.mouseenter.emit(this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        this.mouseleave.emit(this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-loc.entry.js

@@ -1,17 +1,16 @@
-import { r as t, h as i, g as n } from "./index-7a5365e2.js";
+import { r as t, g as i } from "./index-7a5365e2.js";
 
-import { l as s } from "./index-504f1a9e.js";
+import { l as n } from "./index-f2a66217.js";
 
 const e = "*{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 o = e;
 
-const r = class {
+const s = class {
   constructor(i) {
     t(this, i);
-    // #endregion
-    // #region Local Methods
-        this.initMutationObserver = () => {
+    this.initMutationObserver = () => {
+      if (!("MutationObserver" in window)) return;
       const t = new MutationObserver(this.mutationHandler);
       t.observe(this.hostElement, {
         childList: true,
@@ -20,23 +19,20 @@ const r = class {
       });
       this.mutationObserver = t;
     };
-    this.initValue = async () => {
-      const t = this.hostElement.textContent.trim();
+    this.initValue = () => {
+      const {hostTextContent: t} = this;
+      this.hostElement.textContent = null;
       if (!this.value && t) {
         this.value = t;
-        this.hostElement.textContent = null;
-      } else {
-        this.propHandler();
       }
     };
-    this.mutationHandler = async () => {
-      const t = this.hostElement.textContent.trim();
-      if (t && this.value !== t) {
-        this.value = t;
+    this.mutationHandler = () => {
+      const {hostTextContent: t} = this;
+      if (t && this.translatedValue !== t) {
         this.hostElement.textContent = null;
+        this.value = t;
       }
     };
-    this.displayValue = undefined;
     this.substitutions = undefined;
     this.value = undefined;
   }
@@ -51,32 +47,27 @@ const r = class {
     this.initValue();
   }
   componentDidLoad() {
-    if ("MutationObserver" in window) this.initMutationObserver();
+    this.initMutationObserver();
   }
   // #endregion
-  // #region Watchers
-  propHandler() {
-    this.displayValue = s(this.value, this.substitutions);
+  // #region Local Methods
+  get hostTextContent() {
+    return this.hostElement.textContent.trim();
+  }
+  get translatedValue() {
+    return n(this.value, this.substitutions);
   }
   // #endregion
   // #region Render Methods
   render() {
-    return i("span", {
-      key: "8774b0a4bfb39826f6d7be0640c7a0244ab22a09"
-    }, this.displayValue);
+    return this.translatedValue;
   }
   get hostElement() {
-    return n(this);
-  }
-  static get watchers() {
-    return {
-      value: [ "propHandler" ],
-      substitutions: [ "propHandler" ]
-    };
+    return i(this);
   }
 };
 
-r.style = o;
+s.style = o;
 
-export { r as q2_loc };
+export { s as q2_loc };
 //# sourceMappingURL=q2-loc.entry.js.map

package/dist/q2-tecton-elements/q2-loc.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2LocCss","Q2LocStyle0","Q2Loc","this","initMutationObserver","observer","MutationObserver","mutationHandler","observe","hostElement","childList","subtree","characterData","mutationObserver","initValue","async","textContent","trim","value","propHandler","disconnectedCallback","_a","disconnect","componentWillLoad","componentDidLoad","window","displayValue","loc","substitutions","render","h","key"],"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"],"mappings":";;;;AAAA,MAAMA,IAAW;;AACjB,MAAAC,IAAeD;;MCGFE,IAAK;;;;;QA4DdC,KAAAC,uBAAuB;MACnB,MAAMC,IAAW,IAAIC,iBAAiBH,KAAKI;MAC3CF,EAASG,QAAQL,KAAKM,aAAa;QAAEC,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFT,KAAKU,mBAAmBR;AAAQ;IAGpCF,KAAAW,YAAYC;MACR,MAAMC,IAAcb,KAAKM,YAAYO,YAAYC;MACjD,KAAKd,KAAKe,SAASF,GAAa;QAC5Bb,KAAKe,QAAQF;QACbb,KAAKM,YAAYO,cAAc;aAC5B;QACHb,KAAKgB;;;IAIbhB,KAAAI,kBAAkBQ;MACd,MAAMC,IAAcb,KAAKM,YAAYO,YAAYC;MACjD,IAAID,KAAeb,KAAKe,UAAUF,GAAa;QAC3Cb,KAAKe,QAAQF;QACbb,KAAKM,YAAYO,cAAc;;;;;;;;;EA7CvC,oBAAAI;;KACIC,IAAAlB,KAAKU,sBAAgB,QAAAQ,WAAA,aAAAA,EAAEC;IACvBnB,KAAKU,mBAAmB;;EAG5B,iBAAAU;IACIpB,KAAKW;;EAGT,gBAAAU;IACI,IAAI,sBAAsBC,QAAQtB,KAAKC;;;;EAQ3C,WAAAe;IACIhB,KAAKuB,eAAeC,EAAIxB,KAAKe,OAAOf,KAAKyB;;;;EAiC7C,MAAAC;IACI,OAAOC,EAAA;MAAAC,KAAA;OAAO5B,KAAKuB"}
+{"version":3,"names":["q2LocCss","Q2LocStyle0","Q2Loc","this","initMutationObserver","window","observer","MutationObserver","mutationHandler","observe","hostElement","childList","subtree","characterData","mutationObserver","initValue","hostTextContent","textContent","value","translatedValue","disconnectedCallback","_a","disconnect","componentWillLoad","componentDidLoad","trim","loc","substitutions","render"],"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"],"mappings":";;;;AAAA,MAAMA,IAAW;;AACjB,MAAAC,IAAeD;;MCGFE,IAAK;;;IAqDdC,KAAAC,uBAAuB;MACnB,MAAM,sBAAsBC,SAAS;MACrC,MAAMC,IAAW,IAAIC,iBAAiBJ,KAAKK;MAC3CF,EAASG,QAAQN,KAAKO,aAAa;QAAEC,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFV,KAAKW,mBAAmBR;AAAQ;IAGpCH,KAAAY,YAAY;MACR,OAAMC,iBAAEA,KAAoBb;MAC5BA,KAAKO,YAAYO,cAAc;MAC/B,KAAKd,KAAKe,SAASF,GAAiB;QAChCb,KAAKe,QAAQF;;;IAIrBb,KAAAK,kBAAkB;MACd,OAAMQ,iBAAEA,KAAoBb;MAC5B,IAAIa,KAAmBb,KAAKgB,oBAAoBH,GAAiB;QAC7Db,KAAKO,YAAYO,cAAc;QAC/Bd,KAAKe,QAAQF;;;;;;;;EA3CrB,oBAAAI;;KACIC,IAAAlB,KAAKW,sBAAgB,QAAAO,WAAA,aAAAA,EAAEC;IACvBnB,KAAKW,mBAAmB;;EAG5B,iBAAAS;IACIpB,KAAKY;;EAGT,gBAAAS;IACIrB,KAAKC;;;;EAMT,mBAAIY;IACA,OAAOb,KAAKO,YAAYO,YAAYQ;;EAGxC,mBAAIN;IACA,OAAOO,EAAIvB,KAAKe,OAAOf,KAAKwB;;;;EA6BhC,MAAAC;IACI,OAAOzB,KAAKgB"}

package/dist/q2-tecton-elements/q2-message.entry.js

@@ -1,14 +1,14 @@
-import { r as t, h as a, g as e } from "./index-7a5365e2.js";
+import { r as t, h as e, g as a } from "./index-7a5365e2.js";
 
-import { o as s, i as o, n as r, t as i, l as n } from "./index-504f1a9e.js";
+import { o as s, i as o, n as r, t as i, l as n } from "./index-f2a66217.js";
 
 const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display: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 p = c;
 
 const d = class {
-  constructor(a) {
-    t(this, a);
+  constructor(e) {
+    t(this, e);
     this.presentToggle = undefined;
     this.appearance = "standard";
     this.description = false;
@@ -44,15 +44,15 @@ const d = class {
     return i();
   }
   messageIcon(t) {
-    const e = {
+    const a = {
       success: "success",
       warning: "warning",
       danger: "error",
       error: "error",
       info: "info"
     };
-    const s = e[t] || e.info;
-    return a("q2-icon", {
+    const s = a[t] || a.info;
+    return e("q2-icon", {
       type: s,
       class: "message-icon"
     });
@@ -61,35 +61,35 @@ const d = class {
   // #region Render Methods
   render() {
     const {isFirefox: t} = this;
-    const e = t && this.presentToggle;
+    const a = t && this.presentToggle;
     const s = !t && this.presentToggle;
     const {description: o} = this;
     const r = n(`tecton.element.message.type.${this.type ? this.type : "info"}`);
-    return a("div", {
-      key: "862e4f7aa7ae624a695ce6727f72ed8759584173",
+    return e("div", {
+      key: "ccca9e80908f73482c73f865743e5f7cd6438d99",
       tabindex: "-1",
       class: "message",
       role: o ? undefined : "alert",
       "aria-live": o ? undefined : "assertive",
       "aria-atomic": o ? undefined : "true",
-      "aria-relevant": o && e ? undefined : "all",
+      "aria-relevant": o && a ? undefined : "all",
       "test-id": "messageContainer"
-    }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && a("div", {
-      key: "84084e80aac97b4e4e33a2bcf348094cd88279fb",
+    }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && e("div", {
+      key: "a9937495e83a7e0852034c36639d8c60ea3c30ac",
       class: "sr"
-    }), a("div", {
-      key: "4a437099dce9df5657a7f5039a55f5b326d2ee58",
+    }), e("div", {
+      key: "e650f7ef7c2544e44f63ce7a23f33f04145a7e83",
       class: "sr message-label"
-    }, r), a("div", {
-      key: "8bf021fb84aa6d4973546060acaddae5d059d351",
+    }, r), e("div", {
+      key: "daa66069373ac3030fb33dc3c88c0621c91bb6a4",
       class: "message-content",
-      "aria-hidden": e ? "true" : undefined
-    }, a("slot", {
-      key: "1790d7a0df5758d13c8b76577a4703808cddc832"
+      "aria-hidden": a ? "true" : undefined
+    }, e("slot", {
+      key: "464a52a941be194c1267beee2c1b307ece17f964"
     })));
   }
   get hostElement() {
-    return e(this);
+    return a(this);
   }
 };
 

package/dist/q2-tecton-elements/q2-modal.entry.js

@@ -0,0 +1,226 @@
+import { r as t, c as i, h as o, g as a } from "./index-7a5365e2.js";
+
+import { p as e, w as r, e as s } from "./index-f2a66217.js";
+
+import { s as d } from "./sanitize-html-string-735c19f5.js";
+
+const n = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@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 c = n;
+
+const l = class {
+  constructor(o) {
+    t(this, o);
+    this.tctClick = i(this, "tctClick", 7);
+    this.tctClose = i(this, "tctClose", 7);
+    this.tctOpen = i(this, "tctOpen", 7);
+    this.tctReady = i(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 t = {};
+      if (this.iconStrokePrimary) t["--tct-icon-stroke-primary"] = this.iconStrokePrimary;
+      if (this.iconStrokeSecondary) t["--tct-icon-stroke-secondary"] = this.iconStrokeSecondary;
+      if (this.iconFillColor) t["--tct-icon-fill"] = this.iconFillColor;
+      if (this.iconStrokeWidth) t["--tct-icon-stroke-width"] = this.iconStrokeWidth;
+      return t;
+    };
+    this.initializeModal = () => {
+      // limits 4 buttons in action slot
+      this.hostElement.querySelectorAll('[slot="action"]').forEach(((t, i) => {
+        if (i >= this.maxActionButtons) {
+          console.warn(`q2-modal allows up to ${this.maxActionButtons} action buttons, [${t.getAttribute("label") || t.textContent}] button is now hidden.`);
+          t.hidden = true;
+        }
+      }));
+      this.contentElement.scrollTo({
+        top: 0
+      });
+      this.debouncedScroll();
+    };
+    this.onCancel = t => {
+      t.preventDefault();
+      this.closeModal();
+    };
+    this.onClick = t => {
+      t.stopPropagation();
+      const i = t.target;
+      if (!(i instanceof HTMLElement)) return;
+      const o = i.getAttribute("slot");
+      if (o === "action") {
+        this.tctClick.emit({
+          value: i.dataset.value
+        });
+        this.onCancel(t);
+      } else {
+        const o = !!i.closest(".interior , q2-modal");
+        if (o) return;
+        this.onCancel(t);
+      }
+    };
+    this.onContentScroll = () => {
+      var t;
+      const i = this.contentElement.scrollHeight;
+      const o = Math.ceil(this.contentElement.scrollTop);
+      const a = Math.ceil(((t = this.contentElement.getBoundingClientRect()) === null || t === void 0 ? void 0 : t.height) || 0);
+      // to show bottom gradient when more contents available
+            if (i > a) {
+        i <= a + o ? 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 t;
+    this.dialogElement.removeEventListener("cancel", this.onCancel);
+    (t = this.contentElement) === null || t === void 0 ? void 0 : t.removeEventListener("scroll", this.debouncedScroll);
+  }
+  componentDidLoad() {
+    this.dialogElement.addEventListener("cancel", this.onCancel);
+    this.tctReady.emit();
+    this.bodyOverflow = document.body.style.overflow;
+    this.debouncedScroll = e(this.onContentScroll, 100);
+    this.contentElement.addEventListener("scroll", this.debouncedScroll);
+  }
+  componentDidRender() {
+    var t;
+    (t = this.scheduledAfterRender) === null || t === void 0 ? void 0 : t.forEach((t => t()));
+    this.scheduledAfterRender = [];
+  }
+  // #endregion
+  // #region Public Methods API
+  async closeModal(t) {
+    this.tctClose.emit(t);
+    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(t) {
+    var i;
+    if ((i = this.dialogElement) === null || i === void 0 ? void 0 : i.open) return;
+    this.tctOpen.emit(t);
+    await r();
+    // overwrite the properties if option provided
+        if (t) {
+      this.title = (t === null || t === void 0 ? void 0 : t.title) || this.title;
+      this.description = (t === null || t === void 0 ? void 0 : t.description) || this.description;
+      this.imageSrc = (t === null || t === void 0 ? void 0 : t.imageSrc) || this.imageSrc;
+      this.icon = (t === null || t === void 0 ? void 0 : t.icon) || this.icon;
+      this.iconStrokePrimary = (t === null || t === void 0 ? void 0 : t.iconStrokePrimary) || this.iconStrokePrimary;
+      this.iconStrokeSecondary = (t === null || t === void 0 ? void 0 : t.imageSrc) || this.imageSrc;
+      this.iconFillColor = (t === null || t === void 0 ? void 0 : t.iconFillColor) || this.iconFillColor;
+      this.iconStrokeWidth = (t === null || t === void 0 ? void 0 : t.iconStrokeWidth) || this.iconStrokeWidth;
+      this.description = (t === null || t === void 0 ? void 0 : t.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 t = `interior`;
+    const i = `${this.renderStatus || ""}`;
+    return o("dialog", {
+      key: "73f146b4e163c9395837b932588870487645b6ce",
+      ref: t => this.dialogElement = t,
+      class: i,
+      onClick: this.onClick
+    }, o("div", {
+      key: "4219e99c0186ffe1a7e0d3a9e81334adb02a4979",
+      class: t
+    }, this.title && o("header", {
+      key: "77d134b2d00f7e4221b25917ab46714446c19b22"
+    }, this.title && o("h2", {
+      key: "0f43942c22bd5b9ca7784bcd4c637c6fc3fb1203",
+      class: "title"
+    }, this.title), !!this.closable && o("q2-btn", {
+      key: "6dcf3f2a05cf76a78cf8e2fddd4566d88ddb7421",
+      class: "btn-close",
+      "test-id": "btnClose",
+      onClick: this.onCancel,
+      label: "tecton.element.modal.close",
+      "hide-label": true
+    }, o("q2-icon", {
+      key: "8cdf1b3e2b4990547381f04527e0ca3116802949",
+      type: "close"
+    }))), o("div", {
+      key: "e1bcef9f5eca9e2f4504abbbd4d90ba690e4a6d2",
+      class: "content",
+      ref: t => this.contentElement = t
+    }, this.icon && o("div", {
+      key: "0bd5d3ca0d3f13c3879b752202697841fffabf94",
+      class: "icon"
+    }, o("q2-icon", {
+      key: "f236ba5a6f0b14fa865ace8f69813634fa65494c",
+      type: this.icon,
+      style: this.iconStyle()
+    })), this.imageSrc && o("div", {
+      key: "9c2978ebff4bdc67930fe2a5232b5fb92822e3c9",
+      class: "image"
+    }, o("img", {
+      key: "6c5ac47ad9f780e6496b3c8464f003a7f76cbb58",
+      src: this.imageSrc
+    })), s(this.hostElement, "content") && o("slot", {
+      key: "cd4bb02b38c02115a5c8601cc0c4371cbe01611d",
+      name: "content"
+    }), this.description && o("p", {
+      key: "e94d10a5b24629b9a8c965b28a5b439a83e1324b",
+      class: "description"
+    }, this.description), this.customMarkup && o("p", {
+      key: "cfc781b852faeba9d089355a92809873f0efdda0",
+      class: "customMarkup",
+      innerHTML: d(this.customMarkup)
+    })), o("footer", {
+      key: "57c18d04f08e1e00bf3e869d84e8e2f9d8901ae5"
+    }, o("q2-action-group", {
+      key: "9f27a49f45568166416acf2a9df83d3d0da58cb2",
+      "full-width": true
+    }, o("slot", {
+      key: "64a30e7f6ebaf5f5b99264235d5510835826f566",
+      name: "action"
+    })))));
+  }
+  get hostElement() {
+    return a(this);
+  }
+};
+
+l.style = c;
+
+export { l as q2_modal };
+//# sourceMappingURL=q2-modal.entry.js.map

package/dist/q2-tecton-elements/q2-modal.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2ModalCss","Q2ModalStyle0","Q2Modal","this","bodyOverflow","scheduledAfterRender","iconStyle","styleObject","iconStrokePrimary","iconStrokeSecondary","iconFillColor","iconStrokeWidth","initializeModal","hostElement","querySelectorAll","forEach","el","i","maxActionButtons","console","warn","getAttribute","textContent","hidden","contentElement","scrollTo","top","debouncedScroll","onCancel","event","preventDefault","closeModal","onClick","stopPropagation","eventTarget","target","HTMLElement","slot","tctClick","emit","value","dataset","isInContent","closest","onContentScroll","scrollHeight","scrollTop","Math","ceil","contentHeight","_a","getBoundingClientRect","height","classList","remove","add","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","tctReady","document","body","style","overflow","debounce","componentDidRender","fn","data","tctClose","renderStatus","close","once","openModal","option","open","tctOpen","waitForNextPaint","title","description","imageSrc","icon","showModal","render","interiorClasses","h","key","ref","class","closable","label","type","src","hasSlotContent","name","customMarkup","innerHTML","sanitizeHTMLString"],"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"],"mappings":"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"}