@ukic/web-components 2.7.0 → 2.9.0

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

@@ -1,280 +1,280 @@
 import { h, Host } from "@stencil/core";
 import { checkResizeObserver } from "../../utils/helpers";
 export class Typography {
-  constructor() {
-    this.focusBtnFromKeyboard = true;
-    this.lastMarkerTop = 0;
-    this.lastWidth = 0;
-    this.resizeObserver = null;
-    this.truncatedHeight = 0;
-    this.toggleExpanded = () => {
-      this.expanded = !this.expanded;
-    };
-    this.checkMaxLines = (height) => {
-      //24 is the height of a single line
-      const numLines = Math.floor(height / 24);
-      if (numLines > this.maxLines) {
-        this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
-        this.truncatedHeight = this.el.clientHeight;
-        this.truncated = true;
-      }
-    };
-    this.checkMarkerPosition = (elTop, markerTop) => {
-      if (markerTop - elTop < this.truncatedHeight) {
+    constructor() {
+        this.focusBtnFromKeyboard = true;
+        this.lastMarkerTop = 0;
+        this.lastWidth = 0;
+        this.resizeObserver = null;
+        this.truncatedHeight = 0;
+        this.toggleExpanded = () => {
+            this.expanded = !this.expanded;
+        };
+        this.checkMaxLines = (height) => {
+            //24 is the height of a single line
+            const numLines = Math.floor(height / 24);
+            if (numLines > this.maxLines) {
+                this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
+                this.truncatedHeight = this.el.clientHeight;
+                this.truncated = true;
+            }
+        };
+        this.checkMarkerPosition = (elTop, markerTop) => {
+            if (markerTop - elTop < this.truncatedHeight) {
+                this.truncated = false;
+                this.expanded = false;
+            }
+            else {
+                this.truncated = true;
+            }
+        };
+        this.getElementTop = (el) => {
+            return el.getClientRects ? el.getClientRects()[0].top : 0;
+        };
+        this.runResizeObserver = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                clearTimeout(this.resizeInterval);
+                this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);
+            });
+            this.resizeObserver.observe(this.truncWrapperEl);
+        };
+        this.resizeObserverCallback = () => {
+            if (this.lastWidth === this.el.clientWidth) {
+                return;
+            }
+            if (this.truncatedHeight === 0) {
+                this.checkMaxLines(this.el.clientHeight);
+                return;
+            }
+            const markerTop = this.getElementTop(this.marker);
+            if (markerTop === this.lastMarkerTop) {
+                return;
+            }
+            this.checkMarkerPosition(this.getElementTop(this.el), markerTop);
+            this.lastMarkerTop = markerTop;
+            this.lastWidth = this.el.clientWidth;
+        };
+        this.truncButtonFocus = () => {
+            if (this.focusBtnFromKeyboard) {
+                this.truncButtonFocussed = true;
+            }
+        };
+        this.truncButtonBlur = () => {
+            this.focusBtnFromKeyboard = true;
+            this.truncButtonFocussed = false;
+        };
+        this.truncButtonFocusFromMouse = () => {
+            this.focusBtnFromKeyboard = false;
+        };
         this.truncated = false;
+        this.truncButtonFocussed = false;
+        this.applyVerticalMargins = false;
+        this.bold = false;
+        this.italic = false;
+        this.maxLines = undefined;
+        this.strikethrough = false;
+        this.underline = false;
+        this.variant = "body";
         this.expanded = false;
-      }
-      else {
-        this.truncated = true;
-      }
-    };
-    this.getElementTop = (el) => {
-      return el.getClientRects ? el.getClientRects()[0].top : 0;
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        clearTimeout(this.resizeInterval);
-        this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);
-      });
-      this.resizeObserver.observe(this.truncWrapperEl);
-    };
-    this.resizeObserverCallback = () => {
-      if (this.lastWidth === this.el.clientWidth) {
-        return;
-      }
-      if (this.truncatedHeight === 0) {
-        this.checkMaxLines(this.el.clientHeight);
-        return;
-      }
-      const markerTop = this.getElementTop(this.marker);
-      if (markerTop === this.lastMarkerTop) {
-        return;
-      }
-      this.checkMarkerPosition(this.getElementTop(this.el), markerTop);
-      this.lastMarkerTop = markerTop;
-      this.lastWidth = this.el.clientWidth;
-    };
-    this.truncButtonFocus = () => {
-      if (this.focusBtnFromKeyboard) {
-        this.truncButtonFocussed = true;
-      }
-    };
-    this.truncButtonBlur = () => {
-      this.focusBtnFromKeyboard = true;
-      this.truncButtonFocussed = false;
-    };
-    this.truncButtonFocusFromMouse = () => {
-      this.focusBtnFromKeyboard = false;
-    };
-    this.truncated = false;
-    this.truncButtonFocussed = false;
-    this.applyVerticalMargins = false;
-    this.bold = false;
-    this.italic = false;
-    this.maxLines = undefined;
-    this.strikethrough = false;
-    this.underline = false;
-    this.variant = "body";
-    this.expanded = false;
-  }
-  watchExpandedHandler() {
-    this.el.setAttribute("style", `--truncation-max-lines: ${this.expanded ? "initial" : this.maxLines}`);
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
     }
-  }
-  componentDidLoad() {
-    var _a, _b;
-    if ((this.variant === "body" ||
-      ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
-        "IC-TOOLTIP") &&
-      this.maxLines > 0) {
-      const marker = document.createElement("span");
-      marker.style.visibility = "hidden";
-      this.el.appendChild(marker);
-      this.marker = marker;
-      this.lastWidth = this.el.clientWidth;
-      this.checkMaxLines(this.el.clientHeight);
-      checkResizeObserver(this.runResizeObserver);
+    watchExpandedHandler() {
+        this.el.setAttribute("style", `--truncation-max-lines: ${this.expanded ? "initial" : this.maxLines}`);
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver !== null) {
+            this.resizeObserver.disconnect();
+        }
     }
-  }
-  render() {
-    var _a, _b;
-    const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, } = this;
-    return (h(Host, { class: {
-        [`ic-typography-${variant}`]: true,
-        [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,
-        ["bold"]: bold,
-        ["italic"]: italic,
-        ["strikethrough"]: strikethrough,
-        ["underline"]: underline,
-      } }, (variant === "body" ||
-      ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
-        "IC-TOOLTIP") &&
-      maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines > 0 && truncated && (h("button", { class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded, "aria-hidden": "true" }, expanded ? "See less" : "See more"))));
-  }
-  static get is() { return "ic-typography"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-typography.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-typography.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "applyVerticalMargins": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, appropriate top and bottom margins will be applied to the typography."
-        },
-        "attribute": "apply-vertical-margins",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "bold": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have a bold font weight.\nNote: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large)."
-        },
-        "attribute": "bold",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "italic": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have an italic font style."
-        },
-        "attribute": "italic",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "maxLines": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The number of lines to display before truncating the text, only used for the 'body' variant."
-        },
-        "attribute": "max-lines",
-        "reflect": false
-      },
-      "strikethrough": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have a line through it."
-        },
-        "attribute": "strikethrough",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "underline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have a line under it."
-        },
-        "attribute": "underline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcTypographyVariants",
-          "resolved": "\"badge\" | \"badge-small\" | \"body\" | \"caption\" | \"caption-uppercase\" | \"code-extra-small\" | \"code-large\" | \"code-small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"label\" | \"label-uppercase\" | \"subtitle-large\" | \"subtitle-small\"",
-          "references": {
-            "IcTypographyVariants": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcTypographyVariants"
+    componentDidLoad() {
+        var _a, _b;
+        if ((this.variant === "body" ||
+            ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
+                "IC-TOOLTIP") &&
+            this.maxLines > 0) {
+            const marker = document.createElement("span");
+            marker.style.visibility = "hidden";
+            this.el.appendChild(marker);
+            this.marker = marker;
+            this.lastWidth = this.el.clientWidth;
+            this.checkMaxLines(this.el.clientHeight);
+            checkResizeObserver(this.runResizeObserver);
+        }
+    }
+    render() {
+        var _a, _b;
+        const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, } = this;
+        return (h(Host, { class: {
+                [`ic-typography-${variant}`]: true,
+                [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,
+                ["bold"]: bold,
+                ["italic"]: italic,
+                ["strikethrough"]: strikethrough,
+                ["underline"]: underline,
+            } }, (variant === "body" ||
+            ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
+                "IC-TOOLTIP") &&
+            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines > 0 && truncated && (h("button", { class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded, "aria-hidden": "true" }, expanded ? "See less" : "See more"))));
+    }
+    static get is() { return "ic-typography"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-typography.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-typography.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "applyVerticalMargins": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, appropriate top and bottom margins will be applied to the typography."
+                },
+                "attribute": "apply-vertical-margins",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bold": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the typography will have a bold font weight.\nNote: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large)."
+                },
+                "attribute": "bold",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "italic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the typography will have an italic font style."
+                },
+                "attribute": "italic",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "maxLines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of lines to display before truncating the text, only used for the 'body' variant."
+                },
+                "attribute": "max-lines",
+                "reflect": false
+            },
+            "strikethrough": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the typography will have a line through it."
+                },
+                "attribute": "strikethrough",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "underline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the typography will have a line under it."
+                },
+                "attribute": "underline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcTypographyVariants",
+                    "resolved": "\"badge\" | \"badge-small\" | \"body\" | \"caption\" | \"caption-uppercase\" | \"code-extra-small\" | \"code-large\" | \"code-small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"label\" | \"label-uppercase\" | \"subtitle-large\" | \"subtitle-small\"",
+                    "references": {
+                        "IcTypographyVariants": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcTypographyVariants"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ICDS typography style to use."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"body\""
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The ICDS typography style to use."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"body\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "truncated": {},
-      "truncButtonFocussed": {},
-      "expanded": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "expanded",
-        "methodName": "watchExpandedHandler"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "truncated": {},
+            "truncButtonFocussed": {},
+            "expanded": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "watchExpandedHandler"
+            }];
+    }
 }
 //# sourceMappingURL=ic-typography.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-typography.js","sourceRoot":"","sources":["../../../src/components/ic-typography/ic-typography.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host, State, Watch } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  private focusBtnFromKeyboard: boolean = true;\n  private lastMarkerTop: number = 0;\n  private lastWidth: number = 0;\n  private marker: HTMLElement;\n  private resizeInterval: number;\n  private resizeObserver: ResizeObserver = null;\n  private truncatedHeight: number = 0;\n  private truncWrapperEl: Element;\n\n  @Element() el: HTMLIcTypographyElement;\n\n  @State() truncated: boolean = false;\n  @State() truncButtonFocussed: boolean = false;\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a bold font weight.\n   * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n   */\n  @Prop() bold?: boolean = false;\n\n  /**\n   * If `true`, the typography will have an italic font style.\n   */\n  @Prop() italic?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text, only used for the 'body' variant.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * If `true`, the typography will have a line through it.\n   */\n  @Prop() strikethrough?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a line under it.\n   */\n  @Prop() underline?: boolean = false;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  @State() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.el.setAttribute(\n      \"style\",\n      `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad(): void {\n    if (\n      (this.variant === \"body\" ||\n        (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n          \"IC-TOOLTIP\") &&\n      this.maxLines > 0\n    ) {\n      const marker = document.createElement(\"span\");\n      marker.style.visibility = \"hidden\";\n      this.el.appendChild(marker);\n      this.marker = marker;\n      this.lastWidth = this.el.clientWidth;\n      this.checkMaxLines(this.el.clientHeight);\n      checkResizeObserver(this.runResizeObserver);\n    }\n  }\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n  };\n\n  private checkMaxLines = (height: number) => {\n    //24 is the height of a single line\n    const numLines = Math.floor(height / 24);\n    if (numLines > this.maxLines) {\n      this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n      this.truncatedHeight = this.el.clientHeight;\n      this.truncated = true;\n    }\n  };\n\n  private checkMarkerPosition = (elTop: number, markerTop: number) => {\n    if (markerTop - elTop < this.truncatedHeight) {\n      this.truncated = false;\n      this.expanded = false;\n    } else {\n      this.truncated = true;\n    }\n  };\n\n  private getElementTop = (el: HTMLElement) => {\n    return el.getClientRects ? el.getClientRects()[0].top : 0;\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeInterval);\n      this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n    });\n    this.resizeObserver.observe(this.truncWrapperEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.lastWidth === this.el.clientWidth) {\n      return;\n    }\n\n    if (this.truncatedHeight === 0) {\n      this.checkMaxLines(this.el.clientHeight);\n      return;\n    }\n\n    const markerTop = this.getElementTop(this.marker);\n    if (markerTop === this.lastMarkerTop) {\n      return;\n    }\n\n    this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n    this.lastMarkerTop = markerTop;\n    this.lastWidth = this.el.clientWidth;\n  };\n\n  private truncButtonFocus = (): void => {\n    if (this.focusBtnFromKeyboard) {\n      this.truncButtonFocussed = true;\n    }\n  };\n\n  private truncButtonBlur = (): void => {\n    this.focusBtnFromKeyboard = true;\n    this.truncButtonFocussed = false;\n  };\n\n  private truncButtonFocusFromMouse = (): void => {\n    this.focusBtnFromKeyboard = false;\n  };\n\n  render() {\n    const {\n      variant,\n      applyVerticalMargins,\n      maxLines,\n      truncated,\n      expanded,\n      strikethrough,\n      underline,\n      italic,\n      bold,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n          [\"bold\"]: bold,\n          [\"italic\"]: italic,\n          [\"strikethrough\"]: strikethrough,\n          [\"underline\"]: underline,\n        }}\n      >\n        {(variant === \"body\" ||\n          (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n            \"IC-TOOLTIP\") &&\n        maxLines > 0 ? (\n          <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n        {variant === \"body\" && maxLines > 0 && truncated && (\n          <button\n            class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n            onFocus={this.truncButtonFocus}\n            onBlur={this.truncButtonBlur}\n            onMouseDown={this.truncButtonFocusFromMouse}\n            onClick={this.toggleExpanded}\n            aria-hidden=\"true\"\n          >\n            {expanded ? \"See less\" : \"See more\"}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-typography.js","sourceRoot":"","sources":["../../../src/components/ic-typography/ic-typography.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host, State, Watch } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  private focusBtnFromKeyboard: boolean = true;\n  private lastMarkerTop: number = 0;\n  private lastWidth: number = 0;\n  private marker: HTMLElement;\n  private resizeInterval: number;\n  private resizeObserver: ResizeObserver = null;\n  private truncatedHeight: number = 0;\n  private truncWrapperEl: Element;\n\n  @Element() el: HTMLIcTypographyElement;\n\n  @State() truncated: boolean = false;\n  @State() truncButtonFocussed: boolean = false;\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a bold font weight.\n   * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n   */\n  @Prop() bold?: boolean = false;\n\n  /**\n   * If `true`, the typography will have an italic font style.\n   */\n  @Prop() italic?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text, only used for the 'body' variant.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * If `true`, the typography will have a line through it.\n   */\n  @Prop() strikethrough?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a line under it.\n   */\n  @Prop() underline?: boolean = false;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  @State() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.el.setAttribute(\n      \"style\",\n      `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad(): void {\n    if (\n      (this.variant === \"body\" ||\n        (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n          \"IC-TOOLTIP\") &&\n      this.maxLines > 0\n    ) {\n      const marker = document.createElement(\"span\");\n      marker.style.visibility = \"hidden\";\n      this.el.appendChild(marker);\n      this.marker = marker;\n      this.lastWidth = this.el.clientWidth;\n      this.checkMaxLines(this.el.clientHeight);\n      checkResizeObserver(this.runResizeObserver);\n    }\n  }\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n  };\n\n  private checkMaxLines = (height: number) => {\n    //24 is the height of a single line\n    const numLines = Math.floor(height / 24);\n    if (numLines > this.maxLines) {\n      this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n      this.truncatedHeight = this.el.clientHeight;\n      this.truncated = true;\n    }\n  };\n\n  private checkMarkerPosition = (elTop: number, markerTop: number) => {\n    if (markerTop - elTop < this.truncatedHeight) {\n      this.truncated = false;\n      this.expanded = false;\n    } else {\n      this.truncated = true;\n    }\n  };\n\n  private getElementTop = (el: HTMLElement) => {\n    return el.getClientRects ? el.getClientRects()[0].top : 0;\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeInterval);\n      this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n    });\n    this.resizeObserver.observe(this.truncWrapperEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.lastWidth === this.el.clientWidth) {\n      return;\n    }\n\n    if (this.truncatedHeight === 0) {\n      this.checkMaxLines(this.el.clientHeight);\n      return;\n    }\n\n    const markerTop = this.getElementTop(this.marker);\n    if (markerTop === this.lastMarkerTop) {\n      return;\n    }\n\n    this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n    this.lastMarkerTop = markerTop;\n    this.lastWidth = this.el.clientWidth;\n  };\n\n  private truncButtonFocus = (): void => {\n    if (this.focusBtnFromKeyboard) {\n      this.truncButtonFocussed = true;\n    }\n  };\n\n  private truncButtonBlur = (): void => {\n    this.focusBtnFromKeyboard = true;\n    this.truncButtonFocussed = false;\n  };\n\n  private truncButtonFocusFromMouse = (): void => {\n    this.focusBtnFromKeyboard = false;\n  };\n\n  render() {\n    const {\n      variant,\n      applyVerticalMargins,\n      maxLines,\n      truncated,\n      expanded,\n      strikethrough,\n      underline,\n      italic,\n      bold,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n          [\"bold\"]: bold,\n          [\"italic\"]: italic,\n          [\"strikethrough\"]: strikethrough,\n          [\"underline\"]: underline,\n        }}\n      >\n        {(variant === \"body\" ||\n          (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n            \"IC-TOOLTIP\") &&\n        maxLines > 0 ? (\n          <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n        {variant === \"body\" && maxLines > 0 && truncated && (\n          <button\n            class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n            onFocus={this.truncButtonFocus}\n            onBlur={this.truncButtonBlur}\n            onMouseDown={this.truncButtonFocusFromMouse}\n            onClick={this.toggleExpanded}\n            aria-hidden=\"true\"\n          >\n            {expanded ? \"See less\" : \"See more\"}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,10 +2,10 @@ import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("ic-typography", () => {
-  it("passes accessibility", async () => {
-    const el = await fixture(`<ic-typography variant="h1">Typography component</ic-typography>`);
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
+    it("passes accessibility", async () => {
+        const el = await fixture(`<ic-typography variant="h1">Typography component</ic-typography>`);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
 });
 //# sourceMappingURL=ic-typography.test.a11y.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-typography.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-typography/test/a11y/ic-typography.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,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,kEAAkE,CACnE,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(\"ic-typography\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-typography variant=\"h1\">Typography component</ic-typography>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-typography.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-typography/test/a11y/ic-typography.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,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,kEAAkE,CACnE,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(\"ic-typography\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-typography variant=\"h1\">Typography component</ic-typography>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}