@ukic/web-components 2.8.0 → 2.9.0

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  isPropDefined,\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 (isPropDefined(this.submenuTriggerFor) && 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    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\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 (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\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 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            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            ariaControlsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            ariaOwnsId={\n              isPropDefined(this.submenuTriggerFor)\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              {isPropDefined(this.submenuTriggerFor) && (\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  isPropDefined,\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 (isPropDefined(this.submenuTriggerFor) && 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    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\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 (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\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 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            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            ariaControlsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            ariaOwnsId={\n              isPropDefined(this.submenuTriggerFor)\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              {isPropDefined(this.submenuTriggerFor) && (\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/test/basic/ic-menu-item.spec.js

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

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

@@ -1 +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 if variant is 'toggle'\", 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            variant=\"toggle\"\n          />`,\n    });\n\n    const eventSpy = jest.fn();\n\n    const mockEvent = {\n      preventDefault: eventSpy,\n    };\n\n    await page.rootInstance.handleClick(mockEvent as unknown as MouseEvent);\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n});\n"]}
+{"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 if variant is 'toggle'\", 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            variant=\"toggle\"\n          />`,\n    });\n\n    const eventSpy = jest.fn();\n\n    const mockEvent = {\n      preventDefault: eventSpy,\n    };\n\n    await page.rootInstance.handleClick(mockEvent as unknown as MouseEvent);\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n});\n"]}