@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

package/dist/collection/components/z-navigation-tabs/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-navigation-tabs/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZNavigationTabs} from \".\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans/index\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNavigationTabsStoriesArgs = ZNavigationTabs &\n  CSSVarsArguments<\"z-navigation-tabs-nav-buttons-bg\" | \"z-navigation-tabs-nav-buttons-fg\">;\n\nconst StoryMeta = {\n  title: \"ZNavigationTabs\",\n  component: \"z-navigation-tabs\",\n  argTypes: {\n    \"orientation\": {\n      options: Object.values(NavigationTabsOrientation),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    \"--z-navigation-tabs-nav-buttons-bg\": getColorTokenArgConfig(),\n    \"--z-navigation-tabs-nav-buttons-fg\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"--z-navigation-tabs-nav-buttons-bg\": undefined,\n    \"--z-navigation-tabs-nav-buttons-fg\": undefined,\n  },\n} satisfies Meta<ZNavigationTabsStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNavigationTabsStoriesArgs>;\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const tabs = document.querySelector(\"z-navigation-tabs\");\n  tabs?.addEventListener(\"selected\", ({detail: selectedTab}) => {\n    const controlledPanel = tabs.querySelectorAll('[role=\"tab\"]')?.[selectedTab]?.getAttribute(\"aria-controls\");\n    const panels = Array.from(document.querySelectorAll('[role=\"tabpanel\"]'));\n    panels.forEach((panel: HTMLElement) => (panel.hidden = true));\n    const panelToActivate = panels.find((panel) => panel.id === controlledPanel) as HTMLElement;\n    if (panelToActivate) {\n      panelToActivate.hidden = false;\n    }\n  });\n});\n\nconst tabsTemplate = (): TemplateResult =>\n  html`<button>\n      <z-icon name=\"house\"></z-icon>\n      <span>Home</span>\n    </button>\n    <button>\n      <z-icon name=\"map\"></z-icon>\n      <span>Maps</span>\n    </button>\n    <button disabled>\n      <z-icon name=\"download\"></z-icon>\n      <span>Download</span>\n    </button>\n    <button>\n      <z-icon name=\"user-avatar\"></z-icon>\n      <span>Users</span>\n    </button>\n    <button>\n      <z-icon name=\"artist\"></z-icon>\n      <span>Artisti</span>\n    </button>\n    <a\n      href=\"https://www.google.com\"\n      target=\"_blank\"\n      title=\"Vai a Google\"\n    >\n      <z-icon name=\"arrow-quad-north-east\"></z-icon>\n      <span>Link esterno</span>\n    </a>`;\n\nexport const Horizontal = {\n  argTypes: {\n    size: {\n      options: Object.values(NavigationTabsSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    orientation: NavigationTabsOrientation.HORIZONTAL,\n    size: NavigationTabsSize.BIG,\n    ariaLabel: \"\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"orientation\"],\n    },\n  },\n  render: (args) => html`\n    <z-navigation-tabs\n      orientation=${args.orientation}\n      size=${args.size}\n      .ariaLabel=${args.ariaLabel}\n      style=${styleMap({\n        \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n        \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n      })}\n    >\n      ${tabsTemplate()}\n    </z-navigation-tabs>\n  `,\n} satisfies Story;\n\n/**\n * When orientation is set to `VERTICAL`, the text of slotted tabs is hidden by default.\n * Be sure to put an icon inside the tab to have something visible and don't forget to put an `aria-label` to provide a description for screen readers.\n */\nexport const Vertical = {\n  args: {\n    orientation: NavigationTabsOrientation.VERTICAL,\n    ariaLabel: \"\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"orientation\"],\n    },\n  },\n  render: (args) => html`\n    <z-navigation-tabs\n      orientation=${args.orientation}\n      .ariaLabel=${args.ariaLabel}\n      style=${styleMap({\n        \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n        \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n      })}\n    >\n      ${tabsTemplate()}\n    </z-navigation-tabs>\n  `,\n} satisfies Story;\n\n/**\n * This story provides an example of how to handle a `ZNavigationTabs` with switchable `tabpanel`s, which is the most common use for the navigation tabs.\n * Each panel must have the `tabpanel` role and the `aria-labelledby` attribute, referencing the tab that controls it (unless a different label is provided using `aria-label`).\n * Similarly, the `aria-controls` attribute must be set on the tabs with the `id` of the controlled panel.\n *\n * For more details check the documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab\\_role\n */\nexport const Tabpanels = {\n  args: {\n    ariaLabel: \"\",\n    orientation: NavigationTabsOrientation.HORIZONTAL,\n  },\n  render: (args) => html`\n    <div class=\"panels-story-wrapper ${args.orientation}\">\n      <z-navigation-tabs\n        orientation=${args.orientation}\n        size=${NavigationTabsSize.BIG}\n        .ariaLabel=${args.ariaLabel}\n        .selectedTab=${0}\n        style=${styleMap({\n          \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n          \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n        })}\n      >\n        <button\n          aria-controls=\"panel-1\"\n          aria-label=\"home\"\n          id=\"tab-1\"\n        >\n          <z-icon name=\"house\" />\n          <span>Home</span>\n        </button>\n        <button\n          aria-controls=\"panel-2\"\n          aria-label=\"info\"\n          id=\"tab-2\"\n        >\n          <z-icon name=\"info\" />\n          <span>Info</span>\n        </button>\n      </z-navigation-tabs>\n      <div\n        class=\"panel\"\n        id=\"panel-1\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-1\"\n      >\n        <span>Pannello 1</span>\n        <span><z-icon name=\"house-filled\" /></span>\n      </div>\n      <div\n        class=\"panel\"\n        id=\"panel-2\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-2\"\n        hidden\n      >\n        <span>Pannello 2</span>\n        <span><z-icon name=\"info-filled\" /></span>\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-notification/index.js

@@ -0,0 +1,194 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Notification bar component.
+ * @slot - The text of the notification.
+ * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+ */
+export class ZNotification {
+    handleActionButtonClick(e) {
+        e.preventDefault();
+        this.notificationAction.emit();
+    }
+    handleCloseButtonClick(e) {
+        e.preventDefault();
+        this.notificationClose.emit();
+    }
+    constructor() {
+        this.contenticonname = undefined;
+        this.actiontext = undefined;
+        this.type = undefined;
+        this.showclose = false;
+        this.showshadow = false;
+        this.sticky = false;
+        this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
+        this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '49e877c8628f367adc596b40d5f12d5e66f78ed0' }, this.contenticonname && (h("z-icon", { key: '56257c6011f6b5b17c8bbd6250ec99b8d1e41ee2', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'dc56b45ea4f7d52bb193f8d3c22bb5910be9eeea', class: "content-container" }, h("div", { key: '2637553cf2f72a948014110e96559d15c45513fa', class: "content-text" }, h("slot", { key: '1e60cbb429a9620b88d7cb90df90874d3e454f48' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '844e0ba5cef8b13f9d91d5c09472893de5127cc4', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '8761fc65bd1b44b38a219e80d8f12b10a898cefe', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '7bd949a2c0abf7431765f28542443c9110097ab3', name: "multiply-circle", width: 16, height: 16 })))));
+    }
+    static get is() { return "z-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "contenticonname": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the icon on the left of the content"
+                },
+                "attribute": "contenticonname",
+                "reflect": false
+            },
+            "actiontext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Action button text"
+                },
+                "attribute": "actiontext",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NotificationType",
+                    "resolved": "NotificationType.ERROR | NotificationType.SUCCESS | NotificationType.WARNING",
+                    "references": {
+                        "NotificationType": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::NotificationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alert variant type"
+                },
+                "attribute": "type",
+                "reflect": true
+            },
+            "showclose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable close icon"
+                },
+                "attribute": "showclose",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showshadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "shadow is available only for the `sticky` version of the notification."
+                        }],
+                    "text": "Enable shadow."
+                },
+                "attribute": "showshadow",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable sticky notification bar."
+                },
+                "attribute": "sticky",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "notificationAction",
+                "name": "notificationAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Call to action clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "notificationClose",
+                "name": "notificationClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close button clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C;;;;GAIG;AAMH,MAAM,OAAO,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,cAAc;oBACvB,8DAAa,CACT;gBACL,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,IAAI,CAC5B,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB;gBAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-notification/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAEtC,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE;;;;;6CAKiC;SACxC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE;;;;;6CAKiC;SACxC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZNotification} from \"./index\";\n\ndescribe(\"Suite test ZNotification\", () => {\n  it(\"Test render ZNotification with icon, action and close button\", async () => {\n    const page = await newSpecPage({\n      components: [ZNotification],\n      html: `<z-notification\n        contenticonname=\"gear\"\n        actiontext=\"Annulla\"\n        type=\"success\"\n        showclose=\"true\"\n      >Testo della notifica</z-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-notification actiontext=\"Annulla\" contenticonname=\"gear\" showclose=\"true\" type=\"success\">\n        <mock:shadow-root>\n          <z-icon\n            class=\"status-icon\"\n            name=\"gear\"\n            width=\"16\"\n            height=\"16\"\n          ></z-icon>\n          <div class=\"content-container\">\n            <div class=\"content-text\"><slot></slot></div>\n            <button class=\"action-button\" type=\"button\">Annulla</button>\n          </div>\n          <button class=\"close-button\" type=\"button\">\n            <z-icon\n              name=\"multiply-circle\"\n              width=\"16\"\n              height=\"16\"\n            />\n          </button>\n        </mock:shadow-root>\n        Testo della notifica\n      </z-notification>\n    `);\n  });\n\n  it(\"Test render ZNotification without icon, action and close button\", async () => {\n    const page = await newSpecPage({\n      components: [ZNotification],\n      html: `<z-notification type=\"success\">Testo della notifica</z-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-notification type=\"success\">\n        <mock:shadow-root>\n          <div class=\"content-container\">\n            <div class=\"content-text\"><slot></slot></div>\n          </div>\n        </mock:shadow-root>\n        Testo della notifica\n      </z-notification>\n    `);\n  });\n\n  it(\"Test render ZNotification with icon, action\", async () => {\n    const page = await newSpecPage({\n      components: [ZNotification],\n      html: `<z-notification\n        contenticonname=\"gear\"\n        actiontext=\"Annulla\"\n        type=\"success\"\n        showclose=\"false\"\n      >Testo della notifica</z-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-notification actiontext=\"Annulla\" contenticonname=\"gear\" showclose=\"false\" type=\"success\">\n        <mock:shadow-root>\n          <z-icon\n            class=\"status-icon\"\n            name=\"gear\"\n            width=\"16\"\n            height=\"16\"\n          ></z-icon>\n          <div class=\"content-container\">\n            <div class=\"content-text\"><slot></slot></div>\n            <button class=\"action-button\" type=\"button\">Annulla</button>\n          </div>\n        </mock:shadow-root>\n        Testo della notifica\n      </z-notification>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-notification/index.stories.js

@@ -0,0 +1,147 @@
+import { html } from "lit";
+import { NotificationType } from "../../beans";
+import "./index";
+import "./index.stories.css";
+const StoryMeta = {
+    title: "ZNotification",
+    component: "z-notification",
+    argTypes: {
+        type: {
+            control: {
+                type: "inline-radio",
+            },
+            options: Object.values(NotificationType),
+        },
+    },
+    args: {
+        contenticonname: "checkmark-circle-filled",
+        actiontext: "Annulla",
+        showclose: false,
+        sticky: false,
+        type: NotificationType.SUCCESS,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `
+    <z-notification
+      .contenticonname=${args.contenticonname}
+      .actiontext=${args.actiontext}
+      .type=${args.type}
+      .showclose=${args.showclose}
+      .sticky=${args.sticky}
+    >
+      <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
+    </z-notification>
+  `,
+};
+export const LongText = {
+    render: (args) => html `
+    <z-notification
+      .contenticonname=${args.contenticonname}
+      .actiontext=${args.actiontext}
+      .type=${args.type}
+      .showclose=${args.showclose}
+      .sticky=${args.sticky}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
+      Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
+      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue
+      turpis, eu consectetur purus consectetur vitae.
+    </z-notification>
+  `,
+};
+/**
+ * To use the banner variant set the `sticky` property to `true`.
+ */
+export const BannerVariant = {
+    args: {
+        notificationText: "Questo è il testo della notifica",
+    },
+    parameters: {
+        controls: {
+            exclude: ["sticky"],
+        },
+    },
+    render: (args) => html `
+    <div class="banner-notification-demo">
+      <z-notification
+        .contenticonname=${args.contenticonname}
+        .actiontext=${args.actiontext}
+        .type=${args.type}
+        .showclose=${args.showclose}
+        sticky="true"
+      >
+        ${args.notificationText}
+      </z-notification>
+      <h2 class="heading-1-sb">Titolo della pagina</h2>
+      <div class="body-1">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
+        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
+        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis
+        augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.
+        Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed
+        felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus
+        fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante
+        felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,
+        pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,
+        tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a
+        facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper
+        risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus
+        lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius
+        facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet
+        mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem
+        posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus
+        hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.
+        Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu
+        nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque
+        dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet
+        posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,
+        non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,
+        elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent
+        quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis
+        vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec
+        fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in
+        ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et
+        condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est
+        vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus
+        massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at
+        sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.
+      </div>
+    </div>
+  `,
+};
+/**
+ * To use the inline variant set the `sticky` property to `false`.
+ */
+export const InlineVariant = {
+    args: {
+        notificationText: "Questo è il testo della notifica",
+    },
+    parameters: {
+        controls: {
+            exclude: ["sticky"],
+        },
+    },
+    render: (args) => html `
+    <div class="inline-notification-demo">
+      <z-notification
+        contenticonname=${args.contenticonname}
+        actiontext=${args.actiontext}
+        type=${args.type}
+        showclose=${args.showclose}
+        sticky="false"
+      >
+        ${args.notificationText}
+      </z-notification>
+      <div class="content">
+        <h2 class="heading-1">Titolo della scheda</h2>
+        <div class="body-1">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
+          Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.
+        </div>
+      </div>
+    </div>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-notification/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;SACzC;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,yBAAyB;QAC1C,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,gBAAgB,CAAC,OAAO;KAC/B;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;GAIxB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;;;;GAOxB;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;2BAGG,IAAI,CAAC,eAAe;sBACzB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,IAAI;qBACJ,IAAI,CAAC,SAAS;;;UAGzB,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC5B;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;0BAGE,IAAI,CAAC,eAAe;qBACzB,IAAI,CAAC,UAAU;eACrB,IAAI,CAAC,IAAI;oBACJ,IAAI,CAAC,SAAS;;;UAGxB,IAAI,CAAC,gBAAgB;;;;;;;;;;GAU5B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZNotification} from \".\";\nimport {NotificationType} from \"../../beans\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNotificationStoriesArgs = ZNotification & {notificationText: string};\n\nconst StoryMeta = {\n  title: \"ZNotification\",\n  component: \"z-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(NotificationType),\n    },\n  },\n  args: {\n    contenticonname: \"checkmark-circle-filled\",\n    actiontext: \"Annulla\",\n    showclose: false,\n    sticky: false,\n    type: NotificationType.SUCCESS,\n  },\n} satisfies Meta<ZNotificationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNotificationStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n    >\n      <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n    </z-notification>\n  `,\n} satisfies Story;\n\nexport const LongText = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n      Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue\n      turpis, eu consectetur purus consectetur vitae.\n    </z-notification>\n  `,\n} satisfies Story;\n\n/**\n * To use the banner variant set the `sticky` property to `true`.\n */\nexport const BannerVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"banner-notification-demo\">\n      <z-notification\n        .contenticonname=${args.contenticonname}\n        .actiontext=${args.actiontext}\n        .type=${args.type}\n        .showclose=${args.showclose}\n        sticky=\"true\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <h2 class=\"heading-1-sb\">Titolo della pagina</h2>\n      <div class=\"body-1\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis\n        augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.\n        Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed\n        felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus\n        fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante\n        felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,\n        pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,\n        tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a\n        facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper\n        risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus\n        lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius\n        facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet\n        mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem\n        posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus\n        hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.\n        Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu\n        nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque\n        dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet\n        posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,\n        non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,\n        elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent\n        quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis\n        vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec\n        fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in\n        ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et\n        condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est\n        vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus\n        massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at\n        sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.\n      </div>\n    </div>\n  `,\n} satisfies Story;\n\n/**\n * To use the inline variant set the `sticky` property to `false`.\n */\nexport const InlineVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"inline-notification-demo\">\n      <z-notification\n        contenticonname=${args.contenticonname}\n        actiontext=${args.actiontext}\n        type=${args.type}\n        showclose=${args.showclose}\n        sticky=\"false\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <div class=\"content\">\n        <h2 class=\"heading-1\">Titolo della scheda</h2>\n        <div class=\"body-1\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n          Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.\n        </div>\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-notification/test.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-notification/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;IACvE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,uBAAuB,GAAG,sBAAsB,CAAC;IACvD,MAAM,IAAI,CAAC,UAAU,CAAC,mBAAmB,uBAAuB,mBAAmB,CAAC,CAAC;IAErF,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE3D,MAAM,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;AAChE,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,qGAAqG,EAAE,KAAK,IAAI,EAAE;IACnH,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2EAA2E,CAAC,CAAC;IACnG,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAE1E,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;IAC3E,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;IAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;AACtD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iGAAiG,EAAE,KAAK,IAAI,EAAE;IAC/G,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,wEAAwE,CAAC,CAAC;IAChG,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEzE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;IACxE,MAAM,WAAW,CAAC,KAAK,EAAE,CAAC;IAE1B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;AACtD,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nit(\"should render the given text content as accessible text\", async () => {\n  const page = await newE2EPage();\n  const notificationTextContent = \"Testo della notifica\";\n  await page.setContent(`<z-notification>${notificationTextContent}</z-notification>`);\n\n  const notificationBody = await page.find(\"z-notification\");\n\n  expect(notificationBody).toEqualText(notificationTextContent);\n});\n\nit(\"emits a notificationAction event when the component has an action element and the user clicks on it\", async () => {\n  const page = await newE2EPage();\n  await page.setContent('<z-notification actiontext=\"Azione\">Testo della notifica</z-notification>');\n  const notificationActionSpy = await page.spyOnEvent(\"notificationAction\");\n\n  const actionElement = await page.find(\"z-notification >>> .action-button\");\n  await actionElement.click();\n\n  expect(notificationActionSpy).toHaveReceivedEvent();\n});\n\nit(\"emits a notificationClose event when the component has a close button and the user clicks on it\", async () => {\n  const page = await newE2EPage();\n  await page.setContent('<z-notification showclose=\"true\">Testo della notifica</z-notification>');\n  const notificationActionSpy = await page.spyOnEvent(\"notificationClose\");\n\n  const closeButton = await page.find(\"z-notification >>> .close-button\");\n  await closeButton.click();\n\n  expect(notificationActionSpy).toHaveReceivedEvent();\n});\n"]}

package/dist/collection/components/z-offcanvas/index.js

@@ -25,7 +25,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '69563f05a3b8e956a97da1eef9f89a67bc79e8d0', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: '725ba012a1bbd29e274882fca1a767f50fb08281', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '7653561f431bbc5eee82292f36d1c34706d0df3c', role: "presentation", class: "canvas-content" }, h("slot", { key: 'f607e0f2ec69cc9f0928e413ba8fcf9debd72ce7', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '69d5f44707b4971fd19969ed8ff8b44cc5e8dad2', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: '7b4045fe3c4bbc5dcd298683d445aa4800825fd7', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '90f6a83e5710059f24a4f99aea8e2f48786fb74f', role: "presentation", class: "canvas-content" }, h("slot", { key: 'ae14e2f2ea5771bb97dd58a986cde3b31e07c77f', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { key: 'd9bc6afc4d788a7b0011494b5951294a08ab8812', class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-offcanvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAClE;;GAEG;AAOH,MAAM,OAAO,UAAU;;uBAOQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAIgC,mBAAmB,CAAC,IAAI;iCAOhD,KAAK;;IAOzB,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IAEO,kBAAkB;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;QACzF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAC;YACrD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,kBAAkB,EACxB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;gBAEhD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,gBAAgB;oBAEtB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;YACL,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAC3C,WACE,KAAK,EAAC,mBAAmB,iBACb,kBAAkB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n/**\n * @slot canvasContent - Slot for the main content.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * Can be one `overlay` or `pushcontent`.\n   * Default variant: pushcontent\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /** open content transitioning in a specified direction left | right. Default: left */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Whether to skip the initial animation.\n   * Useful when the initial value of the `open` prop is set to `true`.\n   */\n  @Prop({mutable: true})\n  skipLoadAnimation = false;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open && this.skipLoadAnimation) {\n      this.skipLoadAnimation = false;\n    }\n\n    this.handlePageOverflow();\n    this.canvasOpenStatusChanged.emit(this.open);\n  }\n\n  private handlePageOverflow(): void {\n    const overflow = this.variant === OffCanvasVariant.OVERLAY ? \"overflow-y\" : \"overflow-x\";\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host class={{\"skip-animation\": this.skipLoadAnimation}}>\n        <div\n          role=\"presentation\"\n          class=\"canvas-container\"\n          onTransitionEnd={() => this.handlePageOverflow()}\n        >\n          <div\n            role=\"presentation\"\n            class=\"canvas-content\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {this.variant == OffCanvasVariant.OVERLAY && (\n          <div\n            class=\"canvas-background\"\n            data-action=\"canvasBackground\"\n            onClick={() => (this.open = false)}\n          ></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAClE;;GAEG;AAOH,MAAM,OAAO,UAAU;;uBAOQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAIgC,mBAAmB,CAAC,IAAI;iCAOhD,KAAK;;IAOzB,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IAEO,kBAAkB;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;QACzF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAC;YACrD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,kBAAkB,EACxB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;gBAEhD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,gBAAgB;oBAEtB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;YACL,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAC3C,4DACE,KAAK,EAAC,mBAAmB,iBACb,kBAAkB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n/**\n * @slot canvasContent - Slot for the main content.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * Can be one `overlay` or `pushcontent`.\n   * Default variant: pushcontent\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /** open content transitioning in a specified direction left | right. Default: left */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Whether to skip the initial animation.\n   * Useful when the initial value of the `open` prop is set to `true`.\n   */\n  @Prop({mutable: true})\n  skipLoadAnimation = false;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open && this.skipLoadAnimation) {\n      this.skipLoadAnimation = false;\n    }\n\n    this.handlePageOverflow();\n    this.canvasOpenStatusChanged.emit(this.open);\n  }\n\n  private handlePageOverflow(): void {\n    const overflow = this.variant === OffCanvasVariant.OVERLAY ? \"overflow-y\" : \"overflow-x\";\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host class={{\"skip-animation\": this.skipLoadAnimation}}>\n        <div\n          role=\"presentation\"\n          class=\"canvas-container\"\n          onTransitionEnd={() => this.handlePageOverflow()}\n        >\n          <div\n            role=\"presentation\"\n            class=\"canvas-content\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {this.variant == OffCanvasVariant.OVERLAY && (\n          <div\n            class=\"canvas-background\"\n            data-action=\"canvasBackground\"\n            onClick={() => (this.open = false)}\n          ></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-offcanvas/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-offcanvas/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnC,QAAQ,CAAC,2CAA2C,EAAE,GAAG,EAAE;IACzD,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;IACrD,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZOffcanvas} from \"./index\";\n\ndescribe(\"Suite test ZOffcanvas variant pushcontent\", () => {\n  it(\"Test render ZOffcanvas\", async () => {\n    const page = await newSpecPage({\n      components: [ZOffcanvas],\n      html: `<z-offcanvas open>\n              <div slot=\"canvasContent\"></div>\n            </z-offcanvas>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n\t\t\t<z-offcanvas open=\"\" transitiondirection=\"left\" variant=\"pushcontent\">\n\t\t\t\t<div class=\"canvas-container\" role=\"presentation\">\n\t\t\t\t\t<div class=\"canvas-content\" role=\"presentation\">\n\t\t\t\t\t\t<div slot=\"canvasContent\"></div>\n\t\t\t\t\t</div>\n        </div>\n      </z-offcanvas>\n    `);\n  });\n});\n\ndescribe(\"Suite test ZOffcanvas variant overlay\", () => {\n  it(\"Test render ZOffcanvas\", async () => {\n    const page = await newSpecPage({\n      components: [ZOffcanvas],\n      html: `<z-offcanvas open variant=\"overlay\">\n              <div slot=\"canvasContent\"></div>\n            </z-offcanvas>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n\t\t\t<z-offcanvas open=\"\" transitiondirection=\"left\" variant=\"overlay\">\n\t\t\t\t<div class=\"canvas-container\" role=\"presentation\">\n\t\t\t\t\t<div class=\"canvas-content\" role=\"presentation\">\n\t\t\t\t\t\t<div slot=\"canvasContent\"></div>\n\t\t\t\t\t</div>\n        </div>\n        <div class=\"canvas-background\" data-action=\"canvasBackground\"></div>\n      </z-offcanvas>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnC,QAAQ,CAAC,2CAA2C,EAAE,GAAG,EAAE;IACzD,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;IACrD,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZOffcanvas} from \"./index\";\n\ndescribe(\"Suite test ZOffcanvas variant pushcontent\", () => {\n  it(\"Test render ZOffcanvas\", async () => {\n    const page = await newSpecPage({\n      components: [ZOffcanvas],\n      html: `<z-offcanvas open>\n              <div slot=\"canvasContent\"></div>\n            </z-offcanvas>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n\t\t\t<z-offcanvas open=\"\" transitiondirection=\"left\" variant=\"pushcontent\">\n\t\t\t\t<div class=\"canvas-container\" role=\"presentation\">\n\t\t\t\t\t<div class=\"canvas-content\" role=\"presentation\">\n\t\t\t\t\t\t<div slot=\"canvasContent\"></div>\n\t\t\t\t\t</div>\n        </div>\n      </z-offcanvas>\n    `);\n  });\n});\n\ndescribe(\"Suite test ZOffcanvas variant overlay\", () => {\n  it(\"Test render ZOffcanvas\", async () => {\n    const page = await newSpecPage({\n      components: [ZOffcanvas],\n      html: `<z-offcanvas open variant=\"overlay\">\n              <div slot=\"canvasContent\"></div>\n            </z-offcanvas>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n\t\t\t<z-offcanvas open=\"\" transitiondirection=\"left\" variant=\"overlay\">\n\t\t\t\t<div class=\"canvas-container\" role=\"presentation\">\n\t\t\t\t\t<div class=\"canvas-content\" role=\"presentation\">\n\t\t\t\t\t\t<div slot=\"canvasContent\"></div>\n\t\t\t\t\t</div>\n        </div>\n        <div class=\"canvas-background\" data-action=\"canvasBackground\"></div>\n      </z-offcanvas>\n    `);\n  });\n});\n"]}