@ukic/web-components 3.3.0 → 3.5.0

package/dist/components/ic-loading-indicator2.js

@@ -1,14 +1,28 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
-const icLoadingIndicatorCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-loading-indicator-inner-color);--outer-color:var(--ic-loading-indicator-outer-color);--label-color:var(--ic-loading-indicator-label-color);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-monochrome){--inner-color:var(--ic-loading-indicator-inner-color-monochrome);--outer-color:var(--ic-loading-indicator-outer-color-monochrome);--label-color:var(--ic-loading-indicator-label-color-monochrome)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"medium\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{height:100%;display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  )}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-step-indicator-text-disabled)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-border-hc)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
+const icLoadingIndicatorCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-loading-indicator-inner-color);--outer-color:var(--ic-loading-indicator-outer-color);--label-color:var(--ic-loading-indicator-label-color);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-monochrome){--inner-color:var(--ic-loading-indicator-inner-color-monochrome);--outer-color:var(--ic-loading-indicator-outer-color-monochrome);--label-color:var(--ic-loading-indicator-label-color-monochrome)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"medium\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}.inner-label{height:100%;display:grid}.inner-label .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  )}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-step-indicator-text-disabled)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-border-hc)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
 const IcLoadingIndicatorStyle0 = icLoadingIndicatorCss;
 
+const LOADING_INDICATOR_WIDTHS = {
+    large: 120,
+    medium: 80,
+    small: 40,
+    icon: 20,
+};
 const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.labelList = [];
+        this.circularDiameter = 0;
+        this.circularLineWidth = 0;
+        this.circularDimensions = {
+            x: 0,
+            y: 0,
+            r: 0,
+        };
         this.clipInnerElement = false;
         /**
          * The description that will be set as the aria-label of the loading indicator when not using a visible label.
@@ -40,213 +54,195 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
          * The size of the loading indicator.
          */
         this.size = "medium";
-        /**
-         * The type of indicator, either linear or circular.
-         */
-        this.type = "circular";
         /**
          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         this.theme = "inherit";
-        this.updateCircularProgressMeter = () => {
-            if (!this.indeterminate && this.circularMeter) {
-                this.circularMeter.style.setProperty("--progress-value", String(this.progress));
-            }
-        };
-        this.getLabel = (labelIndex, setLabel) => {
-            return new Promise(() => {
-                this.interval = setInterval(() => {
-                    if (labelIndex < this.labelList.length - 1) {
-                        labelIndex++;
-                    }
-                    else {
-                        labelIndex = 0;
-                    }
-                    setLabel(this.labelList[labelIndex]);
-                }, this.labelDuration);
-            });
-        };
+        /**
+         * The type of indicator, either linear or circular.
+         */
+        this.type = "circular";
+        this.getLabel = (labelIndex) => new Promise(() => {
+            this.interval = setInterval(() => {
+                if (labelIndex < this.labelList.length - 1) {
+                    labelIndex++;
+                }
+                else {
+                    labelIndex = 0;
+                }
+                this.indicatorLabel = this.labelList[labelIndex];
+            }, this.labelDuration);
+        });
         this.getLabelVariant = () => {
-            var _a;
-            let variant = "h4";
-            const width = (_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-            if (this.size === "small" ||
-                (width && this.type === "circular" && width < 60)) {
-                variant = "label";
+            const width = this.type === "circular" ? this.calculateWidth() : 0;
+            if (this.size === "small" || (width && width < 60)) {
+                return "label";
             }
-            else if (this.size === "large" ||
-                (width && this.type === "circular" && width >= 120)) {
-                variant = "h2";
+            else if (this.size === "large" || width >= 120) {
+                return "h2";
             }
-            return variant;
+            return "h4";
         };
-        // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
-        this.setCircleLineWidth = () => {
-            const compactStepCircularLineWidth = this.el.classList.contains("compact-step-progress-indicator")
-                ? 40
-                : 0;
-            const toastDismissTimerCircularLineWidth = this.el.classList.contains("toast-dismiss-timer")
-                ? 20
-                : 0;
+        this.calculateWidth = () => {
+            var _a, _b, _c;
+            if ((_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth)
+                return this.outerElement.offsetWidth;
             if (this.outerElement) {
-                const { offsetWidth: width } = this.outerElement;
-                if (width ||
-                    compactStepCircularLineWidth ||
-                    toastDismissTimerCircularLineWidth) {
-                    this.circularLineWidth =
-                        (compactStepCircularLineWidth ||
-                            toastDismissTimerCircularLineWidth ||
-                            width) * 0.1;
-                    this.circularDiameter =
-                        compactStepCircularLineWidth ||
-                            toastDismissTimerCircularLineWidth ||
-                            width;
-                    this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                const { width } = window.getComputedStyle(this.outerElement);
+                if (width) {
+                    // Regex to check the units of the css string
+                    if (((_b = width.match(/\D+$/)) === null || _b === void 0 ? void 0 : _b[0]) !== "%")
+                        return parseFloat(width);
+                    const parentWidth = (_c = this.outerElement.parentElement) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+                    if (parentWidth)
+                        return parentWidth * (parseFloat(width) / 100);
                 }
             }
+            return LOADING_INDICATOR_WIDTHS[this.size];
         };
         this.setLinearDeterminateWidth = () => {
-            const max = this.max;
-            const min = this.min;
-            if (!this.innerElement)
-                return;
             // Ensure progress cannot be out of bounds
-            if (this.progress) {
-                const progress = Math.min(max, Math.max(min, this.progress));
-                const proportion = (progress - min) / (max - min);
-                this.clipInnerElement = proportion > 0.5;
-                if (this.clipInnerElement) {
-                    this.innerElement.classList.remove("clip");
-                }
-                else {
-                    this.innerElement.classList.add("clip");
-                }
-                this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
+            if (!this.innerElement || !this.progress)
+                return;
+            const progress = Math.min(this.max, Math.max(this.min, this.progress));
+            const proportion = (progress - this.min) / (this.max - this.min);
+            this.clipInnerElement = proportion > 0.5;
+            if (this.clipInnerElement) {
+                this.innerElement.classList.remove("clip");
             }
-        };
-        this.calcOuterClass = () => {
-            let cls = `ic-loading-${this.type}-outer`;
-            cls += this.indeterminate ? " indeterminate" : " determinate";
-            return cls;
+            else {
+                this.innerElement.classList.add("clip");
+            }
+            this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
         };
         this.updateLabel = () => {
-            if (this.label !== undefined) {
-                if (typeof this.label === "string") {
-                    this.indicatorLabel = this.label;
-                }
-                else {
-                    this.labelList = this.label;
-                    const labelIndex = 0;
-                    this.indicatorLabel = this.labelList[labelIndex];
-                    if (this.labelList.length > 1) {
-                        this.getLabel(labelIndex, (label) => {
-                            this.indicatorLabel = label;
-                        });
-                    }
-                }
+            if (!this.label)
+                return;
+            if (typeof this.label === "string") {
+                this.indicatorLabel = this.label;
             }
-        };
-        this.setCircleXY = () => {
-            if (this.circularDiameter > 0) {
-                const r = this.circularDiameter / 2;
-                const x = r;
-                const y = r;
-                const nextRadius = r - this.circularLineWidth / 2;
-                this.setDashSteps(nextRadius);
-                return { x, y, r: nextRadius };
+            else {
+                this.labelList = this.label;
+                this.indicatorLabel = this.labelList[0];
+                if (this.labelList.length > 1) {
+                    this.getLabel(0);
+                }
             }
-            return { x: 0, y: 0, r: 0 };
         };
-        this.setDashSteps = (radius) => {
-            const dashArray = 2 * Math.PI * radius;
-            if (this.circularMeter) {
-                this.circularMeter.style.setProperty("--stroke-dasharray", `${dashArray}px`);
-                if (!this.indeterminate && this.progress) {
-                    const min = this.min;
-                    const max = this.max;
-                    const progress = Math.min(Math.max(this.progress, min), max);
-                    const proportion = -1 - (progress - min) / (max - min);
-                    this.circularMeter.style.setProperty("--circular-steps-max", String(this.max));
-                    this.circularMeter.style.setProperty("--stroke-dashoffset", `${proportion * dashArray}px`);
-                }
+        this.setCircleDimensions = () => {
+            let dashOffset = undefined;
+            if (this.circularDiameter <= 0)
+                return;
+            const r = this.circularDiameter / 2;
+            const nextRadius = r - this.circularLineWidth / 2;
+            const dashArray = 2 * Math.PI * nextRadius;
+            if (this.progress) {
+                const progress = Math.min(Math.max(this.progress, this.min), this.max);
+                dashOffset = `${(-1 - (progress - this.min) / (this.max - this.min)) * dashArray}px`;
             }
+            this.circularDimensions = {
+                x: r,
+                y: r,
+                r: nextRadius,
+                dashArray: `${dashArray}px`,
+                dashOffset,
+            };
         };
     }
     watchPropHandler() {
         this.updateLabel();
     }
+    minMaxChangeHandler() {
+        if (this.type === "circular")
+            this.setCircleDimensions();
+    }
     watchProgressHandler() {
+        if (this.type === "linear") {
+            this.setLinearDeterminateWidth();
+        }
+        else {
+            this.setCircleDimensions();
+        }
+    }
+    setIndicatorDimensions() {
         if (this.type === "circular") {
-            this.updateCircularProgressMeter();
+            // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
+            const diameter = this.calculateWidth();
+            if (this.outerElement && diameter !== this.circularDiameter) {
+                this.circularLineWidth = diameter * 0.1;
+                this.circularDiameter = diameter;
+                this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                this.setCircleDimensions();
+            }
+        }
+        else {
+            this.setLinearDeterminateWidth();
         }
     }
     disconnectedCallback() {
         clearInterval(this.interval);
     }
     componentWillLoad() {
-        this.indeterminate = this.progress === undefined;
         this.updateLabel();
         this.el.setAttribute("exportparts", "ic-loading-container");
     }
     componentDidLoad() {
-        var _a;
-        if (this.type === "circular") {
-            this.setCircleLineWidth();
-            this.circularMeter = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ic-loading-circular-svg circle:nth-child(2)");
-            this.updateCircularProgressMeter();
-        }
-        if (Number(this.progress) >= 0 && this.type === "linear") {
-            this.setLinearDeterminateWidth();
-        }
-    }
-    componentWillUpdate() {
-        this.indeterminate = this.progress === undefined;
-    }
-    componentDidUpdate() {
-        if (Number(this.progress) >= 0 && this.type === "linear") {
-            this.setLinearDeterminateWidth();
-        }
+        this.setIndicatorDimensions();
     }
     render() {
-        const { theme, label, description, size, fullWidth, innerLabel, monochrome, } = this;
-        const { x, y, r } = this.setCircleXY();
-        return (h(Host, { key: 'af8aecb7e2feb45574ce1dbce238e24ece0a7c14', class: {
+        const { theme, label, description, size, fullWidth, innerLabel, monochrome, type, progress, min, max, circularDiameter, indicatorLabel, circularDimensions, } = this;
+        const { x, y, r, dashArray, dashOffset } = circularDimensions;
+        return (h(Host, { key: '7f78047511c580f116c21d00e76a19dee3319d60', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
+                "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
-                "ic-loading-indicator-full-width": !!fullWidth,
+                "ic-loading-indicator-monochrome": monochrome,
+            } }, h("div", { key: 'eec896daa35399c26a11873674ba4bc4fd099ddc', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'b3ab1935e9fe5d50cd6513acd7a8eabb31fadf98', ref: (el) => (this.outerElement = el), class: {
+                [`ic-loading-${type}-outer`]: true,
+                [progress === undefined ? "indeterminate" : "determinate"]: true,
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '2f6e1f2e1a88b752cdda2a6b2834441e8546eb9b', ref: (el) => (this.innerElement = el), class: {
+                [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-                "ic-loading-indicator-monochrome": !!monochrome,
-            } }, h("div", { key: '46a3bbc13400779a3aa92324f84b2a0515a34a64', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'ff16f2f3f71e2338834eb1852f5b362332517a09', ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '4c0937928bd38982462ad36d6df98ecd5729b64e', ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
-            this.innerLabel !== undefined &&
-            this.size === "small" && (h("ic-typography", { key: '13c9dbbead841cf7995caefc63bb86d8c0e40d2d', variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { key: '12decbb0441c22e9c0f7f82b8c7737b24c44bf01', class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { key: '96ba0e0a054be9be9f707903ae8d8075ab92b360', cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { key: 'b986b1626971075e86063a898948df490856cd3d', cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { key: '5d3ceea4f339006c6389a99ea52befaea885988a', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: '5dfc851559b8ef4fb2b4fca4a002d87ad1b52d43' }, this.indicatorLabel))))));
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: 'c0d18d282c7090aa2bf478c3beee03e6c2b2f61d', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'a5827dba8cff99684667dfa1147186ad0bd3f7a1', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: 'c53d2155e9aea468427178f5a41e0a24b02565fa', cx: x, cy: y, r: r }), h("circle", { key: 'c5b6aea5b936b056a8103c0dacb81822348b20d1', style: {
+                "--circular-steps-max": progress ? `${max}` : undefined,
+                "--progress-value": progress !== undefined ? `${progress}` : undefined,
+                "--stroke-dasharray": dashArray,
+                "--stroke-dashoffset": dashOffset,
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: 'e586d3c31d518a77bf93f90504318e3a5baeeb64', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: 'd1c0b977ef4441ae45f4122a7a0ee03b33b4421b' }, indicatorLabel))))));
     }
     get el() { return this; }
     static get watchers() { return {
         "label": ["watchPropHandler"],
-        "progress": ["watchProgressHandler"]
+        "max": ["minMaxChangeHandler"],
+        "min": ["minMaxChangeHandler"],
+        "progress": ["watchProgressHandler"],
+        "type": ["setIndicatorDimensions"]
     }; }
     static get style() { return IcLoadingIndicatorStyle0; }
 }, [1, "ic-loading-indicator", {
         "description": [1],
         "fullWidth": [516, "full-width"],
         "innerLabel": [2, "inner-label"],
+        "label": [1],
         "labelDuration": [2, "label-duration"],
         "max": [2],
         "min": [2],
         "monochrome": [4],
-        "size": [513],
-        "type": [513],
-        "label": [1],
         "progress": [2],
+        "size": [513],
         "theme": [1],
+        "type": [513],
         "circularDiameter": [32],
         "circularLineWidth": [32],
-        "indeterminate": [32],
+        "circularDimensions": [32],
         "indicatorLabel": [32],
         "clipInnerElement": [32]
     }, undefined, {
         "label": ["watchPropHandler"],
-        "progress": ["watchProgressHandler"]
+        "max": ["minMaxChangeHandler"],
+        "min": ["minMaxChangeHandler"],
+        "progress": ["watchProgressHandler"],
+        "type": ["setIndicatorDimensions"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/ic-loading-indicator2.js.map

@@ -1 +1 @@
-{"file":"ic-loading-indicator2.js","mappings":"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","names":[],"sources":["src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  /**\n   * @prop --circular-diameter: Diameter of the circular-indicator\n   */\n\n  display: block;\n\n  --linear-border-radius: 0.25rem;\n  --inner-color: var(--ic-loading-indicator-inner-color);\n  --outer-color: var(--ic-loading-indicator-outer-color);\n  --label-color: var(--ic-loading-indicator-label-color);\n  --margin: none;\n  --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.ic-loading-indicator-monochrome) {\n  --inner-color: var(--ic-loading-indicator-inner-color-monochrome);\n  --outer-color: var(--ic-loading-indicator-outer-color-monochrome);\n  --label-color: var(--ic-loading-indicator-label-color-monochrome);\n}\n\n.ic-loading-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n:host([size=\"small\"]) {\n  --circular-diameter: 2.5rem;\n  --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"medium\"]) {\n  --circular-diameter: 5rem;\n}\n\n:host([size=\"large\"]) {\n  --circular-diameter: 7.5rem;\n}\n\n:host([size=\"icon\"]) {\n  display: inline-block;\n\n  --margin: var(--ic-space-xxxs);\n  --circular-diameter: 1.25rem;\n}\n\n:host(.ic-loading-indicator-label) {\n  --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n  --ic-typography-color: var(--label-color);\n\n  margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n  animation: circular-animation 1s linear;\n  animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n  margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n  background-color: var(--outer-color);\n  height: var(--linear-line-height);\n  width: 100%;\n  border-radius: var(--linear-border-radius);\n  overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n  position: relative;\n  height: 100%;\n  background-color: var(--inner-color);\n  border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n  animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n  transition: width 0.5s;\n  width: var(--linear-width);\n}\n\n:host(.ic-loading-indicator-full-width) {\n  --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n  0% {\n    width: 0%;\n    left: -1%;\n  }\n\n  25% {\n    width: 0%;\n    left: -1%;\n  }\n\n  50% {\n    width: 101%;\n    left: -1%;\n  }\n\n  75% {\n    width: 0%;\n    left: 101%;\n  }\n\n  100% {\n    width: 0%;\n    left: 101%;\n  }\n}\n\n.ic-loading-circular-svg {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: var(--compact-step-outer-color, var(--outer-color));\n  stroke-width: var(--circular-line-width);\n  stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n  --circular-indeterminate: calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );\n\n  stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n  stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n  stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n:host(.inner-label) .ic-loading-circular-inner {\n  height: 100%;\n  display: grid;\n}\n\n:host(.inner-label) .ic-loading-circular-svg,\n.inner-text {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n/** ic-stepper **/\n:host(.not-required.compact-step-progress-indicator)\n  .ic-loading-circular-svg\n  circle:nth-child(2) {\n  stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ic-space-lg);\n  height: inherit;\n  overflow: hidden;\n  margin: auto;\n\n  --ic-typography-color: var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  );\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n  --ic-typography-color: var(--ic-step-indicator-text-disabled);\n}\n\n:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)\n  .inner-text {\n  --ic-typography-color: var(--ic-architectural-400);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .indeterminate > .ic-loading-circular-inner {\n    forced-color-adjust: none;\n  }\n\n  .ic-loading-linear-outer {\n    border: var(--ic-border-hc);\n  }\n\n  .ic-loading-linear-inner {\n    background-color: canvastext;\n  }\n\n  .ic-loading-circular-svg circle {\n    stroke: Background;\n  }\n\n  .ic-loading-circular-svg circle:nth-child(2) {\n    stroke: canvastext;\n  }\n\n  :host(.not-required.compact-step-progress-indicator)\n    .ic-loading-circular-svg\n    circle:nth-child(2) {\n    stroke: GrayText;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport { IcThemeMode, IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  private circularMeter?: SVGCircleElement | null;\n  private innerElement?: HTMLDivElement;\n  private interval: ReturnType<typeof setInterval>;\n  private labelList: string[];\n  private outerElement?: HTMLDivElement;\n\n  @Element() el: HTMLIcLoadingIndicatorElement;\n\n  @State() circularDiameter: number;\n  @State() circularLineWidth: number;\n  @State() indeterminate: boolean;\n  @State() indicatorLabel: string;\n  @State() clipInnerElement: boolean = false;\n\n  /**\n   * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description?: string = \"Loading\";\n\n  /**\n   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /**\n   * @internal The step number of a compact step, managed by ic-step.\n   */\n  @Prop() innerLabel?: number;\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration?: number = 8000;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max?: number = 100;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min?: number = 0;\n\n  /**\n   * If `true`, the element will display as black and white.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"medium\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by supplying an array of messages.\n   */\n  @Prop() label?: string | string[];\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    if (this.type === \"circular\") {\n      this.updateCircularProgressMeter();\n    }\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    clearInterval(this.interval);\n  }\n\n  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n    this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n  }\n\n  componentDidLoad(): void {\n    if (this.type === \"circular\") {\n      this.setCircleLineWidth();\n      this.circularMeter = this.el.shadowRoot?.querySelector(\n        \".ic-loading-circular-svg circle:nth-child(2)\"\n      );\n      this.updateCircularProgressMeter();\n    }\n\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  private updateCircularProgressMeter = () => {\n    if (!this.indeterminate && this.circularMeter) {\n      this.circularMeter.style.setProperty(\n        \"--progress-value\",\n        String(this.progress)\n      );\n    }\n  };\n\n  private getLabel = (\n    labelIndex: number,\n    setLabel: (label: string) => void\n  ) => {\n    return new Promise(() => {\n      this.interval = setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        setLabel(this.labelList[labelIndex]);\n      }, this.labelDuration);\n    });\n  };\n\n  private getLabelVariant = (): IcTypographyVariants => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (\n      this.size === \"small\" ||\n      (width && this.type === \"circular\" && width < 60)\n    ) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (width && this.type === \"circular\" && width >= 120)\n    ) {\n      variant = \"h2\";\n    }\n    return variant;\n  };\n\n  // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n  private setCircleLineWidth = () => {\n    const compactStepCircularLineWidth = this.el.classList.contains(\n      \"compact-step-progress-indicator\"\n    )\n      ? 40\n      : 0;\n    const toastDismissTimerCircularLineWidth = this.el.classList.contains(\n      \"toast-dismiss-timer\"\n    )\n      ? 20\n      : 0;\n\n    if (this.outerElement) {\n      const { offsetWidth: width } = this.outerElement;\n\n      if (\n        width ||\n        compactStepCircularLineWidth ||\n        toastDismissTimerCircularLineWidth\n      ) {\n        this.circularLineWidth =\n          (compactStepCircularLineWidth ||\n            toastDismissTimerCircularLineWidth ||\n            width) * 0.1;\n        this.circularDiameter =\n          compactStepCircularLineWidth ||\n          toastDismissTimerCircularLineWidth ||\n          width;\n        this.outerElement.style.setProperty(\n          \"--circular-line-width\",\n          `${this.circularLineWidth}px`\n        );\n      }\n    }\n  };\n\n  private setLinearDeterminateWidth = () => {\n    const max = this.max!;\n    const min = this.min!;\n\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\n\n    if (this.progress) {\n      const progress = Math.min(max, Math.max(min, this.progress));\n      const proportion = (progress - min) / (max - min);\n      this.clipInnerElement = proportion > 0.5;\n      if (this.clipInnerElement) {\n        this.innerElement.classList.remove(\"clip\");\n      } else {\n        this.innerElement.classList.add(\"clip\");\n      }\n      this.innerElement.style.setProperty(\n        \"--linear-width\",\n        `${proportion * 100}%`\n      );\n    }\n  };\n\n  private calcOuterClass = (): string => {\n    let cls = `ic-loading-${this.type}-outer`;\n    cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n    return cls;\n  };\n\n  private updateLabel = (): void => {\n    if (this.label !== undefined) {\n      if (typeof this.label === \"string\") {\n        this.indicatorLabel = this.label;\n      } else {\n        this.labelList = this.label;\n        const labelIndex = 0;\n        this.indicatorLabel = this.labelList[labelIndex];\n        if (this.labelList.length > 1) {\n          this.getLabel(labelIndex, (label) => {\n            this.indicatorLabel = label;\n          });\n        }\n      }\n    }\n  };\n\n  private setCircleXY = (): IcLoadingCircleXYR => {\n    if (this.circularDiameter > 0) {\n      const r = this.circularDiameter / 2;\n      const x = r;\n      const y = r;\n      const nextRadius = r - this.circularLineWidth / 2;\n      this.setDashSteps(nextRadius);\n\n      return { x, y, r: nextRadius };\n    }\n    return { x: 0, y: 0, r: 0 };\n  };\n\n  private setDashSteps = (radius: number) => {\n    const dashArray = 2 * Math.PI * radius;\n\n    if (this.circularMeter) {\n      this.circularMeter.style.setProperty(\n        \"--stroke-dasharray\",\n        `${dashArray}px`\n      );\n\n      if (!this.indeterminate && this.progress) {\n        const min = this.min!;\n        const max = this.max!;\n        const progress = Math.min(Math.max(this.progress, min), max);\n        const proportion = -1 - (progress - min) / (max - min);\n        this.circularMeter.style.setProperty(\n          \"--circular-steps-max\",\n          String(this.max)\n        );\n        this.circularMeter.style.setProperty(\n          \"--stroke-dashoffset\",\n          `${proportion * dashArray}px`\n        );\n      }\n    }\n  };\n\n  render() {\n    const {\n      theme,\n      label,\n      description,\n      size,\n      fullWidth,\n      innerLabel,\n      monochrome,\n    } = this;\n    const { x, y, r } = this.setCircleXY();\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          \"ic-loading-indicator-label\": !!label,\n          \"ic-loading-indicator-full-width\": !!fullWidth,\n          \"inner-label\": !!innerLabel,\n          \"ic-loading-indicator-monochrome\": !!monochrome,\n        }}\n      >\n        <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el as HTMLDivElement)}\n            class={this.calcOuterClass()}\n            role=\"progressbar\"\n            aria-labelledby={\n              this.label && this.size !== \"icon\" && \"ic-loading-label\"\n            }\n            aria-label={description}\n            aria-valuenow={this.progress}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el as HTMLDivElement)}\n              class={`ic-loading-${this.type}-inner`}\n            >\n              {this.innerLabel &&\n                this.innerLabel !== undefined &&\n                this.size === \"small\" && (\n                  <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n                    {this.innerLabel}\n                  </ic-typography>\n                )}\n              {this.type === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${this.circularDiameter || 0} ${\n                    this.circularDiameter || 0\n                  }`}\n                >\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{this.indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-loading-indicator2.js","mappings":"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","names":[],"sources":["src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  /**\n   * @prop --circular-diameter: Diameter of the circular-indicator in px, rem or %\n   */\n\n  display: block;\n\n  --linear-border-radius: 0.25rem;\n  --inner-color: var(--ic-loading-indicator-inner-color);\n  --outer-color: var(--ic-loading-indicator-outer-color);\n  --label-color: var(--ic-loading-indicator-label-color);\n  --margin: none;\n  --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.ic-loading-indicator-monochrome) {\n  --inner-color: var(--ic-loading-indicator-inner-color-monochrome);\n  --outer-color: var(--ic-loading-indicator-outer-color-monochrome);\n  --label-color: var(--ic-loading-indicator-label-color-monochrome);\n}\n\n.ic-loading-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n:host([size=\"small\"]) {\n  --circular-diameter: 2.5rem;\n  --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"medium\"]) {\n  --circular-diameter: 5rem;\n}\n\n:host([size=\"large\"]) {\n  --circular-diameter: 7.5rem;\n}\n\n:host([size=\"icon\"]) {\n  display: inline-block;\n\n  --margin: var(--ic-space-xxxs);\n  --circular-diameter: 1.25rem;\n}\n\n:host(.ic-loading-indicator-label) {\n  --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n  --ic-typography-color: var(--label-color);\n\n  margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n  animation: circular-animation 1s linear;\n  animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n  margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n  background-color: var(--outer-color);\n  height: var(--linear-line-height);\n  width: 100%;\n  border-radius: var(--linear-border-radius);\n  overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n  position: relative;\n  height: 100%;\n  background-color: var(--inner-color);\n  border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n  animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n  transition: width 0.5s;\n  width: var(--linear-width);\n}\n\n:host(.ic-loading-indicator-full-width) {\n  --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n  0% {\n    width: 0%;\n    left: -1%;\n  }\n\n  25% {\n    width: 0%;\n    left: -1%;\n  }\n\n  50% {\n    width: 101%;\n    left: -1%;\n  }\n\n  75% {\n    width: 0%;\n    left: 101%;\n  }\n\n  100% {\n    width: 0%;\n    left: 101%;\n  }\n}\n\n.ic-loading-circular-svg {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: var(--compact-step-outer-color, var(--outer-color));\n  stroke-width: var(--circular-line-width);\n  stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n  --circular-indeterminate: calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );\n\n  stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n  stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n  stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n.inner-label {\n  height: 100%;\n  display: grid;\n}\n\n.inner-label .ic-loading-circular-svg,\n.inner-text {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n/** ic-stepper **/\n:host(.not-required.compact-step-progress-indicator)\n  .ic-loading-circular-svg\n  circle:nth-child(2) {\n  stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ic-space-lg);\n  height: inherit;\n  overflow: hidden;\n  margin: auto;\n\n  --ic-typography-color: var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  );\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n  --ic-typography-color: var(--ic-step-indicator-text-disabled);\n}\n\n:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)\n  .inner-text {\n  --ic-typography-color: var(--ic-architectural-400);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .indeterminate > .ic-loading-circular-inner {\n    forced-color-adjust: none;\n  }\n\n  .ic-loading-linear-outer {\n    border: var(--ic-border-hc);\n  }\n\n  .ic-loading-linear-inner {\n    background-color: canvastext;\n  }\n\n  .ic-loading-circular-svg circle {\n    stroke: Background;\n  }\n\n  .ic-loading-circular-svg circle:nth-child(2) {\n    stroke: canvastext;\n  }\n\n  :host(.not-required.compact-step-progress-indicator)\n    .ic-loading-circular-svg\n    circle:nth-child(2) {\n    stroke: GrayText;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst LOADING_INDICATOR_WIDTHS = {\n  large: 120,\n  medium: 80,\n  small: 40,\n  icon: 20,\n};\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  private innerElement?: HTMLDivElement;\n  private interval: ReturnType<typeof setInterval>;\n  private labelList: string[] = [];\n  private outerElement?: HTMLDivElement;\n\n  @Element() el: HTMLIcLoadingIndicatorElement;\n\n  @State() circularDiameter = 0;\n  @State() circularLineWidth = 0;\n  @State() circularDimensions: IcLoadingCircleXYR = {\n    x: 0,\n    y: 0,\n    r: 0,\n  };\n  @State() indicatorLabel?: string;\n  @State() clipInnerElement = false;\n\n  /**\n   * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description = \"Loading\";\n\n  /**\n   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /**\n   * @internal The step number of a compact step, managed by ic-step.\n   */\n  @Prop() innerLabel?: number;\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by supplying an array of messages.\n   */\n  @Prop() label?: string | string[];\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration = 8000;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max = 100;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min = 0;\n  @Watch(\"max\")\n  @Watch(\"min\")\n  minMaxChangeHandler(): void {\n    if (this.type === \"circular\") this.setCircleDimensions();\n  }\n\n  /**\n   * If `true`, the element will display as black and white.\n   */\n  @Prop() monochrome = false;\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    if (this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    } else {\n      this.setCircleDimensions();\n    }\n  }\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size: IcLoadingSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type: IcLoadingTypes = \"circular\";\n  @Watch(\"type\")\n  setIndicatorDimensions(): void {\n    if (this.type === \"circular\") {\n      // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n      const diameter = this.calculateWidth();\n      if (this.outerElement && diameter !== this.circularDiameter) {\n        this.circularLineWidth = diameter * 0.1;\n        this.circularDiameter = diameter;\n        this.outerElement.style.setProperty(\n          \"--circular-line-width\",\n          `${this.circularLineWidth}px`\n        );\n        this.setCircleDimensions();\n      }\n    } else {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  disconnectedCallback(): void {\n    clearInterval(this.interval);\n  }\n\n  componentWillLoad(): void {\n    this.updateLabel();\n    this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n  }\n\n  componentDidLoad(): void {\n    this.setIndicatorDimensions();\n  }\n\n  private getLabel = (labelIndex: number) =>\n    new Promise(() => {\n      this.interval = setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        this.indicatorLabel = this.labelList[labelIndex];\n      }, this.labelDuration);\n    });\n\n  private getLabelVariant = () => {\n    const width = this.type === \"circular\" ? this.calculateWidth() : 0;\n\n    if (this.size === \"small\" || (width && width < 60)) {\n      return \"label\";\n    } else if (this.size === \"large\" || width >= 120) {\n      return \"h2\";\n    }\n    return \"h4\";\n  };\n\n  private calculateWidth = () => {\n    if (this.outerElement?.offsetWidth) return this.outerElement.offsetWidth;\n\n    if (this.outerElement) {\n      const { width } = window.getComputedStyle(this.outerElement);\n\n      if (width) {\n        // Regex to check the units of the css string\n        if (width.match(/\\D+$/)?.[0] !== \"%\") return parseFloat(width);\n\n        const parentWidth = this.outerElement.parentElement?.offsetWidth;\n        if (parentWidth) return parentWidth * (parseFloat(width) / 100);\n      }\n    }\n\n    return LOADING_INDICATOR_WIDTHS[this.size];\n  };\n\n  private setLinearDeterminateWidth = () => {\n    // Ensure progress cannot be out of bounds\n    if (!this.innerElement || !this.progress) return;\n\n    const progress = Math.min(this.max, Math.max(this.min, this.progress));\n    const proportion = (progress - this.min) / (this.max - this.min);\n    this.clipInnerElement = proportion > 0.5;\n    if (this.clipInnerElement) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private updateLabel = () => {\n    if (!this.label) return;\n\n    if (typeof this.label === \"string\") {\n      this.indicatorLabel = this.label;\n    } else {\n      this.labelList = this.label;\n      this.indicatorLabel = this.labelList[0];\n      if (this.labelList.length > 1) {\n        this.getLabel(0);\n      }\n    }\n  };\n\n  private setCircleDimensions = () => {\n    let dashOffset = undefined;\n\n    if (this.circularDiameter <= 0) return;\n\n    const r = this.circularDiameter / 2;\n    const nextRadius = r - this.circularLineWidth / 2;\n\n    const dashArray = 2 * Math.PI * nextRadius;\n\n    if (this.progress) {\n      const progress = Math.min(Math.max(this.progress, this.min), this.max);\n      dashOffset = `${\n        (-1 - (progress - this.min) / (this.max - this.min)) * dashArray\n      }px`;\n    }\n\n    this.circularDimensions = {\n      x: r,\n      y: r,\n      r: nextRadius,\n      dashArray: `${dashArray}px`,\n      dashOffset,\n    };\n  };\n\n  render() {\n    const {\n      theme,\n      label,\n      description,\n      size,\n      fullWidth,\n      innerLabel,\n      monochrome,\n      type,\n      progress,\n      min,\n      max,\n      circularDiameter,\n      indicatorLabel,\n      circularDimensions,\n    } = this;\n    const { x, y, r, dashArray, dashOffset } = circularDimensions;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          \"ic-loading-indicator-full-width\": fullWidth,\n          \"ic-loading-indicator-label\": !!label,\n          \"ic-loading-indicator-monochrome\": monochrome,\n        }}\n      >\n        <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el)}\n            class={{\n              [`ic-loading-${type}-outer`]: true,\n              [progress === undefined ? \"indeterminate\" : \"determinate\"]: true,\n            }}\n            role=\"progressbar\"\n            aria-labelledby={label && size !== \"icon\" && \"ic-loading-label\"}\n            aria-label={description}\n            aria-valuenow={progress}\n            aria-valuemin={min}\n            aria-valuemax={max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el)}\n              class={{\n                [`ic-loading-${type}-inner`]: true,\n                \"inner-label\": !!innerLabel,\n              }}\n            >\n              {innerLabel && size === \"small\" && (\n                <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n                  {innerLabel}\n                </ic-typography>\n              )}\n              {type === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${circularDiameter} ${circularDiameter}`}\n                >\n                  <circle cx={x} cy={y} r={r}></circle>\n                  <circle\n                    style={{\n                      \"--circular-steps-max\": progress ? `${max}` : undefined,\n                      \"--progress-value\":\n                        progress !== undefined ? `${progress}` : undefined,\n                      \"--stroke-dasharray\": dashArray,\n                      \"--stroke-dashoffset\": dashOffset,\n                    }}\n                    cx={x}\n                    cy={y}\n                    r={r}\n                  ></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-menu-group.js

@@ -13,7 +13,7 @@ const MenuGroup = /*@__PURE__*/ proxyCustomElement(class MenuGroup extends HTMLE
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (h(Host, { key: '384be493b4b4148e4a09f0395bb1db6b651bfc2f', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '46982951ac8573a5ee8c5733043e109f268859f8', variant: "subtitle-small" }, this.label)), h("span", { key: 'd5a5fe976b9f88e61df589c1ddc105c31b8639e2', class: "menu-items-wrapper" }, h("slot", { key: '3b6cab53fde94c5a9cbc0a6a323c0aff28975a1c' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '60412dd9914569ad72a6160787b48d8b3239cebb' }))));
+        return (h(Host, { key: 'ec777b0d41cd1bb5d7751e61e702a45341f3080a', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '31d4b7ba6d46a89c8c843654a2ded8ca993b1803', variant: "subtitle-small" }, this.label)), h("span", { key: '3f1472c581431ea8c80dfc79a98b34d6ad2418f2', class: "menu-items-wrapper" }, h("slot", { key: '68c43747e9948fdec7dff7c5e0d2a69d2bc73b62' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: 'b6540d15632b2d798ec6ead8d55fde5bca1e49f6' }))));
     }
     get el() { return this; }
     static get style() { return IcMenuGroupStyle0; }