npm - @zanichelli/albe-web-components - Versions diffs - 19.2.2 → 19.2.3-RC1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1546) hide show

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

@@ -16,18 +16,13 @@ const SLIDE_OUT_TRANSITION_MAP = {
  */
 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.hasSlottedButton = undefined;
+        this.isCloseEventCalled = false;
     }
     watchPropIsdraggable(newValue) {
         if (newValue) {
@@ -67,10 +62,12 @@ export class ZToastNotification {
     }
     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() {
@@ -149,22 +146,24 @@ export class ZToastNotification {
                 this.startClosingTimeout(this.autoclose);
             }
         }
-        this.isdraggable && this.handleSlideOutDragAnimation();
+        if (this.isdraggable) {
+            this.handleSlideOutDragAnimation();
+        }
     }
     render() {
-        return (h(Host, { key: '4dddb200f4671bbd69e8d1470d0d441678da3039', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: 'a49b625adab9d778f69c84e8bbe75ab565b894a1', 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);
                 }
-            } }, h("div", { key: '424761a172e8f139e35d9c1b2139a4093e5ac48d', class: "toast-notification-container" }, h("div", { key: 'f1f8f3b2cfb8dde84ba0e136ac94631b47993975', class: "toast-notification-content" }, h("div", { key: '75c17b6a15c05dea66744ddb08a9abfcda21be28', class: "toast-notification-text" }, this.heading && h("span", { key: '94eda50ee38a39cec7056ee113b9863b54ed1555', class: "title" }, this.heading), h("span", { key: 'def713dd54fac1d0332c82c12ec4878672dddf1f', class: "message" }, h("slot", { key: '30cd97c7a2381c5a25e1b184524cb2fce29a549c', name: "message" }, this.message && h("span", { key: 'fc4c5cf459f595cb3727d5328ecb12419d1ea405', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '994505f881dbe43ab69eb42c449afb0dc4d46336', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'b4a78b86c8d3b98750bcafee88d43bb47712558c', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '6658b9fe87e402ad434afe3bc50d4bf99f19b7a4', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: 'a2677d79e89624c6043343f45d2d182fa957ced8', class: "toast-notification-container" }, h("div", { key: '3abed7d27e3229a0ffb7136788bea5ff1f9b42ca', class: "toast-notification-content" }, h("div", { key: '8360c7b1918dd43a6e20efbd8a7acc698114708e', class: "toast-notification-text" }, this.heading && h("span", { key: '6e90506018c059dba7c4c7dbf0a6b691554af361', class: "title" }, this.heading), h("span", { key: '98808e38b56eef6f6fa7d1356a70e67727cefca8', class: "message" }, h("slot", { key: 'cd3c796108dcd61863aa2f6b675397226a7c597e', name: "message" }, this.message && h("span", { key: 'b10e53ae700e37ea0725cb99d4e58fcf14b6b137', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: 'd65f0c44ac30edf17510b2f046b6ebf1251122d3', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'cab7ecb2f6d03bf2b1e6f459db4dd00cf7fb9dc1', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'aec76fdc32aa73389b7ecede4a082b9873422a04', 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: '2edf589b7755c20c21217a8161736eeee5859cc9', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: '9776de1410dbc02f319ae67a284da485949ab4c8', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -194,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",
@@ -211,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",
@@ -228,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",
@@ -245,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",
@@ -262,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": {
@@ -276,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"
                         }
                     }
                 },
@@ -286,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",
@@ -303,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": {
@@ -321,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": {
@@ -335,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"
                         }
                     }
                 },
@@ -345,8 +362,10 @@ 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"
             }
         };
     }
@@ -388,4 +407,3 @@ export class ZToastNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

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

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

@@ -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: 'f7657893cc0491e9d29c5801bfbae9df4b22a33b', name: "toasts" });
+        return h("slot", { key: 'e039a28729e3d350f3db450429acd01ff47b5afe', 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 CHANGED Viewed

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

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

@@ -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: '6df0aee8dfd4785cd9787b2940c12cc3d680ef0c', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '515befc9b764cd14ebf6d229f14c5bd63ce3075b', 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: 'ab52cd6023b492b5bba8086fd189112e5329c3ad', 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: '08daf99430ad7614dfcdf37d65e06d11511173ca', 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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: '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: {
+        return (h(Host, { key: '649d949699af687e76abb261e9b03ce1f7a026a9' }, h("input", { key: 'c2945e1cf225e36906179d3293ff406ae0114480', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'dff9b9345114a37eee42bbc2511308ec37dab71a', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '824e029aeb434813b35f72891d991f19a90daded' }, h("slot", { key: '37e8bad4378c65f4a3411fee47a960b9220af5d3' })), h("span", { key: '55eaf2b824ce8e91b77b5f8f2677724b2834fad6', class: {
+            } }, h("span", { key: '906b2848eec4a1708dde43dd766722d3f0a8e59e' }, h("slot", { key: '03b3de0d961693081972c5bd9a4607c5110b6e58' })), h("span", { key: 'f663add1968576e8a588d1cca9a01caeda1db326', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '41b7660f89b5ba9829782d3e6b041323357fdefa', class: "circle" }, this.checked && (h("z-icon", { key: 'ae68c35e2765c6eece7dcee8f7ad570a6fc0aa34', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: 'e0d00b404810e93b43b5b977b1bf72b4859a0bcc', class: "circle" }, this.checked && (h("z-icon", { key: '42b6a12e7cf2fb9e91ab4d06199ed7e5eea2d0fc', 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 CHANGED Viewed

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