@ukic/web-components 2.8.0 → 2.9.0

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

@@ -5,396 +5,396 @@ import { getCssProperty, getParentElement, getParentElementType, hexToRgba, isPr
  * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.
  */
 export class Badge {
-  constructor() {
-    this.setBadgeColour = () => {
-      let colorRGBA = null;
-      if (this.customColor !== null) {
-        const firstChar = this.customColor.slice(0, 1);
-        if (firstChar === "#") {
-          colorRGBA = hexToRgba(this.customColor);
-        }
-        else if (firstChar.toLowerCase() === "r") {
-          colorRGBA = rgbaStrToObj(this.customColor);
-        }
-        this.customColorRGBA = colorRGBA;
-        this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
-      }
-    };
-    this.getBadgeForeground = () => {
-      let red;
-      let green;
-      let blue;
-      switch (this.variant) {
-        case "custom":
-          red = this.customColorRGBA.r;
-          green = this.customColorRGBA.g;
-          blue = this.customColorRGBA.b;
-          break;
-        case "error":
-          red = parseInt(getCssProperty("--ic-status-error-r"));
-          green = parseInt(getCssProperty("--ic-status-error-g"));
-          blue = parseInt(getCssProperty("--ic-status-error-b"));
-          break;
-        case "success":
-          red = parseInt(getCssProperty("--ic-status-success-r"));
-          green = parseInt(getCssProperty("--ic-status-success-g"));
-          blue = parseInt(getCssProperty("--ic-status-success-b"));
-          break;
-        case "warning":
-          red = parseInt(getCssProperty("--ic-status-warning-r"));
-          green = parseInt(getCssProperty("--ic-status-warning-g"));
-          blue = parseInt(getCssProperty("--ic-status-warning-b"));
-          break;
-        case "info": {
-          const info = hexToRgba(getCssProperty("--ic-status-info"));
-          red = info.r;
-          green = info.g;
-          blue = info.b;
-          break;
-        }
-        case "neutral": {
-          const neutral = hexToRgba(getCssProperty("--ic-architectural-500"));
-          red = neutral.r;
-          green = neutral.g;
-          blue = neutral.b;
-          break;
-        }
-        case "light": {
-          const light = hexToRgba(getCssProperty("--ic-architectural-40"));
-          red = light.r;
-          green = light.g;
-          blue = light.b;
-          break;
-        }
-      }
-      const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
-      this.foregroundColour =
-        brightness > 133.3505
-          ? IcThemeForegroundEnum.Dark
-          : IcThemeForegroundEnum.Light;
-    };
-    this.getTextLabel = () => {
-      let label;
-      if (this.textLabel !== null) {
-        if (this.maxNumber !== null) {
-          label =
-            Number(this.textLabel) > this.maxNumber
-              ? `${this.maxNumber}+`
-              : this.textLabel;
-        }
-        else {
-          label = this.textLabel;
-        }
-      }
-      return label;
-    };
-    this.setAccessibleLabel = () => {
-      if (getParentElement(this.el) !== null) {
-        if (getParentElementType(this.el) === "IC-TAB") {
-          getParentElement(this.el).setAttribute("aria-describedby", "badge");
-        }
-        else {
-          getParentElement(this.el).ariaLabel = `badge displaying ${this.accessibleLabel}`;
-        }
-      }
-    };
-    this.isAccessibleLabelDefined = () => {
-      return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
-    };
-    this.accessibleLabel = undefined;
-    this.customColor = null;
-    this.maxNumber = undefined;
-    this.position = "far";
-    this.size = "default";
-    this.textLabel = undefined;
-    this.type = "text";
-    this.variant = "neutral";
-    this.visible = true;
-  }
-  componentWillLoad() {
-    this.variant === "custom" && this.setBadgeColour();
-    this.getBadgeForeground();
-    this.isAccessibleLabelDefined() && this.setAccessibleLabel();
-  }
-  componentDidLoad() {
-    this.type === "text" &&
-      onComponentRequiredPropUndefined([{ prop: this.textLabel, propName: "text-label" }], "Badge");
-  }
-  /**
-   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.
-   */
-  async showBadge() {
-    this.visible = true;
-  }
-  /**
-   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.
-   */
-  async hideBadge() {
-    this.visible = false;
-  }
-  render() {
-    const { position, size, type, variant, foregroundColour, visible } = this;
-    return (h(Host, { class: {
-        [`${position}`]: true,
-        [`${size}`]: true,
-        [`${variant}`]: true,
-        [`${type}`]: true,
-        [`foreground-${foregroundColour}`]: foregroundColour !== null,
-        ["show"]: visible,
-        ["hide"]: !visible,
-      }, id: "badge", "aria-label": this.isAccessibleLabelDefined() &&
-        `badge displaying ${this.accessibleLabel}` }, type === "icon" && h("slot", { name: "badge-icon" }), type === "text" && (h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, this.getTextLabel()))));
-  }
-  static get is() { return "ic-badge"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-badge.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-badge.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "accessibleLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The accessible label of the badge component to provide context for screen reader users."
-        },
-        "attribute": "accessible-label",
-        "reflect": false
-      },
-      "customColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcColor",
-          "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})`",
-          "references": {
-            "IcColor": {
-              "location": "import",
-              "path": "./ic-badge.types",
-              "id": "src/components/ic-badge/ic-badge.types.ts::IcColor"
+    constructor() {
+        this.setBadgeColour = () => {
+            let colorRGBA = null;
+            if (this.customColor !== null) {
+                const firstChar = this.customColor.slice(0, 1);
+                if (firstChar === "#") {
+                    colorRGBA = hexToRgba(this.customColor);
+                }
+                else if (firstChar.toLowerCase() === "r") {
+                    colorRGBA = rgbaStrToObj(this.customColor);
+                }
+                this.customColorRGBA = colorRGBA;
+                this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The custom badge colour. This will only style the badge component if variant=\"custom\".\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
-        },
-        "attribute": "custom-color",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "maxNumber": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The maximum number shown on the badge appended with a +.\nThis will only be displayed if type=\"text\" and textLabel is not empty."
-        },
-        "attribute": "max-number",
-        "reflect": false
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcBadgePositions",
-          "resolved": "\"far\" | \"inline\" | \"near\"",
-          "references": {
-            "IcBadgePositions": {
-              "location": "import",
-              "path": "./ic-badge.types",
-              "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgePositions"
+        };
+        this.getBadgeForeground = () => {
+            let red;
+            let green;
+            let blue;
+            switch (this.variant) {
+                case "custom":
+                    red = this.customColorRGBA.r;
+                    green = this.customColorRGBA.g;
+                    blue = this.customColorRGBA.b;
+                    break;
+                case "error":
+                    red = parseInt(getCssProperty("--ic-status-error-r"));
+                    green = parseInt(getCssProperty("--ic-status-error-g"));
+                    blue = parseInt(getCssProperty("--ic-status-error-b"));
+                    break;
+                case "success":
+                    red = parseInt(getCssProperty("--ic-status-success-r"));
+                    green = parseInt(getCssProperty("--ic-status-success-g"));
+                    blue = parseInt(getCssProperty("--ic-status-success-b"));
+                    break;
+                case "warning":
+                    red = parseInt(getCssProperty("--ic-status-warning-r"));
+                    green = parseInt(getCssProperty("--ic-status-warning-g"));
+                    blue = parseInt(getCssProperty("--ic-status-warning-b"));
+                    break;
+                case "info": {
+                    const info = hexToRgba(getCssProperty("--ic-status-info"));
+                    red = info.r;
+                    green = info.g;
+                    blue = info.b;
+                    break;
+                }
+                case "neutral": {
+                    const neutral = hexToRgba(getCssProperty("--ic-architectural-500"));
+                    red = neutral.r;
+                    green = neutral.g;
+                    blue = neutral.b;
+                    break;
+                }
+                case "light": {
+                    const light = hexToRgba(getCssProperty("--ic-architectural-40"));
+                    red = light.r;
+                    green = light.g;
+                    blue = light.b;
+                    break;
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The positioning of the badge in reference to the parent element."
-        },
-        "attribute": "position",
-        "reflect": false,
-        "defaultValue": "\"far\""
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcSizes",
-          "resolved": "\"default\" | \"large\" | \"small\"",
-          "references": {
-            "IcSizes": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcSizes"
+            const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
+            this.foregroundColour =
+                brightness > 133.3505
+                    ? IcThemeForegroundEnum.Dark
+                    : IcThemeForegroundEnum.Light;
+        };
+        this.getTextLabel = () => {
+            let label;
+            if (this.textLabel !== null) {
+                if (this.maxNumber !== null) {
+                    label =
+                        Number(this.textLabel) > this.maxNumber
+                            ? `${this.maxNumber}+`
+                            : this.textLabel;
+                }
+                else {
+                    label = this.textLabel;
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size of the badge to be displayed."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "textLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The text displayed in the badge. This will only be displayed if type=\"text\"."
-        },
-        "attribute": "text-label",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcBadgeTypes",
-          "resolved": "\"dot\" | \"icon\" | \"text\"",
-          "references": {
-            "IcBadgeTypes": {
-              "location": "import",
-              "path": "./ic-badge.types",
-              "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeTypes"
+            return label;
+        };
+        this.setAccessibleLabel = () => {
+            if (getParentElement(this.el) !== null) {
+                if (getParentElementType(this.el) === "IC-TAB") {
+                    getParentElement(this.el).setAttribute("aria-describedby", "badge");
+                }
+                else {
+                    getParentElement(this.el).ariaLabel = `badge displaying ${this.accessibleLabel}`;
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The type of badge to be displayed."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "\"text\""
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcBadgeVariants",
-          "resolved": "\"custom\" | \"error\" | \"info\" | \"light\" | \"neutral\" | \"success\" | \"warning\"",
-          "references": {
-            "IcBadgeVariants": {
-              "location": "import",
-              "path": "./ic-badge.types",
-              "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeVariants"
+        };
+        this.isAccessibleLabelDefined = () => {
+            return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
+        };
+        this.accessibleLabel = undefined;
+        this.customColor = null;
+        this.maxNumber = undefined;
+        this.position = "far";
+        this.size = "default";
+        this.textLabel = undefined;
+        this.type = "text";
+        this.variant = "neutral";
+        this.visible = true;
+    }
+    componentWillLoad() {
+        this.variant === "custom" && this.setBadgeColour();
+        this.getBadgeForeground();
+        this.isAccessibleLabelDefined() && this.setAccessibleLabel();
+    }
+    componentDidLoad() {
+        this.type === "text" &&
+            onComponentRequiredPropUndefined([{ prop: this.textLabel, propName: "text-label" }], "Badge");
+    }
+    /**
+     * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.
+     */
+    async showBadge() {
+        this.visible = true;
+    }
+    /**
+     * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.
+     */
+    async hideBadge() {
+        this.visible = false;
+    }
+    render() {
+        const { position, size, type, variant, foregroundColour, visible } = this;
+        return (h(Host, { class: {
+                [`${position}`]: true,
+                [`${size}`]: true,
+                [`${variant}`]: true,
+                [`${type}`]: true,
+                [`foreground-${foregroundColour}`]: foregroundColour !== null,
+                ["show"]: visible,
+                ["hide"]: !visible,
+            }, id: "badge", "aria-label": this.isAccessibleLabelDefined() &&
+                `badge displaying ${this.accessibleLabel}` }, type === "icon" && h("slot", { name: "badge-icon" }), type === "text" && (h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, this.getTextLabel()))));
+    }
+    static get is() { return "ic-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible label of the badge component to provide context for screen reader users."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "customColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcColor",
+                    "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})`",
+                    "references": {
+                        "IcColor": {
+                            "location": "import",
+                            "path": "./ic-badge.types",
+                            "id": "src/components/ic-badge/ic-badge.types.ts::IcColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The custom badge colour. This will only style the badge component if variant=\"custom\".\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+                },
+                "attribute": "custom-color",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "maxNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum number shown on the badge appended with a +.\nThis will only be displayed if type=\"text\" and textLabel is not empty."
+                },
+                "attribute": "max-number",
+                "reflect": false
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcBadgePositions",
+                    "resolved": "\"far\" | \"inline\" | \"near\"",
+                    "references": {
+                        "IcBadgePositions": {
+                            "location": "import",
+                            "path": "./ic-badge.types",
+                            "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgePositions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The positioning of the badge in reference to the parent element."
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "\"far\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizes",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {
+                        "IcSizes": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the badge to be displayed."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "textLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text displayed in the badge. This will only be displayed if type=\"text\"."
+                },
+                "attribute": "text-label",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcBadgeTypes",
+                    "resolved": "\"dot\" | \"icon\" | \"text\"",
+                    "references": {
+                        "IcBadgeTypes": {
+                            "location": "import",
+                            "path": "./ic-badge.types",
+                            "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of badge to be displayed."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "\"text\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcBadgeVariants",
+                    "resolved": "\"custom\" | \"error\" | \"info\" | \"light\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IcBadgeVariants": {
+                            "location": "import",
+                            "path": "./ic-badge.types",
+                            "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeVariants"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the badge to be displayed."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"neutral\""
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the badge will be displayed."
+                },
+                "attribute": "visible",
+                "reflect": false,
+                "defaultValue": "true"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The variant of the badge to be displayed."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"neutral\""
-      },
-      "visible": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the badge will be displayed."
-        },
-        "attribute": "visible",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "showBadge": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get methods() {
+        return {
+            "showBadge": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This method should not be used anymore. Use visible prop to set badge visibility."
+                        }]
+                }
+            },
+            "hideBadge": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This method should not be used anymore. Use visible prop to set badge visibility."
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "deprecated",
-              "text": "This method should not be used anymore. Use visible prop to set badge visibility."
-            }]
-        }
-      },
-      "hideBadge": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "deprecated",
-              "text": "This method should not be used anymore. Use visible prop to set badge visibility."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
+        };
+    }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=ic-badge.js.map