@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,64 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { ICONS } from "../../constants/iconset";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "./index";
-const StoryMeta = {
-    title: "ZTag",
-    component: "z-tag",
-    argTypes: {
-        "icon": {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(ICONS).sort(),
-        },
-        "--z-tag-text-color": getColorTokenArgConfig(),
-        "--z-tag-bg": getColorTokenArgConfig(),
-    },
-    args: {
-        text: "In progress",
-        expandable: false,
-        icon: "gear",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-tag
-      icon=${args.icon}
-      expandable=${args.expandable}
-      >${args.text}
-    </z-tag>`,
-};
-export const ColorTokens = {
-    args: {
-        "--z-tag-text-color": null,
-        "--z-tag-bg": null,
-    },
-    render: (args) => html `<z-tag
-      style=${styleMap({
-        "--z-tag-text-color": args["--z-tag-text-color"],
-        "--z-tag-bg": args["--z-tag-bg"],
-    })}
-      .icon=${args.icon}
-      .expandable=${args.expandable}
-      >${args.text}
-    </z-tag>`,
-};
-export const LongText = {
-    args: {
-        "text": "In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo",
-        "--z-tag-text-color": null,
-        "--z-tag-bg": null,
-    },
-    render: (args) => html `<z-tag
-      style=${styleMap({
-        "--z-tag-text-color": args["--z-tag-text-color"],
-        "--z-tag-bg": args["--z-tag-bg"],
-    })}
-      .icon=${args.icon}
-      .expandable=${args.expandable}
-      >${args.text}
-    </z-tag>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;SACnC;QACD,oBAAoB,EAAE,sBAAsB,EAAE;QAC9C,YAAY,EAAE,sBAAsB,EAAE;KACvC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;QACnB,UAAU,EAAE,KAAK;QACjB,IAAI,EAAE,MAAM;KACb;CAC8B,CAAC;AAElC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,UAAU;SACzB,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,6EAA6E;QACrF,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTag} from \".\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZTagStoriesArgs = ZTag & CSSVarsArguments<\"z-tag-text-color\" | \"z-tag-bg\"> & {text: string};\n\nconst StoryMeta = {\n  title: \"ZTag\",\n  component: \"z-tag\",\n  argTypes: {\n    \"icon\": {\n      control: {\n        type: \"select\",\n      },\n      options: Object.keys(ICONS).sort(),\n    },\n    \"--z-tag-text-color\": getColorTokenArgConfig(),\n    \"--z-tag-bg\": getColorTokenArgConfig(),\n  },\n  args: {\n    text: \"In progress\",\n    expandable: false,\n    icon: \"gear\",\n  },\n} satisfies Meta<ZTagStoriesArgs>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-tag\n      icon=${args.icon}\n      expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const ColorTokens = {\n  args: {\n    \"--z-tag-text-color\": null,\n    \"--z-tag-bg\": null,\n  },\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const LongText = {\n  args: {\n    \"text\": \"In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo\",\n    \"--z-tag-text-color\": null,\n    \"--z-tag-bg\": null,\n  },\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, ToastNotification, ToastNotificationTransition} from \"../../beans\";\n\nimport DOMPurify from \"dompurify\";\nimport Hammer from \"hammerjs\";\n\n/**\n * ZToastNotification component.\n * @slot message - Custom HTML message\n * @slot button - Custom button\n */\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string, stopTimer: boolean): void {\n    if (stopTimer && this.timeoutHandle) {\n      clearTimeout(this.timeoutHandle);\n    }\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.toastClose.emit();\n    if (cssClass) {\n      this.hostElement.classList.add(cssClass);\n    } else {\n      this.hostElement.parentNode.removeChild(this.hostElement);\n    }\n  }\n\n  componentWillLoad(): void {\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.startTime = Date.now();\n    if (this.autoclose) {\n      if (this.pauseonfocusloss) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n      if (!this.transition) {\n        this.startClosingTimeout(this.autoclose);\n      }\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n      default:\n        return null;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      if (this.transition) {\n        this.hostElement.classList.remove(this.transition);\n      }\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\", true);\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass(), false), time);\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        tabIndex={0}\n        class={{[this.type]: !!this.type}}\n      >\n        <div id=\"inner-container\">\n          <div id=\"text\">\n            {this.heading && <span class=\"title\">{this.heading}</span>}\n            <span class=\"message\">\n              <slot name=\"message\">\n                <span innerHTML={DOMPurify.sanitize(this.message || \" \")} />\n              </slot>\n            </span>\n          </div>\n          <div id=\"button\">\n            <slot name=\"button\" />\n          </div>\n        </div>\n        <div id=\"icon\">\n          {this.closebutton && (\n            <z-icon\n              tabIndex={0}\n              name=\"multiply-circled\"\n              width={15}\n              height={15}\n              onClick={() => this.emitToastClose(this.mapSlideOutClass(), true)}\n              onKeyPress={(e) => {\n                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {\n                  e.preventDefault();\n                  this.emitToastClose(this.mapSlideOutClass(), true);\n                }\n              }}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\"--percentuale\": `${this.percentage}%`}}\n        class={this.transition ? this.transition : \"\"}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.renderContent()}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,175 +0,0 @@
-import { html } from "lit";
-import { ToastNotification, ToastNotificationTransition } from "../../beans";
-import "../z-button/index";
-import "./index";
-const longText = "Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.";
-const template = (args) => html `<div class="toast-container">
-    <z-toast-notification
-      heading="${args.heading}"
-      message="${args.message}"
-      closebutton="${args.closebutton}"
-      autoclose="${args.autoclose}"
-      pauseonfocusloss="${args.pauseonfocusloss}"
-      type="${args.type}"
-      isdraggable="${args.isdraggable}"
-      draggablepercentage="${args.draggablepercentage}"
-      transition="${args.transition}"
-    ></z-toast-notification>
-  </div>`;
-const StoryMeta = {
-    title: "ZToastNotification",
-    component: "z-toast-notification",
-    argTypes: {
-        type: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ToastNotification),
-        },
-        transition: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ToastNotificationTransition),
-        },
-    },
-    args: {
-        heading: "Titolo",
-        message: "Questo è un messaggio di prova.",
-        closebutton: true,
-        autoclose: null,
-        pauseonfocusloss: false,
-        type: ToastNotification.DARK,
-        isdraggable: true,
-        draggablepercentage: 80,
-    },
-    render: (args) => template(args),
-};
-export default StoryMeta;
-export const NoSlideIn = {
-    args: {
-        message: "Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato",
-    },
-};
-export const SlideInRight = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_RIGHT,
-    },
-};
-export const SlideInLeft = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_LEFT,
-    },
-};
-export const SlideInDownNoCloseButton = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-        closebutton: false,
-    },
-};
-export const SlideInUpLongText = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_UP,
-        message: longText,
-    },
-};
-export const SlottedButton = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-    },
-    render: (args) => html `<div class="toast-container slotted-button">
-      <z-toast-notification
-        heading="${args.heading}"
-        message="${args.message}"
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <z-button
-          slot="button"
-          size="small"
-          variant="tertiary"
-          >button</z-button
-        >
-      </z-toast-notification>
-    </div>`,
-};
-export const SlottedButtonLongText = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-    },
-    render: (args) => html `<div class="toast-container slotted-button">
-      <z-toast-notification
-        heading="Titolo abbastanza lungo"
-        message=${longText}
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <z-button
-          slot="button"
-          size="small"
-          variant="tertiary"
-          >button</z-button
-        >
-      </z-toast-notification>
-    </div>`,
-};
-export const SlottedMessage = {
-    args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
-    render: (args) => html `<div class="toast-container">
-      <z-toast-notification
-        heading="${args.heading}"
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <span slot="message"
-          >Messaggio con
-          <a
-            href="#"
-            class="z-link z-link-blue"
-            >link</a
-          >
-          e <b>grassetto</b></span
-        >
-      </z-toast-notification>
-    </div>`,
-};
-export const SlottedMessageLongText = {
-    args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
-    render: (args) => html `<div class="toast-container">
-      <z-toast-notification
-        heading="Titolo abbastanza lungo"
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <span slot="message"
-          >${longText}
-          <a
-            href="#"
-            class="z-link z-link-blue"
-            >link</a
-          ></span
-        >
-      </z-toast-notification>
-    </div>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AAEjB,MAAM,QAAQ,GACZ,uKAAuK,CAAC;AAE1K,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE,CACxC,IAAI,CAAA;;iBAEW,IAAI,CAAC,OAAO;iBACZ,IAAI,CAAC,OAAO;qBACR,IAAI,CAAC,WAAW;mBAClB,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,gBAAgB;cACjC,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;6BACR,IAAI,CAAC,mBAAmB;oBACjC,IAAI,CAAC,UAAU;;SAE1B,CAAC;AAEV,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;SAC1C;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAA2B,CAAC;SACpD;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,iCAAiC;QAC1C,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,KAAK;QACvB,IAAI,EAAE,iBAAiB,CAAC,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,mBAAmB,EAAE,EAAE;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACE,CAAC;AAErC,eAAe,SAAS,CAAC;AAGzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,iEAAiE;KAC3E;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,cAAc;KACvD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;QACrD,WAAW,EAAE,KAAK;KACnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,WAAW;QACnD,OAAO,EAAE,QAAQ;KAClB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;uBACR,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;kBAGU,QAAQ;uBACH,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,EAAC,UAAU,EAAE,2BAA2B,CAAC,aAAa,EAAC;IAC7D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;uBACR,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;;;;WAY1B;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE,EAAC,UAAU,EAAE,2BAA2B,CAAC,aAAa,EAAC;IAC7D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;uBAGe,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;aAGxB,QAAQ;;;;;;;;WAQV;CACM,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst longText =\n  \"Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.\";\n\nconst template = (args): TemplateResult =>\n  html`<div class=\"toast-container\">\n    <z-toast-notification\n      heading=\"${args.heading}\"\n      message=\"${args.message}\"\n      closebutton=\"${args.closebutton}\"\n      autoclose=\"${args.autoclose}\"\n      pauseonfocusloss=\"${args.pauseonfocusloss}\"\n      type=\"${args.type}\"\n      isdraggable=\"${args.isdraggable}\"\n      draggablepercentage=\"${args.draggablepercentage}\"\n      transition=\"${args.transition}\"\n    ></z-toast-notification>\n  </div>`;\n\nconst StoryMeta = {\n  title: \"ZToastNotification\",\n  component: \"z-toast-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotification),\n    },\n    transition: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotificationTransition),\n    },\n  },\n  args: {\n    heading: \"Titolo\",\n    message: \"Questo è un messaggio di prova.\",\n    closebutton: true,\n    autoclose: null,\n    pauseonfocusloss: false,\n    type: ToastNotification.DARK,\n    isdraggable: true,\n    draggablepercentage: 80,\n  },\n  render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const NoSlideIn = {\n  args: {\n    message: \"Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato\",\n  },\n} satisfies Story;\n\nexport const SlideInRight = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n  },\n} satisfies Story;\n\nexport const SlideInLeft = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n  },\n} satisfies Story;\n\nexport const SlideInDownNoCloseButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n    closebutton: false,\n  },\n} satisfies Story;\n\nexport const SlideInUpLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_UP,\n    message: longText,\n  },\n} satisfies Story;\n\nexport const SlottedButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        message=\"${args.message}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedButtonLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        message=${longText}\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessage = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >Messaggio con\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          >\n          e <b>grassetto</b></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessageLongText = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >${longText}\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          ></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,yBAAyB,EAAC,MAAM,aAAa,CAAC;AAOtD,MAAM,OAAO,sBAAsB;;QAWzB,sBAAiB,GAAc,EAAE,CAAC;wBANJ,yBAAyB,CAAC,SAAS;2BAIjD,IAAI;;IAK5B,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrF,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAChG,CAAC;IAEO,iBAAiB;QACvB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAClH,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC1B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClC,MAAM,OAAO,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[] = [];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"]}

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

@@ -1,148 +0,0 @@
-import { html } from "lit";
-import { ToastNotificationPosition, ToastNotificationTransition } from "../../beans";
-import "../z-button/index";
-import "../z-toast-notification/index";
-import "./index";
-import "./index.stories.css";
-const template = (args, notificationTransition = ToastNotificationTransition.SLIDE_IN_DOWN, slottedMessage) => html `<div class="z-toast-notification-container">
-    <z-toast-notification-list
-      position="${args.position}"
-      newestontop="${args.newestontop}"
-    >
-      ${slottedMessage
-    ? html `<z-toast-notification
-            slot="toasts"
-            type="dark"
-            heading="Notification"
-            .transition=${notificationTransition}
-            draggablepercentage="50"
-            autoclose="18000"
-            closebutton
-          >
-            ${slottedMessage}
-          </z-toast-notification>`
-    : html `<z-toast-notification
-            slot="toasts"
-            type="dark"
-            heading="Notification"
-            message="Autoclose 18s."
-            .transition=${notificationTransition}
-            draggablepercentage="50"
-            autoclose="18000"
-            closebutton
-          >
-          </z-toast-notification>`}
-
-      <z-toast-notification
-        slot="toasts"
-        type="dark"
-        heading="Notification"
-        message="Senza pulsante."
-        .transition=${notificationTransition}
-        draggablepercentage="50"
-        closebutton
-      >
-      </z-toast-notification>
-      <z-toast-notification
-        slot="toasts"
-        type="dark"
-        heading="Notification"
-        message="Con pulsante"
-        .transition=${notificationTransition}
-        draggablepercentage="50"
-        closebutton
-      >
-        <z-button
-          slot="button"
-          size="small"
-          >button</z-button
-        >
-      </z-toast-notification>
-    </z-toast-notification-list>
-  </div>`;
-const StoryMeta = {
-    title: "ZToastNotificationList",
-    component: "z-toast-notification-list",
-    argTypes: {
-        position: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ToastNotificationPosition),
-        },
-    },
-    args: {
-        newestontop: true,
-    },
-    render: (args) => template(args),
-};
-export default StoryMeta;
-export const TopLeftSlideInDown = {
-    args: {
-        position: ToastNotificationPosition.TOP_LEFT,
-    },
-};
-export const TopLeftSlideInRight = {
-    args: {
-        position: ToastNotificationPosition.TOP_LEFT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),
-};
-export const TopCentre = {
-    args: {
-        position: ToastNotificationPosition.TOP_CENTRE,
-    },
-};
-export const TopRightSlideInDown = {
-    args: {
-        position: ToastNotificationPosition.TOP_RIGHT,
-    },
-};
-export const TopRightSlideInLeft = {
-    args: {
-        position: ToastNotificationPosition.TOP_RIGHT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),
-};
-export const BottomRightSlideInUp = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_RIGHT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
-};
-export const BottomRightSlideInLeft = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_RIGHT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),
-};
-export const BottomCentre = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_CENTRE,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
-};
-export const BottomCentreSlideInUp = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_LEFT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
-};
-export const BottomLeftSlideInRight = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_LEFT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),
-};
-export const TopLeftWithSlottedMessage = {
-    args: { position: ToastNotificationPosition.TOP_LEFT },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_DOWN, html `<span slot="message"
-        >Autoclose 18s con
-        <a
-          href="#"
-          class="z-link z-link-blue"
-          >link</a
-        ></span
-      >`),
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification-list/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotificationList} from \".\";\nimport {ToastNotificationPosition, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"../z-toast-notification/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst template = (\n  args,\n  notificationTransition: ToastNotificationTransition = ToastNotificationTransition.SLIDE_IN_DOWN,\n  slottedMessage?: TemplateResult\n): TemplateResult =>\n  html`<div class=\"z-toast-notification-container\">\n    <z-toast-notification-list\n      position=\"${args.position}\"\n      newestontop=\"${args.newestontop}\"\n    >\n      ${slottedMessage\n        ? html`<z-toast-notification\n            slot=\"toasts\"\n            type=\"dark\"\n            heading=\"Notification\"\n            .transition=${notificationTransition}\n            draggablepercentage=\"50\"\n            autoclose=\"18000\"\n            closebutton\n          >\n            ${slottedMessage}\n          </z-toast-notification>`\n        : html`<z-toast-notification\n            slot=\"toasts\"\n            type=\"dark\"\n            heading=\"Notification\"\n            message=\"Autoclose 18s.\"\n            .transition=${notificationTransition}\n            draggablepercentage=\"50\"\n            autoclose=\"18000\"\n            closebutton\n          >\n          </z-toast-notification>`}\n\n      <z-toast-notification\n        slot=\"toasts\"\n        type=\"dark\"\n        heading=\"Notification\"\n        message=\"Senza pulsante.\"\n        .transition=${notificationTransition}\n        draggablepercentage=\"50\"\n        closebutton\n      >\n      </z-toast-notification>\n      <z-toast-notification\n        slot=\"toasts\"\n        type=\"dark\"\n        heading=\"Notification\"\n        message=\"Con pulsante\"\n        .transition=${notificationTransition}\n        draggablepercentage=\"50\"\n        closebutton\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </z-toast-notification-list>\n  </div>`;\n\nconst StoryMeta = {\n  title: \"ZToastNotificationList\",\n  component: \"z-toast-notification-list\",\n  argTypes: {\n    position: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotificationPosition),\n    },\n  },\n  args: {\n    newestontop: true,\n  },\n  render: (args) => template(args),\n} satisfies Meta<ZToastNotificationList>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotificationList>;\n\nexport const TopLeftSlideInDown = {\n  args: {\n    position: ToastNotificationPosition.TOP_LEFT,\n  },\n} satisfies Story;\n\nexport const TopLeftSlideInRight = {\n  args: {\n    position: ToastNotificationPosition.TOP_LEFT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),\n} satisfies Story;\n\nexport const TopCentre = {\n  args: {\n    position: ToastNotificationPosition.TOP_CENTRE,\n  },\n} satisfies Story;\n\nexport const TopRightSlideInDown = {\n  args: {\n    position: ToastNotificationPosition.TOP_RIGHT,\n  },\n} satisfies Story;\n\nexport const TopRightSlideInLeft = {\n  args: {\n    position: ToastNotificationPosition.TOP_RIGHT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),\n} satisfies Story;\n\nexport const BottomRightSlideInUp = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_RIGHT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),\n} satisfies Story;\n\nexport const BottomRightSlideInLeft = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_RIGHT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),\n} satisfies Story;\n\nexport const BottomCentre = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_CENTRE,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),\n} satisfies Story;\n\nexport const BottomCentreSlideInUp = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_LEFT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),\n} satisfies Story;\n\nexport const BottomLeftSlideInRight = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_LEFT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),\n} satisfies Story;\n\nexport const TopLeftWithSlottedMessage = {\n  args: {position: ToastNotificationPosition.TOP_LEFT},\n  render: (args) =>\n    template(\n      args,\n      ToastNotificationTransition.SLIDE_IN_DOWN,\n      html`<span slot=\"message\"\n        >Autoclose 18s con\n        <a\n          href=\"#\"\n          class=\"z-link z-link-blue\"\n          >link</a\n        ></span\n      >`\n    ),\n} satisfies Story;\n"]}

package/dist/collection/components/z-toggle-button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,aAAa;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;YAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV;YACD,IAAI,CAAC,KAAK,CACJ,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-toggle-button/index.stories.js

@@ -1,23 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZToggleButton",
-    args: {
-        label: "Toggle",
-        ariaLabel: "",
-        avoidclick: false,
-        isdisabled: false,
-        opened: false,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-toggle-button
-      label=${args.label}
-      .ariaLabel=${args.ariaLabel}
-      .avoidclick=${args.avoidclick}
-      .isdisabled=${args.isdisabled}
-      .opened=${args.opened}
-    ></z-toggle-button>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-button/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;QACjB,MAAM,EAAE,KAAK;KACd;CAC4B,CAAC;AAEhC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;mBACL,IAAI,CAAC,SAAS;oBACb,IAAI,CAAC,UAAU;oBACf,IAAI,CAAC,UAAU;gBACnB,IAAI,CAAC,MAAM;wBACH;CACP,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToggleButton} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZToggleButton\",\n  args: {\n    label: \"Toggle\",\n    ariaLabel: \"\",\n    avoidclick: false,\n    isdisabled: false,\n    opened: false,\n  },\n} satisfies Meta<ZToggleButton>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToggleButton>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-toggle-button\n      label=${args.label}\n      .ariaLabel=${args.ariaLabel}\n      .avoidclick=${args.avoidclick}\n      .isdisabled=${args.isdisabled}\n      .opened=${args.opened}\n    ></z-toggle-button>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-toggle-switch/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAQ3C,MAAM,OAAO,aAAa;;wBAGH,KAAK;6BAIT,aAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoB,QAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC;YACF,8DACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;oBACL,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI;oBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED;oBACE,8DAAQ,CACH;gBACP,6DACE,KAAK,EAAE;wBACL,SAAS,EAAE,IAAI;wBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;qBACtB;oBAED,6DAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,IAAI,CACf,+DACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-toggle-switch/index.stories.js

@@ -1,27 +0,0 @@
-import { html } from "lit";
-import { LabelPosition } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZToggleSwitch",
-    argTypes: {
-        labelPosition: {
-            options: Object.values(LabelPosition),
-            control: { type: "radio" },
-        },
-    },
-};
-export default StoryMeta;
-export const Default = {
-    args: {
-        labelPosition: LabelPosition.LEFT,
-        disabled: false,
-    },
-    render: (args) => html `
-    <z-toggle-switch
-      .labelPosition=${args.labelPosition}
-      disabled=${args.disabled}
-      >Toggle
-    </z-toggle-switch>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-switch/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;YACrC,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC;SACzB;KACF;CAC4B,CAAC;AAEhC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,aAAa,EAAE,aAAa,CAAC,IAAI;QACjC,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAED,IAAI,CAAC,aAAa;iBACxB,IAAI,CAAC,QAAQ;;;GAG3B;CACgC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToggleSwitch} from \".\";\nimport {LabelPosition} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZToggleSwitch\",\n  argTypes: {\n    labelPosition: {\n      options: Object.values(LabelPosition),\n      control: {type: \"radio\"},\n    },\n  },\n} satisfies Meta<ZToggleSwitch>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  args: {\n    labelPosition: LabelPosition.LEFT,\n    disabled: false,\n  },\n  render: (args) => html`\n    <z-toggle-switch\n      .labelPosition=${args.labelPosition}\n      disabled=${args.disabled}\n      >Toggle\n    </z-toggle-switch>\n  `,\n} satisfies StoryObj<ZToggleSwitch>;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tool/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {ZColorPickerCustomEvent, ZToolCustomEvent, ZTooltipCustomEvent} from \"../../components\";\nimport {IconName} from \"../../constants/iconset\";\nimport {containsElement} from \"../../utils/utils\";\n\n/**\n * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.\n * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.\n */\n@Component({\n  tag: \"z-tool\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZTool {\n  @Element() hostElement: HTMLZToolElement;\n\n  /** Tool icon */\n  @Prop()\n  icon: IconName;\n\n  /** Text displayed inside the tooltip. */\n  @Prop()\n  tooltip?: string;\n\n  /** Preferred tooltip position. Defaults to true. */\n  @Prop()\n  tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n  /** Accessible label for the tool trigger. Falls back to tooltip content. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Visual active state. */\n  @Prop({reflect: true})\n  active = false;\n\n  /** Disabled state. */\n  @Prop({reflect: true})\n  disabled = false;\n\n  /** Open state. */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * The value of this prop is passed down to the `z-icon` component inside the tool.\n   *\n   * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n   * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n   */\n  @Prop({mutable: true})\n  indicatorColor?: string;\n\n  @State()\n  tooltipOpen = false;\n\n  @State()\n  hasSlottedContent = false;\n\n  @State()\n  isMobile = false;\n\n  /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n  @State()\n  hasNestedOpenTools = false;\n\n  /** Emitted when the open state changes. */\n  @Event()\n  toggleSubmenu: EventEmitter;\n\n  /** Emitted when the tooltip open state changes. */\n  @Event()\n  toggleTooltip: EventEmitter;\n\n  private buttonRef?: HTMLButtonElement;\n\n  private iconRef?: HTMLElement;\n\n  private tooltipRef?: HTMLZTooltipElement;\n\n  private hoverDelay?: ReturnType<typeof setTimeout>;\n\n  /** Indicates if the tool is nested inside another tool. */\n  private isNested = false;\n\n  /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n  private mainToolbar?: HTMLZToolbarElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /**\n   * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n   */\n  private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.hoverDelay = setTimeout(() => {\n      this.tooltipOpen = true;\n    }, 1000);\n  };\n\n  /**\n   * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n   */\n  private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  };\n\n  /**\n   * Handles click events on the tool's button element.\n   * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n   * or the first item if no active/selected item is found.\n   */\n  private handleClick = (): void => {\n    if (this.disabled || !this.hasSlottedContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n      if (colorPicker) {\n        colorPicker.setFocus();\n\n        return;\n      }\n\n      // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n      const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n        \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n      ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n      firstActiveOrEnabledNestedTool?.setFocus();\n    }\n  };\n\n  /**\n   * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n   */\n  private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n    if ((event.target as HTMLElement) === this.tooltipRef) {\n      return;\n    }\n\n    this.tooltipOpen = event.detail.open;\n  };\n\n  @Watch(\"open\")\n  handleOpenChange(): void {\n    this.toggleSubmenu.emit(this.open);\n  }\n\n  @Watch(\"tooltipOpen\")\n  handleTooltipOpenChange(): void {\n    this.toggleTooltip.emit(this.tooltipOpen);\n  }\n\n  /**\n   * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open || this.hasNestedOpenTools) {\n      return;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ESC:\n        event.stopPropagation();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.TAB:\n        if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n          this.open = false;\n        }\n        break;\n    }\n  }\n\n  /**\n   * Close the popover on clicks outside the component, only if there are no nested open tools.\n   * In that case any outside click should close the nested submenu(s) first.\n   */\n  @Listen(\"click\", {target: \"body\"})\n  onOutsideClick(event: MouseEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  @Listen(\"toggleSubmenu\")\n  onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n    if (ev.target === this.hostElement) {\n      return;\n    }\n\n    if (ev.detail === true) {\n      this.hasNestedOpenTools = true;\n\n      return;\n    }\n\n    this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n  }\n\n  /**\n   * Handles the `colorSelected` event from a nested `z-color-picker` component.\n   * Updates the `indicatorColor` and closes the tool's popover.\n   */\n  @Listen(\"colorSelected\")\n  handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n    if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n      return;\n    }\n\n    this.indicatorColor = event.detail;\n    this.open = false;\n    this.setFocus();\n  }\n\n  /**\n   * Close the submenu when focus moves outside the tool.\n   */\n  @Listen(\"focusin\", {target: \"body\", passive: true})\n  handleExternalFocusin(ev: FocusEvent): void {\n    const target = ev.target as Node;\n    if (!containsElement(this.hostElement, target)) {\n      this.open = false;\n    }\n  }\n\n  /** Focuses the tool's button element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.disabled) {\n      return;\n    }\n\n    setTimeout(() => {\n      this.buttonRef?.focus();\n    }, 50);\n  }\n\n  /** Sets the tab index of the tool's internal button element. */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    if (!this.buttonRef) {\n      return;\n    }\n\n    this.buttonRef.tabIndex = this.disabled ? -1 : value;\n  }\n\n  /** Closes the tooltip. */\n  @Method()\n  async closeTooltip(): Promise<void> {\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  }\n\n  componentWillLoad(): void {\n    this.hasSlottedContent = this.hostElement.children.length > 0;\n    this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n    this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n    this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.hoverDelay);\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  render(): HTMLZToolElement {\n    return (\n      <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n        <button\n          class=\"z-tool\"\n          type=\"button\"\n          ref={(el) => (this.buttonRef = el)}\n          aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n          aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n          aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n          aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleTooltipOpen}\n          onMouseLeave={this.handleTooltipClose}\n          onFocus={this.handleTooltipOpen}\n          onBlur={this.handleTooltipClose}\n        >\n          <z-icon\n            ref={(el) => (this.iconRef = el)}\n            name={this.icon}\n            indicatorColor={this.indicatorColor}\n          ></z-icon>\n        </button>\n        {this.tooltip && (\n          <z-tooltip\n            class=\"z-tool-tooltip\"\n            ref={(el) => (this.tooltipRef = el)}\n            bindTo={this.iconRef}\n            open={this.tooltipOpen && !this.open}\n            position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n            dark\n            onMouseLeave={this.handleTooltipClose}\n            onBlur={this.handleTooltipClose}\n            onOpenChange={this.onTooltipOpenChange}\n          >\n            <span class=\"body-4\">{this.tooltip}</span>\n          </z-tooltip>\n        )}\n        {this.hasSlottedContent && (\n          <z-popover\n            class=\"z-tool-submenu\"\n            open={this.open}\n            bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n            center\n            /* disable auto-close to prevent unwanted close behaviors on mobile,\n            when the bound element is the main toolbar */\n            closable={false}\n            position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n          >\n            <slot></slot>\n          </z-popover>\n        )}\n      </Host>\n    );\n  }\n}\n"]}