@zanichelli/albe-web-components 19.1.4-RC1 → 19.2.1-RC

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

@@ -1 +1 @@
-{"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"]}
+{"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

@@ -22,7 +22,7 @@ const StoryMeta = {
     argTypes: {
         type: {
             control: {
-                type: "select",
+                type: "inline-radio",
             },
             options: Object.values(ToastNotification),
         },
@@ -125,6 +125,7 @@ export const SlottedButtonLongText = {
 };
 export const SlottedMessage = {
     args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
+    parameters: { controls: { exclude: ["message"] } },
     render: (args) => html `<div class="toast-container">
       <z-toast-notification
         heading="${args.heading}"
@@ -150,6 +151,7 @@ export const SlottedMessage = {
 };
 export const SlottedMessageLongText = {
     args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
+    parameters: { controls: { exclude: ["message"] } },
     render: (args) => html `<div class="toast-container">
       <z-toast-notification
         heading="Titolo abbastanza lungo"

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

@@ -1 +1 @@
-{"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: \"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"]}
+{"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/styles.css

@@ -1,9 +1,19 @@
 :host {
-  display: inline-block;
-  width: 100vw;
-  min-width: 200px;
-
   --percentuale: 0;
+
+  display: flex;
+  width: 100%;
+  min-width: 200px;
+  max-width: 100dvw;
+  box-sizing: border-box;
+  background: var(--color-surface01);
+  border-radius: var(--border-size-large);
+  box-shadow: var(--shadow-3);
+  color: var(--color-default-text);
+  fill: var(--color-primary01-icon);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-rg);
 }
 
 :host(.slide-in-left) {
@@ -46,6 +56,116 @@
   animation-fill-mode: forwards;
 }
 
+.toast-notification-container {
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 2);
+  border-radius: var(--border-radius);
+  gap: calc(var(--space-unit) * 2);
+}
+
+.toast-notification-content {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: calc(var(--space-unit) * 2);
+}
+
+.toast-notification-content .toast-notification-text {
+  color: inherit;
+  letter-spacing: 0.16px;
+  line-height: 1.25rem;
+}
+
+.toast-notification-content .toast-notification-text .title {
+  margin-right: calc(var(--space-unit) / 2);
+  font-weight: var(--font-sb);
+}
+
+.close-button {
+  height: 1.125rem; /* same height of the icon */
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.close-button z-icon {
+  --z-icon-width: 1.125rem;
+  --z-icon-height: 1.125rem;
+
+  display: inline-block;
+  height: 1.25rem;
+}
+
+.close-button:focus:focus-visible {
+  border-radius: 50%;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host(.dark) {
+  background: var(--color-surface05);
+  color: var(--color-text-inverse);
+  fill: var(--color-inverse-icon);
+}
+
+:host(.dark) .close-button:focus:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--gray900),
+    0 0 2px 5px var(--blue25);
+}
+
+:host(.accent) {
+  background: var(--color-primary01);
+}
+
+:host(.error) {
+  background: var(--color-default-error);
+}
+
+:host(.success) {
+  background: var(--color-default-success);
+}
+
+:host(.warning) {
+  background: var(--color-default-warning);
+}
+
+:host(.accent),
+:host(.error),
+:host(.success) {
+  color: var(--color-text-inverse);
+  fill: var(--color-inverse-icon);
+}
+
+:host(.warning) .close-button {
+  fill: var(--color-default-icon);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host {
+    width: fit-content;
+    max-width: 50vw;
+  }
+
+  .toast-notification-content {
+    flex-wrap: nowrap;
+  }
+}
+
+/* Wide breakpoint */
+@media (min-width: 1366px) {
+  :host {
+    max-width: 33vw;
+  }
+}
+
 @keyframes slideinleft {
   0% {
     transform: translateX(100%);
@@ -139,123 +259,3 @@
     transform: translateY(100%);
   }
 }
-
-:host > #external-container {
-  display: flex;
-  min-height: calc(var(--space-unit) * 8.5);
-  box-sizing: border-box;
-  justify-content: space-between;
-  padding: calc(var(--space-unit) * 2) 14px calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
-  border-radius: var(--border-size-large);
-  box-shadow: var(--shadow-3);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  letter-spacing: 0.16px;
-}
-
-:host > #external-container > #inner-container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-:host > #external-container #inner-container #text {
-  padding: var(--space-unit) 0;
-  color: var(--color-text-inverse);
-  letter-spacing: 0.16px;
-  line-height: 20px;
-  text-align: start;
-}
-
-:host > #external-container #inner-container #text > .title {
-  margin-right: calc(var(--space-unit) / 2);
-  font-weight: var(--font-sb);
-}
-
-:host > #external-container #inner-container ::slotted([slot="button"]) {
-  margin-top: var(--space-unit);
-}
-
-:host > #external-container #icon {
-  padding-top: var(--space-unit);
-  margin: 0 calc(var(--space-unit) / 4);
-  cursor: pointer;
-  fill: var(--color-inverse-icon);
-}
-
-:host > #external-container #icon:focus-within {
-  margin: 0;
-}
-
-:host > #external-container #icon z-icon {
-  margin: 0 0 0 14px;
-}
-
-:host > #external-container #icon z-icon:focus {
-  display: inline-block;
-  padding: calc(var(--space-unit) / 4);
-  border-radius: 50%;
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host > #external-container.dark {
-  background: var(--color-surface05);
-}
-
-:host > #external-container.light {
-  background: var(--color-surface01);
-}
-
-:host > #external-container.light #icon {
-  fill: var(--color-primary01-icon);
-}
-
-:host > #external-container.light #inner-container #text,
-:host > #external-container.warning #inner-container #text {
-  color: var(--color-default-text);
-}
-
-:host > #external-container.accent {
-  background: var(--color-primary01);
-}
-
-:host > #external-container.error {
-  background: var(--color-default-error);
-}
-
-:host > #external-container.success {
-  background: var(--color-default-success);
-}
-
-:host > #external-container.warning {
-  background: var(--color-default-warning);
-}
-
-:host > #external-container.warning #icon {
-  fill: var(--color-default-icon);
-}
-
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host {
-    width: unset;
-    max-width: 50vw;
-  }
-
-  :host > #external-container #inner-container {
-    flex-direction: row;
-  }
-
-  :host > #external-container #inner-container ::slotted([slot="button"]) {
-    margin: 0 0 0 calc(var(--space-unit) * 2);
-  }
-}
-
-/* Wide breakpoint */
-@media (min-width: 1366px) {
-  :host {
-    max-width: 33vw;
-  }
-}

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

@@ -36,7 +36,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: '45792fe51cb8362de447af630fb19686018cbeef', name: "toasts" });
+        return h("slot", { key: 'fcca8c71a9eca7ada8de9d23d4930ec6796b2925', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,10 +15,10 @@ export class ZToggleButton {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '2a0abdb9874a70f75bed7b2407bbfcb26da3245c', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '6df0aee8dfd4785cd9787b2940c12cc3d680ef0c', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '56c5c803cf48530342b4fce72cdb75783b226c3f', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'ab52cd6023b492b5bba8086fd189112e5329c3ad', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
     static get is() { return "z-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,14 +22,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: 'd82db0fca4f7786bfed1b958d9eb3ba538a1df59' }, h("input", { key: 'ade4df962bf570c4bac896be7ca2c08ad78950c6', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'c0d26a77609ae2c3954bf1d249205706f3189051', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'b572a91e4ed2f91cbe0b7a393371425a5b9b896a' }, h("input", { key: 'acff3447044eba6dd7622feb954a03d5503111f1', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '58b70932d34e39bb1c078947eea614d6384b9660', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'db8ed72ffe4cc7a6a90de0e1707cf7ce16781d53' }, h("slot", { key: '7624e7d062a337ac90d45db4c9977ae4076b65e3' })), h("span", { key: 'b82c48fe14cb3485ed8055f7c7165078fb928d4e', class: {
+            } }, h("span", { key: '824e029aeb434813b35f72891d991f19a90daded' }, h("slot", { key: '37e8bad4378c65f4a3411fee47a960b9220af5d3' })), h("span", { key: '55eaf2b824ce8e91b77b5f8f2677724b2834fad6', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: 'eff2c6d5e3a9afcd16335d81bb799a272d559d22', class: "circle" }, this.checked && (h("z-icon", { key: '4787dd49b9be72d9ba601d10ec1d2b370875c386', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '41b7660f89b5ba9829782d3e6b041323357fdefa', class: "circle" }, this.checked && (h("z-icon", { key: 'ae68c35e2765c6eece7dcee8f7ad570a6fc0aa34', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }