q2-tecton-elements 1.59.1 → 1.60.1

package/dist/collection/components/q2-loading/q2-loading.js

@@ -1,46 +1,152 @@
 import { h } from "@stencil/core";
 import { handleAriaLabel, loc } from "../../utils/index";
 import skeletonShapes from "./skeleton/shapes";
+import { getOrCreateSpriteContainer } from "../../utils/sprites";
 export class Q2Loading {
     constructor() {
-        this.halfCircleSpinner = () => {
-            return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-label": this.localizedLabel, role: "status", "aria-live": "polite" }, h("div", { class: "circle circle-1" }), h("div", { class: "circle circle-2" })));
+        this.dontUpdateScreenReaderLabel = false;
+        this.liveRegionChangeIndicatorToggle = false;
+        this.customLoaderClass = 'tct-loading-custom-loader';
+        this.hasCustomLoader = false;
+        /** Hides the loading element from screen readers. */
+        this.hideFromScreenReaders = false;
+        // #endregion
+        // #region Render Methods
+        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) }))));
         };
-        this.skeletonLoader = () => {
-            return (h("div", { class: "q2-loading-skeleton", "aria-label": this.localizedLabel, role: "status", "aria-live": "polite" }, this.shape === 'custom' ? h("slot", null) : this.skeletonShape, h("div", { class: "q2-loading-skeleton-shimmer" })));
+        this.renderCustomLoaderContainer = () => {
+            return (h("div", { id: "custom-loader-container", class: "q2-loading-animation", "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.spinner = () => {
-            return this.halfCircleSpinner();
+        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) }))));
+        };
+        this.renderSpinner = () => {
+            return this.renderHalfCircleSpinner();
         };
     }
     // #endregion
     // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.cleanupLiveRegionDelay();
+    }
     componentWillLoad() {
         handleAriaLabel(this);
+        this.handleType();
+    }
+    componentDidLoad() {
+        this.setupLiveRegionDelay();
+    }
+    componentDidUpdate() {
+        this.updateScreenReaderLabel();
+    }
+    componentDidRender() {
+        var _a;
+        if (!this.loaderClone)
+            return;
+        if (!this.hasCustomLoader)
+            return;
+        const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');
+        (_a = customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)) === null || _a === void 0 ? void 0 : _a.remove();
+        customLoaderContainer.appendChild(this.loaderClone);
+    }
+    // #endregion
+    // #region Listeners
+    onUpdateLoaders() {
+        const { customLoaderURL } = this;
+        this.hasCustomLoader = !!customLoaderURL;
+        this.fetchLoader();
     }
     // #endregion
     // #region Watchers
-    ariaLabelObserver() {
-        handleAriaLabel(this);
+    handleType() {
+        this.fetchLoader();
+    }
+    async fetchLoader() {
+        const { isSkeletonType, customLoaderURL } = this;
+        this.hasCustomLoader = false;
+        if (isSkeletonType) {
+            return;
+        }
+        if (!customLoaderURL)
+            return;
+        this.hasCustomLoader = true;
+        let { customLoaderElement } = this;
+        const loaderExists = this.checkForLoader();
+        if (loaderExists)
+            return;
+        try {
+            const response = await fetch(customLoaderURL);
+            // Check for HTTP errors (including CORS issues that return error status)
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: Failed to fetch SVG. ` +
+                    `This may be due to incorrect URL, server error, or CORS restrictions.`);
+            }
+            const svgText = await response.text();
+            const parser = new DOMParser();
+            const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
+            const svg = svgDoc.querySelector('svg');
+            if (!svg)
+                throw new Error('No SVG found in the loaded content');
+            svg.dataset.loaded = '';
+            svg.dataset.url = customLoaderURL;
+            svg.classList.add(this.customLoaderClass);
+            customLoaderElement = this.customLoaderElement;
+            if (!customLoaderElement)
+                return;
+            if (typeof customLoaderElement.replaceWith === 'function') {
+                customLoaderElement.replaceWith(svg);
+            }
+            else {
+                customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);
+            }
+            svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));
+        }
+        catch (error) {
+            // Provide more specific error messaging for common issues
+            if (error instanceof TypeError && error.message === 'Failed to fetch') {
+                console.error(`Failed to load custom loader from ${customLoaderURL}. ` +
+                    `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +
+                    `Ensure the server hosting the SVG includes proper CORS headers ` +
+                    `(Access-Control-Allow-Origin) or host the SVG on the same domain.`, error);
+            }
+            else {
+                console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);
+            }
+        }
     }
     // #endregion
     // #region Local Methods
+    get customLoaderURL() {
+        const hostComputedStyles = window.getComputedStyle(this.hostElement);
+        const loadingVariableURL = hostComputedStyles.getPropertyValue(`--tct-loading-custom-${this.type || 'spinner'}-url`);
+        if (!loadingVariableURL)
+            return;
+        return loadingVariableURL.trim().replace(/^url\(['"]?|['"]?\)$/g, '');
+    }
+    get isSkeletonType() {
+        return this.type === 'skeleton';
+    }
+    get loaderEventName() {
+        const { type = 'spinner', isSkeletonType } = this;
+        if (isSkeletonType)
+            return;
+        return `tct-loaded-${type}`;
+    }
+    get customLoaderElement() {
+        const { customLoaderURL, customLoaderClass } = this;
+        if (!customLoaderURL)
+            return;
+        return document.querySelector(`.${customLoaderClass}[data-url="${customLoaderURL}"]`);
+    }
     get countsArray() {
         if (this.type !== 'skeleton' || !this.counts) {
             return undefined;
         }
         return this.counts.split('x').map(Number);
     }
-    get loader() {
-        const loaderMap = {
-            default: this.spinner,
-            spinner: this.spinner,
-            skeleton: this.skeletonLoader,
-        };
-        return loaderMap[this.type] || loaderMap.default;
-    }
     get localizedLabel() {
-        return loc(this.label || 'tecton.element.loading.ariaLabel');
+        return loc(this.label || this.ariaLabel || 'tecton.element.loading.ariaLabel');
     }
     get modifiersSet() {
         if (this.type !== 'skeleton' || !this.modifiers) {
@@ -52,17 +158,96 @@ export class Q2Loading {
         var _a, _b;
         return (_b = (_a = skeletonShapes[this.shape]) === null || _a === void 0 ? void 0 : _a.call(skeletonShapes, this.countsArray, this.modifiersSet)) !== null && _b !== void 0 ? _b : '';
     }
-    get spinnerShape() {
-        const spinnerMap = {
-            default: this.halfCircleSpinner,
-            'half-circle': this.halfCircleSpinner,
+    checkForLoader() {
+        const { loaderEventName, customLoaderClass } = this;
+        const spriteContainer = getOrCreateSpriteContainer();
+        let { customLoaderElement } = this;
+        // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need
+        if (customLoaderElement === null || customLoaderElement === void 0 ? void 0 : customLoaderElement.hasAttribute('data-loaded')) {
+            this.cloneLoaderNode();
+            return true;
+        }
+        // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded
+        // We'll listen for the event that will be dispatched when the element is loaded
+        spriteContainer.addEventListener(loaderEventName, () => {
+            this.cloneLoaderNode();
+        }, { once: true });
+        // If the loading element exists, we know it's being loaded and will be handled by the event listener
+        if (customLoaderElement)
+            return true;
+        // If loading element does not exist, create a placeholder
+        // This will let other icons know the element is being loaded and prevent multiple fetches
+        customLoaderElement = document.createElement('div');
+        customLoaderElement.classList.add(customLoaderClass);
+        customLoaderElement.dataset.url = this.customLoaderURL;
+        spriteContainer.appendChild(customLoaderElement);
+        return false;
+    }
+    cloneLoaderNode() {
+        const { customLoaderElement } = this;
+        this.loaderClone = customLoaderElement ? customLoaderElement.cloneNode(true) : undefined;
+    }
+    cleanupLiveRegionDelay() {
+        if (this.hideFromScreenReaders)
+            return;
+        clearTimeout(this.ariaLiveTimer);
+        this.observer.disconnect();
+        this.observer = null;
+    }
+    setupLiveRegionDelay() {
+        if (this.hideFromScreenReaders)
+            return;
+        // The screen reader element starts out empty and is then populated by the
+        // label text after a delay to ensure that it is announced by screen
+        // readers.
+        const options = {
+            root: null,
+            rootMargin: '0px',
+            threshold: [1],
         };
-        return spinnerMap[this.type] || spinnerMap.default;
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    clearTimeout(this.ariaLiveTimer);
+                    this.ariaLiveTimer = setTimeout(() => {
+                        if (this.screenReaderElement) {
+                            this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;
+                        }
+                        this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;
+                        this.dontUpdateScreenReaderLabel = false;
+                    }, 2000);
+                }
+                else {
+                    clearTimeout(this.ariaLiveTimer);
+                    if (this.screenReaderElement) {
+                        this.screenReaderElement.textContent = '';
+                    }
+                    this.dontUpdateScreenReaderLabel = true;
+                }
+            });
+        }, options);
+        this.observer.observe(this.hostElement);
+    }
+    updateScreenReaderLabel() {
+        if (this.dontUpdateScreenReaderLabel)
+            return;
+        if (!this.screenReaderElement)
+            return;
+        this.screenReaderElement.textContent = this.localizedLabel;
+    }
+    get renderLoader() {
+        const loaderMap = {
+            default: this.renderSpinner,
+            spinner: this.renderSpinner,
+            skeleton: this.renderSkeletonLoader,
+            custom: this.renderCustomLoaderContainer,
+        };
+        const { type, hasCustomLoader } = this;
+        const loaderMapKey = hasCustomLoader ? 'custom' : type;
+        return loaderMap[loaderMapKey] || loaderMap.default;
     }
-    // #endregion
-    // #region Render Methods
     render() {
-        return this.loader();
+        return this.renderLoader();
     }
     static get is() { return "q2-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +364,26 @@ export class Q2Loading {
                 "setter": false,
                 "reflect": true
             },
+            "hideFromScreenReaders": {
+                "type": "boolean",
+                "attribute": "hide-from-screen-readers",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the loading element from screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "shape": {
                 "type": "string",
                 "attribute": "shape",
@@ -206,8 +411,8 @@ export class Q2Loading {
                 "attribute": "type",
                 "mutable": false,
                 "complexType": {
-                    "original": "'spinner' | 'skeleton'",
-                    "resolved": "\"skeleton\" | \"spinner\"",
+                    "original": "'brand' | 'spinner' | 'skeleton'",
+                    "resolved": "\"brand\" | \"skeleton\" | \"spinner\"",
                     "references": {}
                 },
                 "required": false,
@@ -222,11 +427,26 @@ export class Q2Loading {
             }
         };
     }
+    static get states() {
+        return {
+            "loaderClone": {},
+            "hasCustomLoader": {}
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
-                "propName": "ariaLabel",
-                "methodName": "ariaLabelObserver"
+                "propName": "type",
+                "methodName": "handleType"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "tctUpdateLoaders",
+                "method": "onUpdateLoaders",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/q2-loading/q2-loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-loading.js","sourceRoot":"","sources":["../../../../src/components/q2-loading/q2-loading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\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    /** 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: 'spinner' | 'skeleton';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\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 loader() {\n        const loaderMap = {\n            default: this.spinner,\n            spinner: this.spinner,\n            skeleton: this.skeletonLoader,\n        };\n\n        return loaderMap[this.type] || loaderMap.default;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || '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    get spinnerShape() {\n        const spinnerMap = {\n            default: this.halfCircleSpinner,\n            'half-circle': this.halfCircleSpinner,\n        };\n\n        return spinnerMap[this.type] || spinnerMap.default;\n    }\n\n    halfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-label={this.localizedLabel}\n                role=\"status\"\n                aria-live=\"polite\"\n            >\n                <div class=\"circle circle-1\"></div>\n                <div class=\"circle circle-2\"></div>\n            </div>\n        );\n    };\n\n    skeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-label={this.localizedLabel}\n                role=\"status\"\n                aria-live=\"polite\"\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n            </div>\n        );\n    };\n\n    spinner = () => {\n        return this.halfCircleSpinner();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.loader();\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-loading.js","sourceRoot":"","sources":["../../../../src/components/q2-loading/q2-loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAG7D,MAAM,OAAO,SAAS;IADtB;QAKI,gCAA2B,GAAG,KAAK,CAAC;QAGpC,oCAA+B,GAAG,KAAK,CAAC;QACxC,sBAAiB,GAAG,2BAA2B,CAAC;QAehD,oBAAe,GAAY,KAAK,CAAC;QA+CjC,qDAAqD;QAErD,0BAAqB,GAAY,KAAK,CAAC;QAuQvC,aAAa;QACb,yBAAyB;QAEzB,4BAAuB,GAAG,GAAG,EAAE;YAC3B,OAAO,CACH,WACI,KAAK,EAAC,0CAA0C,iBACnC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,eACjD,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7D,IAAI,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAExD,WAAK,KAAK,EAAC,iBAAiB,GAAO;gBACnC,WAAK,KAAK,EAAC,iBAAiB,GAAO;gBAClC,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAC5B,WACI,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,GACvC,CACV,CACC,CACT,CAAC;QACN,CAAC,CAAC;QAeF,gCAA2B,GAAG,GAAG,EAAE;YAC/B,OAAO,CACH,WACI,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAC,sBAAsB,iBACf,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,eACjD,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7D,IAAI,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAEvD,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAC5B,WACI,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,GACvC,CACV,CACC,CACT,CAAC;QACN,CAAC,CAAC;QAEF,yBAAoB,GAAG,GAAG,EAAE;YACxB,OAAO,CACH,WACI,KAAK,EAAC,qBAAqB,iBACd,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,eACjD,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7D,IAAI,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAEvD,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;gBACxD,WAAK,KAAK,EAAC,6BAA6B,GAAO;gBAC9C,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAC5B,WACI,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,GACvC,CACV,CACC,CACT,CAAC;QACN,CAAC,CAAC;QAEF,kBAAa,GAAG,GAAG,EAAE;YACjB,OAAO,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC1C,CAAC,CAAC;KAOL;IA1UG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAClC,CAAC;IAED,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChC,CAAC;IAED,kBAAkB;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACnC,CAAC;IAED,kBAAkB;;QACd,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO;QAClC,MAAM,qBAAqB,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QACpG,MAAA,qBAAqB,CAAC,aAAa,CAAC,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC,0CAAE,MAAM,EAAE,CAAC;QAC/E,qBAAqB,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC;IAED,aAAa;IACb,oBAAoB;IAGpB,eAAe;QACX,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,eAAe,CAAC;QACzC,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,UAAU;QACN,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,WAAW;QACb,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QACjD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,cAAc,EAAE,CAAC;YACjB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,eAAe;YAAE,OAAO;QAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAE5B,IAAI,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE3C,IAAI,YAAY;YAAE,OAAO;QAEzB,IAAI,CAAC;YACD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,eAAe,CAAC,CAAC;YAE9C,yEAAyE;YACzE,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;gBACf,MAAM,IAAI,KAAK,CACX,QAAQ,QAAQ,CAAC,MAAM,yBAAyB;oBAC5C,uEAAuE,CAC9E,CAAC;YACN,CAAC;YAED,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACtC,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;YAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;YAChE,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAExC,IAAI,CAAC,GAAG;gBAAE,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;YAEhE,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC;YACxB,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,eAAe,CAAC;YAClC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAE1C,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC;YAC/C,IAAI,CAAC,mBAAmB;gBAAE,OAAO;YACjC,IAAI,OAAO,mBAAmB,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBACxD,mBAAmB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACJ,mBAAmB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC;YAC1E,CAAC;YAED,GAAG,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAChF,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACb,0DAA0D;YAC1D,IAAI,KAAK,YAAY,SAAS,IAAI,KAAK,CAAC,OAAO,KAAK,iBAAiB,EAAE,CAAC;gBACpE,OAAO,CAAC,KAAK,CACT,qCAAqC,eAAe,IAAI;oBACpD,sEAAsE;oBACtE,iEAAiE;oBACjE,mEAAmE,EACvE,KAAK,CACR,CAAC;YACN,CAAC;iBAAM,CAAC;gBACJ,OAAO,CAAC,KAAK,CAAC,yCAAyC,eAAe,GAAG,EAAE,KAAK,CAAC,CAAC;YACtF,CAAC;QACL,CAAC;IACL,CAAC;IACD,aAAa;IACb,wBAAwB;IAExB,IAAI,eAAe;QACf,MAAM,kBAAkB,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrE,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,gBAAgB,CAC1D,wBAAwB,IAAI,CAAC,IAAI,IAAI,SAAS,MAAM,CACvD,CAAC;QACF,IAAI,CAAC,kBAAkB;YAAE,OAAO;QAEhC,OAAO,kBAAkB,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC;IAC1E,CAAC;IAED,IAAI,cAAc;QACd,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC;IACpC,CAAC;IAED,IAAI,eAAe;QACf,MAAM,EAAE,IAAI,GAAG,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAClD,IAAI,cAAc;YAAE,OAAO;QAC3B,OAAO,cAAc,IAAI,EAAE,CAAC;IAChC,CAAC;IAED,IAAI,mBAAmB;QACnB,MAAM,EAAE,eAAe,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC;QACpD,IAAI,CAAC,eAAe;YAAE,OAAO;QAC7B,OAAO,QAAQ,CAAC,aAAa,CAAc,IAAI,iBAAiB,cAAc,eAAe,IAAI,CAAC,CAAC;IACvG,CAAC;IAED,IAAI,WAAW;QACX,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAC3C,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,cAAc;QACd,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,kCAAkC,CAAC,CAAC;IACnF,CAAC;IAED,IAAI,YAAY;QACZ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,aAAa;;QACb,OAAO,MAAA,MAAA,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,+DAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,mCAAI,EAAE,CAAC;IACnF,CAAC;IAED,cAAc;QACV,MAAM,EAAE,eAAe,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC;QACpD,MAAM,eAAe,GAAG,0BAA0B,EAAE,CAAC;QACrD,IAAI,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;QAEnC,wGAAwG;QACxG,IAAI,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,yGAAyG;QACzG,gFAAgF;QAChF,eAAe,CAAC,gBAAgB,CAC5B,eAAe,EACf,GAAG,EAAE;YACD,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3B,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB,CAAC;QAEF,qGAAqG;QACrG,IAAI,mBAAmB;YAAE,OAAO,IAAI,CAAC;QAErC,0DAA0D;QAC1D,0FAA0F;QAC1F,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,mBAAmB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACrD,mBAAmB,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC;QACvD,eAAe,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;QACjD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,eAAe;QACX,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,CAAC,CAAE,mBAAmB,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7G,CAAC;IAED,sBAAsB;QAClB,IAAI,IAAI,CAAC,qBAAqB;YAAE,OAAO;QAEvC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,oBAAoB;QAChB,IAAI,IAAI,CAAC,qBAAqB;YAAE,OAAO;QAEvC,0EAA0E;QAC1E,oEAAoE;QACpE,WAAW;QACX,MAAM,OAAO,GAAG;YACZ,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,CAAC,CAAC,CAAC;SACjB,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,OAAO,CAAC,EAAE;YAC/C,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACpB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;oBACjC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;wBACjC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;4BAC3B,IAAI,CAAC,mBAAmB,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,+BAA+B,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;wBACtH,CAAC;wBACD,IAAI,CAAC,+BAA+B,GAAG,CAAC,IAAI,CAAC,+BAA+B,CAAC;wBAC7E,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;oBAC7C,CAAC,EAAE,IAAI,CAAC,CAAC;gBACb,CAAC;qBAAM,CAAC;oBACJ,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;oBACjC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;wBAC3B,IAAI,CAAC,mBAAmB,CAAC,WAAW,GAAG,EAAE,CAAC;oBAC9C,CAAC;oBACD,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;gBAC5C,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC,EAAE,OAAO,CAAC,CAAC;QACZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,CAAC;IAED,uBAAuB;QACnB,IAAI,IAAI,CAAC,2BAA2B;YAAE,OAAO;QAC7C,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACtC,IAAI,CAAC,mBAAmB,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IAC/D,CAAC;IAyBD,IAAI,YAAY;QACZ,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,CAAC;QACF,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;QAEvD,OAAO,SAAS,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC;IACxD,CAAC;IA6CD,MAAM;QACF,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;IAC/B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["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    dontUpdateScreenReaderLabel = false;\n    observer: IntersectionObserver;\n    screenReaderElement: HTMLElement;\n    liveRegionChangeIndicatorToggle = false;\n    customLoaderClass = 'tct-loading-custom-loader';\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    loaderClone: SVGElement;\n\n    @State()\n    hasCustomLoader: boolean = false;\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    /** 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    /** Hides the loading element from screen readers. */\n    @Prop({ reflect: true })\n    hideFromScreenReaders: boolean = false;\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    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    // #endregion\n    // #region Local Methods\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 customLoaderElement() {\n        const { customLoaderURL, customLoaderClass } = this;\n        if (!customLoaderURL) return;\n        return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n    }\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 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    cloneLoaderNode() {\n        const { customLoaderElement } = this;\n        this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\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    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    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    renderCustomLoaderContainer = () => {\n        return (\n            <div\n                id=\"custom-loader-container\"\n                class=\"q2-loading-animation\"\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    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"]}

package/dist/collection/components/q2-loading/skeleton/shapes.js

@@ -18,7 +18,10 @@ export const molecules = {
         return (h("div", { class: "skeleton-shape text" }, hasHeader && atoms.rectangle({ width: '60%', additionalClasses }), !!rows &&
             Array(rows)
                 .fill(undefined)
-                .map(() => atoms.rectangle({ height: '1rem' }))));
+                .map(() => atoms.rectangle({
+                height: '1rem',
+                borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',
+            }))));
     },
 };
 export const shapes = {
@@ -26,7 +29,10 @@ export const shapes = {
         return atoms.circle({ width: '100%' });
     },
     rectangle: () => {
-        return atoms.rectangle({ height: '100%', borderRadius: 'var(--tct-border-radius-1, 4px)' });
+        return atoms.rectangle({
+            height: '100%',
+            borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',
+        });
     },
     table: (counts, modifiers) => {
         var _a, _b;

package/dist/collection/components/q2-loading/skeleton/shapes.js.map

@@ -1 +1 @@
-{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/components/q2-loading/skeleton/shapes.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { JSX } from './../../../components';\n\ninterface AtomOptions {\n    width?: string;\n    height?: string;\n    borderRadius?: string;\n    additionalClasses?: string;\n}\n\nexport const atoms = {\n    circle: ({ width, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape circle ${additionalClasses || ''}`}\n            style={{ width, height: width }}\n        ></div>\n    ),\n    rectangle: ({ width, height, borderRadius, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape rectangle ${additionalClasses || ''}`}\n            style={{ width, height, borderRadius }}\n        ></div>\n    ),\n};\n\nexport const molecules = {\n    field: (): JSX.IntrinsicElements => (\n        <div class=\"skeleton-shape field\">\n            <div class=\"skeleton-field-label\">{atoms.rectangle({ height: '1rem', width: '50%' })}</div>\n            {atoms.rectangle({\n                height: 'var(--tct-input-height, 42px)',\n                borderRadius: '3px',\n            })}\n        </div>\n    ),\n    text: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const rows = counts?.[0] ?? 1;\n        const hasHeader = modifiers?.has('header');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        const smallHeaderClass = modifiers?.has('smallheader') ? ' smaller' : '';\n        const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';\n        return (\n            <div class=\"skeleton-shape text\">\n                {hasHeader && atoms.rectangle({ width: '60%', additionalClasses })}\n                {!!rows &&\n                    Array(rows)\n                        .fill(undefined)\n                        .map(() => atoms.rectangle({ height: '1rem' }))}\n            </div>\n        );\n    },\n};\n\nexport const shapes = {\n    circle: (): JSX.IntrinsicElements => {\n        return atoms.circle({ width: '100%' });\n    },\n    rectangle: (): JSX.IntrinsicElements => {\n        return atoms.rectangle({ height: '100%', borderRadius: 'var(--tct-border-radius-1, 4px)' });\n    },\n    table: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const columnCount = counts?.[0] ?? 5;\n        const rowCount = counts?.[1] ?? 5;\n        const headless = modifiers?.has('headless');\n        const bordered = modifiers?.has('bordered');\n        return (\n            <div class=\"skeleton-shape table\">\n                {!headless && (\n                    <div class=\"skeleton-table-head\">\n                        <div class=\"skeleton-table-row skeleton-table-header flex\">\n                            {!!columnCount &&\n                                Array(columnCount)\n                                    .fill(undefined)\n                                    .map(() => atoms.rectangle({ height: '1rem' }))}\n                        </div>\n                        <div class=\"skeleton-table-row-border\">{atoms.rectangle({ height: '3px' })}</div>\n                    </div>\n                )}\n                <div class=\"skeleton-table-body\">\n                    {!!rowCount &&\n                        Array(rowCount)\n                            .fill(undefined)\n                            .map(() => (\n                                <div class=\"skeleton-table-row-wrapper\">\n                                    <div class=\"skeleton-table-row flex\">\n                                        {!!columnCount &&\n                                            Array(columnCount)\n                                                .fill(undefined)\n                                                .map(() => atoms.rectangle({ height: '1.5rem' }))}\n                                    </div>\n                                    {bordered && (\n                                        <div class=\"skeleton-table-row-border\">\n                                            {atoms.rectangle({\n                                                height: '1px',\n                                                additionalClasses: 'no-margin',\n                                            })}\n                                        </div>\n                                    )}\n                                </div>\n                            ))}\n                </div>\n            </div>\n        );\n    },\n    field: molecules.field,\n    form: (counts?: number[]): JSX.IntrinsicElements => {\n        const columns = (counts?.[1] && counts?.[0]) ?? 1;\n        const rows = counts?.[1] ?? counts?.[0] ?? 1;\n        const totalItems = columns * rows;\n        return (\n            <div class={`skeleton-shape form flex columns-${columns}`}>\n                {!!totalItems && Array(totalItems).fill(undefined).map(molecules.field)}\n            </div>\n        );\n    },\n    text: molecules.text,\n    'detailed-item': (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const isSquare = modifiers?.has('square');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        return (\n            <div class={`skeleton-shape detailed-item flex ${alignment}`}>\n                <div class={`detailed-item-image flex-${alignment}`}>\n                    {isSquare\n                        ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })\n                        : atoms.circle({ width: '1.5em' })}\n                </div>\n                <div class={`detailed-item-text flex flex-v-center flex-${alignment}`}>\n                    <div>{molecules.text(counts, modifiers)}</div>\n                </div>\n            </div>\n        );\n    },\n    'label-value': (counts?: number[]): JSX.IntrinsicElements => {\n        const cells = 2 * (counts?.[0] ?? 1);\n        return (\n            <div class=\"skeleton-shape label-value flex\">\n                {!!cells &&\n                    Array(cells)\n                        .fill(undefined)\n                        .map(() => atoms.rectangle({ height: '1rem' }))}\n            </div>\n        );\n    },\n};\n\nexport default shapes;\n"]}
+{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/components/q2-loading/skeleton/shapes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAUlC,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAe,EAAyB,EAAE,CAAC,CAC1E,WACI,KAAK,EAAE,yBAAyB,iBAAiB,IAAI,EAAE,EAAE,EACzD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAC5B,CACV;IACD,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAe,EAAyB,EAAE,CAAC,CACnG,WACI,KAAK,EAAE,4BAA4B,iBAAiB,IAAI,EAAE,EAAE,EAC5D,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,GACnC,CACV;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,KAAK,EAAE,GAA0B,EAAE,CAAC,CAChC,WAAK,KAAK,EAAC,sBAAsB;QAC7B,WAAK,KAAK,EAAC,sBAAsB,IAAE,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAO;QAC1F,KAAK,CAAC,SAAS,CAAC;YACb,MAAM,EAAE,+BAA+B;YACvC,YAAY,EAAE,KAAK;SACtB,CAAC,CACA,CACT;IACD,IAAI,EAAE,CAAC,MAAiB,EAAE,SAAuB,EAAyB,EAAE;;QACxE,MAAM,IAAI,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,mCAAI,CAAC,CAAC;QAC9B,MAAM,SAAS,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,SAAS,GAAG,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,QAAQ,CAAC,KAAI,QAAQ,CAAC,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,OAAO,CAAC,KAAI,OAAO,CAAC,IAAI,MAAM,CAAC;QAC3G,MAAM,gBAAgB,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,aAAa,CAAC,EAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACzE,MAAM,iBAAiB,GAAG,SAAS,CAAC,CAAC,CAAC,UAAU,SAAS,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACpF,OAAO,CACH,WAAK,KAAK,EAAC,qBAAqB;YAC3B,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;YACjE,CAAC,CAAC,IAAI;gBACH,KAAK,CAAC,IAAI,CAAC;qBACN,IAAI,CAAC,SAAS,CAAC;qBACf,GAAG,CAAC,GAAG,EAAE,CACN,KAAK,CAAC,SAAS,CAAC;oBACZ,MAAM,EAAE,MAAM;oBACd,YAAY,EAAE,6DAA6D;iBAC9E,CAAC,CACL,CACP,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,MAAM,EAAE,GAA0B,EAAE;QAChC,OAAO,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3C,CAAC;IACD,SAAS,EAAE,GAA0B,EAAE;QACnC,OAAO,KAAK,CAAC,SAAS,CAAC;YACnB,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,6DAA6D;SAC9E,CAAC,CAAC;IACP,CAAC;IACD,KAAK,EAAE,CAAC,MAAiB,EAAE,SAAuB,EAAyB,EAAE;;QACzE,MAAM,WAAW,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,mCAAI,CAAC,CAAC;QACrC,MAAM,QAAQ,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,mCAAI,CAAC,CAAC;QAClC,MAAM,QAAQ,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,UAAU,CAAC,CAAC;QAC5C,MAAM,QAAQ,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,UAAU,CAAC,CAAC;QAC5C,OAAO,CACH,WAAK,KAAK,EAAC,sBAAsB;YAC5B,CAAC,QAAQ,IAAI,CACV,WAAK,KAAK,EAAC,qBAAqB;gBAC5B,WAAK,KAAK,EAAC,+CAA+C,IACrD,CAAC,CAAC,WAAW;oBACV,KAAK,CAAC,WAAW,CAAC;yBACb,IAAI,CAAC,SAAS,CAAC;yBACf,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CACrD;gBACN,WAAK,KAAK,EAAC,2BAA2B,IAAE,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAO,CAC/E,CACT;YACD,WAAK,KAAK,EAAC,qBAAqB,IAC3B,CAAC,CAAC,QAAQ;gBACP,KAAK,CAAC,QAAQ,CAAC;qBACV,IAAI,CAAC,SAAS,CAAC;qBACf,GAAG,CAAC,GAAG,EAAE,CAAC,CACP,WAAK,KAAK,EAAC,4BAA4B;oBACnC,WAAK,KAAK,EAAC,yBAAyB,IAC/B,CAAC,CAAC,WAAW;wBACV,KAAK,CAAC,WAAW,CAAC;6BACb,IAAI,CAAC,SAAS,CAAC;6BACf,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CACvD;oBACL,QAAQ,IAAI,CACT,WAAK,KAAK,EAAC,2BAA2B,IACjC,KAAK,CAAC,SAAS,CAAC;wBACb,MAAM,EAAE,KAAK;wBACb,iBAAiB,EAAE,WAAW;qBACjC,CAAC,CACA,CACT,CACC,CACT,CAAC,CACR,CACJ,CACT,CAAC;IACN,CAAC;IACD,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,IAAI,EAAE,CAAC,MAAiB,EAAyB,EAAE;;QAC/C,MAAM,OAAO,GAAG,MAAA,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAA,CAAC,mCAAI,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,mCAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,mCAAI,CAAC,CAAC;QAC7C,MAAM,UAAU,GAAG,OAAO,GAAG,IAAI,CAAC;QAClC,OAAO,CACH,WAAK,KAAK,EAAE,oCAAoC,OAAO,EAAE,IACpD,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CACrE,CACT,CAAC;IACN,CAAC;IACD,IAAI,EAAE,SAAS,CAAC,IAAI;IACpB,eAAe,EAAE,CAAC,MAAiB,EAAE,SAAuB,EAAyB,EAAE;QACnF,MAAM,QAAQ,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,SAAS,GAAG,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,QAAQ,CAAC,KAAI,QAAQ,CAAC,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,OAAO,CAAC,KAAI,OAAO,CAAC,IAAI,MAAM,CAAC;QAC3G,OAAO,CACH,WAAK,KAAK,EAAE,qCAAqC,SAAS,EAAE;YACxD,WAAK,KAAK,EAAE,4BAA4B,SAAS,EAAE,IAC9C,QAAQ;gBACL,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;gBAC3E,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CACpC;YACN,WAAK,KAAK,EAAE,8CAA8C,SAAS,EAAE;gBACjE,eAAM,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAO,CAC5C,CACJ,CACT,CAAC;IACN,CAAC;IACD,aAAa,EAAE,CAAC,MAAiB,EAAyB,EAAE;;QACxD,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,mCAAI,CAAC,CAAC,CAAC;QACrC,OAAO,CACH,WAAK,KAAK,EAAC,iCAAiC,IACvC,CAAC,CAAC,KAAK;YACJ,KAAK,CAAC,KAAK,CAAC;iBACP,IAAI,CAAC,SAAS,CAAC;iBACf,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CACrD,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { JSX } from './../../../components';\n\ninterface AtomOptions {\n    width?: string;\n    height?: string;\n    borderRadius?: string;\n    additionalClasses?: string;\n}\n\nexport const atoms = {\n    circle: ({ width, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape circle ${additionalClasses || ''}`}\n            style={{ width, height: width }}\n        ></div>\n    ),\n    rectangle: ({ width, height, borderRadius, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape rectangle ${additionalClasses || ''}`}\n            style={{ width, height, borderRadius }}\n        ></div>\n    ),\n};\n\nexport const molecules = {\n    field: (): JSX.IntrinsicElements => (\n        <div class=\"skeleton-shape field\">\n            <div class=\"skeleton-field-label\">{atoms.rectangle({ height: '1rem', width: '50%' })}</div>\n            {atoms.rectangle({\n                height: 'var(--tct-input-height, 42px)',\n                borderRadius: '3px',\n            })}\n        </div>\n    ),\n    text: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const rows = counts?.[0] ?? 1;\n        const hasHeader = modifiers?.has('header');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        const smallHeaderClass = modifiers?.has('smallheader') ? ' smaller' : '';\n        const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';\n        return (\n            <div class=\"skeleton-shape text\">\n                {hasHeader && atoms.rectangle({ width: '60%', additionalClasses })}\n                {!!rows &&\n                    Array(rows)\n                        .fill(undefined)\n                        .map(() =>\n                            atoms.rectangle({\n                                height: '1rem',\n                                borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',\n                            })\n                        )}\n            </div>\n        );\n    },\n};\n\nexport const shapes = {\n    circle: (): JSX.IntrinsicElements => {\n        return atoms.circle({ width: '100%' });\n    },\n    rectangle: (): JSX.IntrinsicElements => {\n        return atoms.rectangle({\n            height: '100%',\n            borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',\n        });\n    },\n    table: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const columnCount = counts?.[0] ?? 5;\n        const rowCount = counts?.[1] ?? 5;\n        const headless = modifiers?.has('headless');\n        const bordered = modifiers?.has('bordered');\n        return (\n            <div class=\"skeleton-shape table\">\n                {!headless && (\n                    <div class=\"skeleton-table-head\">\n                        <div class=\"skeleton-table-row skeleton-table-header flex\">\n                            {!!columnCount &&\n                                Array(columnCount)\n                                    .fill(undefined)\n                                    .map(() => atoms.rectangle({ height: '1rem' }))}\n                        </div>\n                        <div class=\"skeleton-table-row-border\">{atoms.rectangle({ height: '3px' })}</div>\n                    </div>\n                )}\n                <div class=\"skeleton-table-body\">\n                    {!!rowCount &&\n                        Array(rowCount)\n                            .fill(undefined)\n                            .map(() => (\n                                <div class=\"skeleton-table-row-wrapper\">\n                                    <div class=\"skeleton-table-row flex\">\n                                        {!!columnCount &&\n                                            Array(columnCount)\n                                                .fill(undefined)\n                                                .map(() => atoms.rectangle({ height: '1.5rem' }))}\n                                    </div>\n                                    {bordered && (\n                                        <div class=\"skeleton-table-row-border\">\n                                            {atoms.rectangle({\n                                                height: '1px',\n                                                additionalClasses: 'no-margin',\n                                            })}\n                                        </div>\n                                    )}\n                                </div>\n                            ))}\n                </div>\n            </div>\n        );\n    },\n    field: molecules.field,\n    form: (counts?: number[]): JSX.IntrinsicElements => {\n        const columns = (counts?.[1] && counts?.[0]) ?? 1;\n        const rows = counts?.[1] ?? counts?.[0] ?? 1;\n        const totalItems = columns * rows;\n        return (\n            <div class={`skeleton-shape form flex columns-${columns}`}>\n                {!!totalItems && Array(totalItems).fill(undefined).map(molecules.field)}\n            </div>\n        );\n    },\n    text: molecules.text,\n    'detailed-item': (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const isSquare = modifiers?.has('square');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        return (\n            <div class={`skeleton-shape detailed-item flex ${alignment}`}>\n                <div class={`detailed-item-image flex-${alignment}`}>\n                    {isSquare\n                        ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })\n                        : atoms.circle({ width: '1.5em' })}\n                </div>\n                <div class={`detailed-item-text flex flex-v-center flex-${alignment}`}>\n                    <div>{molecules.text(counts, modifiers)}</div>\n                </div>\n            </div>\n        );\n    },\n    'label-value': (counts?: number[]): JSX.IntrinsicElements => {\n        const cells = 2 * (counts?.[0] ?? 1);\n        return (\n            <div class=\"skeleton-shape label-value flex\">\n                {!!cells &&\n                    Array(cells)\n                        .fill(undefined)\n                        .map(() => atoms.rectangle({ height: '1rem' }))}\n            </div>\n        );\n    },\n};\n\nexport default shapes;\n"]}

package/dist/collection/components/q2-optgroup/q2-optgroup.js

@@ -9,7 +9,7 @@ export class Q2Optgroup {
         this.hidden = false;
         // #endregion
         // #region Public Property API
-        /** Serves as the group header text. */
+        /** Determines whether all nested options are disabled. */
         this.disabled = false;
         this.setHidden = () => {
             this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
@@ -77,7 +77,7 @@ export class Q2Optgroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Serves as the group header text."
+                    "text": "Determines whether all nested options are disabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -97,7 +97,7 @@ export class Q2Optgroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines whether all nested options are disabled."
+                    "text": "Serves as the group header text."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/q2-optgroup/q2-optgroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;IADvB;QAEI,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAS5B,aAAa;QACb,2BAA2B;QAG3B,WAAM,GAAY,KAAK,CAAC;QAExB,aAAa;QACb,8BAA8B;QAE9B,uCAAuC;QAEvC,aAAQ,GAAY,KAAK,CAAC;QA6C1B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;KA2BL;IApEG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;IADvB;QAEI,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAS5B,aAAa;QACb,2BAA2B;QAG3B,WAAM,GAAY,KAAK,CAAC;QAExB,aAAa;QACb,8BAA8B;QAE9B,0DAA0D;QAE1D,aAAQ,GAAY,KAAK,CAAC;QA6C1B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;KA2BL;IApEG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}