@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

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/** Map of slide-in transitions to their corresponding slide-out transitions */\nconst SLIDE_OUT_TRANSITION_MAP = {\n  [ToastNotificationTransition.SLIDE_IN_DOWN]: ToastNotificationTransition.SLIDE_OUT_UP,\n  [ToastNotificationTransition.SLIDE_IN_UP]: ToastNotificationTransition.SLIDE_OUT_DOWN,\n  [ToastNotificationTransition.SLIDE_IN_LEFT]: ToastNotificationTransition.SLIDE_OUT_RIGHT,\n  [ToastNotificationTransition.SLIDE_IN_RIGHT]: ToastNotificationTransition.SLIDE_OUT_LEFT,\n};\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  /** Indicates if the toast notification has a slotted button. */\n  @State()\n  hasSlottedButton: boolean;\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\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  private close(closingTransition: 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 (closingTransition) {\n      this.hostElement.classList.add(closingTransition);\n    } else {\n      this.hostElement.parentNode.removeChild(this.hostElement);\n    }\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 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.close(\n            e.direction === Hammer.DIRECTION_LEFT\n              ? ToastNotificationTransition.SLIDE_OUT_LEFT\n              : ToastNotificationTransition.SLIDE_OUT_RIGHT,\n            true\n          );\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.close(SLIDE_OUT_TRANSITION_MAP[this.transition], false), time);\n  }\n\n  private checkSlottedButton(): void {\n    this.hasSlottedButton = !!this.hostElement.querySelector(\"[slot='button']\");\n  }\n\n  componentWillLoad(): void {\n    this.validateAutoclose();\n    this.checkSlottedButton();\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  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\"--percentuale\": `${this.percentage}%`}}\n        class={{[this.transition]: !!this.transition, [this.type]: !!this.type}}\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        <div class=\"toast-notification-container\">\n          <div class=\"toast-notification-content\">\n            <div class=\"toast-notification-text\">\n              {this.heading && <span class=\"title\">{this.heading}</span>}\n              <span class=\"message\">\n                <slot name=\"message\">{this.message && <span innerHTML={DOMPurify.sanitize(this.message)} />}</slot>\n              </span>\n            </div>\n            <div\n              class=\"button-container\"\n              hidden={!this.hasSlottedButton}\n            >\n              <slot\n                name=\"button\"\n                onSlotchange={() => this.checkSlottedButton()}\n              />\n            </div>\n          </div>\n          {this.closebutton && (\n            <button\n              class=\"close-button\"\n              aria-label=\"Chiudi notifica\"\n              onClick={() => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true)}\n              onKeyDown={(e) => {\n                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {\n                  e.preventDefault();\n                  this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);\n                }\n              }}\n            >\n              <z-icon name=\"multiply-circled\" />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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":"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","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: \"inline-radio\",\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  parameters: {controls: {exclude: [\"message\"]}},\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  parameters: {controls: {exclude: [\"message\"]}},\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.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification-list/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,yBAAyB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AACnF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,QAAQ,GAAG,CACf,IAAI,EACJ,yBAAsD,2BAA2B,CAAC,aAAa,EAC/F,cAA+B,EACf,EAAE,CAClB,IAAI,CAAA;;kBAEY,IAAI,CAAC,QAAQ;qBACV,IAAI,CAAC,WAAW;;QAE7B,cAAc;IACd,CAAC,CAAC,IAAI,CAAA;;;;0BAIY,sBAAsB;;;;;cAKlC,cAAc;kCACM;IAC1B,CAAC,CAAC,IAAI,CAAA;;;;;0BAKY,sBAAsB;;;;;kCAKd;;;;;;;sBAOZ,sBAAsB;;;;;;;;;;sBAUtB,sBAAsB;;;;;;;;;;;SAWnC,CAAC;AAEV,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,2BAA2B;IACtC,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,yBAAyB,CAAC;SAClD;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;KAClB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACM,CAAC;AAEzC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,QAAQ;KAC7C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,QAAQ;KAC7C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,cAAc,CAAC;CAC7D,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,UAAU;KAC/C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,SAAS;KAC9C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,SAAS;KAC9C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,aAAa,CAAC;CAC5D,CAAC;AAElB,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,YAAY;KACjD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,WAAW,CAAC;CAC1D,CAAC;AAElB,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,YAAY;KACjD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,aAAa,CAAC;CAC5D,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,aAAa;KAClD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,WAAW,CAAC;CAC1D,CAAC;AAElB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,WAAW;KAChD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,WAAW,CAAC;CAC1D,CAAC;AAElB,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,WAAW;KAChD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,cAAc,CAAC;CAC7D,CAAC;AAElB,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE,EAAC,QAAQ,EAAE,yBAAyB,CAAC,QAAQ,EAAC;IACpD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,QAAQ,CACN,IAAI,EACJ,2BAA2B,CAAC,aAAa,EACzC,IAAI,CAAA;;;;;;;QAOF,CACH;CACY,CAAC","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.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.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":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnH,OAAO,EAAqB,YAAY,EAAE,eAAe,EAAC,MAAM,aAAa,CAAC;AAG9E,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD;;;GAGG;AAMH,MAAM,OAAO,KAAK;;QAuEhB,2DAA2D;QACnD,aAAQ,GAAG,KAAK,CAAC;QAWzB;;WAEG;QACK,sBAAiB,GAAG,CAAC,EAA2B,EAAQ,EAAE;YAChE,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC9E,OAAO;YACT,CAAC;YAED,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE;gBAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC;QAEF;;WAEG;QACK,uBAAkB,GAAG,CAAC,EAA2B,EAAQ,EAAE;;YACjE,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,MAAC,EAAE,CAAC,aAA6B,0CAAE,OAAO,CAAC,WAAW,CAAC,MAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBACjG,OAAO;YACT,CAAC;YAED,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC;QAEF;;;;WAIG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC7C,OAAO;YACT,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,yBAAyB,CAAmC,CAAC;gBAChH,IAAI,WAAW,EAAE,CAAC;oBAChB,WAAW,CAAC,QAAQ,EAAE,CAAC;oBAEvB,OAAO;gBACT,CAAC;gBAED,sGAAsG;gBACtG,MAAM,8BAA8B,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CACpE,kDAAkD,CACnD,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0CAA0C,CAAC,CAA4B,CAAC;gBAE5G,8BAA8B,aAA9B,8BAA8B,uBAA9B,8BAA8B,CAAE,QAAQ,EAAE,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,wBAAmB,GAAG,CAAC,KAA2C,EAAQ,EAAE;YAClF,IAAK,KAAK,CAAC,MAAsB,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBACtD,OAAO;YACT,CAAC;YAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACvC,CAAC,CAAC;;;+BArIiC,eAAe,CAAC,GAAG;;sBAQ7C,KAAK;wBAIH,KAAK;oBAIT,KAAK;;2BAcE,KAAK;iCAGC,KAAK;wBAGd,KAAK;kCAIK,KAAK;;IAgG1B,gBAAgB;QACd,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAGD,uBAAuB;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,CAAC;IAED;;OAEG;IAEH,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,YAAY,CAAC,GAAG;gBACnB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,MAAM;YACR,KAAK,YAAY,CAAC,GAAG;gBACnB,IAAI,KAAK,CAAC,QAAQ,IAAK,KAAK,CAAC,MAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;oBACnG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBACpB,CAAC;gBACD,MAAM;QACV,CAAC;IACH,CAAC;IAED;;;OAGG;IAEH,cAAc,CAAC,KAAiB;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAgB,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACvF,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGD,kBAAkB,CAAC,EAA6B;QAC9C,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;YAE/B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9G,CAAC;IAED;;;OAGG;IAEH,mBAAmB,CAAC,KAAkD;QACpE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAiB,CAAC,EAAE,CAAC;YAC7E,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;QACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED;;OAEG;IAEH,qBAAqB,CAAC,EAAc;QAClC,MAAM,MAAM,GAAG,EAAE,CAAC,MAAc,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,CAAC;YAC/C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAED,yCAAyC;IAEzC,KAAK,CAAC,QAAQ;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;;YACd,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;QAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC;IAED,gEAAgE;IAEhE,KAAK,CAAC,WAAW,CAAC,KAAa;QAC7B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACvD,CAAC;IAED,0BAA0B;IAE1B,KAAK,CAAC,YAAY;QAChB,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;QACjE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,oCAAoC,CAAC,CAAC;QAClF,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAE3E,IAAI,CAAC,GAAG,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;QAC5C,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAsB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;QAClF,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;IACnC,CAAC;IAED,oBAAoB;;QAClB,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9B,MAAA,IAAI,CAAC,GAAG,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACnE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,EAAC;YACpD,+DACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,kBACpB,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAClE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,mBACnE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAC9C,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAC3D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,MAAM,EAAE,IAAI,CAAC,kBAAkB;gBAE/B,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,cAAc,EAAE,IAAI,CAAC,cAAc,GAC3B,CACH;YACR,IAAI,CAAC,OAAO,IAAI,CACf,kEACE,KAAK,EAAC,gBAAgB,EACtB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACnC,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,IAAI,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EACvE,IAAI,QACJ,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,YAAY,EAAE,IAAI,CAAC,mBAAmB;gBAEtC,6DAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,OAAO,CAAQ,CAChC,CACb;YACA,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAC/E,MAAM;gBACN;6DAC6C;gBAC7C,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM;gBAEtE,8DAAa,CACH,CACb,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tool/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZTool} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport \"../z-color-picker/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZTool\",\n  component: \"z-tool\",\n  argTypes: {\n    tooltipPosition: {\n      options: Object.values(PopoverPosition),\n      control: {type: \"select\"},\n    },\n    indicatorColor: {\n      control: \"color\",\n    },\n    icon: {\n      options: Object.keys(ICONS),\n      control: {type: \"select\"},\n    },\n  },\n  args: {\n    active: false,\n    disabled: false,\n    htmlAriaLabel: \"Impostazioni\",\n    icon: \"gear\",\n    indicatorColor: \"\",\n    tooltip: \"Impostazioni\",\n    tooltipPosition: PopoverPosition.TOP,\n  },\n} satisfies Meta<ZTool>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZTool>;\n\nexport const Default = {\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Active = {\n  args: {\n    active: true,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const WithToolbar = {\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      >\n        <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n          <z-tool\n            icon=\"gear\"\n            tooltip=\"Impostazioni\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"download\"\n            tooltip=\"Scarica\"\n          ></z-tool>\n          <z-tool\n            icon=\"upload\"\n            tooltip=\"Carica\"\n          ></z-tool>\n          <z-tool\n            icon=\"copy\"\n            tooltip=\"Copia\"\n          ></z-tool> </z-toolbar\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const ColorPicker = {\n  args: {\n    icon: \"bg-color\",\n    indicatorColor: \"#ff0000\",\n    tooltip: \"Colore di sfondo\",\n  },\n  parameters: {\n    docs: {\n      story: {\n        inline: false,\n        height: \"300px\",\n      },\n    },\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      >\n        <z-color-picker></z-color-picker>\n      </z-tool>\n    </div>`,\n} satisfies Story;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {ZToolCustomEvent} from \"../../components\";\n\n/**\n * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n *\n * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.\n */\n@Component({\n  tag: \"z-toolbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToolbar {\n  @Element() hostElement: HTMLZToolbarElement;\n\n  /** Accessible label for the toolbar. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Index of the currently focusable item (roving tabindex). */\n  @State()\n  currentFocusIndex = 0;\n\n  /** List of focusable tool elements. */\n  private toolItems: HTMLZToolElement[] = [];\n\n  componentDidLoad(): void {\n    this.collectToolItems();\n    this.updateTabIndexes();\n    // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n    let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n    mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n    this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n  }\n\n  /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n  private collectToolItems(): void {\n    this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n  }\n\n  /**\n   * Update the `tabindex` of all children tools based on the current focus index,\n   * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n   */\n  private updateTabIndexes(): void {\n    this.toolItems.forEach((tool, index) => {\n      tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n    });\n  }\n\n  private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n    const tool = this.toolItems[index];\n    if (!tool) {\n      return;\n    }\n\n    this.currentFocusIndex = index;\n    if (!tool.disabled) {\n      tool.setFocus();\n      this.updateTabIndexes();\n\n      return;\n    }\n\n    if (fallback === \"next\") {\n      this.focusNextTool();\n    } else {\n      this.focusPreviousTool();\n    }\n  }\n\n  private focusNextTool(): void {\n    const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n    this.focusToolAt(nextIndex);\n  }\n\n  private focusPreviousTool(): void {\n    const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n    this.focusToolAt(prevIndex, \"previous\");\n  }\n\n  /**\n   * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n   * to prevent multiple submenus from being open at the same time.\n   */\n  @Listen(\"toggleSubmenu\")\n  closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n    if (!targetTool || !this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool && tool.open) {\n        tool.open = false;\n      }\n    });\n  }\n\n  /**\n   * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n   * to prevent multiple tooltips from being open at the same time.\n   */\n  @Listen(\"toggleTooltip\")\n  closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = event.target;\n    if (!this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool) {\n        tool.closeTooltip();\n      }\n    });\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n    if (!toolElement || !this.toolItems.includes(toolElement)) {\n      return;\n    }\n\n    const focusedIndex = this.toolItems.indexOf(toolElement);\n    if (focusedIndex !== -1) {\n      this.currentFocusIndex = focusedIndex;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ARROW_RIGHT:\n        event.preventDefault();\n        this.focusNextTool();\n        break;\n      case KeyboardCode.ARROW_LEFT:\n        event.preventDefault();\n        this.focusPreviousTool();\n        break;\n    }\n  }\n\n  /**\n   * When focus enters the toolbar, update the current focus index to match the focused tool,\n   * so that roving tabindex is in sync with actual focus.\n   */\n  @Listen(\"focusin\")\n  handleFocusIn(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n    const index = this.toolItems.indexOf(toolElement);\n    if (index !== -1 && index !== this.currentFocusIndex) {\n      this.currentFocusIndex = index;\n      this.updateTabIndexes();\n    }\n  }\n\n  render(): HTMLZToolbarElement {\n    return (\n      <Host\n        role=\"toolbar\"\n        aria-label={this.htmlAriaLabel}\n      >\n        <slot\n          onSlotchange={() => {\n            this.collectToolItems();\n            this.updateTabIndexes();\n          }}\n        ></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;;;;;;GAQG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,aAAa,EAAE,oBAAoB;KACpC;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;;iBAEO,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAA4B,CAAC;YACpF,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC7B,CAAC;QACH,CAAC;;UAEC,KAAK,EAAE;aACJ;KACV;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;GAchD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,qBAAqB,EAAE,GAAG;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,eAAe,EAAE,QAAQ;SAC1B;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;wBAGA,IAAI,CAAC,aAAa;oCACN,IAAI,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoF5D;CACc,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToolbar} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-divider/index\";\nimport \"../z-tool/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZToolbarStoriesArgs = ZToolbar & CSSVarsArguments<\"--z-toolbar-columns\">;\n\n/**\n * This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * ### Active state\n * The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.\n * ### Visual grouping with `z-divider`\n * Use `<z-divider orientation=\"vertical\">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.\n * ### Mobile multiline layout with `--z-toolbar-columns`\n * Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.\n */\nconst StoryMeta = {\n  title: \"ZToolbar\",\n  component: \"z-toolbar\",\n  args: {\n    htmlAriaLabel: \"Toolbar principale\",\n  },\n  decorators: [\n    (story) =>\n      html`<div\n        class=\"toolbar-container\"\n        @click=${(e: Event) => {\n          const tool = (e.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n          if (tool && !tool.disabled && !tool.children.length) {\n            tool.active = !tool.active;\n          }\n        }}\n      >\n        ${story()}\n      </div>`,\n  ],\n} satisfies Meta<ZToolbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToolbarStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithDividers = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\n      ></z-tool>\n      <z-tool\n        icon=\"chevron-down\"\n        tooltip=\"Giù\"\n      ></z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n      <z-tool\n        icon=\"copy\"\n        tooltip=\"Copia\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithNestedToolbar = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"bg-color\"\n        tooltip=\"Scegli un colore\"\n      >\n        <z-color-picker></z-color-picker>\n      </z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Apri sotto-toolbar\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"bg-color\"\n            tooltip=\"Scegli un colore\"\n          >\n            <z-color-picker></z-color-picker>\n          </z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\n      ></z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\n      ></z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithDisabledTool = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n        disabled\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithActiveTool = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n        active\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const MultilineMobile = {\n  args: {\n    \"--z-toolbar-columns\": \"4\",\n  },\n  parameters: {\n    viewport: {\n      defaultViewport: \"mobile\",\n    },\n  },\n  render: (args) => html`\n    <z-toolbar\n      class=\"multiline-container\"\n      html-aria-label=${args.htmlAriaLabel}\n      style=\"--z-toolbar-columns: ${args[\"--z-toolbar-columns\"]};\"\n    >\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Aggiungi\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Aggiungi\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\n          <z-tool\n            icon=\"copy\"\n            tooltip=\"Copia\"\n          ></z-tool>\n          <z-tool\n            icon=\"edit\"\n            tooltip=\"Modifica\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"copy\"\n        tooltip=\"Copia 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni 3\"\n        disabled\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica 3\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAE5C;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAYf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,kEACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,SAAS,QACT,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YAE3D,8DAAa,CACH,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Listen, Prop, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n *\n * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n  tag: \"z-tooltip\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTooltip {\n  /** Tooltip position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /** Enable tooltip dark mode. */\n  @Prop({reflect: true})\n  dark = false;\n\n  /**\n   * The open state of the tooltip.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the tooltip.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Reflects `closable` prop of the popover.\n   * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * Propagation of the `openChange` event from the internal `z-popover` to allow listening to it directly on `z-tooltip`.\n   * This is necessary to keep the internal state of the `open` prop in sync when the popover is closed by user interaction instead of programmatically.\n   */\n  @Event()\n  openChange: EventEmitter<{open: boolean}>;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  @Listen(\"openChange\")\n  onPopoverOpenChange(): void {\n    this.open = this.popoverEl.open;\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <z-popover\n        ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n        bindTo={this.bindTo}\n        open={this.open}\n        position={this.position}\n        closable={this.closable}\n        center\n        showArrow\n        onOpenChange={(event) => this.openChange.emit(event.detail)}\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tooltip/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IAEtB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,eAAe,CAAC,IAAI;gBACpB,eAAe,CAAC,GAAG;gBACnB,eAAe,CAAC,MAAM;gBACtB,eAAe,CAAC,IAAI;gBACpB,eAAe,CAAC,KAAK;gBACrB,eAAe,CAAC,QAAQ;gBACxB,eAAe,CAAC,SAAS;gBACzB,eAAe,CAAC,WAAW;gBAC3B,eAAe,CAAC,YAAY;aAC7B;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,4BAA4B,EAAE,sBAAsB,EAAE;KACvD;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,4BAA4B,EAAE,wBAAwB;QACtD,UAAU,EAAE,eAAe,CAAC,IAAI;KACjC;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;oBAOJ,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;;6CAEoB,IAAI,CAAC,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;GAkB5E;CACc,CAAC;AAElB;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;qBAOH,IAAI,CAAC,QAAQ;iBACjB,IAAI,CAAC,IAAI;;;6CAGmB,IAAI,CAAC,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkC5E;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZTooltip} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTooltipStoriesArgs = ZTooltip & CSSVarsArguments<\"z-tooltip-theme--surface\">;\n\n/**\n * To be sure the algorithm finds the right container, when calculating the position, set its position to `position: relative;`\n * On the following Story, the \"position\" prop can be set only for the original positions of the `z-tooltip` by design.\n */\nconst StoryMeta = {\n  title: \"ZTooltip\",\n  component: \"z-tooltip\",\n\n  argTypes: {\n    \"position\": {\n      options: [\n        PopoverPosition.AUTO,\n        PopoverPosition.TOP,\n        PopoverPosition.BOTTOM,\n        PopoverPosition.LEFT,\n        PopoverPosition.RIGHT,\n        PopoverPosition.TOP_LEFT,\n        PopoverPosition.TOP_RIGHT,\n        PopoverPosition.BOTTOM_LEFT,\n        PopoverPosition.BOTTOM_RIGHT,\n      ],\n      control: {\n        type: \"select\",\n      },\n    },\n    \"--z-tooltip-theme--surface\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"dark\": false,\n    \"--z-tooltip-theme--surface\": \"var(--color-surface01)\",\n    \"position\": PopoverPosition.LEFT,\n  },\n} satisfies Meta<ZTooltipStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZTooltipStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"tooltip-container\">\n      <z-button\n        id=\"trigger\"\n        icon=\"plus-filled\"\n      ></z-button>\n      <z-tooltip\n        .position=${args.position}\n        .dark=${args.dark}\n        bind-to=\"#trigger\"\n        style=\"--z-tooltip-theme--surface: ${args[\"--z-tooltip-theme--surface\"]}\"\n      >\n        <div class=\"container\">\n          <z-button>Open</z-button>\n          <z-button>Save as</z-button>\n          <z-button>Share</z-button>\n        </div>\n      </z-tooltip>\n    </div>\n    <script>\n      document.querySelector(\"#trigger\").addEventListener(\"click\", () => {\n        if (document.querySelector(\"z-tooltip\").open) {\n          document.querySelector(\"z-tooltip\").open = false;\n        } else {\n          document.querySelector(\"z-tooltip\").open = true;\n        }\n      });\n    </script>\n  `,\n} satisfies Story;\n\n/**\n * When `closable` property is set to `false`, you can open the tooltip on hover and still click things outside without closing it.\n * In the Story below, the tooltip is opened hovering the button.\n */\nexport const AutocloseOff = {\n  render: (args) => html`\n    <div class=\"tooltip-container\">\n      <z-button\n        id=\"info-button\"\n        icon=\"arrow-clockwise-up-left\"\n      ></z-button>\n      <z-tooltip\n        .position=\"${args.position}\"\n        .dark=\"${args.dark}\"\n        closable=\"false\"\n        bind-to=\"#info-button\"\n        style=\"--z-tooltip-theme--surface: ${args[\"--z-tooltip-theme--surface\"]}\"\n      >\n        <span class=\"tooltip-info-text\">Clicca per fare girare la freccia</span>\n      </z-tooltip>\n    </div>\n    <script>\n      button = document.querySelector(\"#info-button\");\n      tooltip = document.querySelector(\"z-tooltip\");\n      button.addEventListener(\"mouseover\", () => {\n        tooltip.open = true;\n      });\n      button.addEventListener(\"focusin\", () => {\n        tooltip.open = true;\n      });\n      button.addEventListener(\"mouseout\", () => {\n        tooltip.open = false;\n      });\n      button.addEventListener(\"focusout\", () => {\n        tooltip.open = false;\n      });\n      button.onclick = () => {\n        switch (button.icon) {\n          case \"arrow-clockwise-up-left\":\n            button.icon = \"arrow-clockwise-up-right\";\n            break;\n          case \"arrow-clockwise-up-right\":\n            button.icon = \"arrow-clockwise-down-right\";\n            break;\n          case \"arrow-clockwise-down-right\":\n            button.icon = \"arrow-clockwise-up-left\";\n            break;\n        }\n      };\n    </script>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-visually-hidden/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-visually-hidden/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAO3C,MAAM,OAAO,eAAe;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-visually-hidden/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;8DAkBsD;CAC7D,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index\";\n\nexport default {\n  title: \"ZVisuallyHidden\",\n  component: \"z-visually-hidden\",\n};\n\nexport const Default = {\n  render: () =>\n    html`<h2 class=\"heading-2\">ZVisuallyHidden</h2>\n      <span\n        >This component visually hide an element while still allowing it to be exposed to assistive technologies (such\n        as screen readers).</span\n      ><span>\n        There are real world situations where visually hiding content may be appropriate:\n        <ul>\n          <li>Hide visually the text of <code>ZAriaAlert</code></li>\n          <li>\n            Take advantage of the behavior and semantics of a native element like a checkbox or radio button, but\n            replace it with a custom styled element visually.\n          </li>\n          <li>\n            Hide visually an <code>h1</code> because could be redundant for a sighted user but could be usefull for\n            navigation through ScreenReader rotor\n          </li>\n        </ul>\n      </span>\n      <z-visually-hidden><div>Hello</div></z-visually-hidden>`,\n};\n"]}

package/dist/collection/constants/breakpoints.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/constants/breakpoints.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,mDAAY,CAAA;IACZ,oDAAa,CAAA;IACb,sDAAc,CAAA;AAChB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB","sourcesContent":["/** Breakpoints for responsive design. The values are the max width of the screen for each breakpoint. */\nexport enum Breakpoints {\n  MOBILE = 767,\n  TABLET = 1151,\n  DESKTOP = 1365,\n}\n"]}

package/dist/collection/constants/icons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/constants/icons.tsx"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG;IACZ,YAAY,EAAE,UAAU;IACxB,WAAW,EAAE,aAAa;IAC1B,aAAa,EAAE,eAAe;CAC/B,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["const icons = {\n  iconuserlogo: \"user.png\",\n  iconarrowup: \"arrowUp.png\",\n  iconarrowdown: \"arrowDown.png\",\n};\n\nexport default icons;\n"]}