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

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

@@ -14,18 +14,21 @@ export class ZNotification {
         this.notificationClose.emit();
     }
     constructor() {
-        this.contenticonname = undefined;
-        this.actiontext = undefined;
-        this.type = undefined;
+        /** Enable close icon */
         this.showclose = false;
+        /**
+         * Enable shadow.
+         * @deprecated shadow is available only for the `sticky` version of the notification.
+         */
         this.showshadow = false;
+        /** Enable sticky notification bar. */
         this.sticky = false;
         this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
         this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
     }
     render() {
         var _a;
-        return (h(Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '689bfc013519c2ca0aba16a520c377c6e4edccbc' }, this.contenticonname && (h("z-icon", { key: '1c9296c9cac6cb65efe8467d458ba416fd837b37', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '973a065c148873e1009ad072d6c7e3e66b6e674c', class: "content-container" }, h("div", { key: '211e47b3cb03cbc180f6a2c2abdade49ad4319e2', class: "content-text" }, h("slot", { key: 'fb538aac60cb506ee8f30f7a9cf67b2954bfae09' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'bbf6e7e24f276e7608cf894611790db8204eb469', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '2f65452871ef504088ae5db0d6fa4bf9a8db12cb', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '67f6a236ac25106c9e24ea493759364e67a99045', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -55,8 +58,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Name of the icon on the left of the content"
                 },
-                "attribute": "contenticonname",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "contenticonname"
             },
             "actiontext": {
                 "type": "string",
@@ -72,8 +77,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Action button text"
                 },
-                "attribute": "actiontext",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "actiontext"
             },
             "type": {
                 "type": "string",
@@ -85,7 +92,8 @@ export class ZNotification {
                         "NotificationType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NotificationType"
+                            "id": "src/beans/index.tsx::NotificationType",
+                            "referenceLocation": "NotificationType"
                         }
                     }
                 },
@@ -95,8 +103,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Alert variant type"
                 },
-                "attribute": "type",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type"
             },
             "showclose": {
                 "type": "boolean",
@@ -112,8 +122,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable close icon"
                 },
-                "attribute": "showclose",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "showclose",
                 "defaultValue": "false"
             },
             "showshadow": {
@@ -133,8 +145,10 @@ export class ZNotification {
                         }],
                     "text": "Enable shadow."
                 },
-                "attribute": "showshadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "showshadow",
                 "defaultValue": "false"
             },
             "sticky": {
@@ -151,8 +165,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable sticky notification bar."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
             }
         };
@@ -191,4 +207,3 @@ export class ZNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -144,4 +144,3 @@ export const InlineVariant = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-offcanvas/index.js

@@ -8,14 +8,33 @@ import { KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans
  */
 export class ZOffcanvas {
     constructor() {
-        this.allFocusableElements = [];
-        this.previouslyFocusedElement = null;
+        /**
+         * Offcanvas variant.
+         * - `overlay`: The offcanvas covers the page content putting an overlay.
+         * - `pushcontent`: The offcanvas isn't absolutely positioned and "pushes" the page content.
+         * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.
+         * Also, the `pushcontent` variant doesn't have the open/close transition.
+         */
         this.variant = OffCanvasVariant.PUSHCONTENT;
+        /** Whether the offcanvas is open. Default: false */
         this.open = false;
+        /**
+         * Open the content transitioning to a specified direction.
+         * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.
+         */
         this.transitiondirection = TransitionDirection.LEFT;
+        /**
+         * Skip the opening transition when the offcanvas is already open at the first render.
+         * @deprecated This prop is not needed anymore, the component will automatically skip the transition
+         *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
+         */
         this.skipLoadAnimation = false;
+        /** Whether to show the backdrop when the offcanvas is open. Default: true */
         this.showBackdrop = true;
+        /** Used to skip the opening transition when the offcanvas is already open at the first render. */
         this.skipAnimation = false;
+        this.allFocusableElements = [];
+        this.previouslyFocusedElement = null;
     }
     /**
      * Returns all focusable elements inside the offcanvas content.
@@ -140,8 +159,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '35307af5a5454ffd6269b5bc02226b72a483ca5c', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '3acc8e3a21920bae59ed55682b7c53e030e79664', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '2a9d364c65a16bec1e2b2a2fff4da8fdfea12dce', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '1e853eb4d5d79882ad71e045d29c1806b008fa50', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: '13c6552f10632ff199916b208a20a1dfb70a76bf', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '5f34f01d85a4c79e2e79d832fe224291ed2763c2', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'c5351d2287fb371fada3f3e611149c778cd985d3', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '8db8472f6fac67914ef17c88ff28f02a74fb5004', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '3903cb7475ffbc877f69d1c34b1812185daa8591', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '77b2fe27928f089bb35e5a381b6b89c9039e0f0e', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -167,7 +186,8 @@ export class ZOffcanvas {
                         "OffCanvasVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::OffCanvasVariant"
+                            "id": "src/beans/index.tsx::OffCanvasVariant",
+                            "referenceLocation": "OffCanvasVariant"
                         }
                     }
                 },
@@ -177,8 +197,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Offcanvas variant.\n- `overlay`: The offcanvas covers the page content putting an overlay.\n- `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n> NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\nAlso, the `pushcontent` variant doesn't have the open/close transition."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "OffCanvasVariant.PUSHCONTENT"
             },
             "open": {
@@ -195,8 +217,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether the offcanvas is open. Default: false"
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "transitiondirection": {
@@ -209,7 +233,8 @@ export class ZOffcanvas {
                         "TransitionDirection": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::TransitionDirection"
+                            "id": "src/beans/index.tsx::TransitionDirection",
+                            "referenceLocation": "TransitionDirection"
                         }
                     }
                 },
@@ -219,8 +244,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Open the content transitioning to a specified direction.\nThe `up` direction always show the `overlay`, also when the variant is `pushcontent`."
                 },
-                "attribute": "transitiondirection",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "transitiondirection",
                 "defaultValue": "TransitionDirection.LEFT"
             },
             "skipLoadAnimation": {
@@ -240,8 +267,10 @@ export class ZOffcanvas {
                         }],
                     "text": "Skip the opening transition when the offcanvas is already open at the first render."
                 },
-                "attribute": "skip-load-animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "skip-load-animation",
                 "defaultValue": "false"
             },
             "showBackdrop": {
@@ -258,8 +287,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether to show the backdrop when the offcanvas is open. Default: true"
                 },
-                "attribute": "show-backdrop",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-backdrop",
                 "defaultValue": "true"
             }
         };
@@ -318,4 +349,3 @@ export class ZOffcanvas {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-offcanvas/index.stories.js

@@ -141,4 +141,3 @@ export const PushContent = {
       </div>
     </div>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-pagination/index.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { InputType } from "../../beans";
 /**
  * Pagination bar component.
@@ -7,17 +7,24 @@ import { InputType } from "../../beans";
  */
 export class ZPagination {
     constructor() {
-        this.label = undefined;
+        /** Enable navigation arrows. */
         this.navArrows = true;
-        this.totalPages = undefined;
+        /** Number of pages to skip. */
         this.skip = 0;
+        /** Enable buttons to go to the first and last pages. */
         this.edges = false;
-        this.split = undefined;
-        this.visiblePages = undefined;
+        /** Current page. */
         this.currentPage = 1;
-        this.goToPage = undefined;
+        /**
+         * Internal visible pages variable.
+         * Needed to better handle conflicting props like `visiblePages` and `split`.
+         * This state will change based on props values and validation,
+         * keeping original `visiblePages` value intact.
+         */
         this._visiblePages = this.visiblePages;
+        /** Used to hides/change some functionalities on smaller screen sizes */
         this.isMobile = false;
+        /** Value of the go to page input */
         this.goToPageValue = null;
     }
     /**
@@ -235,8 +242,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Pagination label placed before the bar."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "navArrows": {
                 "type": "boolean",
@@ -252,8 +261,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Enable navigation arrows."
                 },
-                "attribute": "nav-arrows",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "nav-arrows",
                 "defaultValue": "true"
             },
             "totalPages": {
@@ -270,8 +281,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Total number of pages. Required."
                 },
-                "attribute": "total-pages",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages"
             },
             "skip": {
                 "type": "number",
@@ -287,8 +300,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to skip."
                 },
-                "attribute": "skip",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "skip",
                 "defaultValue": "0"
             },
             "edges": {
@@ -305,8 +320,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Enable buttons to go to the first and last pages."
                 },
-                "attribute": "edges",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "edges",
                 "defaultValue": "false"
             },
             "split": {
@@ -323,8 +340,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to show left/right of the current, before showing \"load more\" symbol (\u2026)."
                 },
-                "attribute": "split",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "split"
             },
             "visiblePages": {
                 "type": "number",
@@ -340,8 +359,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to show at a time. If not set, all pages will be shown."
                 },
-                "attribute": "visible-pages",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible-pages"
             },
             "currentPage": {
                 "type": "number",
@@ -357,8 +378,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Current page."
                 },
-                "attribute": "current-page",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "current-page",
                 "defaultValue": "1"
             },
             "goToPage": {
@@ -375,8 +398,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Whether to show \"go to page\" feature."
                 },
-                "attribute": "go-to-page",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "go-to-page"
             }
         };
     }
@@ -431,4 +456,3 @@ export class ZPagination {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-pagination/index.stories.js

@@ -115,4 +115,3 @@ export const Skip = {
         skip: 10,
     },
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-panel-elem/index.js

@@ -4,24 +4,19 @@ import { h } from "@stencil/core";
  */
 export class ZPanelElem {
     constructor() {
-        this.elemid = undefined;
-        this.imgurl = undefined;
-        this.imgalt = undefined;
-        this.linkicon = undefined;
-        this.linklabel = undefined;
-        this.url = undefined;
+        /** link target (optional) */
         this.target = "_blank";
+        /** disabled status flag (optional) */
         this.isdisabled = false;
-        this.descrSlotName = undefined;
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '7ccde7a594052fb877c381d8f2db8df80d64e96e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'f925fb70d03baa4a8a7f96006c515c9116785ff7', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'b0349cf006ded4cc02f686e1ea1adfbd76550fb8', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'c9393757ba1c849c8558dc668189f6f27b232e94', class: "panel-elem-link" }, h("a", { key: '7c552ae67030c9bf12a6e52e8d8f6f82df88b4a2', class: {
+        return (h("div", { key: 'bf6057103a8e781435017171f363f109af47c187', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'e0eece1dc3fff40916d2e84e6ab2ffd8ad93cc46', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '1283e1f34165b450f80a60e1c34b39f84f161e1d', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '57e1b5dbd8050d48ad049789994ab7180d257bef', class: "panel-elem-link" }, h("a", { key: 'df2dbff9ef103b387ebc11226ad10446ee4b5426', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'f72a6a2634b41803ea7eaf8d51ba3439f095457a', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '6cd08ffd2e65f13d500f88682724f4f762c1f118', class: "panel-elem-desc" }, h("slot", { key: '01f55703602ee64f92eed8bc918ac5032927850c', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '55cec9fbbe2f357fcd5c0438eb1b1deeb3b690db', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '3dddbd3a8291ef131214a44ff5e7297c7b7117b1', class: "panel-elem-desc" }, h("slot", { key: '6c0b10c119536f938d4d6e64fb2ba75af80a5935', name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }
@@ -51,8 +46,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "html element id (optional)"
                 },
-                "attribute": "elemid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elemid"
             },
             "imgurl": {
                 "type": "string",
@@ -68,8 +65,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "image url source (optional)"
                 },
-                "attribute": "imgurl",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "imgurl"
             },
             "imgalt": {
                 "type": "string",
@@ -85,8 +84,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "alternative image text (optional)"
                 },
-                "attribute": "imgalt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "imgalt"
             },
             "linkicon": {
                 "type": "string",
@@ -102,8 +103,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "icon link name (optional)"
                 },
-                "attribute": "linkicon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "linkicon"
             },
             "linklabel": {
                 "type": "string",
@@ -119,8 +122,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "link label text"
                 },
-                "attribute": "linklabel",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "linklabel"
             },
             "url": {
                 "type": "string",
@@ -136,8 +141,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "link url"
                 },
-                "attribute": "url",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url"
             },
             "target": {
                 "type": "string",
@@ -153,8 +160,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "link target (optional)"
                 },
-                "attribute": "target",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "target",
                 "defaultValue": "\"_blank\""
             },
             "isdisabled": {
@@ -171,8 +180,10 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "disabled status flag (optional)"
                 },
-                "attribute": "isdisabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isdisabled",
                 "defaultValue": "false"
             },
             "descrSlotName": {
@@ -189,10 +200,11 @@ export class ZPanelElem {
                     "tags": [],
                     "text": "name of slot container (optional)"
                 },
-                "attribute": "descr-slot-name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "descr-slot-name"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-panel-elem/index.stories.js

@@ -23,4 +23,3 @@ export const Default = {
       isdisabled="${args.isdisabled}"
     ></z-panel-elem>`,
 };
-//# sourceMappingURL=index.stories.js.map