@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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 {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\nimport { isPropDefined } from \"../../utils/helpers\";\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() showSecond: boolean = false;\n\n  /**\n   * The appearance of the loading indicator, e.g. dark or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\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 separating multiple messages with forward slashes.\n   */\n  @Prop() label?: 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  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.showSecond = proportion > 0.5;\n    if (this.showSecond) {\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 (isPropDefined(this.label)) {\n      this.labelList = this.label.split(\"/\");\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  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 { appearance, label, description, size, fullWidth, innerLabel } =\n      this;\n    const { x, y, r } = this.setCircleXY();\n\n    return (\n      <Host\n        class={{\n          [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"label\"]: !!label,\n          [\"full-width\"]: fullWidth,\n          [\"inner-label\"]: !!innerLabel,\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 } 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"]}

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

@@ -1,27 +1,28 @@
 import { html } from "lit-html";
 
 const defaultArgs = {
-  appearance: "dark",
+  monochrome: false,
   description: "Loading",
   fullWidth: false,
   labelDuration: 8000,
-  size: "default",
+  size: "medium",
   type: "circular",
   label: null,
+  theme: "inherit",
 };
 
 const defaultArgTypes = {
-  appearance: {
-    options: ["dark", "light"],
-    control: { type: "radio" },
-  },
   label: {
     control: { type: "text" },
   },
   size: {
-    options: ["small", "default", "large", "icon"],
+    options: ["small", "medium", "large", "icon"],
     control: { type: "radio" },
   },
+  theme: {
+    options: ["inherit", "light", "dark"],
+    control: { type: "inline-radio" },
+  },
   type: {
     options: ["circular", "linear"],
     control: { type: "radio" },
@@ -157,7 +158,7 @@ export const LinearVariantsIndeterminate = {
       ></ic-loading-indicator>
       <ic-loading-indicator
         label="Full-width"
-        size="default"
+        size="medium"
         type="linear"
         full-width="true"
       ></ic-loading-indicator>
@@ -197,7 +198,7 @@ export const LinearVariantsDeterminate = {
         min="0"
         max="100"
         label="Full-width"
-        size="default"
+        size="medium"
         type="linear"
         full-width="true"
       ></ic-loading-indicator>
@@ -206,26 +207,23 @@ export const LinearVariantsDeterminate = {
   name: "Linear variants (determinate)",
 };
 
-export const CircularLight = {
+export const CircularDarkMode = {
   render: (args) =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         label="Small"
         size="small"
-        appearance="light"
-      ></ic-loading-indicator>
-      <ic-loading-indicator
-        label="Default"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
+      <ic-loading-indicator label="Default" theme="dark"></ic-loading-indicator>
       <ic-loading-indicator
         label="Large"
         size="large"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
     </div>`,
 
-  name: "Circular light",
+  name: "Circular dark mode",
 
   parameters: {
     backgrounds: {
@@ -234,14 +232,14 @@ export const CircularLight = {
   },
 };
 
-export const IconLight = {
+export const IconDarkMode = {
   render: (args) =>
     html`<ic-loading-indicator
       size="icon"
-      appearance="light"
+      theme="dark"
     ></ic-loading-indicator>`,
 
-  name: "Icon light",
+  name: "Icon dark mode",
 
   parameters: {
     backgrounds: {
@@ -250,25 +248,25 @@ export const IconLight = {
   },
 };
 
-export const LinearLight = {
+export const LinearDarkMode = {
   render: (args) =>
     html`<div style="display: grid; gap: 50px;">
       <ic-loading-indicator
         label="Default"
         type="linear"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
       <ic-loading-indicator
         label="Large"
         size="large"
         type="linear"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
       <ic-loading-indicator
         label="Full-width"
         type="linear"
         full-width="true"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
       <ic-loading-indicator
         progress="30"
@@ -276,7 +274,7 @@ export const LinearLight = {
         max="100"
         label="Default"
         type="linear"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
       <ic-loading-indicator
         progress="30"
@@ -285,7 +283,7 @@ export const LinearLight = {
         label="Large"
         size="large"
         type="linear"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
       <ic-loading-indicator
         progress="30"
@@ -294,11 +292,11 @@ export const LinearLight = {
         label="Full-width"
         type="linear"
         full-width="true"
-        appearance="light"
+        theme="dark"
       ></ic-loading-indicator>
     </div>`,
 
-  name: "Linear light",
+  name: "Linear dark mode",
 
   parameters: {
     backgrounds: {
@@ -307,6 +305,51 @@ export const LinearLight = {
   },
 };
 
+export const Monochrome = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator
+        label="Light"
+        monochrome="true"
+      ></ic-loading-indicator>
+      <div style="background-color: black">
+        <ic-loading-indicator
+          label="Dark"
+          theme="dark"
+          monochrome="true"
+        ></ic-loading-indicator>
+      </div>
+      <ic-loading-indicator
+        size="icon"
+        monochrome="true"
+      ></ic-loading-indicator>
+      <div
+        style="background-color: black; display: flex; justify-content: center"
+      >
+        <ic-loading-indicator
+          size="icon"
+          theme="dark"
+          monochrome="true"
+        ></ic-loading-indicator>
+      </div>
+      <ic-loading-indicator
+        label="Light"
+        type="linear"
+        monochrome="true"
+      ></ic-loading-indicator>
+      <div style="background-color: black; padding: var(--ic-space-xs)">
+        <ic-loading-indicator
+          label="Dark"
+          type="linear"
+          theme="dark"
+          monochrome="true"
+        ></ic-loading-indicator>
+      </div>
+    </div>`,
+
+  name: "Monochrome",
+};
+
 export const NoLabel = {
   render: (args) =>
     html`<div style="display: grid; gap: 50px;">
@@ -335,10 +378,13 @@ export const NoLabel = {
 
 export const ChangingLabel = {
   render: (args) =>
-    html`<ic-loading-indicator
-      label="Loading.../Still loading..."
-      label-duration="4000"
-    ></ic-loading-indicator>`,
+    html`<ic-loading-indicator label-duration="4000"></ic-loading-indicator>
+      <script>
+        document.querySelector("ic-loading-indicator").label = [
+          "Loading...",
+          "Still loading...",
+        ];
+      </script> `,
 
   name: "Changing label",
 };
@@ -361,12 +407,13 @@ export const ProgressIndicatorForCompactStep = {
 export const PlaygroundIndeterminate = {
   render: (args) =>
     html`<div
-      style="background-color: ${args.appearance === "light"
+      style="background-color: ${args.theme === "dark"
         ? "#393939"
         : "#FFFFFF"}; padding: 16px;"
     >
       <ic-loading-indicator
-        appearance=${args.appearance}
+        monochrome=${args.monochrome}
+        theme=${args.theme}
         description=${args.description}
         full-width=${args.fullWidth}
         label-duration=${args.labelDuration}
@@ -385,12 +432,13 @@ export const PlaygroundIndeterminate = {
 export const PlaygroundDeterminate = {
   render: (args) =>
     html`<div
-      style="background-color: ${args.appearance === "light"
+      style="background-color: ${args.theme === "dark"
         ? "#393939"
         : "#FFFFFF"}; padding: 16px;"
     >
       <ic-loading-indicator
-        appearance=${args.appearance}
+        monochrome=${args.monochrome}
+        theme=${args.theme}
         description=${args.description}
         full-width=${args.fullWidth}
         label-duration=${args.labelDuration}

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

@@ -1 +1 @@
-{"version":3,"file":"ic-loading-indicator.types.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcLoadingSizes = \"default\" | \"small\" | \"large\" | \"icon\";\n\nexport type IcLoadingTypes = \"circular\" | \"linear\";\n\nexport interface IcLoadingCircleXYR {\n  x: number;\n  y: number;\n  r: number;\n}\n"]}
+{"version":3,"file":"ic-loading-indicator.types.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcLoadingSizes = \"medium\" | \"small\" | \"large\" | \"icon\";\n\nexport type IcLoadingTypes = \"circular\" | \"linear\";\n\nexport interface IcLoadingCircleXYR {\n  x: number;\n  y: number;\n  r: number;\n}\n"]}

package/dist/collection/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.js

@@ -38,7 +38,7 @@ describe("ic-loading-indicator component", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should set the typography variant for the label to 'h4' for the 'default' size", async () => {
+    it("should set the typography variant for the label to 'h4' for the 'medium' size", async () => {
         page = await newSpecPage({
             components: [LoadingIndicator, Typography],
             html: `<ic-loading-indicator label="IC Loading Indicator Test"></ic-loading-indicator>`,
@@ -76,8 +76,9 @@ describe("ic-loading-indicator component", () => {
     it("should update label after label-duration passed", async () => {
         page = await newSpecPage({
             components: [LoadingIndicator, Typography],
-            html: `<ic-loading-indicator label="waiting/still waiting" label-duration="2000"></ic-loading-indicator>`,
+            html: `<ic-loading-indicator label-duration="2000"></ic-loading-indicator>`,
         });
+        page.root.label = ["waiting", "still waiting"];
         expect(page.rootInstance.indicatorLabel).toEqual("waiting");
         await waitForTimeout(2001);
         await page.waitForChanges();

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

@@ -1 +1 @@
-{"version":3,"file":"ic-loading-indicator.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { LoadingIndicator } from \"../../ic-loading-indicator\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nlet page: SpecPage;\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nafterEach(() => {\n  page.setContent(\"\");\n});\n\ndescribe(\"ic-loading-indicator component\", () => {\n  it(\"should render an indeterminate loading indicator with the correct label and set aria-labelledby\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a determinate loading indicator with the correct label and aria\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not display a label is the size is 'icon'\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"icon\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'label' for the 'small' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"small\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'h4' for the 'default' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'h2' for the 'large' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"large\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply the description prop as an aria-label\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator description=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should be styled correctly by setting the class names for the chosen indicator type\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator type=\"linear\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the correct aria if min and max are provided\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" min=\"10\" max=\"50\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should update label after label-duration passed\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"waiting/still waiting\" label-duration=\"2000\"></ic-loading-indicator>`,\n    });\n\n    expect(page.rootInstance.indicatorLabel).toEqual(\"waiting\");\n\n    await waitForTimeout(2001);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.indicatorLabel).toEqual(\"still waiting\");\n\n    await waitForTimeout(2001);\n    await page.waitForChanges();\n    expect(page.rootInstance.indicatorLabel).toEqual(\"waiting\");\n  });\n\n  it(\"should render linear determinate progress bar\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" min=\"10\" max=\"50\" type='linear'></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render linear indeterminate progress bar\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator type='linear'></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test updating label and progress props\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"large\"></ic-loading-indicator>`,\n    });\n\n    expect(page.rootInstance.label).toBe(\"IC Loading Indicator Test\");\n\n    page.root.label = \"New label\";\n    page.root.progress = 20;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.label).toBe(\"New label\");\n    expect(page.rootInstance.progress).toBe(20);\n  });\n\n  it(\"should test updating progress - linear\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"10\" min=\"10\" max=\"50\" type='linear'></ic-loading-indicator>`,\n    });\n    expect(page.rootInstance.progress).toBe(10);\n    page.root.progress = 20;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.progress).toBe(20);\n  });\n\n  it(\"should test setting circularDiameter\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    page.root.progress = \"20\";\n    await page.waitForChanges();\n    page.rootInstance.circularDiameter = \"100\";\n    await page.waitForChanges();\n    page.rootInstance.setCircleXY();\n    await page.waitForChanges();\n\n    const circle = page.root.shadowRoot.querySelector(\"svg circle\");\n    const x = circle.getAttribute(\"cx\");\n    expect(x).toBe(\"50\");\n  });\n\n  it(\"should have a default label duration of 8 seconds, if no value given\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"Waiting/Still waiting\"></ic-loading-indicator>`,\n    });\n\n    expect(page.rootInstance.labelDuration).toBe(8000);\n  });\n});\n"]}
+{"version":3,"file":"ic-loading-indicator.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { LoadingIndicator } from \"../../ic-loading-indicator\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nlet page: SpecPage;\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nafterEach(() => {\n  page.setContent(\"\");\n});\n\ndescribe(\"ic-loading-indicator component\", () => {\n  it(\"should render an indeterminate loading indicator with the correct label and set aria-labelledby\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a determinate loading indicator with the correct label and aria\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not display a label is the size is 'icon'\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"icon\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'label' for the 'small' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"small\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'h4' for the 'medium' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the typography variant for the label to 'h2' for the 'large' size\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"large\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply the description prop as an aria-label\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator description=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should be styled correctly by setting the class names for the chosen indicator type\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator type=\"linear\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should set the correct aria if min and max are provided\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" min=\"10\" max=\"50\"></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should update label after label-duration passed\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label-duration=\"2000\"></ic-loading-indicator>`,\n    });\n\n    page.root.label = [\"waiting\", \"still waiting\"];\n\n    expect(page.rootInstance.indicatorLabel).toEqual(\"waiting\");\n\n    await waitForTimeout(2001);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.indicatorLabel).toEqual(\"still waiting\");\n\n    await waitForTimeout(2001);\n    await page.waitForChanges();\n    expect(page.rootInstance.indicatorLabel).toEqual(\"waiting\");\n  });\n\n  it(\"should render linear determinate progress bar\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"30\" min=\"10\" max=\"50\" type='linear'></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render linear indeterminate progress bar\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator type='linear'></ic-loading-indicator>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test updating label and progress props\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\" size=\"large\"></ic-loading-indicator>`,\n    });\n\n    expect(page.rootInstance.label).toBe(\"IC Loading Indicator Test\");\n\n    page.root.label = \"New label\";\n    page.root.progress = 20;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.label).toBe(\"New label\");\n    expect(page.rootInstance.progress).toBe(20);\n  });\n\n  it(\"should test updating progress - linear\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator progress=\"10\" min=\"10\" max=\"50\" type='linear'></ic-loading-indicator>`,\n    });\n    expect(page.rootInstance.progress).toBe(10);\n    page.root.progress = 20;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.progress).toBe(20);\n  });\n\n  it(\"should test setting circularDiameter\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"IC Loading Indicator Test\"></ic-loading-indicator>`,\n    });\n\n    page.root.progress = \"20\";\n    await page.waitForChanges();\n    page.rootInstance.circularDiameter = \"100\";\n    await page.waitForChanges();\n    page.rootInstance.setCircleXY();\n    await page.waitForChanges();\n\n    const circle = page.root.shadowRoot.querySelector(\"svg circle\");\n    const x = circle.getAttribute(\"cx\");\n    expect(x).toBe(\"50\");\n  });\n\n  it(\"should have a default label duration of 8 seconds, if no value given\", async () => {\n    page = await newSpecPage({\n      components: [LoadingIndicator, Typography],\n      html: `<ic-loading-indicator label=\"Waiting/Still waiting\"></ic-loading-indicator>`,\n    });\n\n    expect(page.rootInstance.labelDuration).toBe(8000);\n  });\n});\n"]}