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

package/dist/collection/components/z-notification/styles.css

@@ -1,14 +1,25 @@
 :host {
+  /**
+   * @prop --z-notification--top-offset: The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+   * @prop --z-notification--content-max-width: The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+   * @prop --z-notification--inline-padding: The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
+   */
   --z-notification--top-offset: 0;
+  --z-notification--content-max-width: 100%;
+  --z-notification--inline-padding: ;
 
-  display: flex;
+  display: block;
   width: 100%;
-  box-sizing: border-box;
+}
+
+.main-container {
+  display: flex;
+  max-width: var(--z-notification--content-max-width);
   align-items: flex-start;
-  padding: calc(var(--space-unit) * 2);
-  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));
+  margin: 0 auto;
+  background-color: transparent;
   font-family: var(--font-family-sans);
-  outline: none;
 }
 
 :host([sticky]) {
@@ -54,8 +65,15 @@
   fill: var(--color-default-error);
 }
 
-:host > button,
-.content-container > button {
+:host([borderposition="bottom"]) {
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+}
+
+:host([borderposition="top"]) {
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+}
+
+button {
   padding: 0;
   border: none;
   margin: 0;
@@ -78,12 +96,12 @@
 }
 
 .content-text {
-  max-width: 800px;
+  width: 100%;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   letter-spacing: 0.16px;
-  line-height: 20px;
+  line-height: 1.4;
 }
 
 .action-button {
@@ -91,12 +109,12 @@
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
   letter-spacing: 0.32px;
-  line-height: 16px;
+  line-height: 1.333;
+  outline: none;
 }
 
-.action-button:focus {
+.action-button:focus-visible {
   box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
 }
 
 .content-container + .close-button {
@@ -108,7 +126,7 @@
 }
 
 /* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .content-container {
     flex-wrap: nowrap;
   }

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

@@ -2,20 +2,36 @@ import { h, Host } from "@stencil/core";
 import { KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - Slot for the offcanvas content.
- * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
- * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.
- * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.
  */
 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 +156,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '8d7045110c92bf5ef1ef2f8d60ddaf1af55ace92', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'ef823ffd39a7f63aae8ef95333da611ec4485292', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '7a6586d273275f1686fe0b1406d71e782d5d71c3', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '5930bb55687c9dd286828dc262c1f2cb18ebdd75', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: 'a65de1a8b0e92e0520d410a88c98edfe5bb56100', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '8775a7fea17fac8ddcf69a1a1001b69aa1d29ae7', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4ca1eae5425dc05fe71d1bc171481ad22b90d0b7', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: 'b22cbee1928706351f03099ab860957403f529a7', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '96e1701e1e400dbe09c7625debcb79ec06fe91fb', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: 'bf842940be8987308e745bdda6b9254171045a62', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -167,7 +183,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 +194,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 +214,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 +230,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 +241,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 +264,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 +284,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 +346,3 @@ export class ZOffcanvas {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-offcanvas/styles.css

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --z-offcanvas--top-space: Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
+   * @prop --z-offcanvas--container-width: Width of the offcanvas for `left` and `right` direction. Default: `375px`.
+   * @prop --z-offcanvas--container-height: Height of the offcanvas for `up` direction. Default: `90%`.
+   */
   --z-offcanvas--container-width: ;
   --z-offcanvas--container-height: ;
   --z-offcanvas--top-space: ;

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

@@ -1,23 +1,28 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { InputType } from "../../beans";
 /**
  * Pagination bar component.
- * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background
- * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01
  */
 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;
     }
     /**
@@ -171,10 +176,10 @@ export class ZPagination {
         ];
     }
     renderBackButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla pagina precedente", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
     }
     renderForwardButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla prossima pagina", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
     }
     renderMobile() {
         const pagesChunks = this.getPagesChunks();
@@ -235,8 +240,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 +259,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 +279,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 +298,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 +318,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 +338,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 +357,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 +376,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 +396,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 +454,3 @@ export class ZPagination {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-pagination/styles.css

@@ -1,4 +1,10 @@
 z-pagination {
+  /**
+   * @prop --z-pagination--page-button-width: Width of the pagination's page buttons. The default is 64px on mobile and 88px on desktop.
+   * @prop --z-pagination--pages-container-max-width: Max width of the container of the page buttons. The default is 100% (full width).
+   * @prop --z-pagination-background-color: Background of the pagination's tabs. The default is --color-background
+   * @prop --z-pagination-background-color-hover: Background of the pagination's tabs on hover. The default is --color-surface01
+   */
   --z-pagination--page-button-width: 64px;
   --z-pagination--pages-container-max-width: 100%;
   --z-pagination-background-color: var(--color-background);

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: '28f5d98850bf13270b4ddf9585722c39f87ee12e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '065c198cfef6d982df79871d084454f425e0d57d', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '5b42b99982e78dea89cf144a717e619b65904ab9', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'd15c0e008ca2f5172228217b5418d263a59af932', class: "panel-elem-link" }, h("a", { key: 'ca5a726f71b2dd8de6ddf1f32864bc2cdd823730', class: {
+        return (h("div", { key: '5ec6258c1b03272d134bfd051fccfa2f922d9d18', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '0e2510843c7f3d4a6a51d4e3397972e9f8ff9278', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'a147b33a20b2432bca9577c724bcb90ee4ec0796', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '7eb80ce42df88d0f6f20cd8489b0052588539602', class: "panel-elem-link" }, h("a", { key: '40622a092e1b7c111932edcf8e3f083a7e589148', 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: 'b8f07a80e9260bb0a142037d3f6a64a64acebafb', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '8d6524f5e8b70798cd846d4c99a2631161ae265d', class: "panel-elem-desc" }, h("slot", { key: 'b122e24bbb3ee418a393b348157f54fad3a6f1a9', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'c5febcd1de48afe90a33cba4c3e4cc90fe08444d', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '4f131023ff6a577c535670c9762ae8458825c94f', class: "panel-elem-desc" }, h("slot", { key: '82e06bd4163c9e72c7f0614c314a001d158db9ce', 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