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

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

@@ -2,6 +2,13 @@ import { Host, h } from "@stencil/core";
 import { KeyboardCode, ToastNotificationTransition } from "../../beans";
 import DOMPurify from "dompurify";
 import Hammer from "hammerjs";
+/** Map of slide-in transitions to their corresponding slide-out transitions */
+const SLIDE_OUT_TRANSITION_MAP = {
+    [ToastNotificationTransition.SLIDE_IN_DOWN]: ToastNotificationTransition.SLIDE_OUT_UP,
+    [ToastNotificationTransition.SLIDE_IN_UP]: ToastNotificationTransition.SLIDE_OUT_DOWN,
+    [ToastNotificationTransition.SLIDE_IN_LEFT]: ToastNotificationTransition.SLIDE_OUT_RIGHT,
+    [ToastNotificationTransition.SLIDE_IN_RIGHT]: ToastNotificationTransition.SLIDE_OUT_LEFT,
+};
 /**
  * ZToastNotification component.
  * @slot message - Custom HTML message
@@ -9,17 +16,13 @@ import Hammer from "hammerjs";
  */
 export class ZToastNotification {
     constructor() {
-        this.isCloseEventCalled = false;
-        this.heading = undefined;
-        this.message = undefined;
-        this.closebutton = undefined;
-        this.autoclose = undefined;
+        /** toast notification autoclose can be paused */
         this.pauseonfocusloss = true;
-        this.type = undefined;
+        /** toast notification can be draggable*/
         this.isdraggable = true;
+        /** toast notification draggable percentage*/
         this.draggablepercentage = 80;
-        this.transition = undefined;
-        this.percentage = undefined;
+        this.isCloseEventCalled = false;
     }
     watchPropIsdraggable(newValue) {
         if (newValue) {
@@ -43,42 +46,28 @@ export class ZToastNotification {
             }
         }
     }
-    emitToastClose(cssClass, stopTimer) {
+    close(closingTransition, stopTimer) {
         if (stopTimer && this.timeoutHandle) {
             clearTimeout(this.timeoutHandle);
         }
         this.timeoutHandle = null;
         this.elapsedTime = null;
         this.toastClose.emit();
-        if (cssClass) {
-            this.hostElement.classList.add(cssClass);
+        if (closingTransition) {
+            this.hostElement.classList.add(closingTransition);
         }
         else {
             this.hostElement.parentNode.removeChild(this.hostElement);
         }
     }
-    componentWillLoad() {
-        this.validateAutoclose();
-        this.percentage = 0;
-    }
-    componentDidLoad() {
-        this.startTime = Date.now();
-        if (this.autoclose) {
-            if (this.pauseonfocusloss) {
-                document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
-            }
-            if (!this.transition) {
-                this.startClosingTimeout(this.autoclose);
-            }
-        }
-        this.isdraggable && this.handleSlideOutDragAnimation();
-    }
     visibilityChangeEventHandler() {
         if (document.visibilityState === "hidden") {
-            this.timeoutHandle && this.onBlur();
+            if (this.timeoutHandle) {
+                this.onBlur();
+            }
         }
-        else {
-            this.elapsedTime && this.onFocus();
+        else if (this.elapsedTime) {
+            this.onFocus();
         }
     }
     validateAutoclose() {
@@ -86,20 +75,6 @@ export class ZToastNotification {
             console.error("At least one between autoclose and closebutton must be present");
         }
     }
-    mapSlideOutClass() {
-        switch (this.transition) {
-            case ToastNotificationTransition.SLIDE_IN_DOWN:
-                return ToastNotificationTransition.SLIDE_OUT_UP;
-            case ToastNotificationTransition.SLIDE_IN_UP:
-                return ToastNotificationTransition.SLIDE_OUT_DOWN;
-            case ToastNotificationTransition.SLIDE_IN_LEFT:
-                return ToastNotificationTransition.SLIDE_OUT_RIGHT;
-            case ToastNotificationTransition.SLIDE_IN_RIGHT:
-                return ToastNotificationTransition.SLIDE_OUT_LEFT;
-            default:
-                return null;
-        }
-    }
     calculateDraggedPercentage(e) {
         const bounding = this.hostElement.getBoundingClientRect();
         return Math.round((100 * e.deltaX) / bounding.width);
@@ -124,7 +99,9 @@ export class ZToastNotification {
                 this.hostElement.style.transform = translateObj.translate;
                 if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {
                     this.isCloseEventCalled = true;
-                    this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? "slide-out-left" : "slide-out-right", true);
+                    this.close(e.direction === Hammer.DIRECTION_LEFT
+                        ? ToastNotificationTransition.SLIDE_OUT_LEFT
+                        : ToastNotificationTransition.SLIDE_OUT_RIGHT, true);
                 }
             }
             if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {
@@ -149,25 +126,44 @@ export class ZToastNotification {
         clearTimeout(this.timeoutHandle);
     }
     startClosingTimeout(time) {
-        this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass(), false), time);
+        this.timeoutHandle = window.setTimeout(() => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], false), time);
     }
-    renderContent() {
-        return (h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, h("div", { id: "inner-container" }, h("div", { id: "text" }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, h("slot", { name: "message" }, h("span", { innerHTML: DOMPurify.sanitize(this.message || " ") })))), h("div", { id: "button" }, h("slot", { name: "button" }))), h("div", { id: "icon" }, this.closebutton && (h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass(), true), onKeyPress: (e) => {
-                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
-                    e.preventDefault();
-                    this.emitToastClose(this.mapSlideOutClass(), true);
-                }
-            } })))));
+    checkSlottedButton() {
+        this.hasSlottedButton = !!this.hostElement.querySelector("[slot='button']");
+    }
+    componentWillLoad() {
+        this.validateAutoclose();
+        this.checkSlottedButton();
+        this.percentage = 0;
+    }
+    componentDidLoad() {
+        this.startTime = Date.now();
+        if (this.autoclose) {
+            if (this.pauseonfocusloss) {
+                document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
+            }
+            if (!this.transition) {
+                this.startClosingTimeout(this.autoclose);
+            }
+        }
+        if (this.isdraggable) {
+            this.handleSlideOutDragAnimation();
+        }
     }
     render() {
-        return (h(Host, { key: '9961ade1e0cb9ac345293770938cb7540656282c', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
+        return (h(Host, { key: '6d582aa79426417081842e17e0ccb61fffec81a0', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, this.renderContent()));
+            } }, h("div", { key: '3b509ad43470b3bd5ceec401d28ce887a7f1de10', class: "toast-notification-container" }, h("div", { key: '7caaa8f330f15214c827eb89666ea2fdbbde3920', class: "toast-notification-content" }, h("div", { key: '49ad47ccf665b0bbcdbf94430cc2dab1e05219ab', class: "toast-notification-text" }, this.heading && h("span", { key: 'c2ea1e161d8c6bbefc9cff2ff27eadc713f5c133', class: "title" }, this.heading), h("span", { key: 'f93072a79ae141440445746ad654de84b50d2441', class: "message" }, h("slot", { key: '09d8108c415599d93b67925496fd52416fac4907', name: "message" }, this.message && h("span", { key: '011e00ae54cee5a33059cef9760576781c63f737', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '67bde6f049f31a6b4e7d84c720b036f974bedba7', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'c92a7087e89012ee690c8e41577ccee412be112f', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '41198c2a426c339046948b8969d3002aee7607c3', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
+                    e.preventDefault();
+                    this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
+                }
+            } }, h("z-icon", { key: '3316d0e9e999039cd99eb96faa37c81219e5617b', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -197,8 +193,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification's title"
                 },
-                "attribute": "heading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
             },
             "message": {
                 "type": "string",
@@ -214,8 +212,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification's message"
                 },
-                "attribute": "message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
             },
             "closebutton": {
                 "type": "boolean",
@@ -231,8 +231,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toggles closing button rendering"
                 },
-                "attribute": "closebutton",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closebutton"
             },
             "autoclose": {
                 "type": "number",
@@ -248,8 +250,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification closing timeout (ms)"
                 },
-                "attribute": "autoclose",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoclose"
             },
             "pauseonfocusloss": {
                 "type": "boolean",
@@ -265,8 +269,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification autoclose can be paused"
                 },
-                "attribute": "pauseonfocusloss",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "pauseonfocusloss",
                 "defaultValue": "true"
             },
             "type": {
@@ -279,7 +285,8 @@ export class ZToastNotification {
                         "ToastNotification": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ToastNotification"
+                            "id": "src/beans/index.tsx::ToastNotification",
+                            "referenceLocation": "ToastNotification"
                         }
                     }
                 },
@@ -289,8 +296,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification type: dark, light, accent, error, success, warning"
                 },
-                "attribute": "type",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type"
             },
             "isdraggable": {
                 "type": "boolean",
@@ -306,8 +315,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification can be draggable"
                 },
-                "attribute": "isdraggable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isdraggable",
                 "defaultValue": "true"
             },
             "draggablepercentage": {
@@ -324,8 +335,10 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification draggable percentage"
                 },
-                "attribute": "draggablepercentage",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "draggablepercentage",
                 "defaultValue": "80"
             },
             "transition": {
@@ -338,7 +351,8 @@ export class ZToastNotification {
                         "ToastNotificationTransition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ToastNotificationTransition"
+                            "id": "src/beans/index.tsx::ToastNotificationTransition",
+                            "referenceLocation": "ToastNotificationTransition"
                         }
                     }
                 },
@@ -348,14 +362,17 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up"
                 },
-                "attribute": "transition",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "transition"
             }
         };
     }
     static get states() {
         return {
-            "percentage": {}
+            "percentage": {},
+            "hasSlottedButton": {}
         };
     }
     static get events() {
@@ -390,4 +407,3 @@ export class ZToastNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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"
@@ -172,4 +174,3 @@ export const SlottedMessageLongText = {
       </z-toast-notification>
     </div>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -2,9 +2,11 @@ import { h } from "@stencil/core";
 import { ToastNotificationPosition } from "../../beans";
 export class ZToastNotificationList {
     constructor() {
-        this.notificationArray = [];
+        /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
         this.position = ToastNotificationPosition.TOP_RIGHT;
+        /**Set the entry position of new notification in the list */
         this.newestontop = true;
+        this.notificationArray = [];
     }
     watchPropNewestontop(newValue) {
         this.hostElement.append(...this.notificationArray.reverse());
@@ -37,7 +39,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: 'b05c58feada71e3eb2fcfcbd5a5f465b91c39ac3', name: "toasts" });
+        return h("slot", { key: '8219e6e96e73aee72df4e2d8d2e0e9155e8f7a2e', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }
@@ -63,7 +65,8 @@ export class ZToastNotificationList {
                         "ToastNotificationPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ToastNotificationPosition"
+                            "id": "src/beans/index.tsx::ToastNotificationPosition",
+                            "referenceLocation": "ToastNotificationPosition"
                         }
                     }
                 },
@@ -73,8 +76,10 @@ export class ZToastNotificationList {
                     "tags": [],
                     "text": "Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right"
                 },
-                "attribute": "position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "position",
                 "defaultValue": "ToastNotificationPosition.TOP_RIGHT"
             },
             "newestontop": {
@@ -91,8 +96,10 @@ export class ZToastNotificationList {
                     "tags": [],
                     "text": "Set the entry position of new notification in the list"
                 },
-                "attribute": "newestontop",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "newestontop",
                 "defaultValue": "true"
             }
         };
@@ -105,4 +112,3 @@ export class ZToastNotificationList {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -145,4 +145,3 @@ export const TopLeftWithSlottedMessage = {
         ></span
       >`),
 };
-//# sourceMappingURL=index.stories.js.map