@ukic/web-components 2.8.0 → 2.9.0

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, Method, Prop, h } from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n  IcColor,\n} from \"./ic-badge.types\";\nimport {\n  IcColorRGBA,\n  IcSizes,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  getCssProperty,\n  getParentElement,\n  getParentElementType,\n  hexToRgba,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n  rgbaStrToObj,\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 customColorRGBA: IcColorRGBA;\n  private foregroundColour: IcThemeForeground;\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  /**\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  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and textLabel 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 = \"default\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() textLabel?: string;\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  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop({ mutable: true }) visible: boolean = true;\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    this.getBadgeForeground();\n\n    this.isAccessibleLabelDefined() && this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.textLabel, propName: \"text-label\" }],\n        \"Badge\"\n      );\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async showBadge(): Promise<void> {\n    this.visible = true;\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async hideBadge(): Promise<void> {\n    this.visible = false;\n  }\n\n  private setBadgeColour = () => {\n    let colorRGBA = null;\n    if (this.customColor !== null) {\n      const firstChar = this.customColor.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.customColor);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.customColor);\n      }\n      this.customColorRGBA = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n    }\n  };\n\n  private getBadgeForeground = () => {\n    let red: number;\n    let green: number;\n    let blue: number;\n\n    switch (this.variant) {\n      case \"custom\":\n        red = this.customColorRGBA.r;\n        green = this.customColorRGBA.g;\n        blue = this.customColorRGBA.b;\n        break;\n      case \"error\":\n        red = parseInt(getCssProperty(\"--ic-status-error-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-error-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-error-b\"));\n        break;\n      case \"success\":\n        red = parseInt(getCssProperty(\"--ic-status-success-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-success-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-success-b\"));\n        break;\n      case \"warning\":\n        red = parseInt(getCssProperty(\"--ic-status-warning-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-warning-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-warning-b\"));\n        break;\n      case \"info\": {\n        const info = hexToRgba(getCssProperty(\"--ic-status-info\"));\n        red = info.r;\n        green = info.g;\n        blue = info.b;\n        break;\n      }\n      case \"neutral\": {\n        const neutral = hexToRgba(getCssProperty(\"--ic-architectural-500\"));\n        red = neutral.r;\n        green = neutral.g;\n        blue = neutral.b;\n        break;\n      }\n      case \"light\": {\n        const light = hexToRgba(getCssProperty(\"--ic-architectural-40\"));\n        red = light.r;\n        green = light.g;\n        blue = light.b;\n        break;\n      }\n    }\n\n    const brightness = (red * 299 + green * 587 + blue * 114) / 1000;\n    this.foregroundColour =\n      brightness > 133.3505\n        ? IcThemeForegroundEnum.Dark\n        : IcThemeForegroundEnum.Light;\n  };\n\n  private getTextLabel = () => {\n    let label;\n    if (this.textLabel !== null) {\n      if (this.maxNumber !== null) {\n        label =\n          Number(this.textLabel) > this.maxNumber\n            ? `${this.maxNumber}+`\n            : this.textLabel;\n      } else {\n        label = this.textLabel;\n      }\n    }\n    return label;\n  };\n\n  private setAccessibleLabel = () => {\n    if (getParentElement(this.el) !== null) {\n      if (getParentElementType(this.el) === \"IC-TAB\") {\n        getParentElement(this.el).setAttribute(\"aria-describedby\", \"badge\");\n      } else {\n        getParentElement(\n          this.el\n        ).ariaLabel = `badge displaying ${this.accessibleLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () => {\n    return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n  };\n\n  render() {\n    const { position, size, type, variant, foregroundColour, visible } = this;\n\n    return (\n      <Host\n        class={{\n          [`${position}`]: true,\n          [`${size}`]: true,\n          [`${variant}`]: true,\n          [`${type}`]: true,\n          [`foreground-${foregroundColour}`]: foregroundColour !== null,\n          [\"show\"]: visible,\n          [\"hide\"]: !visible,\n        }}\n        id=\"badge\"\n        aria-label={\n          this.isAccessibleLabelDefined() &&\n          `badge displaying ${this.accessibleLabel}`\n        }\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {this.getTextLabel()}\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-badge.js","sourceRoot":"","sources":["../../../src/components/ic-badge/ic-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO1E,OAAO,EAIL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,aAAa,EACb,gCAAgC,EAChC,YAAY,GACb,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AAQH,MAAM,OAAO,KAAK;;QAqFR,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,SAAS,GAAG,IAAI,CAAC;YACrB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE;gBAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC/C,IAAI,SAAS,KAAK,GAAG,EAAE;oBACrB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBACzC;qBAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;oBAC1C,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBAC5C;gBACD,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;gBACjC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC;aACpJ;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,GAAW,CAAC;YAChB,IAAI,KAAa,CAAC;YAClB,IAAI,IAAY,CAAC;YAEjB,QAAQ,IAAI,CAAC,OAAO,EAAE;gBACpB,KAAK,QAAQ;oBACX,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;oBAC7B,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;oBAC/B,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;oBAC9B,MAAM;gBACR,KAAK,OAAO;oBACV,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;oBACtD,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;oBACxD,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;oBACvD,MAAM;gBACR,KAAK,SAAS;oBACZ,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;oBACxD,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;oBAC1D,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;oBACzD,MAAM;gBACR,KAAK,SAAS;oBACZ,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;oBACxD,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;oBAC1D,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;oBACzD,MAAM;gBACR,KAAK,MAAM,CAAC,CAAC;oBACX,MAAM,IAAI,GAAG,SAAS,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;oBAC3D,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC;oBACb,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;oBACf,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;oBACd,MAAM;iBACP;gBACD,KAAK,SAAS,CAAC,CAAC;oBACd,MAAM,OAAO,GAAG,SAAS,CAAC,cAAc,CAAC,wBAAwB,CAAC,CAAC,CAAC;oBACpE,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC;oBAChB,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;oBAClB,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC;oBACjB,MAAM;iBACP;gBACD,KAAK,OAAO,CAAC,CAAC;oBACZ,MAAM,KAAK,GAAG,SAAS,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;oBACjE,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC;oBACd,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;oBAChB,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;oBACf,MAAM;iBACP;aACF;YAED,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;YACjE,IAAI,CAAC,gBAAgB;gBACnB,UAAU,GAAG,QAAQ;oBACnB,CAAC,CAAC,qBAAqB,CAAC,IAAI;oBAC5B,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC;QACpC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,KAAK,CAAC;YACV,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;gBAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;oBAC3B,KAAK;wBACH,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS;4BACrC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,GAAG;4BACtB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;iBACtB;qBAAM;oBACL,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;iBACxB;aACF;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,EAAE;gBACtC,IAAI,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,QAAQ,EAAE;oBAC9C,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;iBACrE;qBAAM;oBACL,gBAAgB,CACd,IAAI,CAAC,EAAE,CACR,CAAC,SAAS,GAAG,oBAAoB,IAAI,CAAC,eAAe,EAAE,CAAC;iBAC1D;aACF;QACH,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE;YACtC,OAAO,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC;QAC9E,CAAC,CAAC;;2BAzK8B,IAAI;;wBAWE,KAAK;oBAKlB,SAAS;;oBAUJ,MAAM;uBAKA,SAAS;uBAKD,IAAI;;IAEhD,iBAAiB;QACf,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QAEnD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,IAAI,CAAC,wBAAwB,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC/D,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,EAClD,OAAO,CACR,CAAC;IACN,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAuGD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,IAAI;gBACrB,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;gBACjB,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,IAAI;gBACpB,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;gBACjB,CAAC,cAAc,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,KAAK,IAAI;gBAC7D,CAAC,MAAM,CAAC,EAAE,OAAO;gBACjB,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO;aACnB,EACD,EAAE,EAAC,OAAO,gBAER,IAAI,CAAC,wBAAwB,EAAE;gBAC/B,oBAAoB,IAAI,CAAC,eAAe,EAAE;YAG3C,IAAI,KAAK,MAAM,IAAI,YAAM,IAAI,EAAC,YAAY,GAAQ;YAClD,IAAI,KAAK,MAAM,IAAI,CAClB,qBAAe,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,IAC/D,IAAI,CAAC,YAAY,EAAE,CACN,CACjB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Method, Prop, h } from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n  IcColor,\n} from \"./ic-badge.types\";\nimport {\n  IcColorRGBA,\n  IcSizes,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  getCssProperty,\n  getParentElement,\n  getParentElementType,\n  hexToRgba,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n  rgbaStrToObj,\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 customColorRGBA: IcColorRGBA;\n  private foregroundColour: IcThemeForeground;\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  /**\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  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and textLabel 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 = \"default\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() textLabel?: string;\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  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop({ mutable: true }) visible: boolean = true;\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    this.getBadgeForeground();\n\n    this.isAccessibleLabelDefined() && this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.textLabel, propName: \"text-label\" }],\n        \"Badge\"\n      );\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async showBadge(): Promise<void> {\n    this.visible = true;\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async hideBadge(): Promise<void> {\n    this.visible = false;\n  }\n\n  private setBadgeColour = () => {\n    let colorRGBA = null;\n    if (this.customColor !== null) {\n      const firstChar = this.customColor.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.customColor);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.customColor);\n      }\n      this.customColorRGBA = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n    }\n  };\n\n  private getBadgeForeground = () => {\n    let red: number;\n    let green: number;\n    let blue: number;\n\n    switch (this.variant) {\n      case \"custom\":\n        red = this.customColorRGBA.r;\n        green = this.customColorRGBA.g;\n        blue = this.customColorRGBA.b;\n        break;\n      case \"error\":\n        red = parseInt(getCssProperty(\"--ic-status-error-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-error-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-error-b\"));\n        break;\n      case \"success\":\n        red = parseInt(getCssProperty(\"--ic-status-success-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-success-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-success-b\"));\n        break;\n      case \"warning\":\n        red = parseInt(getCssProperty(\"--ic-status-warning-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-warning-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-warning-b\"));\n        break;\n      case \"info\": {\n        const info = hexToRgba(getCssProperty(\"--ic-status-info\"));\n        red = info.r;\n        green = info.g;\n        blue = info.b;\n        break;\n      }\n      case \"neutral\": {\n        const neutral = hexToRgba(getCssProperty(\"--ic-architectural-500\"));\n        red = neutral.r;\n        green = neutral.g;\n        blue = neutral.b;\n        break;\n      }\n      case \"light\": {\n        const light = hexToRgba(getCssProperty(\"--ic-architectural-40\"));\n        red = light.r;\n        green = light.g;\n        blue = light.b;\n        break;\n      }\n    }\n\n    const brightness = (red * 299 + green * 587 + blue * 114) / 1000;\n    this.foregroundColour =\n      brightness > 133.3505\n        ? IcThemeForegroundEnum.Dark\n        : IcThemeForegroundEnum.Light;\n  };\n\n  private getTextLabel = () => {\n    let label;\n    if (this.textLabel !== null) {\n      if (this.maxNumber !== null) {\n        label =\n          Number(this.textLabel) > this.maxNumber\n            ? `${this.maxNumber}+`\n            : this.textLabel;\n      } else {\n        label = this.textLabel;\n      }\n    }\n    return label;\n  };\n\n  private setAccessibleLabel = () => {\n    if (getParentElement(this.el) !== null) {\n      if (getParentElementType(this.el) === \"IC-TAB\") {\n        getParentElement(this.el).setAttribute(\"aria-describedby\", \"badge\");\n      } else {\n        getParentElement(\n          this.el\n        ).ariaLabel = `badge displaying ${this.accessibleLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () => {\n    return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n  };\n\n  render() {\n    const { position, size, type, variant, foregroundColour, visible } = this;\n\n    return (\n      <Host\n        class={{\n          [`${position}`]: true,\n          [`${size}`]: true,\n          [`${variant}`]: true,\n          [`${type}`]: true,\n          [`foreground-${foregroundColour}`]: foregroundColour !== null,\n          [\"show\"]: visible,\n          [\"hide\"]: !visible,\n        }}\n        id=\"badge\"\n        aria-label={\n          this.isAccessibleLabelDefined() &&\n          `badge displaying ${this.accessibleLabel}`\n        }\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {this.getTextLabel()}\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,15 +2,15 @@ import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("badge component", () => {
-  it("passes accessibility", async () => {
-    const el = await fixture("<ic-button>Button<ic-badge slot='badge' text-label='1'/></ic-button>");
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
-  it("passes accessibility with accessible label prop set", async () => {
-    const el = await fixture("<ic-button>Button<ic-badge slot='badge' text-label='1' accessible-label='1 notification found'/></ic-button>");
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
+    it("passes accessibility", async () => {
+        const el = await fixture("<ic-button>Button<ic-badge slot='badge' text-label='1'/></ic-button>");
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+    it("passes accessibility with accessible label prop set", async () => {
+        const el = await fixture("<ic-button>Button<ic-badge slot='badge' text-label='1' accessible-label='1 notification found'/></ic-button>");
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
 });
 //# sourceMappingURL=ic-badge.test.a11y.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-badge.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-badge/test/a11y/ic-badge.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,sEAAsE,CACvE,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;IACnE,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,8GAA8G,CAC/G,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"badge component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      \"<ic-button>Button<ic-badge slot='badge' text-label='1'/></ic-button>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility with accessible label prop set\", async () => {\n    const el = await fixture(\n      \"<ic-button>Button<ic-badge slot='badge' text-label='1' accessible-label='1 notification found'/></ic-button>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-badge.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-badge/test/a11y/ic-badge.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,sEAAsE,CACvE,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,8GAA8G,CAC/G,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"badge component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      \"<ic-button>Button<ic-badge slot='badge' text-label='1'/></ic-button>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility with accessible label prop set\", async () => {\n    const el = await fixture(\n      \"<ic-button>Button<ic-badge slot='badge' text-label='1' accessible-label='1 notification found'/></ic-button>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -7,141 +7,141 @@ import { Card } from "../../../ic-card/ic-card";
 import { NavigationButton } from "../../../ic-navigation-button/ic-navigation-button";
 import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
 describe("ic-badge", () => {
-  it("should render with text slotted in a button", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+    it("should render with text slotted in a button", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with text slotted in a button");
     });
-    expect(page.root).toMatchSnapshot("should render with text slotted in a button");
-  });
-  it("should render light variant", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="light" text-label="1"/></ic-button>`,
+    it("should render light variant", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="light" text-label="1"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render light variant");
     });
-    expect(page.root).toMatchSnapshot("should render light variant");
-  });
-  it("should render error variant", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="error" text-label="1"/></ic-button>`,
+    it("should render error variant", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="error" text-label="1"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render error variant");
     });
-    expect(page.root).toMatchSnapshot("should render error variant");
-  });
-  it("should render success variant", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="success" text-label="1"/></ic-button>`,
+    it("should render success variant", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="success" text-label="1"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render success variant");
     });
-    expect(page.root).toMatchSnapshot("should render success variant");
-  });
-  it("should render warning variant", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="warning" text-label="1"/></ic-button>`,
+    it("should render warning variant", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="warning" text-label="1"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render warning variant");
     });
-    expect(page.root).toMatchSnapshot("should render warning variant");
-  });
-  it("should render info variant", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="info" text-label="1"/></ic-button>`,
+    it("should render info variant", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="info" text-label="1"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render info variant");
     });
-    expect(page.root).toMatchSnapshot("should render info variant");
-  });
-  it("should render custom variant with custom colour in hex", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+    it("should render custom variant with custom colour in hex", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render custom variant with custom colour in hex");
     });
-    expect(page.root).toMatchSnapshot("should render custom variant with custom colour in hex");
-  });
-  it("should render custom variant with custom colour in rgb", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="rgb(248,200,220)"/></ic-button>`,
+    it("should render custom variant with custom colour in rgb", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="rgb(248,200,220)"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render custom variant with custom colour in rgb");
     });
-    expect(page.root).toMatchSnapshot("should render custom variant with custom colour in rgb");
-  });
-  it("should render with max number prop set", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
+    it("should render with max number prop set", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with max number prop set");
     });
-    expect(page.root).toMatchSnapshot("should render with max number prop set");
-  });
-  it("should render with accessible label", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="1" accessible-label="1 notification found"/></ic-button>`,
+    it("should render with accessible label", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="1" accessible-label="1 notification found"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with accessible label");
     });
-    expect(page.root).toMatchSnapshot("should render with accessible label");
-  });
-  it("should render size small", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="small"/></ic-button>`,
+    it("should render size small", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="small"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render size small");
     });
-    expect(page.root).toMatchSnapshot("should render size small");
-  });
-  it("should render size large", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="large"/></ic-button>`,
+    it("should render size large", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="large"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render size large");
     });
-    expect(page.root).toMatchSnapshot("should render size large");
-  });
-  it("should render type dot", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" type="dot"/></ic-button>`,
+    it("should render type dot", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" type="dot"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render type dot");
     });
-    expect(page.root).toMatchSnapshot("should render type dot");
-  });
-  it("should render type icon", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" type="icon">
+    it("should render type icon", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" type="icon">
             <svg slot='badge-icon' xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
             <path d="M0 0h24v24H0V0z" fill="none"/>
             <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
             </svg>
             </ic-badge></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render type icon");
     });
-    expect(page.root).toMatchSnapshot("should render type icon");
-  });
-  it("should render with visible false", async () => {
-    const page = await newSpecPage({
-      components: [Button, Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" visible="false" text-label="1"/></ic-button>`,
+    it("should render with visible false", async () => {
+        const page = await newSpecPage({
+            components: [Button, Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" visible="false" text-label="1"/></ic-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with visible false");
     });
-    expect(page.root).toMatchSnapshot("should render with visible false");
-  });
-  it("should render slotted in a chip", async () => {
-    const page = await newSpecPage({
-      components: [Chip, Badge],
-      html: `<ic-chip label="Badge"><ic-badge slot="badge" text-label="1" position="near"/></ic-chip>`,
+    it("should render slotted in a chip", async () => {
+        const page = await newSpecPage({
+            components: [Chip, Badge],
+            html: `<ic-chip label="Badge"><ic-badge slot="badge" text-label="1" position="near"/></ic-chip>`,
+        });
+        expect(page.root).toMatchSnapshot("should render slotted in a chip");
     });
-    expect(page.root).toMatchSnapshot("should render slotted in a chip");
-  });
-  it("should render slotted in a tab", async () => {
-    const page = await newSpecPage({
-      components: [Tab, Badge],
-      html: `<ic-tab>Tab<ic-badge slot="badge" text-label="1" position="inline"/></ic-tab>`,
+    it("should render slotted in a tab", async () => {
+        const page = await newSpecPage({
+            components: [Tab, Badge],
+            html: `<ic-tab>Tab<ic-badge slot="badge" text-label="1" position="inline"/></ic-tab>`,
+        });
+        expect(page.root).toMatchSnapshot("should render slotted in a tab");
     });
-    expect(page.root).toMatchSnapshot("should render slotted in a tab");
-  });
-  it("should render slotted in a card", async () => {
-    const page = await newSpecPage({
-      components: [Card, Badge],
-      html: `<ic-card heading="Badge"><ic-badge slot="badge" text-label="1" position="near"/></ic-card>`,
+    it("should render slotted in a card", async () => {
+        const page = await newSpecPage({
+            components: [Card, Badge],
+            html: `<ic-card heading="Badge"><ic-badge slot="badge" text-label="1" position="near"/></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot("should render slotted in a card");
     });
-    expect(page.root).toMatchSnapshot("should render slotted in a card");
-  });
-  it("should render slotted in a navigation button", async () => {
-    const page = await newSpecPage({
-      components: [NavigationButton, Badge],
-      html: `<ic-navigation-button
+    it("should render slotted in a navigation button", async () => {
+        const page = await newSpecPage({
+            components: [NavigationButton, Badge],
+            html: `<ic-navigation-button
       label="Button One"
       slot="buttons"
       href="https://www.google.com"
@@ -168,13 +168,13 @@ describe("ic-badge", () => {
         variant="light"
       ></ic-badge>
     </ic-navigation-button>`,
+        });
+        expect(page.root).toMatchSnapshot("should render slotted in a navigation button");
     });
-    expect(page.root).toMatchSnapshot("should render slotted in a navigation button");
-  });
-  it("should render slotted in a navigation item", async () => {
-    const page = await newSpecPage({
-      components: [NavigationItem, Badge],
-      html: `<ic-navigation-item label="Navigation" href="/">
+    it("should render slotted in a navigation item", async () => {
+        const page = await newSpecPage({
+            components: [NavigationItem, Badge],
+            html: `<ic-navigation-item label="Navigation" href="/">
       <ic-badge
         text-label="1"
         slot="badge"
@@ -195,65 +195,65 @@ describe("ic-badge", () => {
         />
       </svg>
     </ic-navigation-item>`,
+        });
+        expect(page.root).toMatchSnapshot("should render slotted in a navigation item");
     });
-    expect(page.root).toMatchSnapshot("should render slotted in a navigation item");
-  });
-  it("should hide and show the badge using visible prop", async () => {
-    const page = await newSpecPage({
-      components: [Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+    it("should hide and show the badge using visible prop", async () => {
+        const page = await newSpecPage({
+            components: [Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+        });
+        const badge = document.querySelector("ic-badge");
+        expect(page.rootInstance.visible).toBe(true);
+        badge.visible = false;
+        await page.waitForChanges();
+        expect(page.rootInstance.visible).toBe(false);
+        badge.visible = true;
+        await page.waitForChanges();
+        expect(page.rootInstance.visible).toBe(true);
     });
-    const badge = document.querySelector("ic-badge");
-    expect(page.rootInstance.visible).toBe(true);
-    badge.visible = false;
-    await page.waitForChanges();
-    expect(page.rootInstance.visible).toBe(false);
-    badge.visible = true;
-    await page.waitForChanges();
-    expect(page.rootInstance.visible).toBe(true);
-  });
-  //To be removed when we remove show and hide methods
-  it("should hide and show the badge using methods", async () => {
-    const page = await newSpecPage({
-      components: [Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+    //To be removed when we remove show and hide methods
+    it("should hide and show the badge using methods", async () => {
+        const page = await newSpecPage({
+            components: [Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+        });
+        const badge = document.querySelector("ic-badge");
+        expect(page.rootInstance.visible).toBe(true);
+        await badge.hideBadge();
+        await page.waitForChanges();
+        expect(page.rootInstance.visible).toBe(false);
+        await badge.showBadge();
+        await page.waitForChanges();
+        expect(page.rootInstance.visible).toBe(true);
     });
-    const badge = document.querySelector("ic-badge");
-    expect(page.rootInstance.visible).toBe(true);
-    await badge.hideBadge();
-    await page.waitForChanges();
-    expect(page.rootInstance.visible).toBe(false);
-    await badge.showBadge();
-    await page.waitForChanges();
-    expect(page.rootInstance.visible).toBe(true);
-  });
-  it("should set the correct badge colour", async () => {
-    const page = await newSpecPage({
-      components: [Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+    it("should set the correct badge colour", async () => {
+        const page = await newSpecPage({
+            components: [Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+        });
+        await page.rootInstance.setBadgeColour();
+        expect(page.rootInstance.customColorRGBA).toEqual({
+            a: 1,
+            b: 220,
+            g: 200,
+            r: 248,
+        });
     });
-    await page.rootInstance.setBadgeColour();
-    expect(page.rootInstance.customColorRGBA).toEqual({
-      a: 1,
-      b: 220,
-      g: 200,
-      r: 248,
+    it("should set the correct foreground colour", async () => {
+        const page = await newSpecPage({
+            components: [Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+        });
+        await page.rootInstance.getBadgeForeground();
+        expect(page.rootInstance.foregroundColour).toBe("dark");
     });
-  });
-  it("should set the correct foreground colour", async () => {
-    const page = await newSpecPage({
-      components: [Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+    it("should set the correct text label when max number is set", async () => {
+        const page = await newSpecPage({
+            components: [Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
+        });
+        expect(page.rootInstance.getTextLabel()).toBe("9+");
     });
-    await page.rootInstance.getBadgeForeground();
-    expect(page.rootInstance.foregroundColour).toBe("dark");
-  });
-  it("should set the correct text label when max number is set", async () => {
-    const page = await newSpecPage({
-      components: [Badge],
-      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
-    });
-    expect(page.rootInstance.getTextLabel()).toBe("9+");
-  });
 });
 //# sourceMappingURL=ic-badge.spec.js.map