@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.6

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js

@@ -23,6 +23,20 @@ describe("ic-back-to-top", () => {
         });
         expect(page.root).toMatchSnapshot("should render");
     });
+    it("should render with light theme", async () => {
+        const page = await newSpecPage({
+            components: [BackToTop, Button],
+            html: `<div id="topEl"><ic-back-to-top target="topEl" theme="light"></ic-back-to-top></div>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with light theme");
+    });
+    it("should render with dark theme", async () => {
+        const page = await newSpecPage({
+            components: [BackToTop, Button],
+            html: `<div id="topEl"><ic-back-to-top target="topEl" theme="dark"></ic-back-to-top></div>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with dark theme");
+    });
     it("should render with footer", async () => {
         const page = await newSpecPage({
             components: [BackToTop, Button, Footer],

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-back-to-top.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-back-to-top/test/basic/ic-back-to-top.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ClassificationBanner } from \"../../../ic-classification-banner/ic-classification-banner\";\nimport { Footer } from \"../../../ic-footer/ic-footer\";\nimport { BackToTop } from \"../../ic-back-to-top\";\nimport { Button } from \"../../../ic-button/ic-button\";\n\nbeforeAll(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockIntersectionObserver = jest.fn();\n  mockIntersectionObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n\n  Object.defineProperty(global, \"IntersectionObserver\", {\n    value: mockIntersectionObserver,\n  });\n});\n\ndescribe(\"ic-back-to-top\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render with footer\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button, Footer],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div><ic-footer></ic-footer>`,\n    });\n\n    expect(page.body).toMatchSnapshot(\"should render with footer\");\n  });\n\n  it(\"should render with no targetId set\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<ic-back-to-top></ic-back-to-top>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with no targetId set\");\n  });\n\n  it(\"should render when target starts with #\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"#topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render when target starts with #\"\n    );\n  });\n\n  it(\"should offset due to classification banner\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, ClassificationBanner],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,\n    });\n\n    expect(page.rootInstance.bannerOffset).toBe(true);\n  });\n\n  it(\"should scroll to 0,0 if target is null\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    expect(page.rootInstance.isTargetElNull).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"ic-button\").click();\n    expect(page.win.screenX).toBe(0);\n    expect(page.win.screenY).toBe(0);\n  });\n\n  it(\"should scroll targetEl into view\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.root.shadowRoot.querySelector(\"ic-button\").click();\n    expect(page.rootInstance.targetElVisible).toBe(true);\n  });\n\n  it(\"should return null targetElement when there's no target matching that given in back to top\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    const findTarget = page.rootInstance.findTargetEl(\"topEl\");\n\n    expect(findTarget).toBeNull();\n  });\n\n  it(\"should stop observing observedEl when topObserver exists\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.watchPropHandler(undefined, \"topEl\");\n    page.rootInstance.createTopObserver(\"topEl\");\n    expect(page.rootInstance.topObserver).not.toBeNull();\n  });\n\n  it(\"should set footerVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);\n    //value is false as scrollY is always 0\n    expect(page.rootInstance.footerVisible).toBe(false);\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.footerVisible).toBe(false);\n  });\n\n  it(\"should set targetElVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);\n    expect(page.rootInstance.targetElVisible).toBe(true);\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.targetElVisible).toBe(false);\n  });\n\n  it(\"should test update of target from undefined to value\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    page.root.target = \"topEl\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.target).toBe(\"topEl\");\n  });\n\n  it(\"should render with an icon only\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" variant=\"icon\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with an icon only\");\n  });\n});\n"]}
+{"version":3,"file":"ic-back-to-top.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-back-to-top/test/basic/ic-back-to-top.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ClassificationBanner } from \"../../../ic-classification-banner/ic-classification-banner\";\nimport { Footer } from \"../../../ic-footer/ic-footer\";\nimport { BackToTop } from \"../../ic-back-to-top\";\nimport { Button } from \"../../../ic-button/ic-button\";\n\nbeforeAll(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockIntersectionObserver = jest.fn();\n  mockIntersectionObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n\n  Object.defineProperty(global, \"IntersectionObserver\", {\n    value: mockIntersectionObserver,\n  });\n});\n\ndescribe(\"ic-back-to-top\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render with light theme\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" theme=\"light\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with light theme\");\n  });\n\n  it(\"should render with dark theme\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" theme=\"dark\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with dark theme\");\n  });\n\n  it(\"should render with footer\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button, Footer],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div><ic-footer></ic-footer>`,\n    });\n\n    expect(page.body).toMatchSnapshot(\"should render with footer\");\n  });\n\n  it(\"should render with no targetId set\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<ic-back-to-top></ic-back-to-top>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with no targetId set\");\n  });\n\n  it(\"should render when target starts with #\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"#topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render when target starts with #\"\n    );\n  });\n\n  it(\"should offset due to classification banner\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, ClassificationBanner],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,\n    });\n\n    expect(page.rootInstance.bannerOffset).toBe(true);\n  });\n\n  it(\"should scroll to 0,0 if target is null\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    expect(page.rootInstance.isTargetElNull).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"ic-button\").click();\n    expect(page.win.screenX).toBe(0);\n    expect(page.win.screenY).toBe(0);\n  });\n\n  it(\"should scroll targetEl into view\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.root.shadowRoot.querySelector(\"ic-button\").click();\n    expect(page.rootInstance.targetElVisible).toBe(true);\n  });\n\n  it(\"should return null targetElement when there's no target matching that given in back to top\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    const findTarget = page.rootInstance.findTargetEl(\"topEl\");\n\n    expect(findTarget).toBeNull();\n  });\n\n  it(\"should stop observing observedEl when topObserver exists\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.watchPropHandler(undefined, \"topEl\");\n    page.rootInstance.createTopObserver(\"topEl\");\n    expect(page.rootInstance.topObserver).not.toBeNull();\n  });\n\n  it(\"should set footerVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);\n    //value is false as scrollY is always 0\n    expect(page.rootInstance.footerVisible).toBe(false);\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.footerVisible).toBe(false);\n  });\n\n  it(\"should set targetElVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);\n    expect(page.rootInstance.targetElVisible).toBe(true);\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.targetElVisible).toBe(false);\n  });\n\n  it(\"should test update of target from undefined to value\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    page.root.target = \"topEl\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.target).toBe(\"topEl\");\n  });\n\n  it(\"should render with an icon only\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Button],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" variant=\"icon\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with an icon only\");\n  });\n});\n"]}

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

@@ -23,15 +23,15 @@
 }
 
 :host(.ic-badge-neutral) {
-  background-color: var(--ic-badge-neutral) !important;
+  background-color: var(--ic-badge-dark) !important;
 }
 
 :host(.ic-badge-light) ic-typography {
-  --ic-typography-color: var(--ic-badge-light-text);
+  --ic-typography-color: var(--ic-badge-text-monochrome);
 }
 
 :host(.ic-badge-light) ::slotted(*) {
-  fill: var(--ic-badge-light-icon);
+  fill: var(--ic-badge-icon-monochrome);
 }
 
 :host(.ic-badge-info) {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { convertToRGBA, getThemeForegroundColor, isPropDefined, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { convertToRGBA, getBrandForegroundAppearance, isPropDefined, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 /**
  * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.
  */
@@ -11,7 +11,7 @@ export class Badge {
             if (colorRGBA) {
                 const { r, g, b, a } = colorRGBA;
                 this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
-                this.foregroundColour = getThemeForegroundColor((r * 299 + g * 587 + b * 114) / 1000);
+                this.foregroundColour = getBrandForegroundAppearance((r * 299 + g * 587 + b * 114) / 1000);
             }
         };
         this.getLabel = () => this.maxNumber && Number(this.label) > this.maxNumber

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

@@ -1 +1 @@
-{"version":3,"file":"ic-badge.js","sourceRoot":"","sources":["../../../src/components/ic-badge/ic-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcSizes,\n  IcThemeForeground,\n  IcColor,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getThemeForegroundColor,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private foregroundColour: IcThemeForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and label is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop() position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() label?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    if (this.variant === \"custom\") {\n      this.setBadgeColour();\n    }\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop() visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Badge\"\n      );\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n      this.foregroundColour = getThemeForegroundColor(\n        (r * 299 + g * 587 + b * 114) / 1000\n      );\n    }\n  };\n\n  private getLabel = () =>\n    this.maxNumber && Number(this.label) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.label;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.label || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getLabel,\n      position,\n      size,\n      label,\n      type,\n      variant,\n      visible,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-badge-${position}`]: true,\n          [`ic-badge-${size}`]: true,\n          [`ic-badge-${variant}`]: true,\n          [`ic-badge-${type}`]: true,\n          [`ic-badge-foreground-${foregroundColour}`]:\n            foregroundColour !== null && variant === \"custom\",\n          [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && label && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-badge.js","sourceRoot":"","sources":["../../../src/components/ic-badge/ic-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcSizes,\n  IcBrandForeground,\n  IcColor,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getBrandForegroundAppearance,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private foregroundColour: IcBrandForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and label is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop() position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() label?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    if (this.variant === \"custom\") {\n      this.setBadgeColour();\n    }\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop() visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Badge\"\n      );\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n      this.foregroundColour = getBrandForegroundAppearance(\n        (r * 299 + g * 587 + b * 114) / 1000\n      );\n    }\n  };\n\n  private getLabel = () =>\n    this.maxNumber && Number(this.label) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.label;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.label || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getLabel,\n      position,\n      size,\n      label,\n      type,\n      variant,\n      visible,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-badge-${position}`]: true,\n          [`ic-badge-${size}`]: true,\n          [`ic-badge-${variant}`]: true,\n          [`ic-badge-${type}`]: true,\n          [`ic-badge-foreground-${foregroundColour}`]:\n            foregroundColour !== null && variant === \"custom\",\n          [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && label && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -16,12 +16,9 @@
   height: var(--ic-space-lg);
 }
 
-:host .chevron svg {
-  color: var(--ic-breadcrumb-icon-chevron);
-}
-
+:host .chevron svg,
 :host(.ic-breadcrumb-monochrome) .chevron svg {
-  color: var(--ic-breadcrumb-icon-chevron-monochrome);
+  color: var(--ic-breadcrumb-icon-chevron);
 }
 
 :host(:first-child) .chevron {
@@ -29,11 +26,11 @@
 }
 
 .back-icon svg {
-  color: var(--ic-breadcrumb-page-icon);
+  color: var(--ic-breadcrumb-icon);
 }
 
 :host(.ic-breadcrumb-monochrome) .back-icon svg {
-  color: var(--ic-breadcrumb-page-icon-monochrome);
+  color: var(--ic-breadcrumb-icon-monochrome);
 }
 
 :host(.ic-breadcrumb-back) {

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js

@@ -21,7 +21,10 @@ export class BreadcrumbGroup {
         };
         this.setBackBreadcrumb = () => {
             if (this.backBreadcrumbOnly) {
-                this.setBackBreadcrumbAttr();
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.revertLastParentCollapsedBreadcrumb();
             }
         };
         this.setBackBreadcrumbAttr = () => {
@@ -35,8 +38,8 @@ export class BreadcrumbGroup {
             if (allBreadcrumbs.length === 1) {
                 return null;
             }
-            this.breadcrumbs = allBreadcrumbs.filter((breadcrumb) => !breadcrumb.getAttribute("current"));
-            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];
+            this.breadcrumbs = allBreadcrumbs;
+            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];
             return this.breadcrumb;
         };
         this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
@@ -47,20 +50,32 @@ export class BreadcrumbGroup {
             });
         };
         this.setCollapsed = () => {
+            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+            const firstBreadcrumb = allBreadcrumbs[0];
+            if (this.collapsedBreadcrumbs) {
+                this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                    breadcrumb.classList.remove("visuallyhidden");
+                    breadcrumb.classList.remove("fade");
+                });
+            }
             if (this.collapsed) {
-                const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+                this.renderCollapsedBreadcrumb();
                 this.collapsedBreadcrumbs = allBreadcrumbs
                     .splice(1, allBreadcrumbs.length - 2)
                     .filter((breadcrumb) => !breadcrumb.classList.contains("collapsed-breadcrumb-wrapper"));
-                this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
-                const firstBreadcrumb = allBreadcrumbs[0];
+                if (!this.backBreadcrumbOnly) {
+                    this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
+                }
                 if (firstBreadcrumb) {
                     firstBreadcrumb.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
                 }
             }
+            else {
+                this.collapsedBreadcrumbWrapper.remove();
+            }
         };
         this.clickHandler = () => {
-            this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);
+            this.handleHiddenCollapsedBreadcrumbs();
         };
         this.renderCollapsedBreadcrumb = () => {
             this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
@@ -85,8 +100,8 @@ export class BreadcrumbGroup {
             this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);
             return this.collapsedBreadcrumbWrapper;
         };
-        this.handleHiddenCollapsedBreadcrumbs = (collapsedBreadcrumbWrapper) => {
-            collapsedBreadcrumbWrapper.remove();
+        this.handleHiddenCollapsedBreadcrumbs = () => {
+            this.collapsedBreadcrumbWrapper.remove();
             this.collapsedBreadcrumbs.forEach((breadcrumb) => {
                 breadcrumb.classList.add("visuallyhidden");
                 breadcrumb.classList.remove("hide");
@@ -108,11 +123,18 @@ export class BreadcrumbGroup {
             breadcrumb.addEventListener("transitionend", this.transitionendHandler);
         };
         this.setLastParentCollapsedBackBreadcrumb = () => {
+            this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
             this.setBackBreadcrumbAttr();
-            this.lastParentBreadcrumb.classList.remove("hide");
+            if (this.lastParentBreadcrumb) {
+                this.lastParentBreadcrumb.classList.remove("hide");
+                this.lastParentBreadcrumb.classList.add("show");
+            }
         };
         this.revertLastParentCollapsedBreadcrumb = () => {
             this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+            if (this.collapsed) {
+                this.lastParentBreadcrumb.classList.add("hide");
+            }
         };
         this.resizeObserverCallback = (currSize) => {
             if (currSize !== this.deviceSize) {
@@ -160,6 +182,9 @@ export class BreadcrumbGroup {
     watchBackBreadcrumbHandler() {
         this.setBackBreadcrumb();
     }
+    watchCollapsedHandler() {
+        this.setCollapsed();
+    }
     watchMonochromeHandler() {
         this.setBreadcrumbMonochrome();
     }
@@ -176,15 +201,12 @@ export class BreadcrumbGroup {
         else {
             checkResizeObserver(this.runResizeObserver);
         }
-        if (this.collapsed) {
-            this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();
-            if (allBreadcrumbs.length > 2) {
-                if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
-                    this.setLastParentCollapsedBackBreadcrumb();
-                }
-                else {
-                    this.setCollapsed();
-                }
+        if (this.collapsed && allBreadcrumbs.length > 2) {
+            if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.setCollapsed();
             }
         }
     }
@@ -306,6 +328,9 @@ export class BreadcrumbGroup {
         return [{
                 "propName": "backBreadcrumbOnly",
                 "methodName": "watchBackBreadcrumbHandler"
+            }, {
+                "propName": "collapsed",
+                "methodName": "watchCollapsedHandler"
             }, {
                 "propName": "monochrome",
                 "methodName": "watchMonochromeHandler"

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbEl: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n  private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n  private resizeObserver: ResizeObserver = null;\n  private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop() collapsed: boolean = false;\n\n  /**\n   * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.setBreadcrumbMonochrome();\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  @Watch(\"theme\")\n  watchThemeHandler(): void {\n    this.setBreadcrumbTheme();\n  }\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    this.setBreadcrumbTheme();\n    this.setBreadcrumbMonochrome();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed) {\n      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n      if (allBreadcrumbs.length > 2) {\n        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setCollapsed();\n        }\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.breadcrumb &&\n      this.breadcrumb.removeEventListener(\n        \"transitionend\",\n        this.transitionendHandler\n      );\n\n    this.collapsedBreadcrumbEl &&\n      this.collapsedBreadcrumbEl.removeEventListener(\n        \"click\",\n        this.clickHandler\n      );\n  }\n\n  private setBreadcrumbTheme = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n      breadcrumb.theme = this.theme;\n    });\n  };\n\n  private setBreadcrumbMonochrome = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n      breadcrumb.monochrome = this.monochrome;\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs.filter(\n      (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n    );\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n    return this.breadcrumb;\n  };\n\n  private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_BREADCRUMB)\n      );\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n\n      this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n        breadcrumb.classList.add(\"hide\")\n      );\n\n      const firstBreadcrumb = allBreadcrumbs[0];\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    }\n  };\n\n  private clickHandler = () => {\n    this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    this.collapsedBreadcrumbEl.innerText = \"...\";\n    this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = (\n    collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n  ) => {\n    collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.setBackBreadcrumbAttr();\n    this.lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-group-back\": this.backBreadcrumbOnly,\n          \"ic-breadcrumb-group-collapsed\": this.collapsed,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbEl: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n  private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n  private resizeObserver: ResizeObserver = null;\n  private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop() collapsed: boolean = false;\n  @Watch(\"collapsed\")\n  watchCollapsedHandler(): void {\n    this.setCollapsed();\n  }\n\n  /**\n   * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.setBreadcrumbMonochrome();\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  @Watch(\"theme\")\n  watchThemeHandler(): void {\n    this.setBreadcrumbTheme();\n  }\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    this.setBreadcrumbTheme();\n    this.setBreadcrumbMonochrome();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed && allBreadcrumbs.length > 2) {\n      if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n        this.setLastParentCollapsedBackBreadcrumb();\n      } else {\n        this.setCollapsed();\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.breadcrumb &&\n      this.breadcrumb.removeEventListener(\n        \"transitionend\",\n        this.transitionendHandler\n      );\n\n    this.collapsedBreadcrumbEl &&\n      this.collapsedBreadcrumbEl.removeEventListener(\n        \"click\",\n        this.clickHandler\n      );\n  }\n\n  private setBreadcrumbTheme = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n      breadcrumb.theme = this.theme;\n    });\n  };\n\n  private setBreadcrumbMonochrome = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n      breadcrumb.monochrome = this.monochrome;\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setLastParentCollapsedBackBreadcrumb();\n    } else {\n      this.revertLastParentCollapsedBreadcrumb();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs;\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];\n\n    return this.breadcrumb;\n  };\n\n  private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    const firstBreadcrumb = allBreadcrumbs[0];\n    if (this.collapsedBreadcrumbs) {\n      this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n        breadcrumb.classList.remove(\"visuallyhidden\");\n        breadcrumb.classList.remove(\"fade\");\n      });\n    }\n\n    if (this.collapsed) {\n      this.renderCollapsedBreadcrumb();\n\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n      if (!this.backBreadcrumbOnly) {\n        this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n          breadcrumb.classList.add(\"hide\")\n        );\n      }\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    } else {\n      this.collapsedBreadcrumbWrapper.remove();\n    }\n  };\n\n  private clickHandler = () => {\n    this.handleHiddenCollapsedBreadcrumbs();\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    this.collapsedBreadcrumbEl.innerText = \"...\";\n    this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = () => {\n    this.collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.remove(\"hide\");\n      this.lastParentBreadcrumb.classList.add(\"show\");\n    }\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    if (this.collapsed) {\n      this.lastParentBreadcrumb.classList.add(\"hide\");\n    }\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-group-back\": this.backBreadcrumbOnly,\n          \"ic-breadcrumb-group-collapsed\": this.collapsed,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}