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

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

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { Device, KeyboardCode, PopoverPosition } from "../../beans";
 import { containsElement, findContainingBlockAncestor, getDevice, getParentElement, isElementVisibleInContainer, } from "../../utils/utils";
 /**
@@ -16,15 +16,30 @@ import { containsElement, findContainingBlockAncestor, getDevice, getParentEleme
  */
 export class ZPopover {
     constructor() {
-        /** space tolerance for space calculations */
-        this.spaceTolerance = 3;
+        /**
+         * The preferred position to render the popover.
+         * The popover will automatically search another position if not enough space is available for the preferred position.
+         * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.
+         */
         this.position = PopoverPosition.TOP;
+        /**
+         * The initial open state of the popover.
+         * Internal changes of this prop are emitted through the `openChange` event.
+         * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.
+         */
         this.open = false;
-        this.bindTo = undefined;
+        /** Whether to show popover's arrow. */
         this.showArrow = false;
+        /** Whether to center the popup on the main side (according to "position"). */
         this.center = false;
+        /**
+         * Whether the popover can be closed by clicking outside of it or pressing the escape key.
+         * Otherwise, it will be closed only programmatically (by setting `open` to `false`).
+         * Default: `true`.
+         */
         this.closable = true;
-        this.currentPosition = undefined;
+        /** space tolerance for space calculations */
+        this.spaceTolerance = 3;
     }
     closePopoverWithKeyboard(e) {
         if (this.closable && e.key === KeyboardCode.ESC) {
@@ -497,7 +512,7 @@ export class ZPopover {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: 'c3483157f2664088a337118936d81f551dcf25b1', "current-position": this.currentPosition }, h("slot", { key: 'fc9856b30959fc041dbf295fe7bbf523ce6adaf6' })));
+        return (h(Host, { key: '4495d149544c712575571ae8c9d6332c8ae28b42', "current-position": this.currentPosition }, h("slot", { key: '677e85a39324a18ee8d4fea1b28f90a913dd5eaa' })));
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -523,7 +538,8 @@ export class ZPopover {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition",
+                            "referenceLocation": "PopoverPosition"
                         }
                     }
                 },
@@ -533,8 +549,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "The preferred position to render the popover.\nThe popover will automatically search another position if not enough space is available for the preferred position.\nIf the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise."
                 },
-                "attribute": "position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "position",
                 "defaultValue": "PopoverPosition.TOP"
             },
             "open": {
@@ -551,8 +569,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "The initial open state of the popover.\nInternal changes of this prop are emitted through the `openChange` event.\nMake sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "bindTo": {
@@ -574,8 +594,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "The selector or the element bound with the popover.\nIf string css selector is provided make sure to use a valid selector."
                 },
-                "attribute": "bind-to",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bind-to"
             },
             "showArrow": {
                 "type": "boolean",
@@ -591,8 +613,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "Whether to show popover's arrow."
                 },
-                "attribute": "show-arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-arrow",
                 "defaultValue": "false"
             },
             "center": {
@@ -609,8 +633,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "Whether to center the popup on the main side (according to \"position\")."
                 },
-                "attribute": "center",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "center",
                 "defaultValue": "false"
             },
             "closable": {
@@ -627,8 +653,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "Whether the popover can be closed by clicking outside of it or pressing the escape key.\nOtherwise, it will be closed only programmatically (by setting `open` to `false`).\nDefault: `true`."
                 },
-                "attribute": "closable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "true"
             }
         };
@@ -656,7 +684,8 @@ export class ZPopover {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition",
+                            "referenceLocation": "PopoverPosition"
                         }
                     }
                 }
@@ -721,4 +750,3 @@ ZPopover.positionOrder = [
     PopoverPosition.LEFT_TOP,
     PopoverPosition.LEFT_BOTTOM,
 ];
-//# sourceMappingURL=index.js.map

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

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