@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js

@@ -1,8 +1,47 @@
 import { h, Host } from "@stencil/core";
 export class LoadingIndicator {
     constructor() {
+        this.clipInnerElement = false;
+        /**
+         * The description that will be set as the aria-label of the loading indicator when not using a visible label.
+         */
+        this.description = "Loading";
+        /**
+         * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+         */
+        this.fullWidth = false;
+        /**
+         * The time in milliseconds before the label changes.
+         */
+        this.labelDuration = 8000;
+        /**
+         * The maximum value that the progress value can take.
+         * Used to calculate the proportional width of the progress bar.
+         */
+        this.max = 100;
+        /**
+         * The minimum value that the progress value can take.
+         * Used to calculate the proportional width of the progress bar.
+         */
+        this.min = 0;
+        /**
+         * If `true`, the element will display as black and white.
+         */
+        this.monochrome = false;
+        /**
+         * 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) {
+            if (!this.indeterminate && this.circularMeter) {
                 this.circularMeter.style.setProperty("--progress-value", String(this.progress));
             }
         };
@@ -23,52 +62,59 @@ export class LoadingIndicator {
             var _a;
             let variant = "h4";
             const width = (_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-            if (this.size === "small" || (this.type === "circular" && width < 60)) {
+            if (this.size === "small" ||
+                (width && this.type === "circular" && width < 60)) {
                 variant = "label";
             }
             else if (this.size === "large" ||
-                (this.type === "circular" && width >= 120)) {
+                (width && this.type === "circular" && width >= 120)) {
                 variant = "h2";
             }
             return variant;
         };
         // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
         this.setCircleLineWidth = () => {
-            const { offsetWidth: width } = this.outerElement;
             const compactStepCircularLineWidth = this.el.classList.contains("compact-step-progress-indicator")
                 ? 40
                 : 0;
             const toastDismissTimerCircularLineWidth = this.el.classList.contains("toast-dismiss-timer")
                 ? 20
                 : 0;
-            if (width ||
-                compactStepCircularLineWidth ||
-                toastDismissTimerCircularLineWidth) {
-                this.circularLineWidth =
-                    (compactStepCircularLineWidth ||
-                        toastDismissTimerCircularLineWidth ||
-                        width) * 0.1;
-                this.circularDiameter =
+            if (this.outerElement) {
+                const { offsetWidth: width } = this.outerElement;
+                if (width ||
                     compactStepCircularLineWidth ||
-                        toastDismissTimerCircularLineWidth ||
-                        width;
-                this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                    toastDismissTimerCircularLineWidth) {
+                    this.circularLineWidth =
+                        (compactStepCircularLineWidth ||
+                            toastDismissTimerCircularLineWidth ||
+                            width) * 0.1;
+                    this.circularDiameter =
+                        compactStepCircularLineWidth ||
+                            toastDismissTimerCircularLineWidth ||
+                            width;
+                    this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                }
             }
         };
         this.setLinearDeterminateWidth = () => {
+            const max = this.max;
+            const min = this.min;
             if (!this.innerElement)
                 return;
             // Ensure progress cannot be out of bounds
-            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");
-            }
-            else {
-                this.innerElement.classList.add("clip");
+            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}%`);
             }
-            this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
         };
         this.calcOuterClass = () => {
             let cls = `ic-loading-${this.type}-outer`;
@@ -105,31 +151,18 @@ export class LoadingIndicator {
         };
         this.setDashSteps = (radius) => {
             const dashArray = 2 * Math.PI * radius;
-            const progress = Math.min(Math.max(this.progress, this.min), this.max);
-            const proportion = -1 - (progress - this.min) / (this.max - this.min);
-            this.circularMeter.style.setProperty("--stroke-dasharray", `${dashArray}px`);
-            if (!this.indeterminate) {
-                this.circularMeter.style.setProperty("--circular-steps-max", String(this.max));
-                this.circularMeter.style.setProperty("--stroke-dashoffset", `${proportion * dashArray}px`);
+            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.circularDiameter = undefined;
-        this.circularLineWidth = undefined;
-        this.indeterminate = undefined;
-        this.indicatorLabel = undefined;
-        this.clipInnerElement = false;
-        this.description = "Loading";
-        this.fullWidth = false;
-        this.innerLabel = undefined;
-        this.labelDuration = 8000;
-        this.max = 100;
-        this.min = 0;
-        this.monochrome = false;
-        this.size = "medium";
-        this.type = "circular";
-        this.label = undefined;
-        this.progress = undefined;
-        this.theme = "inherit";
     }
     watchPropHandler() {
         this.updateLabel();
@@ -148,9 +181,10 @@ export class LoadingIndicator {
         this.el.setAttribute("exportparts", "ic-loading-container");
     }
     componentDidLoad() {
+        var _a;
         if (this.type === "circular") {
             this.setCircleLineWidth();
-            this.circularMeter = this.el.shadowRoot.querySelector(".ic-loading-circular-svg circle:nth-child(2)");
+            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") {
@@ -168,15 +202,15 @@ export class LoadingIndicator {
     render() {
         const { theme, label, description, size, fullWidth, innerLabel, monochrome, } = this;
         const { x, y, r } = this.setCircleXY();
-        return (h(Host, { class: {
+        return (h(Host, { key: 'b17f695d24b5f1a62714e4ed4241ae04d62d71f7', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-label": !!label,
-                "ic-loading-indicator-full-width": fullWidth,
+                "ic-loading-indicator-full-width": !!fullWidth,
                 "inner-label": !!innerLabel,
-                "ic-loading-indicator-monochrome": monochrome,
-            } }, h("div", { class: "ic-loading-container", part: "ic-loading-container" }, h("div", { 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", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
+                "ic-loading-indicator-monochrome": !!monochrome,
+            } }, h("div", { key: '01b49b1b944995a0311f780d04675b4929c99406', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '2a3ff1778af28ca4dca52fa48a8a21809be7cc10', 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: '858cf1fe1b405bd3afc005198caba3edee162129', ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
             this.innerLabel !== undefined &&
-            this.size === "small" && (h("ic-typography", { variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", null, this.indicatorLabel))))));
+            this.size === "small" && (h("ic-typography", { key: '4f64dad9d84fa059f17cc5992c67ae5c49dcad79', variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { key: '8951796434ce976b8de54fb6d8ef3c83954c9963', class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { key: 'ba08f047bd24717b2f0fe63fc997514f65f671ca', cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { key: 'f8220ad9a66c16f27a1e99ec7bce39d959b0b1ae', cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { key: '16d99f7f3404b3f487018ad5e004ebf78ac455f5', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: '18e223aa28d162404989460f7b8e552edec83316' }, this.indicatorLabel))))));
     }
     static get is() { return "ic-loading-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -197,7 +231,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -206,6 +240,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The description that will be set as the aria-label of the loading indicator when not using a visible label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "description",
                 "reflect": false,
                 "defaultValue": "\"Loading\""
@@ -215,7 +251,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -224,6 +260,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": true,
                 "defaultValue": "false"
@@ -233,7 +271,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -245,6 +283,8 @@ export class LoadingIndicator {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inner-label",
                 "reflect": false
             },
@@ -253,7 +293,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -262,6 +302,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The time in milliseconds before the label changes."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-duration",
                 "reflect": false,
                 "defaultValue": "8000"
@@ -271,7 +313,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -280,6 +322,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The maximum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
@@ -289,7 +333,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -298,6 +342,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The minimum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
@@ -307,7 +353,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -316,6 +362,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "If `true`, the element will display as black and white."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "monochrome",
                 "reflect": false,
                 "defaultValue": "false"
@@ -325,7 +373,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "IcLoadingSizes",
-                    "resolved": "\"icon\" | \"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"icon\" | \"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcLoadingSizes": {
                             "location": "import",
@@ -340,6 +388,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The size of the loading indicator."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "\"medium\""
@@ -349,7 +399,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "IcLoadingTypes",
-                    "resolved": "\"circular\" | \"linear\"",
+                    "resolved": "\"circular\" | \"linear\" | undefined",
                     "references": {
                         "IcLoadingTypes": {
                             "location": "import",
@@ -364,6 +414,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The type of indicator, either linear or circular."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "\"circular\""
@@ -373,7 +425,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
-                    "resolved": "string | string[]",
+                    "resolved": "string | string[] | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -382,6 +434,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The label to be displayed beneath the loading indicator.\nDisplay a changing label by supplying an array of messages."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -390,7 +444,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -399,6 +453,8 @@ export class LoadingIndicator {
                     "tags": [],
                     "text": "The current amount of progress made.\nIf not provided, component acts as an indeterminate loading indicator."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "progress",
                 "reflect": false
             },
@@ -407,7 +463,7 @@ export class LoadingIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -417,11 +473,13 @@ export class LoadingIndicator {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["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\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  private circularMeter: SVGCircleElement;\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) {\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 = () => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (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 { offsetWidth: width } = this.outerElement;\n\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 (\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  private setLinearDeterminateWidth = () => {\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\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 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    const progress = Math.min(Math.max(this.progress, this.min), this.max);\n    const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n    this.circularMeter.style.setProperty(\n      \"--stroke-dasharray\",\n      `${dashArray}px`\n    );\n\n    if (!this.indeterminate) {\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  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-indicator.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}