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

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: '7dd8f9f2d4c632559d1e9b3b04e2d139d3cdd1ce', 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: 'af4721aa7ef2e3c8381685bb2eadd19a35effc81', name: this.icon }), h("slot", { key: '521b4fc72980f48dec8ee49c6fc3c06df3c9bf9a' }), this.interactiveIcon && (h("button", { key: '15cb6244073a9402ee3cb147f74cf3763b2a02cd', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a7c434efafd9891a5262dffa24136724acc0f791', 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

package/dist/collection/components/z-color-picker/index.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { ColorPickerPalette } from "../../beans";
 import { containsElement } from "../../utils/utils";
 const LOCALES = {
@@ -21,15 +21,20 @@ const COLOR_GROUPS = 9;
  */
 export class ZColorPicker {
     constructor() {
+        /**
+         * The language for the aria labels inside the color picker.
+         */
+        this.lng = "it";
+        /**
+         * Disables the transparent color option.
+         * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` ("dark gray 2").
+         */
+        this.disableTransparent = false;
         /**
          * The color keys arranged in row-major order for rendering and navigation.
          */
         this.colorKeysByRow = [];
         this._colorButtons = [];
-        this.selectedColor = undefined;
-        this.lng = "it";
-        this.htmlAriaLabel = undefined;
-        this.disableTransparent = false;
     }
     get colorButtons() {
         if (!this._colorButtons.length) {
@@ -187,7 +192,7 @@ export class ZColorPicker {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: '24f0e76aecda9731ed826e8228f49ca5e08a14a5', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: 'c834820884acc8c3bdf4571379cbe6da74e7ea89', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));
@@ -211,12 +216,13 @@ export class ZColorPicker {
                 "mutable": true,
                 "complexType": {
                     "original": "ColorPickerPalette",
-                    "resolved": "\"#FFFFFF00\" | \"#FFFFFF\" | \"#CCCCCC\" | \"#7E7E7E\" | \"#333333\" | \"#FFCCCC\" | \"#FF9999\" | \"#FF3333\" | \"#CC0000\" | \"#660000\" | \"#FFE1CC\" | \"#FFC399\" | \"#FF8933\" | \"#CC5500\" | \"#662B00\" | \"#FFF7CC\" | \"#FFEE99\" | \"#FFDD33\" | \"#CCAA00\" | \"#665600\" | \"#DDFFCC\" | \"#BBFF99\" | \"#77FF33\" | \"#44CC00\" | \"#226600\" | \"#CCFFE5\" | \"#99FFCC\" | \"#33FF99\" | \"#00CC66\" | \"#006633\" | \"#CCEEFF\" | \"#99DDFF\" | \"#33BBFF\" | \"#0088CC\" | \"#004466\" | \"#D4CCFF\" | \"#AA99FF\" | \"#5533FF\" | \"#2200CC\" | \"#110066\" | \"#FFCCFF\" | \"#FF99FF\" | \"#FF33FF\" | \"#CC00CC\" | \"#660066\"",
+                    "resolved": "\"#004466\" | \"#006633\" | \"#0088CC\" | \"#00CC66\" | \"#110066\" | \"#2200CC\" | \"#226600\" | \"#333333\" | \"#33BBFF\" | \"#33FF99\" | \"#44CC00\" | \"#5533FF\" | \"#660000\" | \"#660066\" | \"#662B00\" | \"#665600\" | \"#77FF33\" | \"#7E7E7E\" | \"#99DDFF\" | \"#99FFCC\" | \"#AA99FF\" | \"#BBFF99\" | \"#CC0000\" | \"#CC00CC\" | \"#CC5500\" | \"#CCAA00\" | \"#CCCCCC\" | \"#CCEEFF\" | \"#CCFFE5\" | \"#D4CCFF\" | \"#DDFFCC\" | \"#FF3333\" | \"#FF33FF\" | \"#FF8933\" | \"#FF9999\" | \"#FF99FF\" | \"#FFC399\" | \"#FFCCCC\" | \"#FFCCFF\" | \"#FFDD33\" | \"#FFE1CC\" | \"#FFEE99\" | \"#FFF7CC\" | \"#FFFFFF\" | \"#FFFFFF00\"",
                     "references": {
                         "ColorPickerPalette": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ColorPickerPalette"
+                            "id": "src/beans/index.tsx::ColorPickerPalette",
+                            "referenceLocation": "ColorPickerPalette"
                         }
                     }
                 },
@@ -226,8 +232,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The selected color to highlight."
                 },
-                "attribute": "selected-color",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-color"
             },
             "lng": {
                 "type": "string",
@@ -243,8 +251,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The language for the aria labels inside the color picker."
                 },
-                "attribute": "lng",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "lng",
                 "defaultValue": "\"it\""
             },
             "htmlAriaLabel": {
@@ -261,8 +271,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The aria-label for the color picker, e.g. \"Select a background color for the label\"."
                 },
-                "attribute": "html-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
             },
             "disableTransparent": {
                 "type": "boolean",
@@ -278,8 +290,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "Disables the transparent color option.\nSetting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\")."
                 },
-                "attribute": "disable-transparent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disable-transparent",
                 "defaultValue": "false"
             }
         };
@@ -297,12 +311,13 @@ export class ZColorPicker {
                 },
                 "complexType": {
                     "original": "ColorPickerPalette",
-                    "resolved": "\"#FFFFFF00\" | \"#FFFFFF\" | \"#CCCCCC\" | \"#7E7E7E\" | \"#333333\" | \"#FFCCCC\" | \"#FF9999\" | \"#FF3333\" | \"#CC0000\" | \"#660000\" | \"#FFE1CC\" | \"#FFC399\" | \"#FF8933\" | \"#CC5500\" | \"#662B00\" | \"#FFF7CC\" | \"#FFEE99\" | \"#FFDD33\" | \"#CCAA00\" | \"#665600\" | \"#DDFFCC\" | \"#BBFF99\" | \"#77FF33\" | \"#44CC00\" | \"#226600\" | \"#CCFFE5\" | \"#99FFCC\" | \"#33FF99\" | \"#00CC66\" | \"#006633\" | \"#CCEEFF\" | \"#99DDFF\" | \"#33BBFF\" | \"#0088CC\" | \"#004466\" | \"#D4CCFF\" | \"#AA99FF\" | \"#5533FF\" | \"#2200CC\" | \"#110066\" | \"#FFCCFF\" | \"#FF99FF\" | \"#FF33FF\" | \"#CC00CC\" | \"#660066\"",
+                    "resolved": "\"#004466\" | \"#006633\" | \"#0088CC\" | \"#00CC66\" | \"#110066\" | \"#2200CC\" | \"#226600\" | \"#333333\" | \"#33BBFF\" | \"#33FF99\" | \"#44CC00\" | \"#5533FF\" | \"#660000\" | \"#660066\" | \"#662B00\" | \"#665600\" | \"#77FF33\" | \"#7E7E7E\" | \"#99DDFF\" | \"#99FFCC\" | \"#AA99FF\" | \"#BBFF99\" | \"#CC0000\" | \"#CC00CC\" | \"#CC5500\" | \"#CCAA00\" | \"#CCCCCC\" | \"#CCEEFF\" | \"#CCFFE5\" | \"#D4CCFF\" | \"#DDFFCC\" | \"#FF3333\" | \"#FF33FF\" | \"#FF8933\" | \"#FF9999\" | \"#FF99FF\" | \"#FFC399\" | \"#FFCCCC\" | \"#FFCCFF\" | \"#FFDD33\" | \"#FFE1CC\" | \"#FFEE99\" | \"#FFF7CC\" | \"#FFFFFF\" | \"#FFFFFF00\"",
                     "references": {
                         "ColorPickerPalette": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ColorPickerPalette"
+                            "id": "src/beans/index.tsx::ColorPickerPalette",
+                            "referenceLocation": "ColorPickerPalette"
                         }
                     }
                 }
@@ -364,4 +379,3 @@ export class ZColorPicker {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-color-picker/index.stories.js

@@ -31,4 +31,3 @@ export const Default = {
       .disableTransparent=${args.disableTransparent}
     ></z-color-picker>`,
 };
-//# sourceMappingURL=index.stories.js.map