q2-tecton-elements 1.60.0 → 1.60.2

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement, F as Fragment, a as getAssetPath, c as createEvent, H as Host } from './index-COzomxjJ.js';
-import { l as loc, u as handleDeprecationWarning, e as handleAriaLabel, x as handleColor, o as overrideFocus, a as isEventFromElement, y as getAriaValueFromProp, c as createGuid, j as isMobile, s as setMessageHeight, h as hasSlotContent, n as nextPaint, r as renderLabel, g as renderMessages } from './index-CkXFIBxL.js';
-import { s as shapes } from './shapes-ElQYMSyu.js';
+import { r as registerInstance, h, g as getElement, F as Fragment, a as getAssetPath, c as createEvent, H as Host } from './index-CGkHOjh1.js';
+import { l as loc, u as handleDeprecationWarning, e as handleAriaLabel, x as handleColor, o as overrideFocus, a as isEventFromElement, y as getAriaValueFromProp, c as createGuid, j as isMobile, s as setMessageHeight, h as hasSlotContent, n as nextPaint, r as renderLabel, g as renderMessages } from './index-xCuy-dFb.js';
+import { s as shapes } from './shapes-B6iI6sMH.js';
 
 const q2BadgeCss = "*{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}:host{display:inline-block;line-height:0;--comp-badge-font-size:var(--app-font-size-small, 12px);--comp-badge-large-font-size:var(--app-font-size-medium, 14px);--comp-badge-background:var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff))}:host:host([status=info]){--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff))}:host:host([status=alert]){--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff))}:host:host([status=warning]){--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff))}:host:host([status=success]){--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff))}:host:host([theme=primary]){--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff))}:host:host([theme=secondary]){--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #141414))}:host:host([theme=tertiary]){--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414))}.badge-container{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 5px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));border:var(--tct-badge-border);backdrop-filter:var(--tct-badge-backdrop-filter)}.badge-container .badge-text{font-size:var(--comp-badge-font-size);line-height:var(--tct-badge-line-height, 14px)}.badge-container .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-font-size) !important}.badge-container.size-large{height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-container.size-large .badge-text{font-size:var(--comp-badge-large-font-size);line-height:var(--tct-badge-large-line-height, 20px)}.badge-container.size-large .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-large-font-size) !important}.empty-variant{min-width:unset;width:16px;height:16px;padding:0}.empty-variant.size-large{min-width:unset;width:22px;height:22px;padding:0}";
 
@@ -238,6 +238,22 @@ const Q2Btn = class {
 };
 Q2Btn.style = q2BtnCss;
 
+/**
+ * Checks for the sprite container element in the global DOM
+ * If it does not exist, it creates and appends it to the body, and returns it
+ */
+function getOrCreateSpriteContainer() {
+    const spriteContainerId = 'tecton-sprites';
+    let spriteContainer = document.querySelector(`#${spriteContainerId}`);
+    if (spriteContainer)
+        return spriteContainer;
+    spriteContainer = document.createElement('div');
+    spriteContainer.id = spriteContainerId;
+    spriteContainer.style.display = 'none';
+    document.body.appendChild(spriteContainer);
+    return spriteContainer;
+}
+
 const a11y = "standard";
 const add = "standard";
 const airplane = "standard";
@@ -857,8 +873,8 @@ const Q2Icon = class {
     checkForSprite() {
         var _a;
         const { spriteId, spriteEventName } = this;
-        const spriteContainer = this.getOrCreateSpriteContainer();
-        let spriteElement = document.querySelector(`#${spriteId}`);
+        const spriteContainer = getOrCreateSpriteContainer();
+        let spriteElement = document.getElementById(spriteId);
         // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need
         if ((_a = spriteElement === null || spriteElement === void 0 ? void 0 : spriteElement.hasAttribute('data-loaded')) !== null && _a !== void 0 ? _a : false) {
             this.cloneSpriteNode();
@@ -880,8 +896,7 @@ const Q2Icon = class {
         return false;
     }
     cloneSpriteNode() {
-        const spriteContainer = this.getOrCreateSpriteContainer();
-        const spriteNode = spriteContainer.querySelector(`#tct-${this.type}`);
+        const spriteNode = document.getElementById(`tct-${this.type}`);
         this.iconClone = spriteNode ? spriteNode.cloneNode(true) : undefined;
     }
     async fetchSprite() {
@@ -908,24 +923,9 @@ const Q2Icon = class {
         else {
             spriteElement.parentNode.replaceChild(svg, spriteElement);
         }
-        spriteElement = document.querySelector(`#${spriteId}`);
+        spriteElement = document.getElementById(spriteId);
         spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));
     }
-    /**
-     * Checks for the sprite container element in the global DOM
-     * If it does not exist, it creates and appends it to the body
-     */
-    getOrCreateSpriteContainer() {
-        const spriteContainerId = 'tecton-sprites';
-        let spriteContainer = document.querySelector(`#${spriteContainerId}`);
-        if (spriteContainer)
-            return spriteContainer;
-        spriteContainer = document.createElement('div');
-        spriteContainer.id = spriteContainerId;
-        spriteContainer.style.display = 'none';
-        document.body.appendChild(spriteContainer);
-        return spriteContainer;
-    }
     setCustomSVGAttrs() {
         const innerSVG = this.hostElement.querySelector('svg');
         if (!innerSVG)
@@ -4506,13 +4506,15 @@ const Q2Input = class {
 };
 Q2Input.style = q2InputCss;
 
-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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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
@@ -4520,6 +4522,9 @@ const Q2Loading = class {
         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.renderCustomLoaderContainer = () => {
+            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) }))));
         };
@@ -4534,6 +4539,7 @@ const Q2Loading = class {
     }
     componentWillLoad() {
         handleAriaLabel(this);
+        this.handleType();
     }
     componentDidLoad() {
         this.setupLiveRegionDelay();
@@ -4541,8 +4547,105 @@ const Q2Loading = class {
     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
+    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;
@@ -4562,6 +4665,35 @@ const Q2Loading = class {
         var _a, _b;
         return (_b = (_a = shapes[this.shape]) === null || _a === void 0 ? void 0 : _a.call(shapes, this.countsArray, this.modifiersSet)) !== null && _b !== void 0 ? _b : '';
     }
+    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;
@@ -4585,14 +4717,18 @@ const Q2Loading = class {
                 if (entry.isIntersecting) {
                     clearTimeout(this.ariaLiveTimer);
                     this.ariaLiveTimer = setTimeout(() => {
-                        this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;
+                        if (this.screenReaderElement) {
+                            this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;
+                        }
                         this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;
                         this.dontUpdateScreenReaderLabel = false;
                     }, 2000);
                 }
                 else {
                     clearTimeout(this.ariaLiveTimer);
-                    this.screenReaderElement.textContent = '';
+                    if (this.screenReaderElement) {
+                        this.screenReaderElement.textContent = '';
+                    }
                     this.dontUpdateScreenReaderLabel = true;
                 }
             });
@@ -4602,6 +4738,8 @@ const Q2Loading = class {
     updateScreenReaderLabel() {
         if (this.dontUpdateScreenReaderLabel)
             return;
+        if (!this.screenReaderElement)
+            return;
         this.screenReaderElement.textContent = this.localizedLabel;
     }
     get renderLoader() {
@@ -4609,13 +4747,19 @@ const Q2Loading = class {
             default: this.renderSpinner,
             spinner: this.renderSpinner,
             skeleton: this.renderSkeletonLoader,
+            custom: this.renderCustomLoaderContainer,
         };
-        return loaderMap[this.type] || loaderMap.default;
+        const { type, hasCustomLoader } = this;
+        const loaderMapKey = hasCustomLoader ? 'custom' : type;
+        return loaderMap[loaderMapKey] || loaderMap.default;
     }
     render() {
         return this.renderLoader();
     }
     get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "type": ["handleType"]
+    }; }
 };
 Q2Loading.style = q2LoadingCss;