q2-tecton-elements 1.63.2 → 1.64.0

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 * {
   box-sizing: border-box;
 }
@@ -129,30 +130,41 @@ button {
   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;
+.half-circle-spinner .head {
+  fill: none;
+  stroke: var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));
+  stroke-width: 6;
+  stroke-linecap: round;
+  /* For r=20, circumference = 2πr ≈ 125.6637 */
+  /* Dot length ≈ 1 */
+  /* 270deg arc length = 0.75 * circumference ≈ 94.2478 */
+  stroke-dasharray: 1 124.6637;
+  stroke-dashoffset: 0;
+  transform-origin: 25px 25px;
+  animation: spin 2.5s linear infinite, grow 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+/* 2 complete revolutions per cycle */
+@keyframes spin {
+  to {
+    transform: rotate(720deg);
+  }
 }
-
-@keyframes half-circle-spinner-animation {
+/* Dot -> 270deg arc -> Dot */
+@keyframes grow {
   0% {
-    transform: rotate(0deg);
+    stroke-dasharray: 1 124.6637; /* dot */
+    stroke-dashoffset: 0;
+  }
+  /* grow into a 270° arc */
+  50% {
+    stroke-dasharray: 94.2478 31.4159; /* 270deg arc + remaining gap */
+    stroke-dashoffset: -31.4159; /* shifts so the arc "travels" */
   }
+  /* collapse back into a dot */
   100% {
-    transform: rotate(360deg);
+    stroke-dasharray: 1 124.6637;
+    stroke-dashoffset: -125.6637; /* wraps around cleanly */
   }
 }
 :host {

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

@@ -18,7 +18,7 @@ export class Q2Loading {
             return (h("div", { id: "custom-loader-container", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
         };
         this.renderHalfCircleSpinner = () => {
-            return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, h("div", { class: "circle circle-1" }), h("div", { class: "circle circle-2" }), !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
+            return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, h("svg", { class: "loader", viewBox: "0 0 50 50", role: "presentation" }, h("circle", { class: "head", cx: "25", cy: "25", r: "20" })), !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
         };
         this.renderSkeletonLoader = () => {
             return (h("div", { class: "q2-loading-skeleton", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, this.shape === 'custom' ? h("slot", null) : this.skeletonShape, h("div", { class: "q2-loading-skeleton-shimmer" }), !this.hideFromScreenReaders && (h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));

package/dist/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    customLoaderClass = 'tct-loading-custom-loader';\n    dontUpdateScreenReaderLabel = false;\n    liveRegionChangeIndicatorToggle = false;\n    observer: IntersectionObserver;\n    screenReaderElement: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasCustomLoader: boolean = false;\n\n    @State()\n    loaderClone: SVGElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /**\n     * Numeric adjustments are available for specific `type` and `shape` combinations.\n     * These may impact the number of items, columns, and/or rows that display.\n     *\n     * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n     *\n     * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n     * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n     *\n     * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n     * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n     */\n    @Prop({ reflect: true })\n    counts: string;\n\n    /** Hides the loading element from screen readers. */\n    @Prop({ reflect: true })\n    hideFromScreenReaders: boolean = false;\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /**\n     * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n     *\n     * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n     */\n    @Prop({ reflect: true })\n    modifiers: string;\n\n    /**\n     * The specific visual presentation of a loading element `type`.\n     * @snippet\n     * // when type=\"spinner\"\n     * type ShapeValues = \"half-circle\";\n     * // when type=\"skeleton\"\n     * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n     */\n    @Prop({ reflect: true })\n    shape: string;\n\n    /** The type of loading element to display. */\n    @Prop({ reflect: true })\n    type: 'brand' | 'spinner' | 'skeleton';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.cleanupLiveRegionDelay();\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.handleType();\n    }\n\n    componentDidLoad(): void {\n        this.setupLiveRegionDelay();\n    }\n\n    componentDidUpdate(): void {\n        this.updateScreenReaderLabel();\n    }\n\n    componentDidRender(): void {\n        if (!this.loaderClone) return;\n        if (!this.hasCustomLoader) return;\n        const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n        customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n        customLoaderContainer.appendChild(this.loaderClone);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('tctUpdateLoaders', { target: 'document' })\n    onUpdateLoaders() {\n        const { customLoaderURL } = this;\n        this.hasCustomLoader = !!customLoaderURL;\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleType() {\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get countsArray(): number[] {\n        if (this.type !== 'skeleton' || !this.counts) {\n            return undefined;\n        }\n\n        return this.counts.split('x').map(Number);\n    }\n\n    get customLoaderElement() {\n        const { customLoaderURL, customLoaderClass } = this;\n        if (!customLoaderURL) return;\n        return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n    }\n\n    get customLoaderURL() {\n        const hostComputedStyles = window.getComputedStyle(this.hostElement);\n        const loadingVariableURL = hostComputedStyles.getPropertyValue(\n            `--tct-loading-custom-${this.type || 'spinner'}-url`\n        );\n        if (!loadingVariableURL) return;\n\n        return loadingVariableURL.trim().replace(/^url\\(['\"]?|['\"]?\\)$/g, '');\n    }\n\n    get isSkeletonType() {\n        return this.type === 'skeleton';\n    }\n\n    get loaderEventName() {\n        const { type = 'spinner', isSkeletonType } = this;\n        if (isSkeletonType) return;\n        return `tct-loaded-${type}`;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || this.ariaLabel || 'tecton.element.loading.ariaLabel');\n    }\n\n    get modifiersSet(): Set<string> {\n        if (this.type !== 'skeleton' || !this.modifiers) {\n            return undefined;\n        }\n\n        return new Set(this.modifiers.split('-'));\n    }\n\n    get skeletonShape() {\n        return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n    }\n\n    checkForLoader() {\n        const { loaderEventName, customLoaderClass } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let { customLoaderElement } = this;\n\n        // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (customLoaderElement?.hasAttribute('data-loaded')) {\n            this.cloneLoaderNode();\n            return true;\n        }\n\n        // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the element is loaded\n        spriteContainer.addEventListener(\n            loaderEventName,\n            () => {\n                this.cloneLoaderNode();\n            },\n            { once: true }\n        );\n\n        // If the loading element exists, we know it's being loaded and will be handled by the event listener\n        if (customLoaderElement) return true;\n\n        // If loading element does not exist, create a placeholder\n        // This will let other icons know the element is being loaded and prevent multiple fetches\n        customLoaderElement = document.createElement('div');\n        customLoaderElement.classList.add(customLoaderClass);\n        customLoaderElement.dataset.url = this.customLoaderURL;\n        spriteContainer.appendChild(customLoaderElement);\n        return false;\n    }\n\n    cleanupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        clearTimeout(this.ariaLiveTimer);\n        this.observer?.disconnect();\n        this.observer = null;\n    }\n\n    cloneLoaderNode() {\n        const { customLoaderElement } = this;\n        this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n    }\n\n    async fetchLoader() {\n        const { isSkeletonType, customLoaderURL } = this;\n        this.hasCustomLoader = false;\n        if (isSkeletonType) {\n            return;\n        }\n\n        if (!customLoaderURL) return;\n        this.hasCustomLoader = true;\n\n        let { customLoaderElement } = this;\n        const loaderExists = this.checkForLoader();\n\n        if (loaderExists) return;\n\n        try {\n            const response = await fetch(customLoaderURL);\n\n            // Check for HTTP errors (including CORS issues that return error status)\n            if (!response.ok) {\n                throw new Error(\n                    `HTTP ${response.status}: Failed to fetch SVG. ` +\n                        `This may be due to incorrect URL, server error, or CORS restrictions.`\n                );\n            }\n\n            const svgText = await response.text();\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n            const svg = svgDoc.querySelector('svg');\n\n            if (!svg) throw new Error('No SVG found in the loaded content');\n\n            svg.dataset.loaded = '';\n            svg.dataset.url = customLoaderURL;\n            svg.classList.add(this.customLoaderClass);\n\n            customLoaderElement = this.customLoaderElement;\n            if (!customLoaderElement) return;\n            if (typeof customLoaderElement.replaceWith === 'function') {\n                customLoaderElement.replaceWith(svg);\n            } else {\n                customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n            }\n\n            svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n        } catch (error) {\n            // Provide more specific error messaging for common issues\n            if (error instanceof TypeError && error.message === 'Failed to fetch') {\n                console.error(\n                    `Failed to load custom loader from ${customLoaderURL}. ` +\n                        `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n                        `Ensure the server hosting the SVG includes proper CORS headers ` +\n                        `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n                    error\n                );\n            } else {\n                console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n            }\n        }\n    }\n\n    setupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        // The screen reader element starts out empty and is then populated by the\n        // label text after a delay to ensure that it is announced by screen\n        // readers.\n        const options = {\n            root: null,\n            rootMargin: '0px',\n            threshold: [1],\n        };\n        this.observer = new IntersectionObserver(entries => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    clearTimeout(this.ariaLiveTimer);\n                    this.ariaLiveTimer = setTimeout(() => {\n                        if (this.screenReaderElement) {\n                            this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n                        }\n                        this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n                        this.dontUpdateScreenReaderLabel = false;\n                    }, 2000);\n                } else {\n                    clearTimeout(this.ariaLiveTimer);\n                    if (this.screenReaderElement) {\n                        this.screenReaderElement.textContent = '';\n                    }\n                    this.dontUpdateScreenReaderLabel = true;\n                }\n            });\n        }, options);\n        this.observer.observe(this.hostElement);\n    }\n\n    updateScreenReaderLabel() {\n        if (this.dontUpdateScreenReaderLabel) return;\n        if (!this.screenReaderElement) return;\n        this.screenReaderElement.textContent = this.localizedLabel;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomLoaderContainer = () => {\n        return (\n            <div\n                id=\"custom-loader-container\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderHalfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                <div class=\"circle circle-1\"></div>\n                <div class=\"circle circle-2\"></div>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    get renderLoader() {\n        const loaderMap = {\n            default: this.renderSpinner,\n            spinner: this.renderSpinner,\n            skeleton: this.renderSkeletonLoader,\n            custom: this.renderCustomLoaderContainer,\n        };\n        const { type, hasCustomLoader } = this;\n        const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n        return loaderMap[loaderMapKey] || loaderMap.default;\n    }\n\n    renderSkeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderSpinner = () => {\n        return this.renderHalfCircleSpinner();\n    };\n\n    render() {\n        return this.renderLoader();\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"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    customLoaderClass = 'tct-loading-custom-loader';\n    dontUpdateScreenReaderLabel = false;\n    liveRegionChangeIndicatorToggle = false;\n    observer: IntersectionObserver;\n    screenReaderElement: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasCustomLoader: boolean = false;\n\n    @State()\n    loaderClone: SVGElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /**\n     * Numeric adjustments are available for specific `type` and `shape` combinations.\n     * These may impact the number of items, columns, and/or rows that display.\n     *\n     * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n     *\n     * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n     * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n     *\n     * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n     * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n     */\n    @Prop({ reflect: true })\n    counts: string;\n\n    /** Hides the loading element from screen readers. */\n    @Prop({ reflect: true })\n    hideFromScreenReaders: boolean = false;\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /**\n     * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n     *\n     * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n     */\n    @Prop({ reflect: true })\n    modifiers: string;\n\n    /**\n     * The specific visual presentation of a loading element `type`.\n     * @snippet\n     * // when type=\"spinner\"\n     * type ShapeValues = \"half-circle\";\n     * // when type=\"skeleton\"\n     * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n     */\n    @Prop({ reflect: true })\n    shape: string;\n\n    /** The type of loading element to display. */\n    @Prop({ reflect: true })\n    type: 'brand' | 'spinner' | 'skeleton';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.cleanupLiveRegionDelay();\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.handleType();\n    }\n\n    componentDidLoad(): void {\n        this.setupLiveRegionDelay();\n    }\n\n    componentDidUpdate(): void {\n        this.updateScreenReaderLabel();\n    }\n\n    componentDidRender(): void {\n        if (!this.loaderClone) return;\n        if (!this.hasCustomLoader) return;\n        const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n        customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n        customLoaderContainer.appendChild(this.loaderClone);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('tctUpdateLoaders', { target: 'document' })\n    onUpdateLoaders() {\n        const { customLoaderURL } = this;\n        this.hasCustomLoader = !!customLoaderURL;\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleType() {\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get countsArray(): number[] {\n        if (this.type !== 'skeleton' || !this.counts) {\n            return undefined;\n        }\n\n        return this.counts.split('x').map(Number);\n    }\n\n    get customLoaderElement() {\n        const { customLoaderURL, customLoaderClass } = this;\n        if (!customLoaderURL) return;\n        return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n    }\n\n    get customLoaderURL() {\n        const hostComputedStyles = window.getComputedStyle(this.hostElement);\n        const loadingVariableURL = hostComputedStyles.getPropertyValue(\n            `--tct-loading-custom-${this.type || 'spinner'}-url`\n        );\n        if (!loadingVariableURL) return;\n\n        return loadingVariableURL.trim().replace(/^url\\(['\"]?|['\"]?\\)$/g, '');\n    }\n\n    get isSkeletonType() {\n        return this.type === 'skeleton';\n    }\n\n    get loaderEventName() {\n        const { type = 'spinner', isSkeletonType } = this;\n        if (isSkeletonType) return;\n        return `tct-loaded-${type}`;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || this.ariaLabel || 'tecton.element.loading.ariaLabel');\n    }\n\n    get modifiersSet(): Set<string> {\n        if (this.type !== 'skeleton' || !this.modifiers) {\n            return undefined;\n        }\n\n        return new Set(this.modifiers.split('-'));\n    }\n\n    get skeletonShape() {\n        return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n    }\n\n    checkForLoader() {\n        const { loaderEventName, customLoaderClass } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let { customLoaderElement } = this;\n\n        // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (customLoaderElement?.hasAttribute('data-loaded')) {\n            this.cloneLoaderNode();\n            return true;\n        }\n\n        // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the element is loaded\n        spriteContainer.addEventListener(\n            loaderEventName,\n            () => {\n                this.cloneLoaderNode();\n            },\n            { once: true }\n        );\n\n        // If the loading element exists, we know it's being loaded and will be handled by the event listener\n        if (customLoaderElement) return true;\n\n        // If loading element does not exist, create a placeholder\n        // This will let other icons know the element is being loaded and prevent multiple fetches\n        customLoaderElement = document.createElement('div');\n        customLoaderElement.classList.add(customLoaderClass);\n        customLoaderElement.dataset.url = this.customLoaderURL;\n        spriteContainer.appendChild(customLoaderElement);\n        return false;\n    }\n\n    cleanupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        clearTimeout(this.ariaLiveTimer);\n        this.observer?.disconnect();\n        this.observer = null;\n    }\n\n    cloneLoaderNode() {\n        const { customLoaderElement } = this;\n        this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n    }\n\n    async fetchLoader() {\n        const { isSkeletonType, customLoaderURL } = this;\n        this.hasCustomLoader = false;\n        if (isSkeletonType) {\n            return;\n        }\n\n        if (!customLoaderURL) return;\n        this.hasCustomLoader = true;\n\n        let { customLoaderElement } = this;\n        const loaderExists = this.checkForLoader();\n\n        if (loaderExists) return;\n\n        try {\n            const response = await fetch(customLoaderURL);\n\n            // Check for HTTP errors (including CORS issues that return error status)\n            if (!response.ok) {\n                throw new Error(\n                    `HTTP ${response.status}: Failed to fetch SVG. ` +\n                        `This may be due to incorrect URL, server error, or CORS restrictions.`\n                );\n            }\n\n            const svgText = await response.text();\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n            const svg = svgDoc.querySelector('svg');\n\n            if (!svg) throw new Error('No SVG found in the loaded content');\n\n            svg.dataset.loaded = '';\n            svg.dataset.url = customLoaderURL;\n            svg.classList.add(this.customLoaderClass);\n\n            customLoaderElement = this.customLoaderElement;\n            if (!customLoaderElement) return;\n            if (typeof customLoaderElement.replaceWith === 'function') {\n                customLoaderElement.replaceWith(svg);\n            } else {\n                customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n            }\n\n            svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n        } catch (error) {\n            // Provide more specific error messaging for common issues\n            if (error instanceof TypeError && error.message === 'Failed to fetch') {\n                console.error(\n                    `Failed to load custom loader from ${customLoaderURL}. ` +\n                        `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n                        `Ensure the server hosting the SVG includes proper CORS headers ` +\n                        `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n                    error\n                );\n            } else {\n                console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n            }\n        }\n    }\n\n    setupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        // The screen reader element starts out empty and is then populated by the\n        // label text after a delay to ensure that it is announced by screen\n        // readers.\n        const options = {\n            root: null,\n            rootMargin: '0px',\n            threshold: [1],\n        };\n        this.observer = new IntersectionObserver(entries => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    clearTimeout(this.ariaLiveTimer);\n                    this.ariaLiveTimer = setTimeout(() => {\n                        if (this.screenReaderElement) {\n                            this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n                        }\n                        this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n                        this.dontUpdateScreenReaderLabel = false;\n                    }, 2000);\n                } else {\n                    clearTimeout(this.ariaLiveTimer);\n                    if (this.screenReaderElement) {\n                        this.screenReaderElement.textContent = '';\n                    }\n                    this.dontUpdateScreenReaderLabel = true;\n                }\n            });\n        }, options);\n        this.observer.observe(this.hostElement);\n    }\n\n    updateScreenReaderLabel() {\n        if (this.dontUpdateScreenReaderLabel) return;\n        if (!this.screenReaderElement) return;\n        this.screenReaderElement.textContent = this.localizedLabel;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomLoaderContainer = () => {\n        return (\n            <div\n                id=\"custom-loader-container\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderHalfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                <svg\n                    class=\"loader\"\n                    viewBox=\"0 0 50 50\"\n                    role=\"presentation\"\n                >\n                    <circle\n                        class=\"head\"\n                        cx=\"25\"\n                        cy=\"25\"\n                        r=\"20\"\n                    />\n                </svg>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    get renderLoader() {\n        const loaderMap = {\n            default: this.renderSpinner,\n            spinner: this.renderSpinner,\n            skeleton: this.renderSkeletonLoader,\n            custom: this.renderCustomLoaderContainer,\n        };\n        const { type, hasCustomLoader } = this;\n        const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n        return loaderMap[loaderMapKey] || loaderMap.default;\n    }\n\n    renderSkeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderSpinner = () => {\n        return this.renderHalfCircleSpinner();\n    };\n\n    render() {\n        return this.renderLoader();\n    }\n\n    // #endregion\n}\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"q2-modal.js","sourceRoot":"","sources":["../../../../src/components/q2-modal/q2-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { ModalOption, ModalResponse } from 'q2-tecton-common/lib/utility/modal';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\n/**\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconFillColor: string;\n\n    /**\n     * The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokePrimary: string;\n\n    /**\n     * The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeSecondary: string;\n\n    /**\n     * The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeWidth: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.iconStrokePrimary = option?.iconStrokePrimary || this.iconStrokePrimary;\n            this.iconStrokeSecondary = option?.imageSrc || this.imageSrc;\n            this.iconFillColor = option?.iconFillColor || this.iconFillColor;\n            this.iconStrokeWidth = option?.iconStrokeWidth || this.iconStrokeWidth;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    // to be removed\n\n    iconStyle = () => {\n        const styleObject = {};\n        if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n        if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n        if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n        if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n        return styleObject;\n    };\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon\n                                    type={this.icon}\n                                    style={this.iconStyle()}\n                                ></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-modal.js","sourceRoot":"","sources":["../../../../src/components/q2-modal/q2-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconFillColor: string;\n\n    /**\n     * The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokePrimary: string;\n\n    /**\n     * The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeSecondary: string;\n\n    /**\n     * The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeWidth: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.iconStrokePrimary = option?.iconStrokePrimary || this.iconStrokePrimary;\n            this.iconStrokeSecondary = option?.imageSrc || this.imageSrc;\n            this.iconFillColor = option?.iconFillColor || this.iconFillColor;\n            this.iconStrokeWidth = option?.iconStrokeWidth || this.iconStrokeWidth;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    // to be removed\n\n    iconStyle = () => {\n        const styleObject = {};\n        if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n        if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n        if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n        if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n        return styleObject;\n    };\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon\n                                    type={this.icon}\n                                    style={this.iconStyle()}\n                                ></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-mutation-observer/q2-mutation-observer.js

@@ -0,0 +1,233 @@
+import { h } from "@stencil/core";
+export class Q2MutationObserver {
+    constructor() {
+        this.observedElements = [];
+        /**
+         * Determines whether or not to monitor children's attributes.
+         */
+        this.observeAttributes = false;
+        /**
+         * Determines whether or not to monitor children's child list.
+         */
+        this.observeChildList = false;
+        /**
+         * Determines whether or not to monitor children's sub tree.
+         */
+        this.observeSubTree = false;
+        // #endregion
+        // #region Local Methods
+        this.handleSlotChange = () => {
+            if (this.disabled)
+                return;
+            this.startObserver();
+        };
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.stopObserver();
+        this.mutationObserver = null;
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(mutationEntries => {
+                this.tctMutate.emit({ entries: mutationEntries });
+                this.currentMutationObserverEntries = mutationEntries;
+            });
+        }
+        else {
+            console.warn('MutationObserver is not defined.');
+        }
+        if (!this.disabled) {
+            this.startObserver();
+        }
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Returns the latest entries reported by the component.
+     */
+    async getCurrentMutationEntries() {
+        return this.currentMutationObserverEntries || [];
+    }
+    // #endregion
+    // #region Watchers
+    disabledUpdated(newVal) {
+        if (newVal) {
+            this.stopObserver();
+        }
+        else {
+            this.startObserver();
+        }
+    }
+    startObserver() {
+        var _a, _b;
+        const slot = this.hostElement.shadowRoot.querySelector('slot');
+        if (slot === null)
+            return;
+        const elements = (_b = (_a = slot.assignedElements) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : [];
+        // Unwatch previous elements
+        this.observedElements = [];
+        // Watch new elements
+        elements.forEach(el => {
+            var _a;
+            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
+                attributes: this.observeAttributes,
+                attributeOldValue: this.observeAttributes,
+                childList: this.observeChildList,
+                subtree: this.observeSubTree,
+            });
+            this.observedElements.push(el);
+        });
+    }
+    stopObserver() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return h("slot", { key: '7fdc58cd6c9e2cb77de3822b51f3a10d24fa312e', onSlotchange: this.handleSlotChange });
+    }
+    static get is() { return "q2-mutation-observer"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not events will be emitted from the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "observeAttributes": {
+                "type": "boolean",
+                "attribute": "observe-attributes",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not to monitor children's attributes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "observeChildList": {
+                "type": "boolean",
+                "attribute": "observe-child-list",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not to monitor children's child list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "observeSubTree": {
+                "type": "boolean",
+                "attribute": "observe-sub-tree",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not to monitor children's sub tree."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctMutate",
+                "name": "tctMutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when any of the observed elements are mutated."
+                },
+                "complexType": {
+                    "original": "{ entries: MutationRecord[] }",
+                    "resolved": "{ entries: MutationRecord[]; }",
+                    "references": {
+                        "MutationRecord": {
+                            "location": "global",
+                            "id": "global::MutationRecord"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getCurrentMutationEntries": {
+                "complexType": {
+                    "signature": "() => Promise<MutationRecord[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MutationRecord": {
+                            "location": "global",
+                            "id": "global::MutationRecord"
+                        }
+                    },
+                    "return": "Promise<MutationRecord[]>"
+                },
+                "docs": {
+                    "text": "Returns the latest entries reported by the component.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledUpdated"
+            }];
+    }
+}
+//# sourceMappingURL=q2-mutation-observer.js.map

package/dist/collection/components/q2-mutation-observer/q2-mutation-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-mutation-observer.js","sourceRoot":"","sources":["../../../../src/components/q2-mutation-observer/q2-mutation-observer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Method, Prop, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-mutation-observer',\n    shadow: true,\n})\nexport class Q2MutationObserver implements ComponentInterface {\n    // #region Own Properties\n\n    currentMutationObserverEntries: MutationRecord[];\n    mutationObserver?: MutationObserver;\n    observedElements: HTMLElement[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines whether or not events will be emitted from the component.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Determines whether or not to monitor children's attributes.\n     */\n    @Prop({ reflect: true })\n    observeAttributes: boolean = false;\n\n    /**\n     * Determines whether or not to monitor children's child list.\n     */\n    @Prop({ reflect: true })\n    observeChildList: boolean = false;\n\n    /**\n     * Determines whether or not to monitor children's sub tree.\n     */\n    @Prop({ reflect: true })\n    observeSubTree: boolean = false;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when any of the observed elements are mutated.\n     */\n    @Event()\n    tctMutate: EventEmitter<{ entries: MutationRecord[] }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.stopObserver();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            this.mutationObserver = new MutationObserver(mutationEntries => {\n                this.tctMutate.emit({ entries: mutationEntries });\n                this.currentMutationObserverEntries = mutationEntries;\n            });\n        } else {\n            console.warn('MutationObserver is not defined.');\n        }\n\n        if (!this.disabled) {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the latest entries reported by the component.\n     */\n    @Method()\n    async getCurrentMutationEntries(): Promise<MutationRecord[]> {\n        return this.currentMutationObserverEntries || [];\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated(newVal: boolean) {\n        if (newVal) {\n            this.stopObserver();\n        } else {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleSlotChange = () => {\n        if (this.disabled) return;\n        this.startObserver();\n    };\n    startObserver() {\n        const slot = this.hostElement.shadowRoot!.querySelector('slot');\n        if (slot === null) return;\n\n        const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n        // Unwatch previous elements\n        this.observedElements = [];\n\n        // Watch new elements\n        elements.forEach(el => {\n            this.mutationObserver?.observe(el, {\n                attributes: this.observeAttributes,\n                attributeOldValue: this.observeAttributes,\n                childList: this.observeChildList,\n                subtree: this.observeSubTree,\n            });\n            this.observedElements.push(el);\n        });\n    }\n\n    stopObserver() {\n        this.mutationObserver?.disconnect();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    // #endregion\n}\n"]}

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

@@ -48,7 +48,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'fa5f79f649208bcc9402ea9c1f38b8d1f560bb8c', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'b8bd998f0ef642933dfa306f1b5d7fa4720aa3e9', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '576288198e4ab810fbb155771250d549e897113d', class: "q2-optgroup-options" }, h("slot", { key: 'aff51cc1110ea0349a6640233751a8bbe75c6c2f' }))));
+        return (h("div", { key: '6e6845adbe22384888810b919bc18da5d69a24d3', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'e253dd79f9c62dd295d0638cc9a8bf84d6586ff1', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'f0b18181402a8d51e222f9cf6754bcc4ad0a778e', class: "q2-optgroup-options" }, h("slot", { key: 'e437cd9c912a3bfc3413e0f377f159a7ed7dde01' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }