@zanichelli/albe-web-components 2.31.2 → 2.33.1

package/{dist/cjs/z-slideshow.cjs.entry.js → www/build/z-slideshow.entry.js}

@@ -1,17 +1,13 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f4b351d.js');
-const utils = require('./utils-6d6841cc.js');
-require('./breakpoints-88c4fd6c.js');
+import { r as registerInstance, h, g as getElement } from './index-44936066.js';
+import { D as DeviceEnum } from './index-8f67b3da.js';
+import { a as convertJson, g as getDevice, h as handleKeyboardSubmit } from './utils-5e70920f.js';
+import './breakpoints-c386984e.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:inherit}:host>div{display:flex;flex-direction:column;width:inherit}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;top:50%;width:auto;cursor:pointer;transition:0.6s ease;margin:0 var(--space-unit);fill:var(--color-primary01);z-index:10}main .scroll.disabled{opacity:50%;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;transition:all 300ms;line-height:0px;overflow-y:hidden}footer{height:56px;width:100%;align-items:center;display:grid;grid-template-columns:2;grid-template-rows:2;grid-template-areas:\"center center\" \"left right\";border-top:var(--border-base) solid var(--color-surface02)}footer>div{align-items:center;width:100%}footer .footerCenter{grid-area:center}footer .footerLeft{grid-area:left}footer .footerRight{grid-area:right}footer .bulletContainer{display:flex;margin:0 auto;justify-content:center;align-items:center;min-height:60px}footer .bulletContainer .bullet{width:8px;height:8px;border-radius:50%;background-color:var(--bg-neutral-150);margin:var(--space-unit) 2px;pointer-events:none}footer .bulletContainer .bullet.selected{background-color:var(--bg-neutral-400)}@media only screen and (min-width: 768px){footer{grid-template-columns:1fr 2fr 1fr;grid-template-rows:1;grid-template-areas:\"left center right\";height:76px;border-top:var(--border-base) solid var(--color-surface02)}footer .bulletContainer .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bulletContainer .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);pointer-events:auto;cursor:pointer}}";
 
 const ZSlideshow = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     this.currentSlide = 0;
   }
   watchData() {
@@ -33,7 +29,7 @@ const ZSlideshow = class {
     var _a;
     switch (typeof this.data) {
       case "string":
-        return (this.links = (_a = utils.convertJson(this.data)) !== null && _a !== void 0 ? _a : []);
+        return (this.links = (_a = convertJson(this.data)) !== null && _a !== void 0 ? _a : []);
       default:
         return (this.links = this.data);
     }
@@ -53,23 +49,23 @@ const ZSlideshow = class {
     });
   }
   setDevice() {
-    this.device = utils.getDevice();
+    this.device = getDevice();
   }
   setCurrentSlide(index) {
     this.currentSlide = index;
   }
   getBulletDimension() {
     switch (this.device) {
-      case index$1.DeviceEnum.mobile:
+      case DeviceEnum.mobile:
         return 24;
-      case index$1.DeviceEnum.tablet:
+      case DeviceEnum.tablet:
         return 32;
       default:
         return 40;
     }
   }
   renderSlides(items) {
-    return (index.h("div", { id: "slides" }, items.map((item, i) => (index.h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, index.h("img", { src: item }))))));
+    return (h("div", { id: "slides" }, items.map((item, i) => (h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, h("img", { src: item }))))));
   }
   renderScroll(direction) {
     let disabled = false, nextSlide = this.currentSlide;
@@ -81,32 +77,32 @@ const ZSlideshow = class {
       disabled = this.currentSlide === this.links.length - 1;
       nextSlide++;
     }
-    return (index.h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
+    return (h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
         !disabled && this.setCurrentSlide(nextSlide);
       }, onKeyUp: (e) => !disabled &&
-        utils.handleKeyboardSubmit(e, () => {
+        handleKeyboardSubmit(e, () => {
           this.setCurrentSlide(nextSlide);
         }), tabindex: 0, role: "button" }));
   }
   renderSlideshowMain() {
-    return (index.h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
+    return (h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
   }
   renderBullet(i) {
-    return (index.h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => utils.handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
+    return (h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
   }
   renderSlideshowFooter() {
-    return (index.h("footer", null, index.h("div", { class: "footerLeft" }, index.h("slot", { name: "footer-left" })), index.h("div", { class: "footerCenter" }, index.h("div", { class: "bulletContainer" }, Object.keys(this.links).map(i => this.renderBullet(parseInt(i))))), index.h("div", { class: "footerRight" }, index.h("slot", { name: "footer-right" }))));
+    return (h("footer", null, h("div", { class: "footerLeft" }, h("slot", { name: "footer-left" })), h("div", { class: "footerCenter" }, h("div", { class: "bulletContainer" }, Object.keys(this.links).map(i => this.renderBullet(parseInt(i))))), h("div", { class: "footerRight" }, h("slot", { name: "footer-right" }))));
   }
   render() {
     if (!this.links || !this.links.length)
-      return index.h("div", null);
-    return (index.h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
+      return h("div", null);
+    return (h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
   }
-  get el() { return index.getElement(this); }
+  get el() { return getElement(this); }
   static get watchers() { return {
     "data": ["watchData"]
   }; }
 };
 ZSlideshow.style = stylesCss;
 
-exports.z_slideshow = ZSlideshow;
+export { ZSlideshow as z_slideshow };

package/www/build/z-status-tag.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, e as Host } from './index-44936066.js';
+import { S as StatusTagStatus } from './index-8f67b3da.js';
+import { c as classnames } from './index-8067f807.js';
+import './_commonjsHelpers-cb1cd7bb.js';
+
+const stylesCss = ":host{--z-icon-width:14px;--z-icon-height:14px;font-family:var(--font-family-sans);height:22px;border-radius:var(--border-radius);padding-right:4px;padding-left:4px;text-transform:uppercase;display:inline-flex;align-items:center}:host(.expandable)>z-icon{margin-right:0;transition:margin-right 0.3s ease-out 0.2s}:host(:not(.expandable))>z-icon:not(:last-child),:host(.expandable:hover)>z-icon:not(:last-child){margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}:host(.expandable)>span{max-width:0;transition:max-width 0.3s ease-out 0.2s;white-space:nowrap;overflow:hidden}:host(.expandable:hover)>span{max-width:20rem;transition:max-width 0.3s ease-out 0s}:host([status=\"warning\"]){background-color:var(--status-warning-yellow-lighter);color:var(--status-warning-yellow-dark);fill:var(--status-warning-yellow-dark)}:host([status=\"warning\"].light){background-color:transparent;color:var(--status-warning-yellow-dark);fill:var(--status-warning-yellow-dark)}:host([status=\"warning\"].dark){background-color:var(--status-warning-yellow-dark);color:var(--status-warning-yellow-lighter);fill:var(--status-warning-yellow-lighter)}:host([status=\"error\"]){background-color:var(--status-error-red-lighter);color:var(--status-error-red-dark);fill:var(--status-error-red-dark)}:host([status=\"error\"].light){background-color:transparent;color:var(--status-error-red-dark);fill:var(--status-error-red-dark)}:host([status=\"error\"].dark){background-color:var(--status-error-red-dark);color:var(--status-error-red-lighter);fill:var(--status-error-red-lighter)}:host([status=\"success\"]){background-color:var(--status-success-green-lighter);color:var(--status-success-green-dark);fill:var(--status-success-green-dark)}:host([status=\"success\"].light){background-color:transparent;color:var(--status-success-green-dark);fill:var(--status-success-green-dark)}:host([status=\"success\"].dark){background-color:var(--status-success-green-dark);color:var(--status-success-green-lighter);fill:var(--status-success-green-lighter)}:host([status=\"default\"]){background-color:var(--myz-blue-lighter);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host([status=\"default\"].light){background-color:transparent;color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host([status=\"default\"].dark){background-color:var(--myz-blue-dark);color:var(--myz-blue-lighter);fill:var(--myz-blue-lighter)}:host([status=\"neutral\"]){background-color:var(--bg-grey-050);color:var(--text-grey-800);fill:var(--text-grey-800)}:host([status=\"neutral\"].light){background-color:transparent;color:var(--text-grey-800);fill:var(--text-grey-800)}:host([status=\"neutral\"].dark){background-color:var(--bg-grey-800);color:var(--text-white);fill:var(--text-white)}";
+
+const ZStatusTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** [optional] Status tag color */
+    this.status = StatusTagStatus.default;
+    if (!this.icon && !this.text) {
+      console.warn("z-status-tag must contain at least one prop between icon and text");
+    }
+  }
+  render() {
+    return (h(Host, { class: classnames(this.variant, "body-5-sb", {
+        expandable: this.expandable && this.icon && this.text,
+      }) }, this.icon && h("z-icon", { name: this.icon }), this.text && h("span", null, this.text)));
+  }
+};
+ZStatusTag.style = stylesCss;
+
+export { ZStatusTag as z_status_tag };

package/www/build/z-stepper-item.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;top:calc(var(--space-unit) * 4);left:calc(var(--space-unit) * 3);right:calc(var(--space-unit) * 2);z-index:1;content:'';display:block;width:auto;margin:0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);border-bottom:solid 2px var(--bg-grey-700)}.stepper-item{display:flex;flex-direction:column;align-items:center;width:calc(var(--space-unit) * 5);padding:0;color:inherit;font-family:inherit;font-size:18px;text-decoration:none;line-height:28px;background:transparent;border:0;outline:0;appearance:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));text-align:center}:host(:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}.indicator{content:counter(stepper);box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);margin:calc(var(--space-unit) * 2);font-size:14px;font-weight:var(--font-sb);line-height:1;color:var(--myz-blue);background:var(--bg-white);border:2px solid var(--myz-blue);border-radius:50%}:host([pressed]:not([disabled])) .indicator{color:var(--text-white);background:var(--myz-blue-dark);border-color:var(--myz-blue-dark)}:host(:not([disabled]):focus-within) .indicator{box-shadow:0px 0px 2px 2px var(--accent-dark)}:host([disabled]) .indicator{color:var(--text-grey-700);background:var(--bg-grey-200);border-color:currentColor}@media only screen and (min-width: 768px){:host{width:calc(var(--space-unit) * 10)}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10)}.stepper-item span{display:block}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
+
+const ZStepperItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    if (this.href) {
+      return (h("a", { href: !this.disabled && this.href, class: "stepper-item" }, h("div", { class: "indicator" }, this.index), h("span", null, h("slot", null))));
+    }
+    return (h("button", { class: "stepper-item", disabled: this.disabled }, h("div", { class: "indicator" }, this.index), h("span", null, h("slot", null))));
+  }
+};
+ZStepperItem.style = stylesCss;
+
+export { ZStepperItem as z_stepper_item };

package/www/build/z-stepper.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = ":host{box-sizing:border-box;position:relative;display:flex;flex-direction:row;width:100%;max-width:100%;margin:0;padding:0;font-family:var(--dashboard-font);font-weight:var(--font-rg);list-style:none}@media only screen and (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}";
+
+const ZStepper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("slot", null));
+  }
+};
+ZStepper.style = stylesCss;
+
+export { ZStepper as z_stepper };

package/{dist/cjs/z-toast-notification-list.cjs.entry.js → www/build/z-toast-notification-list.entry.js}

@@ -1,15 +1,11 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f4b351d.js');
+import { r as registerInstance, h, e as Host, g as getElement } from './index-44936066.js';
+import { l as ToastNotificationPositionsEnum } from './index-8f67b3da.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:fixed;display:flex;flex-direction:column;flex-wrap:nowrap;z-index:10000;margin-bottom:calc(var(--space-unit) * 2);margin-top:calc(var(--space-unit) * 2)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host(.bottom-centre),:host(.bottom-right),:host(.bottom-left){justify-content:flex-end;align-items:flex-end;bottom:0}:host(.top-left),:host(.top-right),:host(.top-centre){justify-content:flex-start;align-items:flex-start;top:0}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host(.top-centre){justify-content:flex-start;align-items:center;top:0;left:50%;transform:translateX(-50%)}:host(.top-left){justify-content:flex-start;align-items:flex-start;top:0;left:0}:host(.top-right){justify-content:flex-start;align-items:flex-end;top:0;right:0}:host(.bottom-centre){justify-content:flex-end;align-items:center;bottom:0;left:50%;transform:translateX(-50%)}:host(.bottom-right){justify-content:flex-end;align-items:flex-end;bottom:0;right:0}:host(.bottom-left){justify-content:flex-end;align-items:flex-start;bottom:0;left:0}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
 
 const ZToastNotificationList = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     /**Set the entry position of new notification in the list */
     this.newestontop = true;
     this.slotChangeHandler = () => {
@@ -42,15 +38,15 @@ const ZToastNotificationList = class {
     this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler);
   }
   render() {
-    return (index.h(index.Host, { class: this.position
+    return (h(Host, { class: this.position
         ? this.position
-        : index$1.ToastNotificationPositionsEnum.topRight }, index.h("slot", { name: "toasts" })));
+        : ToastNotificationPositionsEnum.topRight }, h("slot", { name: "toasts" })));
   }
-  get hostElement() { return index.getElement(this); }
+  get hostElement() { return getElement(this); }
   static get watchers() { return {
     "newestontop": ["watchPropNewestontop"]
   }; }
 };
 ZToastNotificationList.style = stylesCss;
 
-exports.z_toast_notification_list = ZToastNotificationList;
+export { ZToastNotificationList as z_toast_notification_list };

package/{dist/cjs/z-toast-notification.cjs.entry.js → www/build/z-toast-notification.entry.js}

@@ -1,18 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f4b351d.js');
-const breakpoints = require('./breakpoints-88c4fd6c.js');
-const hammer = require('./hammer-6e321f0b.js');
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-44936066.js';
+import { j as ToastNotificationTransitionsEnum } from './index-8f67b3da.js';
+import { m as mobileBreakpoint } from './breakpoints-c386984e.js';
+import { h as hammer } from './hammer-52e2c4fe.js';
+import './_commonjsHelpers-cb1cd7bb.js';
 
 const stylesCss = ":host{display:inline-block;min-width:200px;width:100vw}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideindown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideoutleft{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(-100%);opacity:0%}}@keyframes slideoutright{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(100%);opacity:0%}}@keyframes slideoutup{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(-100%);opacity:0}}@keyframes slideoutdown{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(100%);opacity:0}}:host>#external-container{font-family:var(--font-family-sans);font-weight:var(--font-rg);border-radius:4px;font-size:14px;letter-spacing:0.16px;box-sizing:border-box;min-height:52px;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-3)}:host>#external-container.mobile-wrapped>#icon{align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}:host>#external-container #text{color:var(--color-white);line-height:20px;margin-right:calc(var(--space-unit) * 2);letter-spacing:0.16px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{cursor:pointer;fill:var(--color-white);margin-left:calc(var(--space-unit) * 2)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-icon01)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--grey800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";
 
 const ZToastNotification = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.toastClose = index.createEvent(this, "toastClose", 7);
+    registerInstance(this, hostRef);
+    this.toastClose = createEvent(this, "toastClose", 7);
     /** toast notification autoclose can be paused */
     this.pauseonfocusloss = true;
     /** toast notification can be draggable*/
@@ -58,7 +55,7 @@ const ZToastNotification = class {
     this.toastClose.emit();
   }
   componentWillLoad() {
-    this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
     this.validateAutoclose();
   }
   componentDidLoad() {
@@ -76,14 +73,14 @@ const ZToastNotification = class {
   }
   mapSlideOutClass() {
     switch (this.transition) {
-      case index$1.ToastNotificationTransitionsEnum.slideInDown:
-        return index$1.ToastNotificationTransitionsEnum.slideOutUp;
-      case index$1.ToastNotificationTransitionsEnum.slideInUp:
-        return index$1.ToastNotificationTransitionsEnum.slideOutDown;
-      case index$1.ToastNotificationTransitionsEnum.slideInLeft:
-        return index$1.ToastNotificationTransitionsEnum.slideOutRight;
-      case index$1.ToastNotificationTransitionsEnum.slideInRight:
-        return index$1.ToastNotificationTransitionsEnum.slideOutLeft;
+      case ToastNotificationTransitionsEnum.slideInDown:
+        return ToastNotificationTransitionsEnum.slideOutUp;
+      case ToastNotificationTransitionsEnum.slideInUp:
+        return ToastNotificationTransitionsEnum.slideOutDown;
+      case ToastNotificationTransitionsEnum.slideInLeft:
+        return ToastNotificationTransitionsEnum.slideOutRight;
+      case ToastNotificationTransitionsEnum.slideInRight:
+        return ToastNotificationTransitionsEnum.slideOutLeft;
     }
   }
   calculateDraggedPercentage(e) {
@@ -91,9 +88,9 @@ const ZToastNotification = class {
     return Math.round((100 * e.deltaX) / bounding.width);
   }
   handleSlideOutDragAnimation() {
-    this.sliderManager = new hammer.hammer(this.hostElement);
+    this.sliderManager = new hammer(this.hostElement);
     this.sliderManager.get("pan").set({
-      direction: hammer.hammer.DIRECTION_HORIZONTAL,
+      direction: hammer.DIRECTION_HORIZONTAL,
     });
     this.sliderManager.on("pan", (e) => {
       this.percentage = this.calculateDraggedPercentage(e);
@@ -104,13 +101,13 @@ const ZToastNotification = class {
         translateBack: "translateX(0)",
       };
       this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;
-      if (e.eventType === hammer.hammer.DIRECTION_LEFT ||
-        e.eventType === hammer.hammer.DIRECTION_RIGHT) {
+      if (e.eventType === hammer.DIRECTION_LEFT ||
+        e.eventType === hammer.DIRECTION_RIGHT) {
         this.hostElement.style.transform = translateObj.translate;
         if (Math.abs(this.percentage) > this.draggablepercentage &&
           !this.isCloseEventCalled) {
           this.isCloseEventCalled = true;
-          this.emitToastClose(e.direction === hammer.hammer.DIRECTION_LEFT
+          this.emitToastClose(e.direction === hammer.DIRECTION_LEFT
             ? "slide-out-left"
             : "slide-out-right");
         }
@@ -150,13 +147,13 @@ const ZToastNotification = class {
     return totalWidth > parentWidth;
   }
   renderText() {
-    return (index.h("div", { id: "text", ref: (el) => (this.toastText = el) }, index.h("span", { class: "title" }, this.heading), index.h("span", { class: "message" }, this.message)));
+    return (h("div", { id: "text", ref: (el) => (this.toastText = el) }, h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)));
   }
   renderButton() {
-    return (index.h("div", { id: "button" }, index.h("slot", { name: "button" })));
+    return (h("div", { id: "button" }, h("slot", { name: "button" })));
   }
   renderCloseIcon() {
-    return (this.closebutton && (index.h("div", { id: "icon" }, index.h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
+    return (this.closebutton && (h("div", { id: "icon" }, h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
         if (e.keyCode == 32 || e.keyCode == 13) {
           e.preventDefault();
           this.emitToastClose(this.mapSlideOutClass());
@@ -164,24 +161,24 @@ const ZToastNotification = class {
       } }))));
   }
   renderContainer() {
-    return (index.h("div", { tabIndex: 0, id: "external-container", class: {
+    return (h("div", { tabIndex: 0, id: "external-container", class: {
         [this.type]: !!this.type,
         "several-lines-padding": this.isTextLong,
       }, ref: (el) => (this.container = el) }, this.renderText(), this.renderButton(), this.renderCloseIcon()));
   }
   renderMobileContainer() {
-    return (index.h("div", { id: "external-container", class: {
+    return (h("div", { id: "external-container", class: {
         [this.type]: !!this.type,
         "several-lines-padding": this.isTextLong,
         "mobile-wrapped": this.isTextLong,
-      } }, index.h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
+      } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
   }
   render() {
-    return (index.h(index.Host, { style: {
+    return (h(Host, { style: {
         ["--percentuale"]: `${this.percentage}%`,
       }, class: this.transition
         ? this.transition
-        : index$1.ToastNotificationTransitionsEnum.slideInDown, onAnimationEnd: (e) => {
+        : ToastNotificationTransitionsEnum.slideInDown, onAnimationEnd: (e) => {
         if (this.autoclose && e.animationName.includes("slidein")) {
           this.startClosingTimeout(this.autoclose);
         }
@@ -190,7 +187,7 @@ const ZToastNotification = class {
         }
       } }, this.isMobile ? this.renderMobileContainer() : this.renderContainer()));
   }
-  get hostElement() { return index.getElement(this); }
+  get hostElement() { return getElement(this); }
   static get watchers() { return {
     "isdraggable": ["watchPropIsdraggable"],
     "autoclose": ["watchPropAutoclose"],
@@ -199,4 +196,4 @@ const ZToastNotification = class {
 };
 ZToastNotification.style = stylesCss;
 
-exports.z_toast_notification = ZToastNotification;
+export { ZToastNotification as z_toast_notification };

package/www/build/z-toggle-button.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+
+const stylesCss = "button{font-family:var(--dashboard-font);font-weight:var(--font-sb);height:36px;border:var(--border-size-medium) solid;border-color:transparent;border-radius:var(--border-radius);color:var(--myz-blue);fill:var(--myz-blue);background-color:var(--bg-white);box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.2);text-transform:uppercase;font-size:14px;outline:none;padding-left:0px;padding-right:calc(var(--space-unit) * 2);transition:all 200ms linear;cursor:pointer}button::-moz-focus-inner{border:0}button:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);color:var(--myz-blue);fill:var(--myz-blue);box-shadow:0px 0px 2px 2px var(--accent-dark)}button:active{border-color:var(--myz-blue-light);color:var(--myz-blue-light);fill:var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button:disabled{color:var(--text-grey-700);fill:var(--text-grey-700)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
+
+const ZToggleButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.toggleClick = createEvent(this, "toggleClick", 7);
+    /** disabled status flag (optional) */
+    this.isdisabled = false;
+    /** open by default (optional) */
+    this.opened = false;
+  }
+  emitToggleClick() {
+    if (this.isdisabled)
+      return;
+    this.opened = !this.opened;
+    this.toggleClick.emit(this.opened);
+  }
+  retrieveButtonClass() {
+    let className = this.opened && "isopen";
+    if (this.avoidclick)
+      className = className + " avoid-clicks";
+    return className;
+  }
+  render() {
+    return (h("button", { tabindex: this.avoidclick ? "-1" : "0", class: this.retrieveButtonClass(), disabled: this.isdisabled, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+  }
+};
+ZToggleButton.style = stylesCss;
+
+export { ZToggleButton as z_toggle_button };