@ukic/web-components 3.5.0 → 3.7.0

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

@@ -92,12 +92,15 @@ export class LoadingIndicator {
             }
             return LOADING_INDICATOR_WIDTHS[this.size];
         };
+        this.calculateProportion = (progress) => {
+            const minProgress = Math.min(this.max, Math.max(this.min, progress));
+            return (minProgress - this.min) / (this.max - this.min);
+        };
         this.setLinearDeterminateWidth = () => {
             // Ensure progress cannot be out of bounds
             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);
+            const proportion = this.calculateProportion(this.progress);
             this.clipInnerElement = proportion > 0.5;
             if (this.clipInnerElement) {
                 this.innerElement.classList.remove("clip");
@@ -122,33 +125,26 @@ export class LoadingIndicator {
             }
         };
         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,
+                dashOffset: this.progress
+                    ? `${(-1 - this.calculateProportion(this.progress)) * dashArray}px`
+                    : undefined,
             };
         };
     }
     watchPropHandler() {
         this.updateLabel();
     }
-    minMaxChangeHandler() {
-        if (this.type === "circular")
-            this.setCircleDimensions();
-    }
-    watchProgressHandler() {
+    handleProgressChange() {
         if (this.type === "linear") {
             this.setLinearDeterminateWidth();
         }
@@ -164,8 +160,8 @@ export class LoadingIndicator {
                 this.circularLineWidth = diameter * 0.1;
                 this.circularDiameter = diameter;
                 this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
-                this.setCircleDimensions();
             }
+            this.setCircleDimensions();
         }
         else {
             this.setLinearDeterminateWidth();
@@ -182,25 +178,24 @@ export class LoadingIndicator {
         this.setIndicatorDimensions();
     }
     render() {
-        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: {
+        const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, label, max, min, monochrome, progress, size, theme, type, } = this;
+        return (h(Host, { key: '8ee440b25dde3874c36eb6c70f3eaac1bf7649d1', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "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: {
+            } }, h("div", { key: '3d06914b8253b77c9df58d5c94a44442ea3f2d16', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '43a11cf45e813b5560721472c431452a761593fb', 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: {
+            }, 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: 'a95cd8ed7e58821c8ac4001c8926d202719e63f7', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, 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: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '04b25f8cba789f316ba2db771b4a7d30eac7fe10', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'ff98da2b3f382ad698855d7ce1b0a553dbfadae3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: 'b53c7477ae972370739b908141776337f277fc48', cx: x, cy: y, r: r }), h("circle", { key: 'b652351de6695c077a1f276710e0fe558ff393e4', 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))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: 'b070b1975f52606aa8df8f8575859a12ab4e7982', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: 'b654d871fff4ad30b2fa7bfff7b2756f0b7475ed' }, indicatorLabel))))));
     }
     static get is() { return "ic-loading-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -492,13 +487,13 @@ export class LoadingIndicator {
                 "methodName": "watchPropHandler"
             }, {
                 "propName": "max",
-                "methodName": "minMaxChangeHandler"
+                "methodName": "handleProgressChange"
             }, {
                 "propName": "min",
-                "methodName": "minMaxChangeHandler"
+                "methodName": "handleProgressChange"
             }, {
                 "propName": "progress",
-                "methodName": "watchProgressHandler"
+                "methodName": "handleProgressChange"
             }, {
                 "propName": "type",
                 "methodName": "setIndicatorDimensions"

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\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,"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\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\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(\"max\")\n  @Watch(\"min\")\n  @Watch(\"progress\")\n  handleProgressChange(): 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      }\n      this.setCircleDimensions();\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 calculateProportion = (progress: number) => {\n    const minProgress = Math.min(this.max, Math.max(this.min, progress));\n    return (minProgress - this.min) / (this.max - this.min);\n  };\n\n  private setLinearDeterminateWidth = () => {\n    // Ensure progress cannot be out of bounds\n    if (!this.innerElement || !this.progress) return;\n\n    const proportion = this.calculateProportion(this.progress);\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    if (this.circularDiameter <= 0) return;\n\n    const r = this.circularDiameter / 2;\n    const nextRadius = r - this.circularLineWidth / 2;\n    const dashArray = 2 * Math.PI * nextRadius;\n\n    this.circularDimensions = {\n      x: r,\n      y: r,\n      r: nextRadius,\n      dashArray: `${dashArray}px`,\n      dashOffset: this.progress\n        ? `${(-1 - this.calculateProportion(this.progress)) * dashArray}px`\n        : undefined,\n    };\n  };\n\n  render() {\n    const {\n      circularDiameter,\n      circularDimensions: { x, y, r, dashArray, dashOffset },\n      description,\n      fullWidth,\n      indicatorLabel,\n      innerLabel,\n      label,\n      max,\n      min,\n      monochrome,\n      progress,\n      size,\n      theme,\n      type,\n    } = this;\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=\"alert\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -408,8 +408,8 @@ export const PlaygroundIndeterminate = {
   render: (args) =>
     html`<div
       style="background-color: ${args.theme === "dark"
-        ? "#393939"
-        : "#FFFFFF"}; padding: 16px;"
+        ? "var(--ic-color-page-background-dark)"
+        : "var(--ic-color-page-background-light)"}; padding: 16px;"
     >
       <ic-loading-indicator
         monochrome=${args.monochrome}
@@ -433,8 +433,8 @@ export const PlaygroundDeterminate = {
   render: (args) =>
     html`<div
       style="background-color: ${args.theme === "dark"
-        ? "#393939"
-        : "#FFFFFF"}; padding: 16px;"
+        ? "var(--ic-color-page-background-dark)"
+        : "var(--ic-color-page-background-light)"}; padding: 16px;"
     >
       <ic-loading-indicator
         monochrome=${args.monochrome}

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

@@ -12,9 +12,6 @@ export class Menu {
         this.hasPreviouslyBlurred = false;
         this.hasTimedOut = false;
         this.isLoading = false;
-        this.isMultiSelect = false;
-        this.isSearchBar = false;
-        this.isSearchableSelect = false;
         this.lastOptionSelected = null; // Index of last option selected
         this.lastOptionFocused = null; // Index of last option focused
         this.multiOptionClicked = null;
@@ -47,6 +44,18 @@ export class Menu {
          * The custom name for the label field for IcMenuOption.
          */
         this.labelField = "label";
+        /**
+         * @internal - flag to specify if menu is in a ic-select multiple.
+         */
+        this.multiSelect = false;
+        /**
+         * @internal - flag to specify if menu is in a searchable ic-select.
+         */
+        this.searchableSelect = false;
+        /**
+         * @internal - flag to specify if menu is in a ic-search-bar.
+         */
+        this.searchBar = false;
         /**
          * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
          */
@@ -79,7 +88,7 @@ export class Menu {
                     this.preventClickOpen = false;
                 }
                 // Reset optionHighlighted so previously highlighted option doesn't get reselected when Enter pressed
-                if (this.isMultiSelect) {
+                if (this.multiSelect) {
                     this.optionHighlighted = undefined;
                     this.multiOptionClicked = null;
                 }
@@ -113,27 +122,12 @@ export class Menu {
                 });
             }
         };
-        this.getParentEl = (parent) => {
-            if (parent.tagName === this.SEARCH_BAR_TAG) {
-                this.isSearchBar = true;
-            }
-            else if (parent.tagName === "IC-SELECT") {
-                if (parent.getAttribute("searchable") !== null &&
-                    parent.getAttribute("searchable") !== undefined) {
-                    this.isSearchableSelect = true;
-                }
-                else if (parent.getAttribute("multiple") !== null &&
-                    parent.getAttribute("multiple") !== undefined) {
-                    this.isMultiSelect = true;
-                }
-            }
-        };
         // Open menu when up or down arrow keys are pressed
         this.arrowBehaviour = (event) => {
             event.preventDefault();
             this.handleMenuChange(true);
         };
-        this.getMenuOptions = () => this.isSearchBar ? this.options : this.ungroupedOptions;
+        this.getMenuOptions = () => this.searchBar ? this.options : this.ungroupedOptions;
         // Set option that is focused and so should show focus state
         this.setHighlightedOption = (highlightedIndex) => {
             const menuOptions = this.getMenuOptions();
@@ -171,11 +165,11 @@ export class Menu {
             if (!this.isLoading && !this.hasTimedOut) {
                 this.keyboardNav = true;
             }
-            const isOpen = this.isSearchBar || this.isSearchableSelect || this.open;
+            const isOpen = this.searchBar || this.searchableSelect || this.open;
             if (isOpen) {
                 if (highlightedOptionIndex >= 0) {
                     if (options[highlightedOptionIndex] !== undefined) {
-                        if (this.isSearchBar &&
+                        if (this.searchBar &&
                             options[highlightedOptionIndex].disabled === true) {
                             this.disabledOptionSelected = true;
                         }
@@ -220,7 +214,7 @@ export class Menu {
             const clickedMultiOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.multiOptionClicked);
             const getOptionId = (index) => { var _a; return (_a = Array.from(this.host.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
             // Space press should be equivalent to Enter when multi-select
-            if (event.key === " " && this.isMultiSelect) {
+            if (event.key === " " && this.multiSelect) {
                 this.handleOptionSelect(event, highlightedOptionIndex);
             }
             else {
@@ -251,7 +245,7 @@ export class Menu {
                                 this.handleSingleShiftSelect(event, 0, menuOptions);
                             }
                             // Deselect currently selected options if arrow was pressed for first time after shift is held
-                            if (this.isMultiSelect && this.shiftPressed) {
+                            if (this.multiSelect && this.shiftPressed) {
                                 this.deselectSelectedOptions([
                                     highlightedOptionIndex,
                                     this.getOptionHighlightedIndex(),
@@ -290,7 +284,7 @@ export class Menu {
                                 this.handleSingleShiftSelect(event, highlightedOptionIndex - 1, menuOptions);
                             }
                             // Deselect currently selected options if arrow was pressed for first time after shift is held
-                            if (this.isMultiSelect && this.shiftPressed) {
+                            if (this.multiSelect && this.shiftPressed) {
                                 this.deselectSelectedOptions([
                                     highlightedOptionIndex,
                                     this.getOptionHighlightedIndex(),
@@ -338,7 +332,7 @@ export class Menu {
                         if (!isKeyboardCombination) {
                             this.keyboardNav = false;
                         }
-                        if (this.isSearchBar || this.isSearchableSelect) {
+                        if (this.searchBar || this.searchableSelect) {
                             break;
                         }
                         else {
@@ -376,10 +370,10 @@ export class Menu {
                         if (event.key === "Shift") {
                             this.shiftPressed = true;
                         }
-                        if (this.isSearchBar) {
+                        if (this.searchBar) {
                             this.keyboardNav = true;
                         }
-                        if (this.isMultiSelect) {
+                        if (this.multiSelect) {
                             if (this.open && !event.shiftKey && this.selectAllButton) {
                                 event.preventDefault();
                                 this.selectAllButton.focus(); // Move focus to select all button instead of focused option
@@ -422,7 +416,7 @@ export class Menu {
         };
         this.handleOptionClick = (event) => {
             const { value, label } = event.target.dataset;
-            if (this.isMultiSelect) {
+            if (this.multiSelect) {
                 const menuOptions = this.getMenuOptions();
                 const selectedOptionIndex = menuOptions.findIndex((option) => option.value === value);
                 this.handleOptionSelect(event, selectedOptionIndex, true);
@@ -464,7 +458,7 @@ export class Menu {
                 this.lastOptionFocused = null;
                 this.lastOptionSelected = null;
             }
-            if (!this.isSearchBar)
+            if (!this.searchBar)
                 this.hasPreviouslyBlurred = !!event.relatedTarget;
         };
         this.handleMouseDown = (event) => {
@@ -474,7 +468,7 @@ export class Menu {
             if (this.activationType === "automatic") {
                 this.autoSetValueOnMenuKeyDown(event);
             }
-            else if (this.activationType === "manual" && !this.isSearchBar) {
+            else if (this.activationType === "manual" && !this.searchBar) {
                 this.manualSetInputValueKeyboardOpen(event);
             }
         };
@@ -517,7 +511,7 @@ export class Menu {
         // When shift key is being used to select contiguous options one by one on a multi-select
         // I.e. holding shift and pressing up and down arrow keys
         this.handleSingleShiftSelect = (event, optionToSelectIndex, options) => {
-            if (this.isMultiSelect &&
+            if (this.multiSelect &&
                 event.shiftKey &&
                 !this.isOptionSelected(optionToSelectIndex)) {
                 this.selectHighlightedOption(options, optionToSelectIndex);
@@ -767,9 +761,7 @@ export class Menu {
         this.loadUngroupedOptions();
     }
     connectedCallback() {
-        if (this.parentEl)
-            this.getParentEl(this.parentEl);
-        if (this.isSearchBar) {
+        if (this.searchBar) {
             if (this.searchMode === "navigation")
                 this.setHighlightedOption(0);
             this.initialOptionsListRender = true;
@@ -790,7 +782,7 @@ export class Menu {
         this.isLoading = (_d = this.options) === null || _d === void 0 ? void 0 : _d.some((opt) => opt.loading);
     }
     componentDidLoad() {
-        if (this.isSearchBar &&
+        if (this.searchBar &&
             this.parentEl.disableAutoFiltering) {
             this.focusFromSearchKeypress = true;
         }
@@ -812,7 +804,7 @@ export class Menu {
                 this.keyboardNav &&
                 inputValueInOptions &&
                 this.autofocusOnSelected &&
-                !this.isSearchableSelect) {
+                !this.searchableSelect) {
                 this.scrollToSelected(this.menu);
             }
             else if (this.selectOnEnter) {
@@ -906,21 +898,21 @@ export class Menu {
     focusOnSearchOrSelectInput(menuOptions, highlightedOptionIndex) {
         if (!menuOptions[highlightedOptionIndex])
             return;
-        if (this.isSearchBar) {
+        if (this.searchBar) {
             this.parentEl.setFocus();
             if (this.searchMode === "navigation")
                 this.setHighlightedOption(0);
         }
-        if (this.isSearchableSelect) {
+        if (this.searchableSelect) {
             this.parentEl.setFocus();
         }
         this.focusFromSearchKeypress = true;
     }
     render() {
-        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, } = this;
+        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: '6c3e0c39d138c8622c3748c16294f0e21e202909', class: {
+        return (h(Host, { key: 'bce19ee8d7929f03d2de173ad6f2b639cd2fbf2c', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -928,8 +920,8 @@ export class Menu {
                     isLoading,
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
-                "ic-menu-multiple": this.isMultiSelect,
-            } }, options.length !== 0 && (h("ul", { key: '69ea4424544b03896b65f0b30221872e131a04f6', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "true" : "false", tabindex: open &&
+                "ic-menu-multiple": multiSelect,
+            } }, options.length !== 0 && (h("ul", { key: 'edbb9d969dd8218a45c6d012abf8964fc2acd0a7', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
                 !keyboardNav &&
                 ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -938,7 +930,7 @@ export class Menu {
             if (option.children) {
                 if (option.children.length > 0) {
                     return (h("div", null, h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, h("p", null, option[this.labelField])), option.children.map((childOption) => childOption.label &&
-                        this.displayOption(childOption, this.isMultiSelect
+                        this.displayOption(childOption, multiSelect
                             ? value === null || value === void 0 ? void 0 : value.includes(childOption[this.valueField])
                             : childOption[this.valueField] === value, index, option))));
                 }
@@ -949,15 +941,15 @@ export class Menu {
             else {
                 // Display option only if it has a label (rather than displaying an empty space)
                 return (option.label &&
-                    this.displayOption(option, this.isMultiSelect
+                    this.displayOption(option, multiSelect
                         ? value === null || value === void 0 ? void 0 : value.includes(option[this.valueField])
                         : option[this.valueField] === value, index));
             }
         }))), options.length !== 0 &&
-            this.isMultiSelect &&
+            multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: '17553f6e5ecd81b892894244b3a3a143b998c23c', class: "option-bar" }, h("ic-typography", { key: '7f4ce460524beb936e4d4ef2bbbcedd03cacec5c' }, h("p", { key: 'aae0e564a9caf83b09d4ee8daa3d9409b7d69501' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '692b840395eafd8c4c5dd0f21bab2082debb44bf', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: '317f18bd8ff88fadf840ccc5666bf7ae7a6b1e65', class: "option-bar" }, h("ic-typography", { key: '32e28e814c9c3d4ac243e2d45cb2487a99a900ba' }, h("p", { key: '6ed28e350ad356ef669b4b6b9f3d8718a7274782' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'e66e1b04732d26ebbc05751eadc49968c11ac92c', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     static get is() { return "ic-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -1164,6 +1156,29 @@ export class Menu {
                 "attribute": "menu-id",
                 "reflect": false
             },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "- flag to specify if menu is in a ic-select multiple."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "multi-select",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "open": {
                 "type": "boolean",
                 "mutable": false,
@@ -1208,6 +1223,52 @@ export class Menu {
                 "getter": false,
                 "setter": false
             },
+            "searchableSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "- flag to specify if menu is in a searchable ic-select."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "searchable-select",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "searchBar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "- flag to specify if menu is in a ic-search-bar."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "search-bar",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "searchMode": {
                 "type": "string",
                 "mutable": false,