@ukic/web-components 2.25.1 → 3.0.0

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

@@ -30,7 +30,6 @@ export class Link {
         this.hreflang = undefined;
         this.referrerpolicy = undefined;
         this.rel = undefined;
-        this.showIcon = undefined;
         this.target = undefined;
     }
     componentWillLoad() {
@@ -71,11 +70,11 @@ export class Link {
         return !!this.routerSlot;
     }
     render() {
-        const { download, href, hreflang, referrerpolicy, rel, target, showIcon, appearance, } = this;
-        return (h(Host, { class: { ["link"]: true, [`${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
-                ["ic-link"]: href !== null,
+        const { download, href, hreflang, referrerpolicy, rel, target, appearance, } = this;
+        return (h(Host, { class: { ["ic-link"]: true, [`ic-link-${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
+                ["link"]: href !== null,
                 [`${appearance}`]: href !== null,
-            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), (showIcon || target === "_blank") && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
+            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), target === "_blank" && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
     }
     static get is() { return "ic-link"; }
     static get encapsulation() { return "shadow"; }
@@ -208,26 +207,6 @@ export class Link {
                 "attribute": "rel",
                 "reflect": false
             },
-            "showIcon": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\"."
-                        }],
-                    "text": ""
-                },
-                "attribute": "show-icon",
-                "reflect": false
-            },
             "target": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/ic-link/ic-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\".\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.appearance = theme;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {(showIcon || target === \"_blank\") && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.appearance = theme;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"ic-link\"]: true, [`ic-link-${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {target === \"_blank\" && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -8,7 +8,7 @@ describe("ic-link component", () => {
             html: `<ic-link>IC Link Test</ic-link>`,
         });
         expect(page.root).toEqualHtml(`
-      <ic-link class="default link">
+      <ic-link class="ic-link-default ic-link">
       <mock:shadow-root>
         <a tabindex="-1">
         <slot></slot>
@@ -24,7 +24,7 @@ describe("ic-link component", () => {
             html: `<ic-link download="test-download">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" download="test-download">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" download="test-download">
     <mock:shadow-root>
         <a download="test-download" tabindex="-1">
         <slot></slot>
@@ -40,9 +40,9 @@ describe("ic-link component", () => {
             html: `<ic-link href="test-href">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link href="test-href" class="default link">
+            .toEqualHtml(`<ic-link href="test-href" class="ic-link-default ic-link">
     <mock:shadow-root>
-        <a class="default ic-link" href="test-href" tabindex="0">
+        <a class="default link" href="test-href" tabindex="0">
         <slot></slot>
         </a>
         </mock:shadow-root>
@@ -56,9 +56,9 @@ describe("ic-link component", () => {
             html: `<ic-link  href="test-href" appearance="dark">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link href="test-href" appearance="dark" class="dark link">
+            .toEqualHtml(`<ic-link href="test-href" appearance="dark" class="ic-link-dark ic-link">
     <mock:shadow-root>
-        <a class="dark ic-link" href="test-href" tabindex="0">
+        <a class="dark link" href="test-href" tabindex="0">
         <slot></slot>
         </a>
         </mock:shadow-root>
@@ -72,7 +72,7 @@ describe("ic-link component", () => {
             html: `<ic-link hreflang="test-hreflang">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" hreflang="test-hreflang">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" hreflang="test-hreflang">
     <mock:shadow-root>
         <a hreflang="test-hreflang" tabindex="-1">
         <slot></slot>
@@ -88,7 +88,7 @@ describe("ic-link component", () => {
             html: `<ic-link referrerpolicy="no-referrer">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" referrerpolicy="no-referrer">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" referrerpolicy="no-referrer">
     <mock:shadow-root>
         <a referrerpolicy="no-referrer" tabindex="-1">
         <slot></slot>
@@ -103,7 +103,8 @@ describe("ic-link component", () => {
             components: [Link],
             html: `<ic-link rel="test-rel">IC Link Test</ic-link>`,
         });
-        expect(page.root).toEqualHtml(`<ic-link class="default link" rel="test-rel">
+        expect(page.root)
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" rel="test-rel">
     <mock:shadow-root>
         <a rel="test-rel" tabindex="-1">
         <slot></slot>
@@ -119,7 +120,7 @@ describe("ic-link component", () => {
             html: `<ic-link target="test-target">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" target="test-target">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" target="test-target">
     <mock:shadow-root>
         <a target="test-target" tabindex="-1">
         <slot></slot>
@@ -129,14 +130,15 @@ describe("ic-link component", () => {
       </ic-link>
     `);
     });
-    it("should render an 'open in new' icon when 'show-icon' is provided", async () => {
+    it("should render an 'open in new' icon when target is blank", async () => {
         const page = await newSpecPage({
             components: [Link],
-            html: `<ic-link show-icon>IC Link Test</ic-link>`,
+            html: `<ic-link target="_blank">IC Link Test</ic-link>`,
         });
-        expect(page.root).toEqualHtml(`<ic-link class="default link" show-icon>
+        expect(page.root)
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" target="_blank">
     <mock:shadow-root>
-        <a tabindex="-1">
+        <a tabindex="-1" target="_blank">
           <slot></slot>
           <span class="ic-link-open-in-new-icon">
             svg
@@ -154,11 +156,11 @@ describe("ic-link component", () => {
         <ic-link slot="router-item">Slotted Link</ic-link>
       </ic-link>`,
         });
-        expect(page.root).toEqualHtml(`<ic-link class="default link">
+        expect(page.root).toEqualHtml(`<ic-link class="ic-link-default ic-link">
     <mock:shadow-root>
       <slot name="router-item"></slot>
     </mock:shadow-root>
-    <ic-link class="default link" slot="router-item">
+    <ic-link class="ic-link-default ic-link" slot="router-item">
       <mock:shadow-root>
         <a tabindex="-1">
           <slot></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"ic-link.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-link/test/basic/ic-link.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../../ic-alert/ic-alert\";\nimport { Link } from \"../../ic-link\";\n\ndescribe(\"ic-link component\", () => {\n  it(\"should render a link by default with the correct text\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-link class=\"default link\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'download' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link download=\"test-download\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" download=\"test-download\">\n    <mock:shadow-root>\n        <a download=\"test-download\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'href' attribute and ic-link styling to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link href=\"test-href\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" class=\"default link\">\n    <mock:shadow-root>\n        <a class=\"default ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'dark' appearance styling and ic-link styling\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link  href=\"test-href\" appearance=\"dark\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" appearance=\"dark\" class=\"dark link\">\n    <mock:shadow-root>\n        <a class=\"dark ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'hreflang' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link hreflang=\"test-hreflang\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" hreflang=\"test-hreflang\">\n    <mock:shadow-root>\n        <a hreflang=\"test-hreflang\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'referrerpolicy' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link referrerpolicy=\"no-referrer\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" referrerpolicy=\"no-referrer\">\n    <mock:shadow-root>\n        <a referrerpolicy=\"no-referrer\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'rel' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link rel=\"test-rel\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" rel=\"test-rel\">\n    <mock:shadow-root>\n        <a rel=\"test-rel\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'target' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"test-target\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" target=\"test-target\">\n    <mock:shadow-root>\n        <a target=\"test-target\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render an 'open in new' icon when 'show-icon' is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link show-icon>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" show-icon>\n    <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n          <span class=\"ic-link-open-in-new-icon\">\n            svg\n          </span>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render a slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>\n        <ic-link slot=\"router-item\">Slotted Link</ic-link>\n      </ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\">\n    <mock:shadow-root>\n      <slot name=\"router-item\"></slot>\n    </mock:shadow-root>\n    <ic-link class=\"default link\" slot=\"router-item\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n        </a>\n      </mock:shadow-root>\n      Slotted Link\n      </ic-link>\n      </ic-link>\n    `);\n  });\n\n  it(\"should get theme from context\", async () => {\n    const page = await newSpecPage({\n      components: [Alert, Link],\n      html: `<ic-alert message=\"This has an action\"><ic-link slot=\"action\">Theme context link</ic-link></ic-alert>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"alert-theme-context\");\n  });\n\n  it(\"should correctly set variant on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-hero heading=\"Hero heading\" subheading=\"Hero description\">\n      <ic-link slot=\"interaction\">Link</ic-link>\n    </ic-hero>\n`,\n    });\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"dark\");\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"light\");\n  });\n\n  it(\"should call 'setFocus' when link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n    page.rootInstance.disconnectedCallback();\n  });\n});\n"]}
+{"version":3,"file":"ic-link.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-link/test/basic/ic-link.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;QACrE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,0DAA0D;SACjE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;KAQd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6EAA6E,EAAE,KAAK,IAAI,EAAE;QAC3F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,kDAAkD;SACzD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;KAQd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,qEAAqE;SAC5E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;KAQd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,0DAA0D;SACjE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;KAQd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;QACjF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;KAQd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,gDAAgD;SACvD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;KAQd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;KAQd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;;;;KAWd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;iBAEK;SACZ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC;YACzB,IAAI,EAAE,uGAAuG;SAC9G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;CAGX;SACI,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;QACnE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAElD,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;QACpE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QAEH,6EAA6E;QAC7E,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACrF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QACH,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CACnE,CAAC,QAAQ,EAAE,CAAC;QAEb,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;QAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CACnE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACpB,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../../ic-alert/ic-alert\";\nimport { Link } from \"../../ic-link\";\n\ndescribe(\"ic-link component\", () => {\n  it(\"should render a link by default with the correct text\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-link class=\"ic-link-default ic-link\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'download' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link download=\"test-download\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" download=\"test-download\">\n    <mock:shadow-root>\n        <a download=\"test-download\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'href' attribute and ic-link styling to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link href=\"test-href\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" class=\"ic-link-default ic-link\">\n    <mock:shadow-root>\n        <a class=\"default link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'dark' appearance styling and ic-link styling\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link  href=\"test-href\" appearance=\"dark\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" appearance=\"dark\" class=\"ic-link-dark ic-link\">\n    <mock:shadow-root>\n        <a class=\"dark link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'hreflang' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link hreflang=\"test-hreflang\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" hreflang=\"test-hreflang\">\n    <mock:shadow-root>\n        <a hreflang=\"test-hreflang\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'referrerpolicy' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link referrerpolicy=\"no-referrer\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" referrerpolicy=\"no-referrer\">\n    <mock:shadow-root>\n        <a referrerpolicy=\"no-referrer\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'rel' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link rel=\"test-rel\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" rel=\"test-rel\">\n    <mock:shadow-root>\n        <a rel=\"test-rel\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'target' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"test-target\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" target=\"test-target\">\n    <mock:shadow-root>\n        <a target=\"test-target\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render an 'open in new' icon when target is blank\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"_blank\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" target=\"_blank\">\n    <mock:shadow-root>\n        <a tabindex=\"-1\" target=\"_blank\">\n          <slot></slot>\n          <span class=\"ic-link-open-in-new-icon\">\n            svg\n          </span>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render a slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>\n        <ic-link slot=\"router-item\">Slotted Link</ic-link>\n      </ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"ic-link-default ic-link\">\n    <mock:shadow-root>\n      <slot name=\"router-item\"></slot>\n    </mock:shadow-root>\n    <ic-link class=\"ic-link-default ic-link\" slot=\"router-item\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n        </a>\n      </mock:shadow-root>\n      Slotted Link\n      </ic-link>\n      </ic-link>\n    `);\n  });\n\n  it(\"should get theme from context\", async () => {\n    const page = await newSpecPage({\n      components: [Alert, Link],\n      html: `<ic-alert message=\"This has an action\"><ic-link slot=\"action\">Theme context link</ic-link></ic-alert>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"alert-theme-context\");\n  });\n\n  it(\"should correctly set variant on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-hero heading=\"Hero heading\" subheading=\"Hero description\">\n      <ic-link slot=\"interaction\">Link</ic-link>\n    </ic-hero>\n`,\n    });\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"dark\");\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"light\");\n  });\n\n  it(\"should call 'setFocus' when link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n    page.rootInstance.disconnectedCallback();\n  });\n});\n"]}

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

@@ -456,7 +456,7 @@ video {
   --linear-line-height: var(--ic-space-xs);
 }
 
-:host(.light) {
+:host(.ic-loading-indicator-light) {
   --inner-color: var(--ic-architectural-white);
   --outer-color: var(--ic-architectural-800);
   --label-color: var(--ic-architectural-white);
@@ -489,7 +489,7 @@ video {
   --circular-diameter: 1.25rem;
 }
 
-:host(.label) {
+:host(.ic-loading-indicator-label) {
   --margin: 0 0 var(--ic-space-xs) 0;
 }
 
@@ -543,7 +543,7 @@ video {
   width: var(--linear-width);
 }
 
-:host(.full-width) {
+:host(.ic-loading-indicator-full-width) {
   --linear-border-radius: none;
 }
 
@@ -632,7 +632,8 @@ video {
   color: var(--ic-color-tertiary-text);
 }
 
-:host(.light.not-required.compact-step-progress-indicator) .inner-text {
+:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)
+  .inner-text {
   color: var(--ic-architectural-400);
 }
 

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

@@ -63,8 +63,8 @@ export class LoadingIndicator {
             // Ensure progress cannot be out of bounds
             const progress = Math.min(this.max, Math.max(this.min, this.progress));
             const proportion = (progress - this.min) / (this.max - this.min);
-            this.showSecond = proportion > 0.5;
-            if (this.showSecond) {
+            this.clipInnerElement = proportion > 0.5;
+            if (this.clipInnerElement) {
                 this.innerElement.classList.remove("clip");
             }
             else {
@@ -114,7 +114,7 @@ export class LoadingIndicator {
         this.circularLineWidth = undefined;
         this.indeterminate = undefined;
         this.indicatorLabel = undefined;
-        this.showSecond = false;
+        this.clipInnerElement = false;
         this.appearance = "dark";
         this.description = "Loading";
         this.fullWidth = false;
@@ -165,9 +165,9 @@ export class LoadingIndicator {
         const { appearance, label, description, size, fullWidth, innerLabel } = this;
         const { x, y, r } = this.setCircleXY();
         return (h(Host, { class: {
-                ["light"]: appearance === IcThemeForegroundEnum.Light,
-                ["label"]: !!label,
-                ["full-width"]: fullWidth,
+                ["ic-loading-indicator-light"]: appearance === IcThemeForegroundEnum.Light,
+                ["ic-loading-indicator-label"]: !!label,
+                ["ic-loading-indicator-full-width"]: fullWidth,
                 ["inner-label"]: !!innerLabel,
             } }, h("div", { class: "ic-loading-container", part: "ic-loading-container" }, h("div", { ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
             this.innerLabel !== undefined &&
@@ -411,7 +411,7 @@ export class LoadingIndicator {
             "circularLineWidth": {},
             "indeterminate": {},
             "indicatorLabel": {},
-            "showSecond": {}
+            "clipInnerElement": {}
         };
     }
     static get elementRef() { return "el"; }

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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMhF,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOpD,MAAM,OAAO,gBAAgB;;QAwHnB,gCAA2B,GAAG,GAAG,EAAE;YACzC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAClC,kBAAkB,EAClB,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CACtB,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,aAAQ,GAAG,CACjB,UAAkB,EAClB,QAAiC,EACjC,EAAE;YACF,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE;gBACtB,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;oBAC/B,IAAI,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;wBAC3C,UAAU,EAAE,CAAC;oBACf,CAAC;yBAAM,CAAC;wBACN,UAAU,GAAG,CAAC,CAAC;oBACjB,CAAC;oBACD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC;gBACvC,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACzB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;;YAC7B,IAAI,OAAO,GAA0B,IAAI,CAAC;YAC1C,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,CAAC;YAC7C,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC;gBACtE,OAAO,GAAG,OAAO,CAAC;YACpB,CAAC;iBAAM,IACL,IAAI,CAAC,IAAI,KAAK,OAAO;gBACrB,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,KAAK,IAAI,GAAG,CAAC,EAC1C,CAAC;gBACD,OAAO,GAAG,IAAI,CAAC;YACjB,CAAC;YACD,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC;QAEF,sHAAsH;QAC9G,uBAAkB,GAAG,GAAG,EAAE;YAChC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;YAEjD,MAAM,4BAA4B,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAC7D,iCAAiC,CAClC;gBACC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,CAAC,CAAC;YACN,MAAM,kCAAkC,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CACnE,qBAAqB,CACtB;gBACC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,CAAC,CAAC;YAEN,IACE,KAAK;gBACL,4BAA4B;gBAC5B,kCAAkC,EAClC,CAAC;gBACD,IAAI,CAAC,iBAAiB;oBACpB,CAAC,4BAA4B;wBAC3B,kCAAkC;wBAClC,KAAK,CAAC,GAAG,GAAG,CAAC;gBACjB,IAAI,CAAC,gBAAgB;oBACnB,4BAA4B;wBAC5B,kCAAkC;wBAClC,KAAK,CAAC;gBACR,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CACjC,uBAAuB,EACvB,GAAG,IAAI,CAAC,iBAAiB,IAAI,CAC9B,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,8BAAyB,GAAG,GAAG,EAAE;YACvC,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,OAAO;YAC/B,0CAA0C;YAE1C,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACvE,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;YACjE,IAAI,CAAC,gBAAgB,GAAG,UAAU,GAAG,GAAG,CAAC;YACzC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC7C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC1C,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CACjC,gBAAgB,EAChB,GAAG,UAAU,GAAG,GAAG,GAAG,CACvB,CAAC;QACJ,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAW,EAAE;YACpC,IAAI,GAAG,GAAG,cAAc,IAAI,CAAC,IAAI,QAAQ,CAAC;YAC1C,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC;YAC9D,OAAO,GAAG,CAAC;QACb,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACvC,MAAM,UAAU,GAAG,CAAC,CAAC;gBACrB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;gBACjD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC9B,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;oBAC9B,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAuB,EAAE;YAC7C,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,CAAC;gBAC9B,MAAM,CAAC,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;gBACpC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACZ,MAAM,CAAC,GAAG,CAAC,CAAC;gBACZ,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;gBAClD,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;gBAE9B,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC;YACjC,CAAC;YACD,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC9B,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,MAAc,EAAE,EAAE;YACxC,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;YACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;YACvE,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;YAEtE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAClC,oBAAoB,EACpB,GAAG,SAAS,IAAI,CACjB,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAClC,sBAAsB,EACtB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CACjB,CAAC;gBACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAClC,qBAAqB,EACrB,GAAG,UAAU,GAAG,SAAS,IAAI,CAC9B,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;;;;;gCA3PmC,KAAK;0BAKQ,MAAM;2BAKzB,SAAS;yBAKO,KAAK;;6BAUnB,IAAI;mBAMd,GAAG;mBAMH,CAAC;oBAKyB,SAAS;oBAKT,UAAU;;;;IAS3D,gBAAgB;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IASD,oBAAoB;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC;QACjD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,sBAAsB,CAAC,CAAC;IAC9D,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CACnD,8CAA8C,CAC/C,CAAC;YACF,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrC,CAAC;QAED,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzD,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC;IACnD,CAAC;IAED,kBAAkB;QAChB,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzD,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAoJD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,GACnE,IAAI,CAAC;QACP,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEvC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,4BAA4B,CAAC,EAC5B,UAAU,KAAK,qBAAqB,CAAC,KAAK;gBAC5C,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvC,CAAC,iCAAiC,CAAC,EAAE,SAAS;gBAC9C,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,UAAU;aAC9B;YAED,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,sBAAsB;gBAC3D,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,EACvD,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,aAAa,qBAEhB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,kBAAkB,gBAE9C,WAAW,mBACR,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG;oBAEvB,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,EACvD,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,QAAQ;wBAErC,IAAI,CAAC,UAAU;4BACd,IAAI,CAAC,UAAU,KAAK,SAAS;4BAC7B,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CACvB,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,UAAU,CACF,CACjB;wBACF,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B,WACE,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,OAAO,IAAI,CAAC,gBAAgB,IAAI,CAAC,IACxC,IAAI,CAAC,gBAAgB,IAAI,CAC3B,EAAE;4BAEF,cAAQ,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,GAAW;4BACpD,cAAQ,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,GAAW,CAChD,CACP,CACG,CACF;gBACL,KAAK,IAAI,IAAI,KAAK,MAAM,IAAI,CAC3B,qBACE,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE;oBAE/B,aAAI,IAAI,CAAC,cAAc,CAAK,CACd,CACjB,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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() clipInnerElement: 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.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 (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          [\"ic-loading-indicator-light\"]:\n            appearance === IcThemeForegroundEnum.Light,\n          [\"ic-loading-indicator-label\"]: !!label,\n          [\"ic-loading-indicator-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"]}

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

@@ -446,7 +446,7 @@ video {
  */
 
 @media (prefers-reduced-motion: no-preference) {
-  :host(.open) .menu {
+  :host(.ic-menu-open) .menu {
     transition: max-height var(--ic-transition-duration-slow);
   }
 }
@@ -463,7 +463,7 @@ video {
   box-shadow: var(--ic-elevation-overlay);
 }
 
-:host(:not(.no-focus):focus-within) {
+:host(:not(.ic-menu-no-focus):focus-within) {
   box-shadow: var(--ic-border-focus);
 }
 
@@ -498,17 +498,17 @@ video {
   outline: none;
 }
 
-:host(.open) {
+:host(.ic-menu-open) {
   max-height: none;
   display: block;
 }
 
-:host(.open) .menu {
+:host(.ic-menu-open) .menu {
   visibility: visible;
   max-height: calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs));
 }
 
-:host(.full-width) {
+:host(.ic-menu-full-width) {
   width: 100%;
 }
 
@@ -524,11 +524,11 @@ video {
   justify-content: space-between;
 }
 
-:host(.small) .option {
+:host(.ic-menu-small) .option {
   padding: var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px));
 }
 
-:host(.large) .option {
+:host(.ic-menu-large) .option {
   padding: var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px));
 }
 
@@ -612,7 +612,7 @@ video {
   color: var(--ic-color-tertiary-text);
 }
 
-:host(.small) .option-group-title {
+:host(.ic-menu-small) .option-group-title {
   padding: var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))
     var(--ic-space-xxs);
 }

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

@@ -451,7 +451,6 @@ export class Menu {
         this.searchMode = "navigation";
         this.selectOnEnter = false;
         this.size = "default";
-        this.small = false;
         this.options = undefined;
         this.value = undefined;
         this.valueField = "value";
@@ -496,7 +495,7 @@ export class Menu {
     }
     componentDidLoad() {
         if (this.isSearchBar &&
-            this.parentEl.disableFilter) {
+            this.parentEl.disableAutoFiltering) {
             this.focusFromSearchKeypress = true;
         }
         onComponentRequiredPropUndefined([
@@ -610,13 +609,12 @@ export class Menu {
         this.focusFromSearchKeypress = true;
     }
     render() {
-        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, small, open, inputEl, keyboardNav, } = this;
+        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, } = this;
         return (h(Host, { class: {
-                "full-width": fullWidth,
-                "no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" || hasTimedOut || isLoading,
-                small: small,
-                [size]: true,
-                open: open,
+                "ic-menu-full-width": fullWidth,
+                "ic-menu-no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" || hasTimedOut || isLoading,
+                [`ic-menu-${size}`]: true,
+                "ic-menu-open": open,
             } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": inputLabel, "aria-activedescendant": value != null && value !== "" ? this.getOptionId(value) : "", tabindex: open && !keyboardNav && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ? "0" : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
             if (option.children) {
                 if (option.children.length > 0) {
@@ -909,27 +907,6 @@ export class Menu {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "options": {
                 "type": "unknown",
                 "mutable": false,