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

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: '9c4418dc9b3f94c7fb935bc5544338c54a974910', 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

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 export class ZToggleButton {
     constructor() {
-        this.label = undefined;
+        /** disabled status flag (optional) */
         this.isdisabled = false;
-        this.avoidclick = undefined;
+        /** open by default (optional) */
         this.opened = false;
+        /**  aria-label for the button */
         this.ariaLabel = "";
     }
     emitToggleClick() {
@@ -15,10 +16,10 @@ export class ZToggleButton {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: 'bb5204888ed781929850a5c094cab99a24a6cb1c', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '246d3cb54f0af334717c38005e7494388420e2fd', 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: 'efdc08be8758803884a56014e724b6a3eb315784', 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: 'a971c5521659db9d407f39592907e9ad9e755cf5', 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"; }
@@ -48,8 +49,10 @@ export class ZToggleButton {
                     "tags": [],
                     "text": "label text"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "isdisabled": {
                 "type": "boolean",
@@ -65,8 +68,10 @@ export class ZToggleButton {
                     "tags": [],
                     "text": "disabled status flag (optional)"
                 },
-                "attribute": "isdisabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isdisabled",
                 "defaultValue": "false"
             },
             "avoidclick": {
@@ -83,8 +88,10 @@ export class ZToggleButton {
                     "tags": [],
                     "text": "avoidclick status flag"
                 },
-                "attribute": "avoidclick",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avoidclick"
             },
             "opened": {
                 "type": "boolean",
@@ -100,8 +107,10 @@ export class ZToggleButton {
                     "tags": [],
                     "text": "open by default (optional)"
                 },
-                "attribute": "opened",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "opened",
                 "defaultValue": "false"
             },
             "ariaLabel": {
@@ -118,8 +127,10 @@ export class ZToggleButton {
                     "tags": [],
                     "text": "aria-label for the button"
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             }
         };
@@ -143,4 +154,3 @@ export class ZToggleButton {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -20,4 +20,3 @@ export const Default = {
       .opened=${args.opened}
     ></z-toggle-button>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -3,9 +3,13 @@ import { LabelPosition } from "../../beans";
 import { randomId } from "../../utils/utils";
 export class ZToggleSwitch {
     constructor() {
+        /** Disabled flag */
         this.disabled = false;
+        /** Label position */
         this.labelPosition = LabelPosition.LEFT;
+        /** Checked state */
         this.checked = false;
+        /** HTML id attribute to set to the internal checkbox */
         this.htmlid = `toggle-switch-id-${randomId()}`;
     }
     emitToggleClick() {
@@ -22,14 +26,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '9120676414a277bcb8e4065053b0aaad1d409ec8' }, h("input", { key: '740b199120f448f225068f6a927ae392d5eb909f', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'fcb131a2e4a88c821fd3e9d6f4d0aae7e0ea690d', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'a71496b0436b37aaf6b0af879bae53be6a627efa' }, h("input", { key: '716eec97479d25139fe00b144a58d26941ded2a3', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '8907147d34ed7b1c944936e1c3e73519ef77f00b', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '2b9f61e89130980eefabb651d0c9c906322092f3' }, h("slot", { key: 'b99547f1dbdaa8cc212c0949307ae1c61b234d40' })), h("span", { key: '010e9e4b9a47e58a14b54a540bb0b07d5d5b6c50', class: {
+            } }, h("span", { key: 'c3a9dc659fee0c089799a011568b2df707f62c34' }, h("slot", { key: '68be5cec64b7d973bd40d59be54580170bd7ec5e' })), h("span", { key: '206640ff4c480d2923f8c99b80093b8bf08ee68a', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: 'c42cc68eb1f57de72a035e32f1cff8dcbc7f736b', class: "circle" }, this.checked && (h("z-icon", { key: '497788b7e87823921ea47973be378c74138d8f48', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '31d158040dfc2cb2e605ee5271cd1b992016c1e2', class: "circle" }, this.checked && (h("z-icon", { key: '2d45f7c22746d2db091e0ee2096b3f580064e8aa', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }
@@ -59,8 +63,10 @@ export class ZToggleSwitch {
                     "tags": [],
                     "text": "Disabled flag"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "labelPosition": {
@@ -73,7 +79,8 @@ export class ZToggleSwitch {
                         "LabelPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::LabelPosition"
+                            "id": "src/beans/index.tsx::LabelPosition",
+                            "referenceLocation": "LabelPosition"
                         }
                     }
                 },
@@ -83,8 +90,10 @@ export class ZToggleSwitch {
                     "tags": [],
                     "text": "Label position"
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "label-position",
                 "defaultValue": "LabelPosition.LEFT"
             },
             "checked": {
@@ -101,8 +110,10 @@ export class ZToggleSwitch {
                     "tags": [],
                     "text": "Checked state"
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "htmlid": {
@@ -119,8 +130,10 @@ export class ZToggleSwitch {
                     "tags": [],
                     "text": "HTML id attribute to set to the internal checkbox"
                 },
-                "attribute": "htmlid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "htmlid",
                 "defaultValue": "`toggle-switch-id-${randomId()}`"
             }
         };
@@ -144,4 +157,3 @@ export class ZToggleSwitch {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -24,4 +24,3 @@ export const Default = {
     </z-toggle-switch>
   `,
 };
-//# sourceMappingURL=index.stories.js.map