q2-tecton-elements 1.60.1 → 1.60.2

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

@@ -111,6 +111,14 @@ button {
   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;

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

@@ -16,7 +16,7 @@ export class Q2Loading {
             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.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) }))));
+            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.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/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, 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"]}
+{"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, 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                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/components/q2-loading2.js

@@ -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}.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 = "*{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 Q2Loading = /*@__PURE__*/ proxyCustomElement(class Q2Loading extends HTMLElement {
     constructor() {
@@ -22,7 +22,7 @@ const Q2Loading = /*@__PURE__*/ proxyCustomElement(class Q2Loading extends HTMLE
             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.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) }))));
+            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.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

@@ -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@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    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"],"version":3}
+{"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    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                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"],"version":3}