@ukic/web-components 2.19.0 → 2.21.0

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js

@@ -1,31 +1,34 @@
 import { h, } from "@stencil/core";
-import { removeDisabledFalse } from "../../utils/helpers";
+import { removeDisabledFalse, capitalize } from "../../utils/helpers";
 export class PaginationItem {
     constructor() {
         this.handleClick = () => {
             this.paginationItemClick.emit({ page: this.page });
         };
-        this.appearance = undefined;
-        this.ariaOverride = false;
+        this.capitalizedLabel = undefined;
+        this.appearance = "default";
         this.disabled = false;
-        this.label = "Page ";
+        this.label = "Page";
         this.page = undefined;
-        this.pages = undefined;
         this.selected = false;
         this.type = undefined;
     }
+    watchLabelHandler() {
+        this.capitalizedLabel = capitalize(this.label);
+    }
     componentWillLoad() {
+        this.watchLabelHandler();
         removeDisabledFalse(this.disabled, this.el);
     }
     render() {
-        const { page, selected, type, disabled, appearance, label, ariaOverride, pages, } = this;
+        const { page, selected, type, disabled, appearance, label, capitalizedLabel, } = this;
         return (h("a", null, type === "ellipsis" ? (h("div", { class: {
                 ["item-container"]: true,
                 ["ellipsis"]: true,
                 ["disabled"]: disabled,
             } }, h("ic-typography", { class: {
                 [`${appearance}`]: true,
-            }, variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "Current page", "aria-label": selected ? `${label}: ${page}` : `Go to page ${page}`, class: {
+            }, variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "page", "aria-label": selected ? `${label}: ${page}` : `Go to ${label} ${page}`, class: {
                 ["selected"]: !disabled && selected,
                 ["disabled"]: disabled,
                 ["item-container"]: true,
@@ -35,7 +38,10 @@ export class PaginationItem {
                 ["page-selected"]: selected,
                 ["disabled"]: disabled,
                 [`${appearance}`]: true,
-            } }, page))) : (h("ic-typography", { "aria-live": "polite", "aria-label": ariaOverride ? `Page ${page} of ${pages}` : `${label} ${page}`, class: `simple-current ${appearance}`, variant: "label" }, label, " ", page))));
+            } }, page))) : (h("ic-typography", { "aria-live": "polite", class: {
+                [`simple-current ${appearance}`]: true,
+                ["disabled"]: disabled,
+            }, variant: "label" }, capitalizedLabel, " ", page))));
     }
     static get is() { return "ic-pagination-item"; }
     static get encapsulation() { return "shadow"; }
@@ -72,25 +78,8 @@ export class PaginationItem {
                     "text": "The appearance of the pagination, e.g. dark, light or the default."
                 },
                 "attribute": "appearance",
-                "reflect": false
-            },
-            "ariaOverride": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count."
-                },
-                "attribute": "aria-override",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"default\""
             },
             "disabled": {
                 "type": "boolean",
@@ -126,7 +115,7 @@ export class PaginationItem {
                 },
                 "attribute": "label",
                 "reflect": false,
-                "defaultValue": "\"Page \""
+                "defaultValue": "\"Page\""
             },
             "page": {
                 "type": "number",
@@ -145,23 +134,6 @@ export class PaginationItem {
                 "attribute": "page",
                 "reflect": false
             },
-            "pages": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The total number of pages."
-                },
-                "attribute": "pages",
-                "reflect": false
-            },
             "selected": {
                 "type": "boolean",
                 "mutable": false,
@@ -205,6 +177,11 @@ export class PaginationItem {
             }
         };
     }
+    static get states() {
+        return {
+            "capitalizedLabel": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "paginationItemClick",
@@ -227,5 +204,11 @@ export class PaginationItem {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "watchLabelHandler"
+            }];
+    }
 }
 //# sourceMappingURL=ic-pagination-item.js.map

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-pagination-item.js","sourceRoot":"","sources":["../../../src/components/ic-pagination-item/ic-pagination-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,CAAC,EACD,KAAK,GAEN,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAO1D,MAAM,OAAO,cAAc;;QAoDjB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC;;4BA3C8B,KAAK;wBAKT,KAAK;qBAKT,OAAO;;;wBAeH,KAAK;;;IAYjC,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,KAAK,EACL,YAAY,EACZ,KAAK,GACN,GAAG,IAAI,CAAC;QAET,OAAO,CACL,aACG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACrB,WACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;gBACxB,CAAC,UAAU,CAAC,EAAE,IAAI;gBAClB,CAAC,UAAU,CAAC,EAAE,QAAQ;aACvB;YAED,qBACE,KAAK,EAAE;oBACL,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI;iBACxB,EACD,OAAO,EAAC,OAAO,UAGD,CACZ,CACP,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACpB,cACE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAC/B,IAAI,EAAC,QAAQ,kBACC,QAAQ,IAAI,cAAc,gBAC5B,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,EACjE,KAAK,EAAE;gBACL,CAAC,UAAU,CAAC,EAAE,CAAC,QAAQ,IAAI,QAAQ;gBACnC,CAAC,UAAU,CAAC,EAAE,QAAQ;gBACtB,CAAC,gBAAgB,CAAC,EAAE,IAAI;gBACxB,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI;gBACvB,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,MAAM;aAC1B;YAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;oBACL,CAAC,eAAe,CAAC,EAAE,QAAQ;oBAC3B,CAAC,UAAU,CAAC,EAAE,QAAQ;oBACtB,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI;iBACxB,IAEA,IAAI,CACS,CACT,CACV,CAAC,CAAC,CAAC,CACF,kCACY,QAAQ,gBAEhB,YAAY,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,IAAI,EAAE,EAEhE,KAAK,EAAE,kBAAkB,UAAU,EAAE,EACrC,OAAO,EAAC,OAAO;YAEd,KAAK;;YAAG,IAAI,CACC,CACjB,CACC,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeForeground } from \"../../utils/types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  /**\n   * The appearance of the pagination, e.g. dark, light or the default.\n   */\n  @Prop() appearance: IcThemeForeground;\n\n  /**\n   * If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count.\n   */\n  @Prop() ariaOverride: boolean = false;\n\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page \";\n\n  /**\n   * The current page number.\n   */\n  @Prop() page: number | null;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pages: number;\n\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * The type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      appearance,\n      label,\n      ariaOverride,\n      pages,\n    } = this;\n\n    return (\n      <a>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: disabled,\n            }}\n          >\n            <ic-typography\n              class={{\n                [`${appearance}`]: true,\n              }}\n              variant=\"label\"\n            >\n              ...\n            </ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"Current page\"}\n            aria-label={selected ? `${label}: ${page}` : `Go to page ${page}`}\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: disabled,\n              [\"item-container\"]: true,\n              [`${appearance}`]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: disabled,\n                [`${appearance}`]: true,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            aria-label={\n              ariaOverride ? `Page ${page} of ${pages}` : `${label} ${page}`\n            }\n            class={`simple-current ${appearance}`}\n            variant=\"label\"\n          >\n            {label} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-pagination-item.js","sourceRoot":"","sources":["../../../src/components/ic-pagination-item/ic-pagination-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeForeground } from \"../../utils/types\";\nimport { removeDisabledFalse, capitalize } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  @State() capitalizedLabel: string;\n\n  /**\n   * The appearance of the pagination, e.g. dark, light or the default.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page\";\n\n  @Watch(\"label\")\n  watchLabelHandler(): void {\n    this.capitalizedLabel = capitalize(this.label);\n  }\n\n  /**\n   * The current page number.\n   */\n  @Prop() page: number | null;\n\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * The type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number }>;\n\n  componentWillLoad(): void {\n    this.watchLabelHandler();\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      appearance,\n      label,\n      capitalizedLabel,\n    } = this;\n\n    return (\n      <a>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: disabled,\n            }}\n          >\n            <ic-typography\n              class={{\n                [`${appearance}`]: true,\n              }}\n              variant=\"label\"\n            >\n              ...\n            </ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"page\"}\n            aria-label={\n              selected ? `${label}: ${page}` : `Go to ${label} ${page}`\n            }\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: disabled,\n              [\"item-container\"]: true,\n              [`${appearance}`]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: disabled,\n                [`${appearance}`]: true,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            class={{\n              [`simple-current ${appearance}`]: true,\n              [\"disabled\"]: disabled,\n            }}\n            variant=\"label\"\n          >\n            {capitalizedLabel} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,76 @@
+import { PaginationItem } from "../../ic-pagination-item";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-pagination-item", () => {
+    it("should render default pagination item", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render default pagination item");
+    });
+    it("should render with custom label", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1 label="screen"></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render with custom label");
+    });
+    it("should render with dark appearance", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1 type="page" appearance="dark"></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render with dark appearance");
+    });
+    it("should render with light appearance", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1 type="page" appearance="light"></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render with light appearance");
+    });
+    it("should render as selected item", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1 type="page" selected></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render as selected item");
+    });
+    it("should render disabled", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1 type="page" disabled></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render disabled");
+    });
+    it("should render as ellipsis type", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1 type="ellipsis"></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render as ellipsis type");
+    });
+    it("should render disabled ellipsis type", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1 type="ellipsis" disabled></ic-pagination-item>`,
+        });
+        expect(page.root).toMatchSnapshot("render disabled ellipsis type");
+    });
+    it("should test paginationItemClick event", async () => {
+        const page = await newSpecPage({
+            components: [PaginationItem],
+            html: `<ic-pagination-item page=1></ic-pagination-item>`,
+        });
+        const eventSpy = jest.fn();
+        page.root.addEventListener("paginationItemClick", eventSpy);
+        page.rootInstance.handleClick();
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: expect.objectContaining({
+                page: 1,
+            }),
+        }));
+    });
+});
+//# sourceMappingURL=ic-pagination-item.spec.js.map

package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-pagination-item.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-pagination-item/test/basic/ic-pagination-item.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { PaginationItem } from \"../../ic-pagination-item\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-pagination-item\", () => {\n  it(\"should render default pagination item\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render default pagination item\");\n  });\n\n  it(\"should render with custom label\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1 label=\"screen\"></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render with custom label\");\n  });\n\n  it(\"should render with dark appearance\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1 type=\"page\" appearance=\"dark\"></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render with dark appearance\");\n  });\n\n  it(\"should render with light appearance\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1 type=\"page\" appearance=\"light\"></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render with light appearance\");\n  });\n\n  it(\"should render as selected item\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1 type=\"page\" selected></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render as selected item\");\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1 type=\"page\" disabled></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render disabled\");\n  });\n\n  it(\"should render as ellipsis type\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1 type=\"ellipsis\"></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render as ellipsis type\");\n  });\n\n  it(\"should render disabled ellipsis type\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1 type=\"ellipsis\" disabled></ic-pagination-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"render disabled ellipsis type\");\n  });\n\n  it(\"should test paginationItemClick event\", async () => {\n    const page = await newSpecPage({\n      components: [PaginationItem],\n      html: `<ic-pagination-item page=1></ic-pagination-item>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.root.addEventListener(\"paginationItemClick\", eventSpy);\n\n    page.rootInstance.handleClick();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: expect.objectContaining({\n          page: 1,\n        }),\n      })\n    );\n  });\n});\n"]}

package/dist/collection/components/ic-popover-menu/ic-popover-menu.js

@@ -12,7 +12,7 @@ export class PopoverMenu {
         // Checks that the popover menu has an anchor
         this.findAnchorEl = (anchor) => {
             let anchorElement = null;
-            if (anchor === null || anchor === undefined) {
+            if (!anchor) {
                 this.submenuId === undefined &&
                     console.error("No anchor specified for popover component");
             }
@@ -25,11 +25,11 @@ export class PopoverMenu {
             return anchorElement;
         };
         this.isNotPopoverMenuEl = (ev) => {
-            const target = ev.target;
-            return (target.id !== this.anchor &&
-                target.tagName !== "IC-MENU-ITEM" &&
-                target.tagName !== "IC-MENU-GROUP" &&
-                target.tagName !== "IC-POPOVER-MENU");
+            const { id, tagName } = ev.target;
+            return (id !== this.anchor &&
+                tagName !== "IC-MENU-ITEM" &&
+                tagName !== "IC-MENU-GROUP" &&
+                tagName !== "IC-POPOVER-MENU");
         };
         /**
          * Close the popover menu, emit isPopoverClosed event
@@ -123,16 +123,15 @@ export class PopoverMenu {
             // Needed so that anchorEl isn't always focused
             setTimeout(this.setButtonFocus, 50);
         }
-        else {
-            if (this.popperInstance) {
-                this.popperInstance.destroy();
-                this.popperInstance = null;
-            }
+        else if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
         }
     }
     disconnectedCallback() {
-        if (this.popperInstance !== undefined) {
+        if (this.popperInstance) {
             this.popperInstance.destroy();
+            this.popperInstance = null;
         }
     }
     componentDidLoad() {
@@ -185,13 +184,9 @@ export class PopoverMenu {
     handleKeyDown(ev) {
         switch (ev.key) {
             case "ArrowDown":
-                ev.preventDefault();
-                this.currentFocus = this.getNextItemToSelect(this.currentFocus, true);
-                this.setButtonFocus();
-                break;
             case "ArrowUp":
                 ev.preventDefault();
-                this.currentFocus = this.getNextItemToSelect(this.currentFocus, false);
+                this.currentFocus = this.getNextItemToSelect(this.currentFocus, ev.key === "ArrowDown");
                 this.setButtonFocus();
                 break;
             case "Home":

package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) => menuItem.id)\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else {\n      if (this.popperInstance) {\n        this.popperInstance.destroy();\n        this.popperInstance = null;\n      }\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(ev: CustomEvent): void {\n    if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n      this.closeMenu();\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(this.currentFocus, true);\n        this.setButtonFocus();\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(this.currentFocus, false);\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (anchor === null || anchor === undefined) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const target = ev.target as HTMLElement;\n    return (\n      target.id !== this.anchor &&\n      target.tagName !== \"IC-MENU-ITEM\" &&\n      target.tagName !== \"IC-MENU-GROUP\" &&\n      target.tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * Close the popover menu, emit isPopoverClosed event\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  private closeMenu = (setFocusToAnchor = false) => {\n    this.open = false;\n    if (setFocusToAnchor) {\n      this.anchorEl?.focus();\n    }\n    this.icPopoverClosed.emit();\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host class={{ open: this.open }}>\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <div\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <div>\n                <ic-menu-item\n                  class=\"ic-popover-submenu-back-button\"\n                  ref={(el) => (this.backButton = el)}\n                  label=\"Back\"\n                  onClick={this.handleBackButtonClick}\n                  id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                >\n                  <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"submenu-back-icon\"\n                  >\n                    <path\n                      d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </ic-menu-item>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </div>\n            )}\n            <ul\n              class=\"button\"\n              aria-label={this.getMenuAriaLabel()}\n              role=\"menu\"\n              aria-owns={\n                isPropDefined(this.submenuId)\n                  ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n                  : false\n              }\n              aria-controls={\n                isPropDefined(this.submenuId)\n                  ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n                  : false\n              }\n            >\n              <slot></slot>\n            </ul>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) => menuItem.id)\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(\n    ev: CustomEvent<{\n      label: string;\n      hasSubMenu: boolean;\n    }>\n  ): void {\n    if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n      this.closeMenu();\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(\n          this.currentFocus,\n          ev.key === \"ArrowDown\"\n        );\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (!anchor) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const { id, tagName } = ev.target as HTMLElement;\n    return (\n      id !== this.anchor &&\n      tagName !== \"IC-MENU-ITEM\" &&\n      tagName !== \"IC-MENU-GROUP\" &&\n      tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * Close the popover menu, emit isPopoverClosed event\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  private closeMenu = (setFocusToAnchor = false) => {\n    this.open = false;\n    if (setFocusToAnchor) {\n      this.anchorEl?.focus();\n    }\n    this.icPopoverClosed.emit();\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host class={{ open: this.open }}>\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <div\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <div>\n                <ic-menu-item\n                  class=\"ic-popover-submenu-back-button\"\n                  ref={(el) => (this.backButton = el)}\n                  label=\"Back\"\n                  onClick={this.handleBackButtonClick}\n                  id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                >\n                  <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"submenu-back-icon\"\n                  >\n                    <path\n                      d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </ic-menu-item>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </div>\n            )}\n            <ul\n              class=\"button\"\n              aria-label={this.getMenuAriaLabel()}\n              role=\"menu\"\n              aria-owns={\n                isPropDefined(this.submenuId)\n                  ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n                  : false\n              }\n              aria-controls={\n                isPropDefined(this.submenuId)\n                  ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n                  : false\n              }\n            >\n              <slot></slot>\n            </ul>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -94,11 +94,9 @@ export class RadioGroup {
         this.initialOrientation = this.orientation;
     }
     disconnectedCallback() {
-        var _a;
-        if (this.resizeObserver !== null) {
-            this.resizeObserver.disconnect();
-        }
-        (_a = this.radioContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.setRadioOptions);
+        var _a, _b;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.radioContainer) === null || _b === void 0 ? void 0 : _b.removeEventListener("slotchange", this.setRadioOptions);
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
@@ -114,10 +112,10 @@ export class RadioGroup {
             { prop: this.name, propName: "name" },
         ], "Radio Group");
     }
-    selectHandler(event) {
+    selectHandler({ detail, target }) {
         var _a;
-        this.checkedValue = event.detail.value;
-        const selectedOption = event.target;
+        this.checkedValue = detail.value;
+        const selectedOption = target;
         this.icChange.emit({
             value: this.checkedValue,
             selectedOption: {
@@ -145,13 +143,11 @@ export class RadioGroup {
     checkOrientation() {
         if (this.initialOrientation === "horizontal") {
             let totalWidth = 0;
-            const radioOptionGap = 40;
-            for (let i = 0; i < this.radioOptions.length; i++) {
-                totalWidth += this.radioOptions[i].clientWidth;
-                if (i < this.radioOptions.length - 1) {
-                    totalWidth += radioOptionGap;
-                }
-            }
+            this.radioOptions.forEach(({ clientWidth }, i, arr) => {
+                totalWidth += clientWidth;
+                if (i < arr.length - 1)
+                    totalWidth += 40;
+            });
             if (this.currentOrientation === "horizontal" &&
                 totalWidth > this.radioContainer.clientWidth) {
                 this.currentOrientation = "vertical";

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

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderHiddenInput,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcSizesNoLarge,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioContainer: HTMLDivElement;\n  private radioOptions: HTMLIcRadioOptionElement[];\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcRadioGroupElement;\n\n  @State() checkedValue: string = \"\";\n  @State() currentOrientation: IcOrientation;\n  @State() initialOrientation: IcOrientation;\n  @State() selectedChild: number = -1;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the radio group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the radio group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop() orientation: IcOrientation = \"vertical\";\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the radio group component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  @Watch(\"orientation\")\n  orientationChangeHandler(): void {\n    this.initialOrientation = this.orientation;\n  }\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n    this.radioContainer?.removeEventListener(\n      \"slotchange\",\n      this.setRadioOptions\n    );\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.orientationChangeHandler();\n    this.currentOrientation = this.initialOrientation;\n  }\n\n  componentDidLoad(): void {\n    this.setRadioOptions();\n    checkResizeObserver(this.runResizeObserver);\n    this.addSlotChangeListener();\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value as string;\n    const selectedOption = event.target as HTMLIcRadioOptionElement;\n    this.icChange.emit({\n      value: this.checkedValue,\n      selectedOption: {\n        radio: selectedOption,\n        textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n      },\n    });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n    }\n  }\n\n  @Listen(\"icSelectedChange\")\n  changeHandler(): void {\n    const selectedOption = this.radioOptions.findIndex(\n      (radioOption) => radioOption.selected\n    );\n    if (selectedOption < 0) {\n      this.setFirstRadioOptionTabIndex(0);\n      this.selectedChild = selectedOption;\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkOrientation();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkOrientation() {\n    if (this.initialOrientation === \"horizontal\") {\n      let totalWidth = 0;\n      const radioOptionGap = 40;\n      for (let i = 0; i < this.radioOptions.length; i++) {\n        totalWidth += this.radioOptions[i].clientWidth;\n        if (i < this.radioOptions.length - 1) {\n          totalWidth += radioOptionGap;\n        }\n      }\n\n      if (\n        this.currentOrientation === \"horizontal\" &&\n        totalWidth > this.radioContainer.clientWidth\n      ) {\n        this.currentOrientation = \"vertical\";\n      } else if (\n        this.currentOrientation === \"vertical\" &&\n        totalWidth < this.radioContainer.clientWidth\n      ) {\n        this.currentOrientation = \"horizontal\";\n      }\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private addSlotChangeListener = () => {\n    this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n  };\n\n  private setFirstRadioOptionTabIndex = (value: number) => {\n    this.radioOptions[0].setTabIndex(value);\n  };\n\n  private setRadioOptions = () => {\n    this.selectedChild = -1;\n    this.checkedValue = \"\";\n    this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n    if (this.radioOptions.length > 0) {\n      this.radioOptions.forEach((radioOption, index) => {\n        if (!radioOption.selected) {\n          radioOption.selected = this.checkedValue === radioOption.value;\n        }\n        radioOption.name = this.name;\n        radioOption.groupLabel = this.label;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n          this.checkedValue = radioOption.value;\n        }\n      });\n      this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n    }\n\n    if (\n      this.initialOrientation === \"horizontal\" &&\n      this.radioOptions !== undefined &&\n      (this.radioOptions.length > 2 ||\n        (this.radioOptions.length === 2 &&\n          (isSlotUsed(this.radioOptions[0], \"additional-field\") ||\n            isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n    ) {\n      this.currentOrientation = \"vertical\";\n    }\n  };\n\n  render() {\n    renderHiddenInput(\n      true,\n      this.el,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        class={{ small: this.small || this.size === \"small\" }}\n      >\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <div\n            class={{\n              \"radio-buttons-container\": true,\n              horizontal: this.currentOrientation === \"horizontal\",\n            }}\n            ref={(el) => (this.radioContainer = el)}\n          >\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(this.validationStatus, this.disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,EACnB,UAAU,EACV,gCAAgC,EAChC,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAc7B,MAAM,OAAO,UAAU;;QAGb,mBAAc,GAAmB,IAAI,CAAC;QAwItC,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC;QAwBM,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACrD,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY;oBACf,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CACnD,CAAC,KAAK,EAAE,CAAC;oBACV,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACR,KAAK,SAAS,CAAC;gBACf,KAAK,WAAW;oBACd,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CACpD,CAAC,KAAK,EAAE,CAAC;oBACV,KAAK,CAAC,cAAc,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAC5B,WAAmB,EACnB,UAAmB,EACX,EAAE;YACV,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;YAE/C,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;gBACpB,WAAW,GAAG,CAAC,CAAC;YAClB,CAAC;YAED,IAAI,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;YAE9D,gCAAgC;YAChC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACjB,QAAQ,GAAG,SAAS,CAAC;YACvB,CAAC;iBAAM,IAAI,QAAQ,GAAG,SAAS,EAAE,CAAC;gBAChC,QAAQ,GAAG,CAAC,CAAC;YACf,CAAC;YAED,yCAAyC;YACzC,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACzC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;YAC5D,CAAC;YAED,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC;QAEM,0BAAqB,GAAG,GAAG,EAAE;YACnC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3E,CAAC,CAAC;QAEM,gCAA2B,GAAG,CAAC,KAAa,EAAE,EAAE;YACtD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAC5E,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;oBAC/C,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;wBAC1B,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;oBACjE,CAAC;oBACD,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;oBAC7B,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;oBACpC,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAC;wBACzB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;wBAC3B,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC;oBACxC,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACpE,CAAC;YAED,IACE,IAAI,CAAC,kBAAkB,KAAK,YAAY;gBACxC,IAAI,CAAC,YAAY,KAAK,SAAS;gBAC/B,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;oBAC3B,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC;wBAC7B,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;4BACnD,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAC7D,CAAC;gBACD,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;4BApP8B,EAAE;;;6BAGD,CAAC,CAAC;wBAKP,KAAK;;yBAUJ,KAAK;;;2BAeG,UAAU;wBAKnB,KAAK;oBAKD,SAAS;qBAKf,KAAK;gCAKwB,EAAE;8BAIxB,EAAE;;IAGnC,wBAAwB;QACtB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC;IAC7C,CAAC;IAOD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,MAAA,IAAI,CAAC,cAAc,0CAAE,mBAAmB,CACtC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC;IACpD,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,gCAAgC,CAC9B;YACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE;SACtC,EACD,aAAa,CACd,CAAC;IACJ,CAAC;IAGD,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,EAAmC;;QAC/D,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;QACjC,MAAM,cAAc,GAAG,MAAkC,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,YAAY;YACxB,cAAc,EAAE;gBACd,KAAK,EAAE,cAAc;gBACrB,cAAc,EAAE,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,aAAa,CAAC,eAAe,CAAC,0CAAE,KAAK;aACtE;SACF,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;gBAC/C,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;gBAC/D,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAC;oBACzB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC7B,CAAC;YACH,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAGD,aAAa;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAChD,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,QAAQ,CACtC,CAAC;QACF,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;YACpC,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC;QACtC,CAAC;IACH,CAAC;IAUO,gBAAgB;QACtB,IAAI,IAAI,CAAC,kBAAkB,KAAK,YAAY,EAAE,CAAC;YAC7C,IAAI,UAAU,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;gBACpD,UAAU,IAAI,WAAW,CAAC;gBAC1B,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC;oBAAE,UAAU,IAAI,EAAE,CAAC;YAC3C,CAAC,CAAC,CAAC;YAEH,IACE,IAAI,CAAC,kBAAkB,KAAK,YAAY;gBACxC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,EAC5C,CAAC;gBACD,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC;YACvC,CAAC;iBAAM,IACL,IAAI,CAAC,kBAAkB,KAAK,UAAU;gBACtC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,EAC5C,CAAC;gBACD,IAAI,CAAC,kBAAkB,GAAG,YAAY,CAAC;YACzC,CAAC;QACH,CAAC;IACH,CAAC;IAsFD,MAAM;QACJ,iBAAiB,CACf,IAAI,EACJ,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,QAAQ,CACd,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAErD,WACE,IAAI,EAAC,YAAY,gBACL,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;gBAE9D,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,sBACE,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI,EAAE,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,CACnB;gBACD,WACE,KAAK,EAAE;wBACL,yBAAyB,EAAE,IAAI;wBAC/B,UAAU,EAAE,IAAI,CAAC,kBAAkB,KAAK,YAAY;qBACrD,EACD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;oBAEvC,eAAa,CACT,CACF;YACL,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAC5D,2BACE,YAAY,EAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,OAAO,EAAE,IAAI,CAAC,cAAc,GACP,CACxB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderHiddenInput,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcSizesNoLarge,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioContainer: HTMLDivElement;\n  private radioOptions: HTMLIcRadioOptionElement[];\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcRadioGroupElement;\n\n  @State() checkedValue: string = \"\";\n  @State() currentOrientation: IcOrientation;\n  @State() initialOrientation: IcOrientation;\n  @State() selectedChild: number = -1;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the radio group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the radio group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop() orientation: IcOrientation = \"vertical\";\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the radio group component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  @Watch(\"orientation\")\n  orientationChangeHandler(): void {\n    this.initialOrientation = this.orientation;\n  }\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    this.radioContainer?.removeEventListener(\n      \"slotchange\",\n      this.setRadioOptions\n    );\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.orientationChangeHandler();\n    this.currentOrientation = this.initialOrientation;\n  }\n\n  componentDidLoad(): void {\n    this.setRadioOptions();\n    checkResizeObserver(this.runResizeObserver);\n    this.addSlotChangeListener();\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = detail.value;\n    const selectedOption = target as HTMLIcRadioOptionElement;\n    this.icChange.emit({\n      value: this.checkedValue,\n      selectedOption: {\n        radio: selectedOption,\n        textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n      },\n    });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n    }\n  }\n\n  @Listen(\"icSelectedChange\")\n  changeHandler(): void {\n    const selectedOption = this.radioOptions.findIndex(\n      (radioOption) => radioOption.selected\n    );\n    if (selectedOption < 0) {\n      this.setFirstRadioOptionTabIndex(0);\n      this.selectedChild = selectedOption;\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkOrientation();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkOrientation() {\n    if (this.initialOrientation === \"horizontal\") {\n      let totalWidth = 0;\n      this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n        totalWidth += clientWidth;\n        if (i < arr.length - 1) totalWidth += 40;\n      });\n\n      if (\n        this.currentOrientation === \"horizontal\" &&\n        totalWidth > this.radioContainer.clientWidth\n      ) {\n        this.currentOrientation = \"vertical\";\n      } else if (\n        this.currentOrientation === \"vertical\" &&\n        totalWidth < this.radioContainer.clientWidth\n      ) {\n        this.currentOrientation = \"horizontal\";\n      }\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private addSlotChangeListener = () => {\n    this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n  };\n\n  private setFirstRadioOptionTabIndex = (value: number) => {\n    this.radioOptions[0].setTabIndex(value);\n  };\n\n  private setRadioOptions = () => {\n    this.selectedChild = -1;\n    this.checkedValue = \"\";\n    this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n    if (this.radioOptions.length > 0) {\n      this.radioOptions.forEach((radioOption, index) => {\n        if (!radioOption.selected) {\n          radioOption.selected = this.checkedValue === radioOption.value;\n        }\n        radioOption.name = this.name;\n        radioOption.groupLabel = this.label;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n          this.checkedValue = radioOption.value;\n        }\n      });\n      this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n    }\n\n    if (\n      this.initialOrientation === \"horizontal\" &&\n      this.radioOptions !== undefined &&\n      (this.radioOptions.length > 2 ||\n        (this.radioOptions.length === 2 &&\n          (isSlotUsed(this.radioOptions[0], \"additional-field\") ||\n            isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n    ) {\n      this.currentOrientation = \"vertical\";\n    }\n  };\n\n  render() {\n    renderHiddenInput(\n      true,\n      this.el,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        class={{ small: this.small || this.size === \"small\" }}\n      >\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <div\n            class={{\n              \"radio-buttons-container\": true,\n              horizontal: this.currentOrientation === \"horizontal\",\n            }}\n            ref={(el) => (this.radioContainer = el)}\n          >\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(this.validationStatus, this.disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}