@ukic/canary-web-components 3.0.0-canary.19 → 3.0.0-canary.20

package/dist/esm/ic-button_3.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement, F as Fragment } from './index-a7a720e7.js';
-import { u as IC_INHERITED_ARIA, r as removeDisabledFalse, t as inheritAttributes, a0 as renderFileHiddenInput, h as getBrandFromContext, I as IcBrandForegroundEnum, i as isSlotUsed, b as onComponentRequiredPropUndefined } from './helpers-fc03923c.js';
+import { v as IC_INHERITED_ARIA, r as removeDisabledFalse, t as inheritAttributes, a1 as renderFileHiddenInput, h as getBrandFromContext, I as IcBrandForegroundEnum, i as isSlotUsed, b as onComponentRequiredPropUndefined } from './helpers-f094ef64.js';
 import { c as createPopper } from './popper-b8cc3f16.js';
 
 const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -368,14 +368,14 @@ const Button = class {
                 : undefined;
         const hasLeftIcon = !!this.getSlottedIcon("left");
         const hasRightIcon = !!this.getSlottedIcon("right");
-        const ButtonContent = () => this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(TagType, Object.assign({ class: "button", "aria-disabled": loading || disabled ? "true" : null, "aria-label": loading ? "Loading" : ariaLabel, "aria-expanded": dropdown && `${dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: onFocus, onBlur: onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedby, part: "button" }), loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", monochrome: monochrome, theme: theme }))) : (h(Fragment, null, (hasLeftIcon ||
+        const ButtonContent = () => this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(TagType, Object.assign({ class: "button", tabindex: 0, "aria-disabled": loading || disabled ? "true" : null, "aria-label": loading ? "Loading" : ariaLabel, "aria-expanded": dropdown && `${dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: onFocus, onBlur: onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedby, part: "button" }), loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", monochrome: monochrome, theme: theme }))) : (h(Fragment, null, (hasLeftIcon ||
             (!!this.getSlottedIcon("top") && !hasRightIcon)) && (h("div", { class: "icon-container" }, h("slot", { name: `${hasLeftIcon ? "left" : "top"}-icon` }))), h("slot", null), !dropdown
             ? hasRightIcon && (h("div", { class: { "icon-container": true, "right-icon": true } }, h("slot", { name: "right-icon" })))
             : variant !== "icon" &&
                 variant !== "destructive" && (h("span", { class: dropdownExpanded
                     ? "dropdown-expanded"
                     : "arrow-dropdown", innerHTML: arrowDropdown }))))));
-        return (h(Host, { key: '76e9eabe7c49342e8b6c931180281063d6bc01f2', class: {
+        return (h(Host, { key: '4e8888cdc523c32383945dbf5503a1d9129ed6e9', class: {
                 "ic-button-disabled": disabled && !loading,
                 "ic-button-full-width": fullWidth,
                 "ic-button-loading": loading,
@@ -391,7 +391,7 @@ const Button = class {
                 monochrome,
                 "top-icon": isSlotUsed(this.el, "top-icon"),
                 "with-badge": isSlotUsed(this.el, "badge"),
-            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: 'b206653b613d9d78da264c8f796a4b7b90e50db0', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: '9e63601518bac4f1ef197262e193a8977deb6df4' }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'da708210c9061b0f2e3a4678f61e339a446616e4', name: "badge" }), !hasTooltip && h(ButtonContent, { key: '43131139c83a264a25995f616aac6b7431b86156' }), describedByContent && (h("span", { key: '1b1b37a9c1f17d39f768d0e8cee845fc09595219', id: describedby, class: "ic-button-describedby" }, describedByContent))));
+            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: 'ca33053f91d9716b014aa5fcd419e22cbdc553d8', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: 'bdfd844921507888ab65db6e46fd3ec4410a62b3' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '1400c01085f417f357a5523b295b022075a3480f', name: "badge" }), !hasTooltip && h(ButtonContent, { key: '36e6969ee4b09ac6fb8b93c3a5d5aa932f0621dc' }), describedByContent && (h("span", { key: 'a4a130e848f981b08d2bc953016d836bc0000b62', id: describedby, class: "ic-button-describedby" }, describedByContent))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -401,12 +401,26 @@ const Button = class {
 };
 Button.style = IcButtonStyle0;
 
-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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        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.
@@ -438,190 +452,169 @@ const LoadingIndicator = class {
          * 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: '0031fe76c51b9cfcdb3916451bd2b56f6aac8721', 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: 'f0d87cb81fe19c7923cab83352692a820f864353', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'eed9c9ec0fa7677a73d97f84f2f0c4254ae895f9', 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: 'e6f08d5b7d7f7d3531f26773d82bdaab8b746de6', ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
-            this.innerLabel !== undefined &&
-            this.size === "small" && (h("ic-typography", { key: 'e5e16b071e7886eeaeddbe5d4ba9982d2dd835ac', variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { key: '242ce0f64c6b81f0495ce74844d42952d60889b1', class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { key: '89efba17cfc44471af357fac9fad70a80ee8f9c2', cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { key: '47a39e6acf845c27e2817d563559fc332c9be3db', cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { key: '383cf6d17daaaaa8275b8b381e6a65334f8b832e', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: 'b0009c0c194d3ebdf8b8bca21fcee5db1919ac1a' }, 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 getElement(this); }
     static get watchers() { return {
         "label": ["watchPropHandler"],
-        "progress": ["watchProgressHandler"]
+        "max": ["minMaxChangeHandler"],
+        "min": ["minMaxChangeHandler"],
+        "progress": ["watchProgressHandler"],
+        "type": ["setIndicatorDimensions"]
     }; }
 };
 LoadingIndicator.style = IcLoadingIndicatorStyle0;