@ukic/web-components 3.2.0 → 3.4.0

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

@@ -1 +1 @@
-{"file":"ic-badge.js","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.ic-badge-show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.ic-badge-hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host ic-typography {\n  --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n  background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n  --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n  fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n  background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n  background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n  background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n  --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n  fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n  background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n  background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-medium) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-dot.ic-badge-large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n  fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n  --ic-typography-color: var(--ic-color-primary-text-dark);\n}\n\n:host(.ic-badge-text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-text.ic-badge-small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.ic-badge-far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.ic-badge-dot.ic-badge-near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n  position: static;\n}\n\n:host(.ic-badge-hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Listen,\n} 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\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\nconst SIDE_NAVIGATION = \"IC-SIDE-NAVIGATION\";\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 = null;\n  private foregroundColour: IcBrandForeground;\n  private parentAriaLabel: string;\n  private initialPosition: IcBadgePositions = this.position ?? \"far\";\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;\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({ mutable: true }) 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  componentWillRender(): void {\n    this.isInTopNav() && this.setPositionInTopNavigation();\n    this.isInSideNav() && this.setPositionInSideNavigation();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.isInTopNav() && (this.position = \"inline\");\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.isInTopNav() && (this.position = this.initialPosition);\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;\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          : null;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private setPositionInTopNavigation = () => {\n    this.position = this.isInMobileMode() ? \"inline\" : this.initialPosition;\n  };\n\n  private setPositionInSideNavigation = () => {\n    this.position = \"near\";\n  };\n\n  private isInTopNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === TOP_NAVIGATION ||\n      greatGrandparentEl?.tagName === TOP_NAVIGATION\n    );\n  };\n\n  private isInSideNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === SIDE_NAVIGATION ||\n      greatGrandparentEl?.tagName === SIDE_NAVIGATION\n    );\n  };\n\n  private isInMobileMode = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      ((grandparentEl?.tagName === TOP_NAVIGATION ||\n        grandparentEl?.tagName === SIDE_NAVIGATION) &&\n        grandparentEl.classList.contains(\"mobile-mode\")) ||\n      ((greatGrandparentEl?.tagName === TOP_NAVIGATION ||\n        greatGrandparentEl?.tagName === SIDE_NAVIGATION) &&\n        greatGrandparentEl.classList.contains(\"mobile-mode\"))\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","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.ic-badge-show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.ic-badge-hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host ic-typography {\n  --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n  background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n  --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n  fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n  background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n  background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n  background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n  --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n  fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n  background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n  background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-medium) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-dot.ic-badge-large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n  fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-dark);\n}\n\n:host(.ic-badge-text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-text.ic-badge-small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.ic-badge-far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.ic-badge-dot.ic-badge-near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n  position: static;\n}\n\n:host(.ic-badge-hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Listen,\n} 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\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\nconst SIDE_NAVIGATION = \"IC-SIDE-NAVIGATION\";\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 = null;\n  private foregroundColour: IcBrandForeground;\n  private parentAriaLabel: string;\n  private initialPosition: IcBadgePositions = this.position ?? \"far\";\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;\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({ mutable: true }) 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  componentWillRender(): void {\n    this.isInTopNav() && this.setPositionInTopNavigation();\n    this.isInSideNav() && this.setPositionInSideNavigation();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.isInTopNav() && (this.position = \"inline\");\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.isInTopNav() && (this.position = this.initialPosition);\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;\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          : null;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private setPositionInTopNavigation = () => {\n    this.position = this.isInMobileMode() ? \"inline\" : this.initialPosition;\n  };\n\n  private setPositionInSideNavigation = () => {\n    this.position = \"near\";\n  };\n\n  private isInTopNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === TOP_NAVIGATION ||\n      greatGrandparentEl?.tagName === TOP_NAVIGATION\n    );\n  };\n\n  private isInSideNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === SIDE_NAVIGATION ||\n      greatGrandparentEl?.tagName === SIDE_NAVIGATION\n    );\n  };\n\n  private isInMobileMode = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      ((grandparentEl?.tagName === TOP_NAVIGATION ||\n        grandparentEl?.tagName === SIDE_NAVIGATION) &&\n        grandparentEl.classList.contains(\"mobile-mode\")) ||\n      ((greatGrandparentEl?.tagName === TOP_NAVIGATION ||\n        greatGrandparentEl?.tagName === SIDE_NAVIGATION) &&\n        greatGrandparentEl.classList.contains(\"mobile-mode\"))\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}

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

@@ -13,10 +13,11 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
         this.__attachShadow();
         this.ADD_CLASS_DELAY = 50;
         this.IC_BREADCRUMB = "ic-breadcrumb";
-        this.resizeObserver = null;
         this.SHOW_BACK_ICON = "show-back-icon";
+        this.collapsedBreadcrumbs = [];
+        this.resizeObserver = null;
+        this.lastParentBreadcrumb = null;
         this.deviceSize = DEVICE_SIZES.XL;
-        this.expandedBreadcrumbs = false;
         /**
          * If `true`, display only a single breadcrumb for the parent page with a back icon.
          */
@@ -34,14 +35,12 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
          */
         this.theme = "inherit";
         this.setBreadcrumbTheme = () => {
-            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
-            allBreadcrumbs.forEach((breadcrumb) => {
+            Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB)).forEach((breadcrumb) => {
                 breadcrumb.theme = this.theme;
             });
         };
         this.setBreadcrumbMonochrome = () => {
-            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
-            allBreadcrumbs.forEach((breadcrumb) => {
+            Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB)).forEach((breadcrumb) => {
                 breadcrumb.monochrome = this.monochrome;
             });
         };
@@ -60,48 +59,48 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
             }
         };
         this.getLastParentBreadcrumb = () => {
-            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
-            if (allBreadcrumbs.length === 1) {
-                return null;
-            }
-            this.breadcrumbs = allBreadcrumbs;
-            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];
-            return this.breadcrumb;
-        };
-        this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
-        this.setDefaultBreadcrumbs = () => {
-            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
-            allBreadcrumbs.forEach((breadcrumb) => {
-                breadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
-            });
+            const allBreadcrumbs = this.el.querySelectorAll(this.IC_BREADCRUMB);
+            return allBreadcrumbs.length > 1
+                ? allBreadcrumbs[allBreadcrumbs.length - 2]
+                : null;
         };
         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");
-                });
-            }
+            var _a, _b;
+            this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                breadcrumb.classList.remove("visuallyhidden");
+                breadcrumb.classList.remove("fade");
+            });
             if (this.collapsed) {
                 this.renderCollapsedBreadcrumb();
+                const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
                 this.collapsedBreadcrumbs = allBreadcrumbs
                     .splice(1, allBreadcrumbs.length - 2)
                     .filter((breadcrumb) => !breadcrumb.classList.contains("collapsed-breadcrumb-wrapper"));
                 if (!this.backBreadcrumbOnly) {
                     this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
                 }
-                if (firstBreadcrumb) {
-                    firstBreadcrumb.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
+                if (this.collapsedBreadcrumbWrapper) {
+                    (_a = allBreadcrumbs[0]) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
                 }
             }
             else {
-                this.collapsedBreadcrumbWrapper.remove();
+                (_b = this.collapsedBreadcrumbWrapper) === null || _b === void 0 ? void 0 : _b.remove();
             }
         };
         this.clickHandler = () => {
-            this.handleHiddenCollapsedBreadcrumbs();
+            var _a;
+            (_a = this.collapsedBreadcrumbWrapper) === null || _a === void 0 ? void 0 : _a.remove();
+            this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                breadcrumb.classList.add("visuallyhidden");
+                breadcrumb.classList.remove("hide");
+                setTimeout(() => {
+                    breadcrumb.classList.add("fade");
+                }, this.ADD_CLASS_DELAY);
+                breadcrumb.addEventListener("transitionend", this.transitionendHandler);
+            });
+            this.collapsed = false;
+            // Set focus to first unhidden breadcrumb
+            this.collapsedBreadcrumbs[0].setFocus();
         };
         this.renderCollapsedBreadcrumb = () => {
             if (this.collapsedBreadcrumbEl === undefined) {
@@ -112,12 +111,12 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
                 ariaLabel.id = "collapsed-button-label";
                 ariaLabel.innerText = "Collapsed breadcrumbs";
                 ariaLabel.className = "hide";
-                this.collapsedBreadcrumbEl.setAttribute("aria-labelledby", "collapsed-button-label");
+                this.collapsedBreadcrumbEl.setAttribute("aria-labelledby", ariaLabel.id);
                 const ariaDescribed = document.createElement("span");
                 ariaDescribed.id = "collapsed-button-described";
                 ariaDescribed.innerText = "Select to view collapsed breadcrumbs";
                 ariaDescribed.className = "hide";
-                this.collapsedBreadcrumbEl.setAttribute("aria-describedby", "collapsed-button-described");
+                this.collapsedBreadcrumbEl.setAttribute("aria-describedby", ariaDescribed.id);
                 this.collapsedBreadcrumbEl.id = "collapsed-ellipsis";
                 this.collapsedBreadcrumbEl.innerText = "...";
                 this.collapsedBreadcrumbEl.classList.add("collapsed-breadcrumb");
@@ -127,28 +126,11 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
                 this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);
             }
         };
-        this.handleHiddenCollapsedBreadcrumbs = () => {
-            this.collapsedBreadcrumbWrapper.remove();
-            this.collapsedBreadcrumbs.forEach((breadcrumb) => {
-                breadcrumb.classList.add("visuallyhidden");
-                breadcrumb.classList.remove("hide");
-                setTimeout(() => {
-                    breadcrumb.classList.add("fade");
-                }, this.ADD_CLASS_DELAY);
-                this.removeVisuallyHiddenClass(breadcrumb);
-            });
-            this.expandedBreadcrumbs = true;
-            // Set focus to first unhidden breadcrumb
-            this.collapsedBreadcrumbs[0].setFocus();
-        };
         this.transitionendHandler = (event) => {
             if (event.propertyName === "opacity") {
                 event.target.classList.remove("visuallyhidden");
             }
         };
-        this.removeVisuallyHiddenClass = (breadcrumb) => {
-            breadcrumb.addEventListener("transitionend", this.transitionendHandler);
-        };
         this.setLastParentCollapsedBackBreadcrumb = () => {
             this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
             this.setBackBreadcrumbAttr();
@@ -168,8 +150,9 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
         this.resizeObserverCallback = (currSize) => {
             if (currSize !== this.deviceSize) {
                 this.deviceSize = currSize;
-                if (this.deviceSize <= DEVICE_SIZES.S) {
-                    this.el.setAttribute("back-breadcrumb-only", "true");
+                const isSmallDevice = this.deviceSize <= DEVICE_SIZES.S;
+                this.el.setAttribute("back-breadcrumb-only", `${isSmallDevice}`);
+                if (isSmallDevice) {
                     if (this.collapsed) {
                         this.setLastParentCollapsedBackBreadcrumb();
                     }
@@ -178,26 +161,22 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
                     }
                 }
                 else {
-                    this.el.setAttribute("back-breadcrumb-only", "false");
-                    if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {
+                    const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+                    if (this.collapsed && allBreadcrumbs.length > 2) {
                         this.revertLastParentCollapsedBreadcrumb();
-                        if (this.expandedBreadcrumbs) {
-                            this.setDefaultBreadcrumbs();
-                        }
-                        else {
-                            this.setCollapsed();
-                        }
+                        this.setCollapsed();
                     }
                     else {
-                        this.setDefaultBreadcrumbs();
+                        allBreadcrumbs.forEach((breadcrumb) => {
+                            breadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+                        });
                     }
                 }
             }
         };
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
-                const currSize = getCurrentDeviceSize();
-                this.resizeObserverCallback(currSize);
+                this.resizeObserverCallback(getCurrentDeviceSize());
             });
             this.resizeObserver.observe(this.el);
         };
@@ -215,7 +194,6 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
         this.setBreadcrumbTheme();
     }
     componentWillLoad() {
-        const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
         this.setBreadcrumbTheme();
         this.setBreadcrumbMonochrome();
         if (this.backBreadcrumbOnly) {
@@ -224,7 +202,8 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
         else {
             checkResizeObserver(this.runResizeObserver);
         }
-        if (this.collapsed && allBreadcrumbs.length > 2) {
+        if (this.collapsed &&
+            this.el.querySelectorAll(this.IC_BREADCRUMB).length > 2) {
             if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
                 this.setLastParentCollapsedBackBreadcrumb();
             }
@@ -232,19 +211,20 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
                 this.setCollapsed();
             }
         }
+        this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
     }
     disconnectedCallback() {
-        this.breadcrumb &&
-            this.breadcrumb.removeEventListener("transitionend", this.transitionendHandler);
-        this.collapsedBreadcrumbEl &&
-            this.collapsedBreadcrumbEl.removeEventListener("click", this.clickHandler);
+        var _a, _b;
+        (_a = this.lastParentBreadcrumb) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionend", this.transitionendHandler);
+        (_b = this.collapsedBreadcrumbEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.clickHandler);
     }
     render() {
-        return (h(Host, { key: 'b505c4bef9ebc23c7f77b21f77f9db5975d0eea1', class: {
-                "ic-breadcrumb-group-back": !!this.backBreadcrumbOnly,
-                "ic-breadcrumb-group-collapsed": !!this.collapsed,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("nav", { key: 'ec1db09900bbff5be1e7f2e83518834a0eb0ff22', "aria-label": "breadcrumbs" }, h("ol", { key: 'b13e6daeefb0e4d1785221249f4d38bf3f207922' }, h("slot", { key: 'b33ff6c552a6f7251afeb6a804b4761e0febe198' })))));
+        const { backBreadcrumbOnly, collapsed, theme } = this;
+        return (h(Host, { key: 'c39081da4595fa3f6fca4325df9ecc8775201ecc', class: {
+                "ic-breadcrumb-group-back": backBreadcrumbOnly,
+                "ic-breadcrumb-group-collapsed": collapsed,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("nav", { key: 'dffbf2a1a5e324c45e1d902f05eeef3e316c917a', "aria-label": "breadcrumbs" }, h("ol", { key: '29e18e2d0dfde13eeeec0dd2266b73e11a9b4a84' }, h("slot", { key: 'd6eb3a931fb3a7a8de0104960cfad4e54d6eeeaf' })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -256,11 +236,10 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
     static get style() { return IcBreadcrumbGroupStyle0; }
 }, [1, "ic-breadcrumb-group", {
         "backBreadcrumbOnly": [4, "back-breadcrumb-only"],
-        "collapsed": [4],
+        "collapsed": [1028],
         "monochrome": [4],
         "theme": [1],
-        "deviceSize": [32],
-        "expandedBreadcrumbs": [32]
+        "deviceSize": [32]
     }, undefined, {
         "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"],
         "collapsed": ["watchCollapsedHandler"],

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

@@ -1 +1 @@
-{"file":"ic-breadcrumb-group.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host ol {\n  display: flex;\n  list-style-type: none;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n  display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n  display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n  ol\n  ::slotted(ic-breadcrumb.visuallyhidden) {\n  display: block;\n  opacity: 0;\n  transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n  opacity: 1;\n}\n","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 = 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    ) as HTMLIcBreadcrumbElement[];\n\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.theme = this.theme;\n    });\n  };\n\n  private setBreadcrumbMonochrome = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    ) as HTMLIcBreadcrumbElement[];\n\n    allBreadcrumbs.forEach((breadcrumb) => {\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    if (this.collapsedBreadcrumbEl === undefined) {\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  };\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    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n      if (this.collapsed) {\n        this.lastParentBreadcrumb.classList.add(\"hide\");\n      }\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"],"version":3}
+{"file":"ic-breadcrumb-group.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host ol {\n  display: flex;\n  list-style-type: none;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n  display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n  display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n  ol\n  ::slotted(ic-breadcrumb.visuallyhidden) {\n  display: block;\n  opacity: 0;\n  transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n  opacity: 1;\n}\n","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 IC_BREADCRUMB = \"ic-breadcrumb\";\n  private SHOW_BACK_ICON = \"show-back-icon\";\n  private collapsedBreadcrumbEl?: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[] = [];\n  private collapsedBreadcrumbWrapper?: HTMLIcBreadcrumbElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private lastParentBreadcrumb: HTMLIcBreadcrumbElement | null = null;\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly = 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({ mutable: true }) collapsed = 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 = 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    this.setBreadcrumbTheme();\n    this.setBreadcrumbMonochrome();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (\n      this.collapsed &&\n      this.el.querySelectorAll(this.IC_BREADCRUMB).length > 2\n    ) {\n      if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n        this.setLastParentCollapsedBackBreadcrumb();\n      } else {\n        this.setCollapsed();\n      }\n    }\n\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n  }\n\n  disconnectedCallback(): void {\n    this.lastParentBreadcrumb?.removeEventListener(\n      \"transitionend\",\n      this.transitionendHandler\n    );\n\n    this.collapsedBreadcrumbEl?.removeEventListener(\"click\", this.clickHandler);\n  }\n\n  private setBreadcrumbTheme = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\n      breadcrumb.theme = this.theme;\n    });\n  };\n\n  private setBreadcrumbMonochrome = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\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 = this.el.querySelectorAll<HTMLIcBreadcrumbElement>(\n      this.IC_BREADCRUMB\n    );\n\n    return allBreadcrumbs.length > 1\n      ? allBreadcrumbs[allBreadcrumbs.length - 2]\n      : null;\n  };\n\n  private setCollapsed = () => {\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.remove(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"fade\");\n    });\n\n    if (this.collapsed) {\n      this.renderCollapsedBreadcrumb();\n      const allBreadcrumbs = Array.from(\n        this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n      );\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 (this.collapsedBreadcrumbWrapper) {\n        allBreadcrumbs[0]?.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    } else {\n      this.collapsedBreadcrumbWrapper?.remove();\n    }\n  };\n\n  private clickHandler = () => {\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      breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n    });\n    this.collapsed = false;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    if (this.collapsedBreadcrumbEl === undefined) {\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(\"aria-labelledby\", ariaLabel.id);\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        ariaDescribed.id\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  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\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    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n      if (this.collapsed) {\n        this.lastParentBreadcrumb.classList.add(\"hide\");\n      }\n    }\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      const isSmallDevice = this.deviceSize <= DEVICE_SIZES.S;\n      this.el.setAttribute(\"back-breadcrumb-only\", `${isSmallDevice}`);\n\n      if (isSmallDevice) {\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        const allBreadcrumbs = Array.from(\n          this.el.querySelectorAll(this.IC_BREADCRUMB)\n        );\n\n        if (this.collapsed && allBreadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          this.setCollapsed();\n        } else {\n          allBreadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n          });\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const { backBreadcrumbOnly, collapsed, theme } = this;\n\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-group-back\": backBreadcrumbOnly,\n          \"ic-breadcrumb-group-collapsed\": collapsed,\n          [`ic-theme-${theme}`]: 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}

package/dist/components/ic-breadcrumb2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as chevronIcon } from './chevron-icon.js';
-import { i as isSlotUsed, m as getSlotElements, l as isPropDefined } from './helpers.js';
+import { m as getSlotElements, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-link2.js';
 
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -17,6 +17,9 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.HREF_ATTR = "href";
+        this.linkSlotContent = null;
+        this.slottedLinkEl = null;
+        this.slottedLinkHref = null;
         /**
          * If `true`, aria-current will be set on the breadcrumb.
          */
@@ -35,54 +38,27 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         this.theme = "inherit";
         // Prevent focus on breadcrumb if current page and contains slotted link
         this.updatedSlottedLinkFocus = () => {
+            var _a, _b;
             // Sets tabindex on wrong element in unit test snapshots
             // - related to known Jest issue: https://github.com/ionic-team/stencil/issues/2830
             if (this.linkSlotContent) {
                 this.linkSlotContent.tabIndex = this.current ? -1 : 0; // Prevent focus
             }
-            if (this.slottedLinkEl) {
-                if (this.current) {
-                    this.slottedLinkEl.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link
-                }
-                else {
-                    this.slottedLinkHref &&
-                        this.slottedLinkEl.setAttribute(this.HREF_ATTR, this.slottedLinkHref);
-                }
+            if (this.current) {
+                (_a = this.slottedLinkEl) === null || _a === void 0 ? void 0 : _a.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link
+            }
+            else if (this.slottedLinkHref) {
+                (_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.HREF_ATTR, this.slottedLinkHref);
             }
         };
         this.getSlottedLinkEl = () => {
-            const link = this.linkSlotContent;
-            if (link) {
-                const elWithHref = link.hasAttribute(this.HREF_ATTR)
-                    ? link
-                    : link.querySelector("[href]");
-                return elWithHref;
-            }
-            return null;
+            if (!this.linkSlotContent)
+                return null;
+            return this.linkSlotContent.hasAttribute(this.HREF_ATTR)
+                ? this.linkSlotContent
+                : this.linkSlotContent.querySelector("[href]");
         };
         this.renderBackIcon = () => (h("div", { class: "back-icon", innerHTML: backIcon }));
-        this.renderDefaultBreadcrumb = (current, pageTitle, describedById, href) => {
-            const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== "";
-            if (current && hasPageTitle) {
-                return (h("span", { class: {
-                        "current-page-container": current,
-                    } }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle));
-            }
-            return (h("ic-link", { theme: this.theme, monochrome: this.monochrome, href: href, class: "breadcrumb-link", "aria-describedby": this.showBackIcon && describedById && describedById }, this.showBackIcon && this.renderBackIcon(), isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle));
-        };
-        this.setSlottedCurrentPageClass = () => {
-            const icLink = this.el.querySelector("ic-link");
-            const currentPage = "current-page";
-            if (icLink) {
-                icLink.classList.remove(currentPage);
-                if (this.current) {
-                    const hasCurrentPageClass = icLink.classList.contains(currentPage);
-                    if (!hasCurrentPageClass) {
-                        icLink.classList.add("breadcrumb-link", currentPage);
-                    }
-                }
-            }
-        };
     }
     watchCurrentHandler() {
         this.updatedSlottedLinkFocus();
@@ -95,14 +71,21 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
             const slotEls = getSlotElements(slottedLinkWrapper);
             if (slotEls) {
                 this.linkSlotContent = slotEls[0];
+                this.slottedLinkEl = this.getSlottedLinkEl();
+                this.slottedLinkHref = ((_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.getAttribute("href")) || null;
             }
-            this.slottedLinkEl = this.getSlottedLinkEl();
-            this.slottedLinkHref = (_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.getAttribute("href");
             this.updatedSlottedLinkFocus();
         }
     }
     componentWillRender() {
-        this.setSlottedCurrentPageClass();
+        const icLink = this.el.querySelector("ic-link");
+        if (icLink) {
+            const CURRENT_PAGE = "current-page";
+            icLink.classList.remove(CURRENT_PAGE);
+            if (this.current && !icLink.classList.contains(CURRENT_PAGE)) {
+                icLink.classList.add("breadcrumb-link", CURRENT_PAGE);
+            }
+        }
     }
     /**
      * Sets focus on the breadcrumb.
@@ -112,15 +95,13 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-link")) === null || _b === void 0 ? void 0 : _b.focus();
     }
     render() {
-        const { current, href, pageTitle } = this;
-        const describedById = `${pageTitle && pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
-        const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== "";
-        const hasHref = href !== null && isPropDefined(href) && href !== "";
-        return (h(Host, { key: '29422d3d1b30d190d6233a644ad70df833478edd', class: {
-                "ic-breadcrumb-back": !!this.showBackIcon,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-                "ic-breadcrumb-monochrome": !!this.monochrome,
-            }, "aria-current": current && "page", role: "listitem" }, h("div", { key: '1f8c4f0fca86a3d08df82674e33cabe7419f7616', class: "breadcrumb" }, h("span", { key: '9761c21d30b9e55e8cf5d3517ada73fa4d73710b', innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), this.showBackIcon && describedById && (h("span", { key: 'ad6be34d684a28dd063895c73f35ed65a3741dc9', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), hasPageTitle && hasHref ? (this.renderDefaultBreadcrumb(!!current, pageTitle, describedById, href)) : (h("div", { class: "slotted-link-container" }, this.showBackIcon && this.renderBackIcon(), h("span", { class: "link-wrapper" }, h("slot", null)))))));
+        const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;
+        const describedById = `${pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
+        return (h(Host, { key: '55dd358ca0c5d865a9fdd17809b6d7f3ac12a966', class: {
+                "ic-breadcrumb-back": showBackIcon,
+                "ic-breadcrumb-monochrome": monochrome,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, "aria-current": current && "page", role: "listitem" }, h("div", { key: '768e4c78b20b1ad9b0100ff2a36ce512db5d7c1c', class: "breadcrumb" }, h("span", { key: '930d48bd5661f977f0ce2edcc4ea3ce02c1e282a', innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), showBackIcon && (h("span", { key: '0b932408b17ef65e2e25b6b4e124e2a4941d8eae', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), !href ? (h("div", { class: "slotted-link-container" }, showBackIcon && this.renderBackIcon(), h("span", { class: "link-wrapper" }, h("slot", null)))) : current ? (h("span", { class: "current-page-container" }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)) : (h("ic-link", { theme: theme, monochrome: monochrome, href: href, class: "breadcrumb-link", "aria-describedby": showBackIcon && describedById }, showBackIcon && this.renderBackIcon(), isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }