npm - q2-tecton-elements - Versions diffs - 1.63.1 → 1.64.0 - Mend

q2-tecton-elements 1.63.1 → 1.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (390) hide show

package/dist/components/q2-legend2.js CHANGED Viewed

@@ -111,7 +111,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '6cbca1e406e026c0379c4c78c84b2419d390fa02', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '3e60fc46d73443c251fa80d861c14afc74c58898' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '59a0a6625476d81f9530e0a81fe25fe2b8790d11', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '26022bfd3cc47fd49715b7acc47041b56fbf0058' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/components/q2-legend2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-legend2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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: flex-start;\n background-color: transparent;\n border: none;\n column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n display: flex;\n min-height: var-list(--tct-legend-item-min-height, 15px);\n opacity: 1;\n padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\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(--tct-legend-item-name-line-height, 1);\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 margin-left: auto;\n flex-grow: 0;\n font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-value-font-weight, 400);\n line-height: var(--tct-legend-item-value-line-height, 1);\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"],"version":3}
1	+ {"file":"q2-legend2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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: flex-start;\n background-color: transparent;\n border: none;\n column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n display: flex;\n min-height: var-list(--tct-legend-item-min-height, 15px);\n opacity: 1;\n padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\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(--tct-legend-item-name-line-height, 1);\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 margin-left: auto;\n flex-grow: 0;\n font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-value-font-weight, 400);\n line-height: var(--tct-legend-item-value-line-height, 1);\n text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { 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"],"version":3}

package/dist/components/q2-link2.js CHANGED Viewed

@@ -54,7 +54,7 @@ const Q2Link = /*@__PURE__*/ proxyCustomElement(class Q2Link extends HTMLElement
     // #endregion
     // #region Render Methods
     render() {
-        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { class: "link", onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: "label" }, this.label), h("q2-icon", { type: this.iconType })))) : (h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
+        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { class: "link", onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', rel: this.target === '_blank' ? 'noopener' : undefined, referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: "label" }, this.label), h("q2-icon", { type: this.iconType })))) : (h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
     }
     get hostElement() { return this; }
     static get style() { return q2LinkCss; }

package/dist/components/q2-link2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-link2.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i0GAAi0G;;MCEt0G,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AADnB,IAAA,WAAA,GAAA;;;;;;;;AAYI,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAIzB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;;AAIlB,QAAA,IAAQ,CAAA,QAAA,GAAW,eAAe;;AAoBlC,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;~~AAoF7B~~;;;~~AArEG~~;;;;AAIG;AAEH,IAAA,MAAM,SAAS,GAAA;AACX,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,CAAwB,sBAAA,CAAA,CAAC;AACjF,QAAA,MAA4B,aAA5B,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAwB,KAAK,EAAE;;;;AAM1C,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,MAAM,IAAI,GAAG,CAAC,gBAAgB,CAAC;QAC/B,IAAI,IAAI,CAAC,OAAO;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AACzC,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGzB,IAAA,WAAW,CAAC,KAAiB,EAAA;QACzB,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;AAClB,SAAA,CAAC;;;;IAMN,MAAM,GAAA;QACF,OAAO,IAAI,CAAC,OAAO,KAAK,YAAY,IAChC,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,OAAO,EACP,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,EAEtB,~~CACI~~,CAAA,GAAA,EAAA,~~EAAA~~,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,~~EAAA~~,~~SAAA,EACzB,~~YAAY,EAAA,EAEpB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvC,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAY,CACxC,CACF,KAEN,SACI,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAA,SAAA,EACzB,YAAY,EAEnB,EAAA,IAAI,CAAC,KAAK,CACX,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n opacity: var-list(\n --tct-link-color-standalone-disabled-opacity,\n --tct-link-disabled-opacity,\n --app-disabled-opacity,\n 0.4\n );\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string = 'chevron-right';\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n */\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-link2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n opacity: var-list(\n --tct-link-color-standalone-disabled-opacity,\n --tct-link-disabled-opacity,\n --app-disabled-opacity,\n 0.4\n );\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string = 'chevron-right';\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n */\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n rel={this.target === '_blank' ? 'noopener' : undefined}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-loading2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { h as handleAriaLabel, l as loc } from './index2.js';
 import { s as shapes } from './shapes.js';
 import { g as getOrCreateSpriteContainer } from './sprites.js';
-const q2LoadingCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}#custom-loader-container{min-height:1em;min-width:1em}#custom-loader-container svg{display:block}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{--comp-loading-skeleton-opacity:var(--var-loading-skeleton-opacity, 0.25)}@media (prefers-contrast: more){:host{--comp-loading-skeleton-opacity:var(--var-loading-skeleton-opacity, 1)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-gray-8, #808080)));opacity:var(--comp-loading-skeleton-opacity)}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
+const q2LoadingCss = "@charset \"UTF-8\";*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}#custom-loader-container{min-height:1em;min-width:1em}#custom-loader-container svg{display:block}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .head{fill:none;stroke:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));stroke-width:6;stroke-linecap:round;stroke-dasharray:1 124.6637;stroke-dashoffset:0;transform-origin:25px 25px;animation:spin 2.5s linear infinite, grow 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite}@keyframes spin{to{transform:rotate(720deg)}}@keyframes grow{0%{stroke-dasharray:1 124.6637;stroke-dashoffset:0}50%{stroke-dasharray:94.2478 31.4159;stroke-dashoffset:-31.4159;}100%{stroke-dasharray:1 124.6637;stroke-dashoffset:-125.6637;}}:host{--comp-loading-skeleton-opacity:var(--var-loading-skeleton-opacity, 0.25)}@media (prefers-contrast: more){:host{--comp-loading-skeleton-opacity:var(--var-loading-skeleton-opacity, 1)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-gray-8, #808080)));opacity:var(--comp-loading-skeleton-opacity)}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
 const Q2Loading = /*@__PURE__*/ proxyCustomElement(class Q2Loading extends HTMLElement {
     constructor() {
@@ -24,7 +24,7 @@ const Q2Loading = /*@__PURE__*/ proxyCustomElement(class Q2Loading extends HTMLE
             return (h("div", { id: "custom-loader-container", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
         };
         this.renderHalfCircleSpinner = () => {
-            return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, h("div", { class: "circle circle-1" }), h("div", { class: "circle circle-2" }), !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
+            return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, h("svg", { class: "loader", viewBox: "0 0 50 50", role: "presentation" }, h("circle", { class: "head", cx: "25", cy: "25", r: "20" })), !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
         };
         this.renderSkeletonLoader = () => {
             return (h("div", { class: "q2-loading-skeleton", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, this.shape === 'custom' ? h("slot", null) : this.skeletonShape, h("div", { class: "q2-loading-skeleton-shimmer" }), !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));

package/dist/components/q2-loading2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-loading2.js","mappings":"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","names":["__stencil_proxyCustomElement","skeletonShapes"],"sources":["src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n#custom-loader-container {\n min-height: 1em;\n min-width: 1em;\n\n svg {\n display: block;\n }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n // #region Own Properties\n\n ariaLiveTimer;\n customLoaderClass = 'tct-loading-custom-loader';\n dontUpdateScreenReaderLabel = false;\n liveRegionChangeIndicatorToggle = false;\n observer: IntersectionObserver;\n screenReaderElement: HTMLElement;\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 hasCustomLoader: boolean = false;\n\n @State()\n loaderClone: SVGElement;\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /\n Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n \n When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n \n When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n \n When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n /\n @Prop({ reflect: true })\n counts: string;\n\n /* Hides the loading element from screen readers. /\n @Prop({ reflect: true })\n hideFromScreenReaders: boolean = false;\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /\n The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n \n Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n /\n @Prop({ reflect: true })\n modifiers: string;\n\n /\n The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle \| \"rectangle\" \| \"text\" \| \"table\" \| \"field\" \| \"form\" \| \"detailed-item\" \| \"label-value\";\n /\n @Prop({ reflect: true })\n shape: string;\n\n /* The type of loading element to display. */\n @Prop({ reflect: true })\n type: 'brand' \| 'spinner' \| 'skeleton';\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.cleanupLiveRegionDelay();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.handleType();\n }\n\n componentDidLoad(): void {\n this.setupLiveRegionDelay();\n }\n\n componentDidUpdate(): void {\n this.updateScreenReaderLabel();\n }\n\n componentDidRender(): void {\n if (!this.loaderClone) return;\n if (!this.hasCustomLoader) return;\n const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n customLoaderContainer.appendChild(this.loaderClone);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('tctUpdateLoaders', { target: 'document' })\n onUpdateLoaders() {\n const { customLoaderURL } = this;\n this.hasCustomLoader = !!customLoaderURL;\n this.fetchLoader();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleType() {\n this.fetchLoader();\n }\n\n // #endregion\n // #region Local Methods\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' \|\| !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get customLoaderElement() {\n const { customLoaderURL, customLoaderClass } = this;\n if (!customLoaderURL) return;\n return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n }\n\n get customLoaderURL() {\n const hostComputedStyles = window.getComputedStyle(this.hostElement);\n const loadingVariableURL = hostComputedStyles.getPropertyValue(\n `--tct-loading-custom-${this.type \|\| 'spinner'}-url`\n );\n if (!loadingVariableURL) return;\n\n return loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\n }\n\n get isSkeletonType() {\n return this.type === 'skeleton';\n }\n\n get loaderEventName() {\n const { type = 'spinner', isSkeletonType } = this;\n if (isSkeletonType) return;\n return `tct-loaded-${type}`;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| this.ariaLabel \|\| 'tecton.element.loading.ariaLabel');\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' \|\| !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n checkForLoader() {\n const { loaderEventName, customLoaderClass } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let { customLoaderElement } = this;\n\n // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n if (customLoaderElement?.hasAttribute('data-loaded')) {\n this.cloneLoaderNode();\n return true;\n }\n\n // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the element is loaded\n spriteContainer.addEventListener(\n loaderEventName,\n () => {\n this.cloneLoaderNode();\n },\n { once: true }\n );\n\n // If the loading element exists, we know it's being loaded and will be handled by the event listener\n if (customLoaderElement) return true;\n\n // If loading element does not exist, create a placeholder\n // This will let other icons know the element is being loaded and prevent multiple fetches\n customLoaderElement = document.createElement('div');\n customLoaderElement.classList.add(customLoaderClass);\n customLoaderElement.dataset.url = this.customLoaderURL;\n spriteContainer.appendChild(customLoaderElement);\n return false;\n }\n\n cleanupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n clearTimeout(this.ariaLiveTimer);\n this.observer?.disconnect();\n this.observer = null;\n }\n\n cloneLoaderNode() {\n const { customLoaderElement } = this;\n this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n }\n\n async fetchLoader() {\n const { isSkeletonType, customLoaderURL } = this;\n this.hasCustomLoader = false;\n if (isSkeletonType) {\n return;\n }\n\n if (!customLoaderURL) return;\n this.hasCustomLoader = true;\n\n let { customLoaderElement } = this;\n const loaderExists = this.checkForLoader();\n\n if (loaderExists) return;\n\n try {\n const response = await fetch(customLoaderURL);\n\n // Check for HTTP errors (including CORS issues that return error status)\n if (!response.ok) {\n throw new Error(\n `HTTP ${response.status}: Failed to fetch SVG. ` +\n `This may be due to incorrect URL, server error, or CORS restrictions.`\n );\n }\n\n const svgText = await response.text();\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n const svg = svgDoc.querySelector('svg');\n\n if (!svg) throw new Error('No SVG found in the loaded content');\n\n svg.dataset.loaded = '';\n svg.dataset.url = customLoaderURL;\n svg.classList.add(this.customLoaderClass);\n\n customLoaderElement = this.customLoaderElement;\n if (!customLoaderElement) return;\n if (typeof customLoaderElement.replaceWith === 'function') {\n customLoaderElement.replaceWith(svg);\n } else {\n customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n }\n\n svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n } catch (error) {\n // Provide more specific error messaging for common issues\n if (error instanceof TypeError && error.message === 'Failed to fetch') {\n console.error(\n `Failed to load custom loader from ${customLoaderURL}. ` +\n `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n `Ensure the server hosting the SVG includes proper CORS headers ` +\n `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n error\n );\n } else {\n console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n }\n }\n }\n\n setupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n // The screen reader element starts out empty and is then populated by the\n // label text after a delay to ensure that it is announced by screen\n // readers.\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: [1],\n };\n this.observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n clearTimeout(this.ariaLiveTimer);\n this.ariaLiveTimer = setTimeout(() => {\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n }\n this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n this.dontUpdateScreenReaderLabel = false;\n }, 2000);\n } else {\n clearTimeout(this.ariaLiveTimer);\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = '';\n }\n this.dontUpdateScreenReaderLabel = true;\n }\n });\n }, options);\n this.observer.observe(this.hostElement);\n }\n\n updateScreenReaderLabel() {\n if (this.dontUpdateScreenReaderLabel) return;\n if (!this.screenReaderElement) return;\n this.screenReaderElement.textContent = this.localizedLabel;\n }\n\n // #endregion\n // #region Render Methods\n\n renderCustomLoaderContainer = () => {\n return (\n <div\n id=\"custom-loader-container\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderHalfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n get renderLoader() {\n const loaderMap = {\n default: this.renderSpinner,\n spinner: this.renderSpinner,\n skeleton: this.renderSkeletonLoader,\n custom: this.renderCustomLoaderContainer,\n };\n const { type, hasCustomLoader } = this;\n const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n return loaderMap[loaderMapKey] \|\| loaderMap.default;\n }\n\n renderSkeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderSpinner = () => {\n return this.renderHalfCircleSpinner();\n };\n\n render() {\n return this.renderLoader();\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-loading2.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,0pJAA0pJ;;MCMlqJ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AADtB,IAAA,WAAA,GAAA;;;;AAKI,QAAA,IAAiB,CAAA,iBAAA,GAAG,2BAA2B;AAC/C,QAAA,IAA2B,CAAA,2BAAA,GAAG,KAAK;AACnC,QAAA,IAA+B,CAAA,+BAAA,GAAG,KAAK;;;AAcvC,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;;AAiChC,QAAA,IAAqB,CAAA,qBAAA,GAAY,KAAK;;;AA8RtC,QAAA,IAA2B,CAAA,2BAAA,GAAG,MAAK;AAC/B,YAAA,QACI,CAAA,CAAA,KAAA,EAAA,EACI,EAAE,EAAC,yBAAyB,EACf,aAAA,EAAA,IAAI,CAAC,qBAAqB,GAAG,MAAM,GAAG,SAAS,EACjD,WAAA,EAAA,CAAC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,GAAG,SAAS,EAC7D,IAAI,EAAE,CAAC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,GAAG,SAAS,EAAA,EAEvD,CAAC,IAAI,CAAC,qBAAqB,KACxB,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EAAA,CACvC,CACV,CACC;AAEd,SAAC;AAED,QAAA,IAAuB,CAAA,uBAAA,GAAG,MAAK;AAC3B,YAAA,QACI,WACI,KAAK,EAAC,0CAA0C,EACnC,aAAA,EAAA,IAAI,CAAC,qBAAqB,GAAG,MAAM,GAAG,SAAS,EACjD,WAAA,EAAA,CAAC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,GAAG,SAAS,EAC7D,IAAI,EAAE,CAAC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,GAAG,SAAS,EAAA,EAExD,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EAAA,EAEnB,CAAA,CAAA,QAAA,EAAA,EACI,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,GACR,CACA,EACL,CAAC,IAAI,CAAC,qBAAqB,KACxB,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EACvC,CAAA,CACV,CACC;AAEd,SAAC;AAeD,QAAA,IAAoB,CAAA,oBAAA,GAAG,MAAK;YACxB,QACI,WACI,KAAK,EAAC,qBAAqB,EACd,aAAA,EAAA,IAAI,CAAC,qBAAqB,GAAG,MAAM,GAAG,SAAS,EACjD,WAAA,EAAA,CAAC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,GAAG,SAAS,EAC7D,IAAI,EAAE,CAAC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,GAAG,SAAS,EAAA,EAEvD,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,GAAG,IAAI,CAAC,aAAa,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAO,CAAA,EAC9C,CAAC,IAAI,CAAC,qBAAqB,KACxB,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EACvC,CAAA,CACV,CACC;AAEd,SAAC;AAED,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AACjB,YAAA,OAAO,IAAI,CAAC,uBAAuB,EAAE;AACzC,SAAC;AAOJ;;;IAjVG,oBAAoB,GAAA;QAChB,IAAI,CAAC,sBAAsB,EAAE;;IAGjC,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,UAAU,EAAE;;IAGrB,gBAAgB,GAAA;QACZ,IAAI,CAAC,oBAAoB,EAAE;;IAG/B,kBAAkB,GAAA;QACd,IAAI,CAAC,uBAAuB,EAAE;;IAGlC,kBAAkB,GAAA;;QACd,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE;QACvB,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE;AAC3B,QAAA,MAAM,qBAAqB,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC;AACnG,QAAA,CAAA,EAAA,GAAA,qBAAqB,CAAC,aAAa,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,iBAAiB,CAAA,CAAE,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,EAAE;AAC9E,QAAA,qBAAqB,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;;;;IAOvD,eAAe,GAAA;AACX,QAAA,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI;AAChC,QAAA,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,eAAe;QACxC,IAAI,CAAC,WAAW,EAAE;;;;IAOtB,UAAU,GAAA;QACN,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,WAAW,GAAA;QACX,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAC1C,YAAA,OAAO,SAAS;;AAGpB,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;;AAG7C,IAAA,IAAI,mBAAmB,GAAA;AACnB,QAAA,MAAM,EAAE,eAAe,EAAE,iBAAiB,EAAE,GAAG,IAAI;AACnD,QAAA,IAAI,CAAC,eAAe;YAAE;QACtB,OAAO,QAAQ,CAAC,aAAa,CAAc,CAAA,CAAA,EAAI,iBAAiB,CAAc,WAAA,EAAA,eAAe,CAAI,EAAA,CAAA,CAAC;;AAGtG,IAAA,IAAI,eAAe,GAAA;QACf,MAAM,kBAAkB,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC;AACpE,QAAA,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,gBAAgB,CAC1D,CAAA,qBAAA,EAAwB,IAAI,CAAC,IAAI,IAAI,SAAS,CAAA,IAAA,CAAM,CACvD;AACD,QAAA,IAAI,CAAC,kBAAkB;YAAE;QAEzB,OAAO,kBAAkB,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,uBAAuB,EAAE,EAAE,CAAC;;AAGzE,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU;;AAGnC,IAAA,IAAI,eAAe,GAAA;QACf,MAAM,EAAE,IAAI,GAAG,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI;AACjD,QAAA,IAAI,cAAc;YAAE;QACpB,OAAO,CAAA,WAAA,EAAc,IAAI,CAAA,CAAE;;AAG/B,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,kCAAkC,CAAC;;AAGlF,IAAA,IAAI,YAAY,GAAA;QACZ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AAC7C,YAAA,OAAO,SAAS;;AAGpB,QAAA,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;;AAG7C,IAAA,IAAI,aAAa,GAAA;;QACb,OAAO,MAAA,CAAA,EAAA,GAAAC,MAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAAA,MAAA,EAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;;IAGlF,cAAc,GAAA;AACV,QAAA,MAAM,EAAE,eAAe,EAAE,iBAAiB,EAAE,GAAG,IAAI;AACnD,QAAA,MAAM,eAAe,GAAG,0BAA0B,EAAE;AACpD,QAAA,IAAI,EAAE,mBAAmB,EAAE,GAAG,IAAI;;QAGlC,IAAI,mBAAmB,KAAnB,IAAA,IAAA,mBAAmB,KAAnB,MAAA,GAAA,MAAA,GAAA,mBAAmB,CAAE,YAAY,CAAC,aAAa,CAAC,EAAE;YAClD,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,OAAO,IAAI;;;;AAKf,QAAA,eAAe,CAAC,gBAAgB,CAC5B,eAAe,EACf,MAAK;YACD,IAAI,CAAC,eAAe,EAAE;AAC1B,SAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB;;AAGD,QAAA,IAAI,mBAAmB;AAAE,YAAA,OAAO,IAAI;;;AAIpC,QAAA,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACnD,QAAA,mBAAmB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC;QACpD,mBAAmB,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe;AACtD,QAAA,eAAe,CAAC,WAAW,CAAC,mBAAmB,CAAC;AAChD,QAAA,OAAO,KAAK;;IAGhB,sBAAsB,GAAA;;QAClB,IAAI,IAAI,CAAC,qBAAqB;YAAE;AAEhC,QAAA,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;QAChC,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AAC3B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;IAGxB,eAAe,GAAA;AACX,QAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI;AACpC,QAAA,IAAI,CAAC,WAAW,GAAG,mBAAmB,GAAI,mBAAmB,CAAC,SAAS,CAAC,IAAI,CAAgB,GAAG,SAAS;;AAG5G,IAAA,MAAM,WAAW,GAAA;AACb,QAAA,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI;AAChD,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;QAC5B,IAAI,cAAc,EAAE;YAChB;;AAGJ,QAAA,IAAI,CAAC,eAAe;YAAE;AACtB,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAE3B,QAAA,IAAI,EAAE,mBAAmB,EAAE,GAAG,IAAI;AAClC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;AAE1C,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,IAAI;AACA,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,eAAe,CAAC;;AAG7C,YAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;AACd,gBAAA,MAAM,IAAI,KAAK,CACX,QAAQ,QAAQ,CAAC,MAAM,CAAyB,uBAAA,CAAA;AAC5C,oBAAA,CAAA,qEAAA,CAAuE,CAC9E;;AAGL,YAAA,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AACrC,YAAA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;YAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,eAAe,CAAC;YAC/D,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC;AAEvC,YAAA,IAAI,CAAC,GAAG;AAAE,gBAAA,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC;AAE/D,YAAA,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,EAAE;AACvB,YAAA,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,eAAe;YACjC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;AAEzC,YAAA,mBAAmB,GAAG,IAAI,CAAC,mBAAmB;AAC9C,YAAA,IAAI,CAAC,mBAAmB;gBAAE;AAC1B,YAAA,IAAI,OAAO,mBAAmB,CAAC,WAAW,KAAK,UAAU,EAAE;AACvD,gBAAA,mBAAmB,CAAC,WAAW,CAAC,GAAG,CAAC;;iBACjC;gBACH,mBAAmB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC;;AAGzE,YAAA,GAAG,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;QAC7E,OAAO,KAAK,EAAE;;YAEZ,IAAI,KAAK,YAAY,SAAS,IAAI,KAAK,CAAC,OAAO,KAAK,iBAAiB,EAAE;AACnE,gBAAA,OAAO,CAAC,KAAK,CACT,CAAA,kCAAA,EAAqC,eAAe,CAAI,EAAA,CAAA;oBACpD,CAAsE,oEAAA,CAAA;oBACtE,CAAiE,+DAAA,CAAA;oBACjE,CAAmE,iEAAA,CAAA,EACvE,KAAK,CACR;;iBACE;gBACH,OAAO,CAAC,KAAK,CAAC,CAAA,sCAAA,EAAyC,eAAe,CAAG,CAAA,CAAA,EAAE,KAAK,CAAC;;;;IAK7F,oBAAoB,GAAA;QAChB,IAAI,IAAI,CAAC,qBAAqB;YAAE;;;;AAKhC,QAAA,MAAM,OAAO,GAAG;AACZ,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,CAAC,CAAC,CAAC;SACjB;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,OAAO,IAAG;AAC/C,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,IAAG;AACpB,gBAAA,IAAI,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;AAChC,oBAAA,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAK;AACjC,wBAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;4BAC1B,IAAI,CAAC,mBAAmB,CAAC,WAAW,GAAG,CAAG,EAAA,IAAI,CAAC,cAAc,CAAG,EAAA,IAAI,CAAC,+BAA+B,GAAG,GAAG,GAAG,EAAE,CAAA,CAAE;;AAErH,wBAAA,IAAI,CAAC,+BAA+B,GAAG,CAAC,IAAI,CAAC,+BAA+B;AAC5E,wBAAA,IAAI,CAAC,2BAA2B,GAAG,KAAK;qBAC3C,EAAE,IAAI,CAAC;;qBACL;AACH,oBAAA,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;AAChC,oBAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC1B,wBAAA,IAAI,CAAC,mBAAmB,CAAC,WAAW,GAAG,EAAE;;AAE7C,oBAAA,IAAI,CAAC,2BAA2B,GAAG,IAAI;;AAE/C,aAAC,CAAC;SACL,EAAE,OAAO,CAAC;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG3C,uBAAuB,GAAA;QACnB,IAAI,IAAI,CAAC,2BAA2B;YAAE;QACtC,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE;QAC/B,IAAI,CAAC,mBAAmB,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc;;AAsD9D,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,MAAM,SAAS,GAAG;YACd,OAAO,EAAE,IAAI,CAAC,aAAa;YAC3B,OAAO,EAAE,IAAI,CAAC,aAAa;YAC3B,QAAQ,EAAE,IAAI,CAAC,oBAAoB;YACnC,MAAM,EAAE,IAAI,CAAC,2BAA2B;SAC3C;AACD,QAAA,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,IAAI;QACtC,MAAM,YAAY,GAAG,eAAe,GAAG,QAAQ,GAAG,IAAI;QAEtD,OAAO,SAAS,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC,OAAO;;IA2BvD,MAAM,GAAA;AACF,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","skeletonShapes"],"sources":["src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n#custom-loader-container {\n min-height: 1em;\n min-width: 1em;\n\n svg {\n display: block;\n }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n // #region Own Properties\n\n ariaLiveTimer;\n customLoaderClass = 'tct-loading-custom-loader';\n dontUpdateScreenReaderLabel = false;\n liveRegionChangeIndicatorToggle = false;\n observer: IntersectionObserver;\n screenReaderElement: HTMLElement;\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 hasCustomLoader: boolean = false;\n\n @State()\n loaderClone: SVGElement;\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /\n Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n \n When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n \n When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n \n When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n /\n @Prop({ reflect: true })\n counts: string;\n\n /* Hides the loading element from screen readers. /\n @Prop({ reflect: true })\n hideFromScreenReaders: boolean = false;\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /\n The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n \n Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n /\n @Prop({ reflect: true })\n modifiers: string;\n\n /\n The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle \| \"rectangle\" \| \"text\" \| \"table\" \| \"field\" \| \"form\" \| \"detailed-item\" \| \"label-value\";\n /\n @Prop({ reflect: true })\n shape: string;\n\n /* The type of loading element to display. */\n @Prop({ reflect: true })\n type: 'brand' \| 'spinner' \| 'skeleton';\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.cleanupLiveRegionDelay();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.handleType();\n }\n\n componentDidLoad(): void {\n this.setupLiveRegionDelay();\n }\n\n componentDidUpdate(): void {\n this.updateScreenReaderLabel();\n }\n\n componentDidRender(): void {\n if (!this.loaderClone) return;\n if (!this.hasCustomLoader) return;\n const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n customLoaderContainer.appendChild(this.loaderClone);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('tctUpdateLoaders', { target: 'document' })\n onUpdateLoaders() {\n const { customLoaderURL } = this;\n this.hasCustomLoader = !!customLoaderURL;\n this.fetchLoader();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleType() {\n this.fetchLoader();\n }\n\n // #endregion\n // #region Local Methods\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' \|\| !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get customLoaderElement() {\n const { customLoaderURL, customLoaderClass } = this;\n if (!customLoaderURL) return;\n return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n }\n\n get customLoaderURL() {\n const hostComputedStyles = window.getComputedStyle(this.hostElement);\n const loadingVariableURL = hostComputedStyles.getPropertyValue(\n `--tct-loading-custom-${this.type \|\| 'spinner'}-url`\n );\n if (!loadingVariableURL) return;\n\n return loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\n }\n\n get isSkeletonType() {\n return this.type === 'skeleton';\n }\n\n get loaderEventName() {\n const { type = 'spinner', isSkeletonType } = this;\n if (isSkeletonType) return;\n return `tct-loaded-${type}`;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| this.ariaLabel \|\| 'tecton.element.loading.ariaLabel');\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' \|\| !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n checkForLoader() {\n const { loaderEventName, customLoaderClass } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let { customLoaderElement } = this;\n\n // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n if (customLoaderElement?.hasAttribute('data-loaded')) {\n this.cloneLoaderNode();\n return true;\n }\n\n // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the element is loaded\n spriteContainer.addEventListener(\n loaderEventName,\n () => {\n this.cloneLoaderNode();\n },\n { once: true }\n );\n\n // If the loading element exists, we know it's being loaded and will be handled by the event listener\n if (customLoaderElement) return true;\n\n // If loading element does not exist, create a placeholder\n // This will let other icons know the element is being loaded and prevent multiple fetches\n customLoaderElement = document.createElement('div');\n customLoaderElement.classList.add(customLoaderClass);\n customLoaderElement.dataset.url = this.customLoaderURL;\n spriteContainer.appendChild(customLoaderElement);\n return false;\n }\n\n cleanupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n clearTimeout(this.ariaLiveTimer);\n this.observer?.disconnect();\n this.observer = null;\n }\n\n cloneLoaderNode() {\n const { customLoaderElement } = this;\n this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n }\n\n async fetchLoader() {\n const { isSkeletonType, customLoaderURL } = this;\n this.hasCustomLoader = false;\n if (isSkeletonType) {\n return;\n }\n\n if (!customLoaderURL) return;\n this.hasCustomLoader = true;\n\n let { customLoaderElement } = this;\n const loaderExists = this.checkForLoader();\n\n if (loaderExists) return;\n\n try {\n const response = await fetch(customLoaderURL);\n\n // Check for HTTP errors (including CORS issues that return error status)\n if (!response.ok) {\n throw new Error(\n `HTTP ${response.status}: Failed to fetch SVG. ` +\n `This may be due to incorrect URL, server error, or CORS restrictions.`\n );\n }\n\n const svgText = await response.text();\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n const svg = svgDoc.querySelector('svg');\n\n if (!svg) throw new Error('No SVG found in the loaded content');\n\n svg.dataset.loaded = '';\n svg.dataset.url = customLoaderURL;\n svg.classList.add(this.customLoaderClass);\n\n customLoaderElement = this.customLoaderElement;\n if (!customLoaderElement) return;\n if (typeof customLoaderElement.replaceWith === 'function') {\n customLoaderElement.replaceWith(svg);\n } else {\n customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n }\n\n svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n } catch (error) {\n // Provide more specific error messaging for common issues\n if (error instanceof TypeError && error.message === 'Failed to fetch') {\n console.error(\n `Failed to load custom loader from ${customLoaderURL}. ` +\n `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n `Ensure the server hosting the SVG includes proper CORS headers ` +\n `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n error\n );\n } else {\n console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n }\n }\n }\n\n setupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n // The screen reader element starts out empty and is then populated by the\n // label text after a delay to ensure that it is announced by screen\n // readers.\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: [1],\n };\n this.observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n clearTimeout(this.ariaLiveTimer);\n this.ariaLiveTimer = setTimeout(() => {\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n }\n this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n this.dontUpdateScreenReaderLabel = false;\n }, 2000);\n } else {\n clearTimeout(this.ariaLiveTimer);\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = '';\n }\n this.dontUpdateScreenReaderLabel = true;\n }\n });\n }, options);\n this.observer.observe(this.hostElement);\n }\n\n updateScreenReaderLabel() {\n if (this.dontUpdateScreenReaderLabel) return;\n if (!this.screenReaderElement) return;\n this.screenReaderElement.textContent = this.localizedLabel;\n }\n\n // #endregion\n // #region Render Methods\n\n renderCustomLoaderContainer = () => {\n return (\n <div\n id=\"custom-loader-container\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderHalfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n <svg\n class=\"loader\"\n viewBox=\"0 0 50 50\"\n role=\"presentation\"\n >\n <circle\n class=\"head\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n />\n </svg>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n get renderLoader() {\n const loaderMap = {\n default: this.renderSpinner,\n spinner: this.renderSpinner,\n skeleton: this.renderSkeletonLoader,\n custom: this.renderCustomLoaderContainer,\n };\n const { type, hasCustomLoader } = this;\n const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n return loaderMap[loaderMapKey] \|\| loaderMap.default;\n }\n\n renderSkeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderSpinner = () => {\n return this.renderHalfCircleSpinner();\n };\n\n render() {\n return this.renderLoader();\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-modal.js CHANGED Viewed

@@ -161,7 +161,7 @@ const Q2Modal$1 = /*@__PURE__*/ proxyCustomElement(class Q2Modal extends HTMLEle
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '09e909ca6de730e2d34ec1796fcdb2bdaf077166', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '1410c1e9c86101eb164a6eaca3332fe2fc915bd2', class: interiorClasses }, this.title && (h("header", { key: 'be170cc01cfaa65937479d0f062fab907eefd585' }, this.title && h("h2", { key: 'c3a4ebdf0568fac516703ef48d3e09a3aba48a52', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '0e08fcfe0404d581e023ee51052bd0bc95c65a46', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '6506b58253688e24bd53cd7d9f96022652ace643', type: "close" }))))), h("div", { key: 'e6509c517e7587bf4d5ce17900d6c3d1bf236544', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '1bd63c250c3198063ce71c7ccc39b527bae734d6', class: "icon" }, h("q2-icon", { key: '1c51ba9f9e7ec43080345e27e5a14d2ce0e259d9', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: 'f2f424901875185ae40a1775a63179357f31882c', class: "image" }, h("img", { key: '9231e2ea874adc43095662f6c6664905737f3c9d', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '4b3163332aca9aa4c9804405174e16c3854ddd61', name: "content" }), this.description && h("p", { key: '997cf420e09ffd589dde31e5c47c499cbc3b110c', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'bf9fac18c98e3a4f2ad27e7d04feb4b54e2fa958', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '48a2885c34727d6eda0636e27ee746ba90d1087d' }, h("q2-action-group", { key: 'a48b5075f4372219f1179fae43272df8ed0aa96a', "full-width": true }, h("slot", { key: 'ccfa5cbef0a4078dd3c0beb13bf78e8b1fcd74e3', name: "action" }))))));
+        return (h("dialog", { key: '7db31ae90932b6b1df6e7a6b0c992e171cd86160', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'e67bec3d468bab0e51c7f84c252b307ef25f92f7', class: interiorClasses }, this.title && (h("header", { key: 'ca40e88820e2f31d0f1d393de9e6d840ab4e662e' }, this.title && h("h2", { key: 'b5869575b4612f2ddb7f4150f810d72e09f7faaa', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'fd5a52a8b1e33e99c0fc3b394a2490f0bbd43786', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '8c856e1123f325812fb13870a42f061f86d0678e', type: "close" }))))), h("div", { key: '9425f4ec9ec0e27fc5d5ad6f24a64b49bb13b0d5', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '818a5c5966193c48d37a747fae405b742a80de2d', class: "icon" }, h("q2-icon", { key: '2193e8050d9928c52c9ebe48b8277b8911ed7930', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '7632e57e2781e537899a0222583cb47670a3808a', class: "image" }, h("img", { key: 'efd8e6944690d5c01fe2abf060d3e9752a03d46e', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '7f1f8d207eec860c3a2ea913dab5ce95fa202488', name: "content" }), this.description && h("p", { key: '4361a7b1228e9f6a26a9a4bfeca83372424302d6', class: "description" }, this.description), this.customMarkup && (h("p", { key: '3160ecf8fc9b4234cc784c9fd4d11d2fc26618fd', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'ed648d32e27dca6276525e6f2f15322cf03ebac5' }, h("q2-action-group", { key: '09dac29abbaec3823163c6726196373c9e04251f', "full-width": true }, h("slot", { key: '183ab048e99c4e63f428edfc85bdf348308ecfff', name: "action" }))))));
     }
     get hostElement() { return this; }
     static get style() { return q2ModalCss; }

package/dist/components/q2-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-modal.js","mappings":"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","names":["Q2Modal","__stencil_proxyCustomElement"],"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/*\n @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\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 the close button in the top right corner.\n /\n @Prop({ reflect: true })\n closable: boolean = true;\n\n /\n Allows HTML markup as modal content, but it will be sanitized for security purposes.\n /\n @Prop()\n customMarkup: string;\n\n /\n A plain text description of the modal. Use this to provide context or information to the user.\n /\n @Prop()\n description: string;\n\n /\n The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n icon: string;\n\n /\n The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconFillColor: string;\n\n /\n The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokePrimary: string;\n\n /\n The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeSecondary: string;\n\n /\n The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeWidth: string;\n\n /\n An image URL to be displayed beneath the title. It renders with 100% width.\n /\n @Prop({ reflect: true })\n imageSrc: string;\n\n /\n A plain text title of the modal displayed at the top.\n /\n @Prop({ mutable: true, reflect: true })\n title: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when one of action buttons is clicked.\n /\n @Event()\n tctClick: EventEmitter;\n\n /\n Emitted when the 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}
1	+ {"file":"q2-modal.js","mappings":"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","names":["Q2Modal","__stencil_proxyCustomElement"],"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 { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/*\n @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\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 the close button in the top right corner.\n /\n @Prop({ reflect: true })\n closable: boolean = true;\n\n /\n Allows HTML markup as modal content, but it will be sanitized for security purposes.\n /\n @Prop()\n customMarkup: string;\n\n /\n A plain text description of the modal. Use this to provide context or information to the user.\n /\n @Prop()\n description: string;\n\n /\n The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n icon: string;\n\n /\n The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconFillColor: string;\n\n /\n The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokePrimary: string;\n\n /\n The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeSecondary: string;\n\n /\n The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeWidth: string;\n\n /\n An image URL to be displayed beneath the title. It renders with 100% width.\n /\n @Prop({ reflect: true })\n imageSrc: string;\n\n /\n A plain text title of the modal displayed at the top.\n /\n @Prop({ mutable: true, reflect: true })\n title: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when one of action buttons is clicked.\n /\n @Event()\n tctClick: EventEmitter;\n\n /\n Emitted when the 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/components/q2-mutation-observer.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface Q2MutationObserver extends Components.Q2MutationObserver, HTMLElement {}
+export const Q2MutationObserver: {
+    prototype: Q2MutationObserver;
+    new (): Q2MutationObserver;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-mutation-observer.js ADDED Viewed

@@ -0,0 +1,130 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+const Q2MutationObserver$1 = /*@__PURE__*/ proxyCustomElement(class Q2MutationObserver extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tctMutate = createEvent(this, "tctMutate", 7);
+        this.observedElements = [];
+        /**
+         * Determines whether or not to monitor children's attributes.
+         */
+        this.observeAttributes = false;
+        /**
+         * Determines whether or not to monitor children's child list.
+         */
+        this.observeChildList = false;
+        /**
+         * Determines whether or not to monitor children's sub tree.
+         */
+        this.observeSubTree = false;
+        // #endregion
+        // #region Local Methods
+        this.handleSlotChange = () => {
+            if (this.disabled)
+                return;
+            this.startObserver();
+        };
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.stopObserver();
+        this.mutationObserver = null;
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(mutationEntries => {
+                this.tctMutate.emit({ entries: mutationEntries });
+                this.currentMutationObserverEntries = mutationEntries;
+            });
+        }
+        else {
+            console.warn('MutationObserver is not defined.');
+        }
+        if (!this.disabled) {
+            this.startObserver();
+        }
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Returns the latest entries reported by the component.
+     */
+    async getCurrentMutationEntries() {
+        return this.currentMutationObserverEntries || [];
+    }
+    // #endregion
+    // #region Watchers
+    disabledUpdated(newVal) {
+        if (newVal) {
+            this.stopObserver();
+        }
+        else {
+            this.startObserver();
+        }
+    }
+    startObserver() {
+        var _a, _b;
+        const slot = this.hostElement.shadowRoot.querySelector('slot');
+        if (slot === null)
+            return;
+        const elements = (_b = (_a = slot.assignedElements) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : [];
+        // Unwatch previous elements
+        this.observedElements = [];
+        // Watch new elements
+        elements.forEach(el => {
+            var _a;
+            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
+                attributes: this.observeAttributes,
+                attributeOldValue: this.observeAttributes,
+                childList: this.observeChildList,
+                subtree: this.observeSubTree,
+            });
+            this.observedElements.push(el);
+        });
+    }
+    stopObserver() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return h("slot", { key: '7fdc58cd6c9e2cb77de3822b51f3a10d24fa312e', onSlotchange: this.handleSlotChange });
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "disabled": ["disabledUpdated"]
+    }; }
+}, [1, "q2-mutation-observer", {
+        "disabled": [516],
+        "observeAttributes": [516, "observe-attributes"],
+        "observeChildList": [516, "observe-child-list"],
+        "observeSubTree": [516, "observe-sub-tree"],
+        "getCurrentMutationEntries": [64]
+    }, undefined, {
+        "disabled": ["disabledUpdated"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["q2-mutation-observer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "q2-mutation-observer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Q2MutationObserver$1);
+            }
+            break;
+    } });
+}
+const Q2MutationObserver = Q2MutationObserver$1;
+const defineCustomElement = defineCustomElement$1;
+export { Q2MutationObserver, defineCustomElement };
+//# sourceMappingURL=q2-mutation-observer.js.map
+//# sourceMappingURL=q2-mutation-observer.js.map