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

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

@@ -2,13 +2,13 @@ import { h } from "@stencil/core";
 import { Breakpoints } from "../../constants/breakpoints";
 export class ZButtonSort {
     constructor() {
-        this.buttonid = undefined;
-        this.label = undefined;
-        this.desclabel = undefined;
-        this.counter = undefined;
+        /** sort label content (ascending) (optional) */
         this.sortlabelasc = "A-Z";
+        /** sort label content (descending) (optional) */
         this.sortlabeldesc = "Z-A";
+        /** selected flag (optional) */
         this.isselected = false;
+        /** sortable flag (optional) */
         this.sortasc = true;
         this.allowTooltip = false;
     }
@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '6aebfeebb2882a1207aa32859e4c463f785360c2', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: 'c7a7a840ef0365ad7d56bf8fa8a0a81b421f4bed', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '76768e04bdb9409dbbc954da9097ce3d5bf2fd1b', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '932bc97f8c6cd54907de7e970d3f0a1895026fde', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'b91e6422c7325bb5646211e2013a5a3226b30a7c', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '30d0203657443c589241b25ae37155cfbd203f89', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '3934b6a866c2c791aa80e0de90197f5ae372aa88', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '1bb900d3b3d364b912e67ae44e3f60cf245c0672', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '066c842f00e3d26301e63fa91849dd4f414f05e8', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '00b771b5c276eff3ca761acb28ba9df42b8d0a6c', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }
@@ -66,8 +66,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "id, should be unique"
                 },
-                "attribute": "buttonid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "buttonid"
             },
             "label": {
                 "type": "string",
@@ -83,8 +85,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (ascending)"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "desclabel": {
                 "type": "string",
@@ -100,8 +104,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (descending)"
                 },
-                "attribute": "desclabel",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "desclabel"
             },
             "counter": {
                 "type": "number",
@@ -117,8 +123,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "occurrences counter (optional)"
                 },
-                "attribute": "counter",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter"
             },
             "sortlabelasc": {
                 "type": "string",
@@ -134,8 +142,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (ascending) (optional)"
                 },
-                "attribute": "sortlabelasc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortlabelasc",
                 "defaultValue": "\"A-Z\""
             },
             "sortlabeldesc": {
@@ -152,8 +162,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (descending) (optional)"
                 },
-                "attribute": "sortlabeldesc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortlabeldesc",
                 "defaultValue": "\"Z-A\""
             },
             "isselected": {
@@ -170,8 +182,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "selected flag (optional)"
                 },
-                "attribute": "isselected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isselected",
                 "defaultValue": "false"
             },
             "sortasc": {
@@ -188,8 +202,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sortable flag (optional)"
                 },
-                "attribute": "sortasc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortasc",
                 "defaultValue": "true"
             }
         };
@@ -218,4 +234,3 @@ export class ZButtonSort {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -28,4 +28,3 @@ export const Ellipsis = {
         label: "Testo molto lungo lungo lungo lunghissimo lunghissimo lunghissimo ancora di più",
     },
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -19,11 +19,13 @@ import { CardVariant } from "../../beans";
  */
 export class ZCard {
     constructor() {
-        this.variant = undefined;
-        this.coverIcon = undefined;
+        /** Enable shadow. Default: false. */
         this.showShadow = false;
+        /**
+         * Enable "clickable" styles like hover background and cursor, focus shadow on the whole card, etc.
+         * Always set this to `true` when putting an `<a>` tag in the `title` slot.
+         */
         this.clickable = false;
-        this.hasCoverImage = undefined;
     }
     componentWillLoad() {
         this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
@@ -80,7 +82,8 @@ export class ZCard {
                         "CardVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CardVariant"
+                            "id": "src/beans/index.tsx::CardVariant",
+                            "referenceLocation": "CardVariant"
                         }
                     }
                 },
@@ -90,8 +93,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
                 },
-                "attribute": "variant",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant"
             },
             "coverIcon": {
                 "type": "string",
@@ -107,8 +112,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Name of the icon to place over the image cover"
                 },
-                "attribute": "cover-icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover-icon"
             },
             "showShadow": {
                 "type": "boolean",
@@ -124,8 +131,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable shadow. Default: false."
                 },
-                "attribute": "show-shadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-shadow",
                 "defaultValue": "false"
             },
             "clickable": {
@@ -142,8 +151,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\nAlways set this to `true` when putting an `<a>` tag in the `title` slot."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "clickable",
                 "defaultValue": "false"
             }
         };
@@ -155,4 +166,3 @@ export class ZCard {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -300,4 +300,3 @@ export const WithImageAndClickListener = {
     <div id="click-alert-container">Card click count: 0</div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -8,21 +8,22 @@ import { ButtonVariant, CarouselArrowsPosition, CarouselProgressMode } from "../
  */
 export class ZCarousel {
     constructor() {
-        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
-        this.scrollingTo = null;
-        this.isLoading = undefined;
-        this.label = undefined;
+        /** Shows only one content at a time */
         this.single = false;
-        this.arrowsPosition = undefined;
-        this.progressMode = undefined;
+        /**
+         * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.
+         * If set to `false`, the arrows will not be visible on mobile.
+         * Only meaningful with `arrowsPosition` set to `OVER`.
+         */
         this.fixedArrows = true;
+        /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */
         this.ghostLoadingHeight = 100;
+        /** When enabled, navigating next the last item will go back to the first item and vice versa. */
         this.infinite = false;
+        /** Current item index for single mode. */
         this.current = 0;
-        this.items = undefined;
-        this.highlightedIndicator = undefined;
-        this.canNavigatePrev = undefined;
-        this.canNavigateNext = undefined;
+        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
+        this.scrollingTo = null;
     }
     onIndexChange() {
         this.indexChange.emit({ currentItem: this.current });
@@ -35,6 +36,24 @@ export class ZCarousel {
     onInfiniteModeChange() {
         this.checkNavigationValidity();
     }
+    onLoadingChange() {
+        if (!this.isLoading) {
+            // when loading is finished, we need to set up things with the real items that were not present during the loading phase
+            this.setupObserversAndListeners();
+        }
+    }
+    /** Set up all observers and listeners related to the rendered items. */
+    setupObserversAndListeners() {
+        var _a;
+        this.setupItems();
+        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
+        this.resizeObserver.observe(this.itemsContainer);
+        if (this.single) {
+            this.setIntersectionObserver();
+        }
+        this.checkNavigationValidity();
+    }
     /**
      * Set an intersection observer to:
      * - highlight the indicator of the intersecting item during scroll
@@ -146,15 +165,10 @@ export class ZCarousel {
         });
     }
     componentDidLoad() {
-        var _a, _b;
-        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
-        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);
-        this.setupItems();
-        if (this.single) {
-            this.setIntersectionObserver();
+        if (this.isLoading) {
+            return;
         }
-        this.checkNavigationValidity();
+        this.setupObserversAndListeners();
     }
     disconnectedCallback() {
         var _a;
@@ -170,12 +184,12 @@ export class ZCarousel {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../tokens/typography.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../tokens/typography.css"]
         };
     }
     static get properties() {
@@ -194,8 +208,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The z-carousel is on loading state"
                 },
-                "attribute": "is-loading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading"
             },
             "label": {
                 "type": "string",
@@ -211,8 +227,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The z-carousel title"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "single": {
                 "type": "boolean",
@@ -228,8 +246,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Shows only one content at a time"
                 },
-                "attribute": "single",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "single",
                 "defaultValue": "false"
             },
             "arrowsPosition": {
@@ -242,7 +262,8 @@ export class ZCarousel {
                         "CarouselArrowsPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CarouselArrowsPosition"
+                            "id": "src/beans/index.tsx::CarouselArrowsPosition",
+                            "referenceLocation": "CarouselArrowsPosition"
                         }
                     }
                 },
@@ -252,8 +273,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Arrow buttons position"
                 },
-                "attribute": "arrows-position",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "arrows-position"
             },
             "progressMode": {
                 "type": "string",
@@ -265,7 +288,8 @@ export class ZCarousel {
                         "CarouselProgressMode": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CarouselProgressMode"
+                            "id": "src/beans/index.tsx::CarouselProgressMode",
+                            "referenceLocation": "CarouselProgressMode"
                         }
                     }
                 },
@@ -275,8 +299,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Progress indicator type. Only available for `single` mode"
                 },
-                "attribute": "progress-mode",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-mode"
             },
             "fixedArrows": {
                 "type": "boolean",
@@ -292,8 +318,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\nIf set to `false`, the arrows will not be visible on mobile.\nOnly meaningful with `arrowsPosition` set to `OVER`."
                 },
-                "attribute": "fixed-arrows",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "fixed-arrows",
                 "defaultValue": "true"
             },
             "ghostLoadingHeight": {
@@ -310,8 +338,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The height of the ghost loader (only visible when `isLoading` is set to `true`)"
                 },
-                "attribute": "ghost-loading-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "ghost-loading-height",
                 "defaultValue": "100"
             },
             "infinite": {
@@ -328,8 +358,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "When enabled, navigating next the last item will go back to the first item and vice versa."
                 },
-                "attribute": "infinite",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "infinite",
                 "defaultValue": "false"
             }
         };
@@ -372,7 +404,9 @@ export class ZCarousel {
             }, {
                 "propName": "infinite",
                 "methodName": "onInfiniteModeChange"
+            }, {
+                "propName": "isLoading",
+                "methodName": "onLoadingChange"
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -7,7 +7,7 @@ import "./index.stories.css";
 /**
  * This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).
  * Pass any number of elements inside its main `slot`.
- * @example```html
+ * @example```
  * <z-carousel>
  *  <li>element</li>
  *  <li>element</li>
@@ -16,7 +16,7 @@ import "./index.stories.css";
  * ```
  * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.
  * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.
- * @example```css
+ * @example```
  * z-carousel {
  *  --z-carousel-gutter: calc(var(--space-unit) * 2);
  * }```
@@ -126,4 +126,3 @@ export const LoadingItems = {
           </li>`)}
     </z-carousel>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -2,18 +2,19 @@ import { h } from "@stencil/core";
 import { ZChipType } from "../../beans";
 export class ZChip {
     constructor() {
-        this.icon = undefined;
+        /** z-chip size type, can be default, medium or small */
         this.type = ZChipType.DEFAULT;
-        this.interactiveIcon = undefined;
+        /** set z-chip as disabled */
         this.disabled = false;
+        /** z-chip aria-label string */
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: 'f696700f7e7634093acb40080f72f9261f3aae36', class: {
+        return (h("div", { key: '0f8834160a0c8e3ffd107233e2c5de6db6ab6df2', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '549bec3f429ffaf44eb3fe285b57b45bfd67f3ee', name: this.icon }), h("slot", { key: 'ae32cb0af653344dfce38449f55eea24772792ed' }), this.interactiveIcon && (h("button", { key: '0d6daafae8c1580d3107050b4e964f89ccbb3475', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'db816882f84afbfa35d44ec47aeefe7f3a4ad254', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '51451c287eb3c450f4cc8a59f40e0d2e71fe95e2', name: this.icon }), h("slot", { key: 'd1c6dce40bf102ab19ca5bfc06fdbc342c97e68e' }), this.interactiveIcon && (h("button", { key: '3274d75df1f052aab16bfb8b663292160757acc8', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '23605e0639429a9ac5d66eb3394a1a3c9740d601', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -43,8 +44,10 @@ export class ZChip {
                     "tags": [],
                     "text": "Non interactive icon"
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "type": {
                 "type": "string",
@@ -56,7 +59,8 @@ export class ZChip {
                         "ZChipType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ZChipType"
+                            "id": "src/beans/index.tsx::ZChipType",
+                            "referenceLocation": "ZChipType"
                         }
                     }
                 },
@@ -66,8 +70,10 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip size type, can be default, medium or small"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "ZChipType.DEFAULT"
             },
             "interactiveIcon": {
@@ -84,8 +90,10 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip interactive icon"
                 },
-                "attribute": "interactive-icon",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interactive-icon"
             },
             "disabled": {
                 "type": "boolean",
@@ -101,8 +109,10 @@ export class ZChip {
                     "tags": [],
                     "text": "set z-chip as disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "ariaLabel": {
@@ -119,8 +129,10 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip aria-label string"
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             }
         };
@@ -145,4 +157,3 @@ export class ZChip {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -67,4 +67,3 @@ export const InteractiveIcon = {
     >
   `,
 };
-//# sourceMappingURL=index.stories.js.map