@ukic/web-components 2.1.0-beta.16 → 2.1.0-beta.17

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

@@ -48,23 +48,18 @@ export class MenuItem {
         return ariaLabel;
       }
     };
-    this.variant = "default";
-    this.label = undefined;
+    this.toggleChecked = false;
     this.description = undefined;
     this.disabled = false;
     this.href = undefined;
-    this.target = undefined;
-    this.rel = undefined;
     this.hreflang = undefined;
-    this.referrerpolicy = undefined;
     this.keyboardShortcut = undefined;
+    this.label = undefined;
+    this.referrerpolicy = undefined;
+    this.rel = undefined;
     this.submenuTriggerFor = undefined;
-    this.toggleChecked = false;
-  }
-  handleHostClick(e) {
-    if (this.disabled) {
-      e.stopImmediatePropagation();
-    }
+    this.target = undefined;
+    this.variant = "default";
   }
   componentWillLoad() {
     // This ensures that trigger menu items are always set to the default variant
@@ -76,6 +71,11 @@ export class MenuItem {
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Menu Item");
   }
+  handleHostClick(e) {
+    if (this.disabled) {
+      e.stopImmediatePropagation();
+    }
+  }
   render() {
     // A helper function that checks if a prop has been defined
     const isPropDefined = (prop) => {
@@ -118,46 +118,6 @@ export class MenuItem {
   }
   static get properties() {
     return {
-      "variant": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "IcMenuItemVariants",
-          "resolved": "\"default\" | \"destructive\" | \"toggle\"",
-          "references": {
-            "IcMenuItemVariants": {
-              "location": "import",
-              "path": "./ic-menu-item.types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The variant of the menu item."
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label to display in the menu item."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -210,7 +170,7 @@ export class MenuItem {
         "attribute": "href",
         "reflect": false
       },
-      "target": {
+      "hreflang": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -222,12 +182,12 @@ export class MenuItem {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+          "text": "The human language of the linked URL."
         },
-        "attribute": "target",
+        "attribute": "hreflang",
         "reflect": false
       },
-      "rel": {
+      "keyboardShortcut": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -239,12 +199,12 @@ export class MenuItem {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The relationship of the linked URL as space-separated link types."
+          "text": "The label describing the keyboard shortcut for a menu item's action."
         },
-        "attribute": "rel",
+        "attribute": "keyboard-shortcut",
         "reflect": false
       },
-      "hreflang": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -252,13 +212,13 @@ export class MenuItem {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The human language of the linked URL."
+          "text": "The label to display in the menu item."
         },
-        "attribute": "hreflang",
+        "attribute": "label",
         "reflect": false
       },
       "referrerpolicy": {
@@ -282,7 +242,7 @@ export class MenuItem {
         "attribute": "referrerpolicy",
         "reflect": false
       },
-      "keyboardShortcut": {
+      "rel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -294,9 +254,9 @@ export class MenuItem {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The label describing the keyboard shortcut for a menu item's action."
+          "text": "The relationship of the linked URL as space-separated link types."
         },
-        "attribute": "keyboard-shortcut",
+        "attribute": "rel",
         "reflect": false
       },
       "submenuTriggerFor": {
@@ -315,6 +275,46 @@ export class MenuItem {
         },
         "attribute": "submenu-trigger-for",
         "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IcMenuItemVariants",
+          "resolved": "\"default\" | \"destructive\" | \"toggle\"",
+          "references": {
+            "IcMenuItemVariants": {
+              "location": "import",
+              "path": "./ic-menu-item.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the menu item."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"default\""
       }
     };
   }
@@ -343,39 +343,39 @@ export class MenuItem {
           "references": {}
         }
       }, {
-        "method": "triggerPopoverMenuInstance",
-        "name": "triggerPopoverMenuInstance",
+        "method": "handleMenuItemClick",
+        "name": "handleMenuItemClick",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Emitted when the user clicks a menu item that triggers a popover menu instance."
+              "text": "Emitted when the user clicks a menu item."
             }],
           "text": ""
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
+          "original": "{\n    label: string;\n    hasSubMenu: boolean;\n  }",
+          "resolved": "{ label: string; hasSubMenu: boolean; }",
           "references": {}
         }
       }, {
-        "method": "handleMenuItemClick",
-        "name": "handleMenuItemClick",
+        "method": "triggerPopoverMenuInstance",
+        "name": "triggerPopoverMenuInstance",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Emitted when the user clicks a menu item."
+              "text": "Emitted when the user clicks a menu item that triggers a popover menu instance."
             }],
           "text": ""
         },
         "complexType": {
-          "original": "{\n    label: string;\n    hasSubMenu: boolean;\n  }",
-          "resolved": "{ label: string; hasSubMenu: boolean; }",
+          "original": "void",
+          "resolved": "void",
           "references": {}
         }
       }];

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

@@ -1 +1 @@
-{"version":3,"file":"ic-menu-item.js","sourceRoot":"","sources":["../../../src/components/ic-menu-item/ic-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  getParentElement,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  @State() toggleChecked: boolean = false;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    e.preventDefault();\n    if (this.submenuTriggerFor !== undefined) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      this.toggleChecked\n        ? (this.toggleChecked = false)\n        : (this.toggleChecked = true);\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (this.submenuTriggerFor !== undefined && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (this.description !== undefined) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (this.keyboardShortcut !== undefined) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (this.submenuTriggerFor !== undefined) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = getParentElement(this.el);\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A helper function that checks if a prop has been defined\n    const isPropDefined = (prop: string) => {\n      return prop !== undefined ? prop : null;\n    };\n\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\" && this.toggleChecked === true\n              ? true\n              : this.variant === \"toggle\" && this.toggleChecked === false\n              ? false\n              : undefined\n          }\n        >\n          <ic-button\n            disableTooltip\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            aria-controls={\n              this.submenuTriggerFor !== undefined\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              this.submenuTriggerFor !== undefined ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            aria-owns={\n              this.submenuTriggerFor !== undefined\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {this.submenuTriggerFor !== undefined && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-menu-item.js","sourceRoot":"","sources":["../../../src/components/ic-menu-item/ic-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  getParentElement,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  @State() toggleChecked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (this.submenuTriggerFor !== undefined && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    e.preventDefault();\n    if (this.submenuTriggerFor !== undefined) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      this.toggleChecked\n        ? (this.toggleChecked = false)\n        : (this.toggleChecked = true);\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (this.description !== undefined) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (this.keyboardShortcut !== undefined) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (this.submenuTriggerFor !== undefined) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = getParentElement(this.el);\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A helper function that checks if a prop has been defined\n    const isPropDefined = (prop: string) => {\n      return prop !== undefined ? prop : null;\n    };\n\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\" && this.toggleChecked === true\n              ? true\n              : this.variant === \"toggle\" && this.toggleChecked === false\n              ? false\n              : undefined\n          }\n        >\n          <ic-button\n            disableTooltip\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            aria-controls={\n              this.submenuTriggerFor !== undefined\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              this.submenuTriggerFor !== undefined ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            aria-owns={\n              this.submenuTriggerFor !== undefined\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {this.submenuTriggerFor !== undefined && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-menu-item/{ic-menu-item.spec.js → test/basic/ic-menu-item.spec.js}

@@ -1,6 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { MenuItem } from "./ic-menu-item";
-import { Button } from "../ic-button/ic-button";
+import { MenuItem } from "../../ic-menu-item";
+import { Button } from "../../../ic-button/ic-button";
 describe("menu item variants", () => {
   it("should render the default variant", async () => {
     const page = await newSpecPage({

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-menu-item.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-menu-item/test/basic/ic-menu-item.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { MenuItem } from \"../../ic-menu-item\";\nimport { Button } from \"../../../ic-button/ic-button\";\n\ndescribe(\"menu item variants\", () => {\n  it(\"should render the default variant\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            label=\"Default variant\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a menu item with a description\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            label=\"Default variant\"\n            description=\"This is the default variant of the menu item with a description\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with keyboard shortcut\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n              label=\"Toggle variant\"\n              keyboard-shortcut=\"Cmd+\"\n            />`,\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the toggle variant\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem, Button],\n      html: `<ic-menu-item\n            variant=\"toggle\"\n            label=\"Toggle variant\"\n            id=\"test-menu-item\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n    expect(page.rootInstance.variant).toMatch(\"toggle\");\n    expect(page.rootInstance.toggleChecked).toBeFalsy();\n\n    const button = page.root.shadowRoot\n      .querySelector(\"li > ic-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    button.click();\n    await page.waitForChanges;\n  });\n\n  it(\"should render the destructive variant\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            variant=\"destuctive\"\n            label=\"Destructive variant\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a menu item that triggers a popover menu instance\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            variant=\"destuctive\"\n            submenu-trigger-for=\"submenu-1\"\n            label=\"Destructive variant\"\n          />`,\n    });\n\n    expect(page.rootInstance.submenuTriggerFor).not.toBeUndefined();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n  });\n\n  it('should emit the triggerPopoverMenuInstance event when the menu item has the prop: \"submenu-trigger-for\" and is clicked', async () => {\n    const page = await newSpecPage({\n      components: [MenuItem, Button],\n      html: `<ic-menu-item\n      id=\"test-menu-item\"\n            submenu-trigger-for=\"submenu-1\"\n            label=\"I emit an event\"\n          />`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"triggerPopoverMenuInstance\", eventSpy);\n    expect(page.rootInstance.submenuTriggerFor).not.toBeUndefined();\n\n    const element = await document.getElementById(\"test-menu-item\");\n\n    await element.click();\n\n    await page.waitForChanges();\n\n    await page.rootInstance.handleClick;\n  });\n\n  it(\"should prevent default action on click\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n      id=\"test-menu-item\"\n            label=\"I emit an event\"\n            submenu-trigger-for=\"test-submenu\"\n          />`,\n    });\n\n    const mockEvent = { preventDefault: jest.fn() };\n    page.rootInstance.handleClick(mockEvent as unknown as MouseEvent);\n\n    expect(mockEvent.preventDefault).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-button/ic-navigation-button.js

@@ -8,15 +8,24 @@ import { IcThemeForegroundEnum, } from "../../utils/types";
 export class NavigationButton {
   constructor() {
     this.inheritedAttributes = {};
-    this.label = undefined;
-    this.href = undefined;
-    this.target = undefined;
-    this.rel = undefined;
+    this.initialAppearance = getThemeForegroundColor();
+    this.mode = "navbar";
     this.download = false;
+    this.href = undefined;
     this.hreflang = undefined;
+    this.label = undefined;
     this.referrerpolicy = undefined;
-    this.mode = "navbar";
-    this.initialAppearance = getThemeForegroundColor();
+    this.rel = undefined;
+    this.target = undefined;
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, [
+      ...IC_INHERITED_ARIA,
+      "title",
+    ]);
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
   }
   navBarMenuOpenHandler() {
     this.mode = "menu";
@@ -36,15 +45,6 @@ export class NavigationButton {
       this.buttonEl.focus();
     }
   }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "title",
-    ]);
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
-  }
   render() {
     const { href, target, rel, download, referrerpolicy } = this;
     let label = "";
@@ -89,22 +89,23 @@ export class NavigationButton {
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
+      "download": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | boolean",
+          "resolved": "boolean | string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The label info to display."
+          "text": "If `true`, the user can save the linked URL instead of navigating to it."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "download",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "href": {
         "type": "string",
@@ -123,7 +124,7 @@ export class NavigationButton {
         "attribute": "href",
         "reflect": false
       },
-      "target": {
+      "hreflang": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -135,12 +136,12 @@ export class NavigationButton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+          "text": "The human language of the linked URL."
         },
-        "attribute": "target",
+        "attribute": "hreflang",
         "reflect": false
       },
-      "rel": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -148,34 +149,37 @@ export class NavigationButton {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The relationship of the linked URL as space-separated link types."
+          "text": "The label info to display."
         },
-        "attribute": "rel",
+        "attribute": "label",
         "reflect": false
       },
-      "download": {
-        "type": "any",
+      "referrerpolicy": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string",
-          "references": {}
+          "original": "ReferrerPolicy",
+          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+          "references": {
+            "ReferrerPolicy": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the user can save the linked URL instead of navigating to it."
+          "text": "How much of the referrer to send when following the link."
         },
-        "attribute": "download",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "referrerpolicy",
+        "reflect": false
       },
-      "hreflang": {
+      "rel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -187,38 +191,34 @@ export class NavigationButton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The human language of the linked URL."
+          "text": "The relationship of the linked URL as space-separated link types."
         },
-        "attribute": "hreflang",
+        "attribute": "rel",
         "reflect": false
       },
-      "referrerpolicy": {
+      "target": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ReferrerPolicy",
-          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
-          "references": {
-            "ReferrerPolicy": {
-              "location": "global"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "How much of the referrer to send when following the link."
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
-        "attribute": "referrerpolicy",
+        "attribute": "target",
         "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "mode": {},
-      "initialAppearance": {}
+      "initialAppearance": {},
+      "mode": {}
     };
   }
   static get methods() {

package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  @State() initialAppearance = getThemeForegroundColor();\n\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n  }\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={this.label}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"icon\" name=\"icon\"></slot>\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={this.label}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"icon\" name=\"icon\"></slot>\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-navigation-button/{ic-navigation-button.spec.js → test/basic/ic-navigation-button.spec.js}

@@ -1,6 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { Button } from "../ic-button/ic-button";
-import { NavigationButton } from "./ic-navigation-button";
+import { Button } from "../../../ic-button/ic-button";
+import { NavigationButton } from "../../ic-navigation-button";
 describe("ic-navigation-button", () => {
   it("renders", async () => {
     const page = await newSpecPage({

package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-button/test/basic/ic-navigation-button.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;;;;;;;;;;;;;;;;;4BAiBgB;KACvB,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;EACrD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAChD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;IACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACnD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;IACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;IACzE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC;MACtC,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;EACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationButton } from \"../../ic-navigation-button\";\n\ndescribe(\"ic-navigation-button\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button\n        label=\"button1\"\n        onclick=\"alert('test')\"\n      >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n    </ic-navigation-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n        <mock:shadow-root>\n          <ic-button aria-label=\"button1\" appearance=\"light\" size=\"large\" variant=\"icon\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n          </ic-button>\n        </mock:shadow-root>\n        <svg fill=\"#000000\" height=\"24px\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"></path>\n        </svg>\n      </ic-navigation-button>\n    `);\n  });\n\n  it(\"renders differently if mode is menu\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    page.rootInstance.mode = \"menu\";\n    const el = page.root.shadowRoot.querySelector(\"ic-button\");\n\n    await page.waitForChanges();\n    expect(el.className).toEqual(\"popout-menu-button\");\n  });\n\n  it(\"correctly sets mode on menu open and close\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.navBarMenuOpenHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"menu\");\n\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"navbar\");\n  });\n\n  it(\"correctly sets appearance on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.initialAppearance).toBe(\"dark\");\n  });\n\n  it(\"correctly sets focus\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Button],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.setFocus();\n  });\n});\n"]}