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

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

@@ -12,6 +12,7 @@
 
 :host {
   display: block;
+  min-width: 290px;
   color: var(--color-form-default-text);
   fill: var(--color-form-default-icon);
   font-family: var(--font-family-sans);
@@ -146,6 +147,46 @@
   --background-active-color-list-element: var(--color-form-surface03);
 }
 
+:host .open-combo-data z-list-element[disabled] {
+  pointer-events: none;
+}
+
+:host .open-combo-data z-list-element .option-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--space-unit);
+}
+
+:host .open-combo-data z-list-element[size="medium"] .option-wrap,
+:host .open-combo-data z-list-element[size="small"] .option-wrap {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+
+  font-size: var(--font-size-2);
+  gap: calc(var(--space-unit) / 2);
+}
+
+:host .open-combo-data z-list-element .option-wrap > z-icon {
+  fill: var(--color-primary01);
+}
+
+:host .open-combo-data z-list-element[disabled] .option-wrap > z-icon {
+  fill: var(--color-disabled01);
+}
+
+:host .open-combo-data z-list-element .option-wrap > z-icon.focused {
+  border-radius: var(--border-radius-small);
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host .open-combo-data z-list-element .option-wrap > [role="option"]:focus,
+:host .open-combo-data z-list-element .option-wrap > [role="option"]:focus-visible {
+  outline: none;
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);

package/dist/collection/components/z-cover-hero/index.js

@@ -13,8 +13,20 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  */
 export class ZCoverHero {
     constructor() {
+        /**
+         * Cover hero variant. Can be `OVERLAY` or `STACKED`.
+         */
         this.variant = CoverHeroVariant.OVERLAY;
+        /**
+         * Vertical content position (for `STACKED` variant).
+         */
         this.contentPosition = CoverHeroContentPosition.TOP;
+        /**
+         * Whether to keep the image aspect ratio.
+         * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
+         * instead, the height of the component follows the content's one.
+         * Note: it may be necessary to set a min and/or max height to the component.
+         */
         this.preserveAspectRatio = true;
     }
     /**
@@ -35,9 +47,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '1eb5d39f26e19f213d435c185167eb83500225f3' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '0e8ec76a2293bbf7044d2a5d0ec951ac096adcd1' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '61c495773839b7741f674719325fe98a65956986', class: "main-container" }, h("div", { key: '0ea2f83f40f60017fb2e7a4501cb67c34d954f6c', class: "cover-container" }, h("slot", { key: '68a40d93440b22ce2afb9ff8db3cb9ca90ec7263', name: "cover" })), h("slot", { key: 'c29feaf859382807e0e55bcf2db27a98387c2e96', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: 'e2dd8963eb05d5a1a602b05d6275d52c01b8dbc9', class: "main-container" }, h("div", { key: '3b537c3b07906fd72795b105e4189252bf876b51', class: "cover-container" }, h("slot", { key: 'f99228a940cfc96ae4ff98a6b79df622d033e00d', name: "cover" })), h("slot", { key: '86b43980717df411f76b098628d83fa80c8dcff6', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }
@@ -65,7 +77,8 @@ export class ZCoverHero {
                         "CoverHeroVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroVariant"
+                            "id": "src/beans/index.tsx::CoverHeroVariant",
+                            "referenceLocation": "CoverHeroVariant"
                         }
                     }
                 },
@@ -75,8 +88,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Cover hero variant. Can be `OVERLAY` or `STACKED`."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "CoverHeroVariant.OVERLAY"
             },
             "contentPosition": {
@@ -89,7 +104,8 @@ export class ZCoverHero {
                         "CoverHeroContentPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroContentPosition"
+                            "id": "src/beans/index.tsx::CoverHeroContentPosition",
+                            "referenceLocation": "CoverHeroContentPosition"
                         }
                     }
                 },
@@ -99,8 +115,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Vertical content position (for `STACKED` variant)."
                 },
-                "attribute": "content-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "content-position",
                 "defaultValue": "CoverHeroContentPosition.TOP"
             },
             "preserveAspectRatio": {
@@ -117,8 +135,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Whether to keep the image aspect ratio.\nIf set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\ninstead, the height of the component follows the content's one.\nNote: it may be necessary to set a min and/or max height to the component."
                 },
-                "attribute": "preserve-aspect-ratio",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "preserve-aspect-ratio",
                 "defaultValue": "true"
             }
         };
@@ -134,4 +154,3 @@ export class ZCoverHero {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-cover-hero/index.stories.js

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

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

@@ -2,12 +2,15 @@ import { Host, h } from "@stencil/core";
 import { DividerOrientation, DividerSize } from "../../beans";
 export class ZDivider {
     constructor() {
+        /** [optional] Divider size */
         this.size = DividerSize.SMALL;
+        /** [optional] Divider color */
         this.color = "gray200";
+        /** [optional] Divider orintation */
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '84826110c0a563d1b6f2654c540df49cdd0dfc7c', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '2be45be46ca78f9c49d78bb39d88a49a3e226074', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }
@@ -33,7 +36,8 @@ export class ZDivider {
                         "DividerSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerSize"
+                            "id": "src/beans/index.tsx::DividerSize",
+                            "referenceLocation": "DividerSize"
                         }
                     }
                 },
@@ -43,8 +47,10 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider size"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "DividerSize.SMALL"
             },
             "color": {
@@ -61,8 +67,10 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider color"
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "\"gray200\""
             },
             "orientation": {
@@ -75,7 +83,8 @@ export class ZDivider {
                         "DividerOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerOrientation"
+                            "id": "src/beans/index.tsx::DividerOrientation",
+                            "referenceLocation": "DividerOrientation"
                         }
                     }
                 },
@@ -85,11 +94,12 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider orintation"
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "DividerOrientation.HORIZONTAL"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -42,4 +42,3 @@ export const Default = {
     </div>`,
     name: "ZDivider",
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '597d6715119bb24d4a8427f9cb3ebd3b5a20f5fc' });
+        return h(Host, { key: 'a966fb0e58408172c56e7bb48deb1b5c0e5e0bb8' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -16,4 +16,3 @@ export class ZGhostLoading {
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-ghost-loading/index.stories.js

@@ -19,4 +19,3 @@ export const ZGhostLoading = {
         <div style="width:30%; height:50px;"><z-ghost-loading></z-ghost-loading></div>
       </div>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -5,14 +5,6 @@ import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
  */
 export class ZIcon {
-    constructor() {
-        this.name = undefined;
-        this.height = undefined;
-        this.width = undefined;
-        this.iconid = undefined;
-        this.fill = undefined;
-        this.indicatorColor = undefined;
-    }
     /**
      * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.
      * @param iconValue The SVG path data or polygon points from the ICONS set.
@@ -27,7 +19,7 @@ export class ZIcon {
         return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS[this.name])));
     }
     render() {
-        return (h(Host, { key: '8e6cee155a15fc1b19f9907a6f6155c8d607bfa4', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: '65da13cefdf22f1935d9e1dbc171522955b24f1b', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -57,8 +49,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon name"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "height": {
                 "type": "any",
@@ -74,8 +68,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon height (optional)"
                 },
-                "attribute": "height",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
             },
             "width": {
                 "type": "any",
@@ -91,8 +87,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon width (optional)"
                 },
-                "attribute": "width",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
             },
             "iconid": {
                 "type": "string",
@@ -108,8 +106,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "HTML `id` attribute (optional)"
                 },
-                "attribute": "iconid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "iconid"
             },
             "fill": {
                 "type": "string",
@@ -125,8 +125,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Name of the CSS color token to use for the icon fill color (e.g. `blue500`)."
                 },
-                "attribute": "fill",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fill"
             },
             "indicatorColor": {
                 "type": "string",
@@ -142,10 +144,11 @@ export class ZIcon {
                     "tags": [],
                     "text": "Color to use to fill the icon's color indicator, if it has one.\nCan be any valid value for the `fill` svg attribute.\nIf the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect."
                 },
-                "attribute": "indicator-color",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-color"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -68,4 +68,3 @@ export const ColorIndicator = {
       .indicatorColor=${args.indicatorColor}
     ></z-icon>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-info-box/index.js

@@ -4,14 +4,14 @@ import { h } from "@stencil/core";
  */
 export class ZInfoBox {
     constructor() {
-        this.boxid = undefined;
+        /** render close icon flag */
         this.isclosable = true;
     }
     emitInfoBoxClose() {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '18298328abf8d0e88340408882bdc529b55c1a28', id: this.boxid }, h("slot", { key: '297bb1bbd8e6adc082e3552ac2222983b1b11211', name: "content" }), this.isclosable && (h("z-icon", { key: 'fa3fa5831984754d4c8533d23437a4773bf926a6', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: 'fd98793fba98d03112f68de408227ecc8576ff1d', id: this.boxid }, h("slot", { key: '2bee1952cbc660bb9ff8bdbd0945e01f9204e019', name: "content" }), this.isclosable && (h("z-icon", { key: 'ec6380fd48bb52fb1aabca5d22af5641be539cf4', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }
@@ -41,8 +41,10 @@ export class ZInfoBox {
                     "tags": [],
                     "text": "info box unique id"
                 },
-                "attribute": "boxid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "boxid"
             },
             "isclosable": {
                 "type": "boolean",
@@ -58,8 +60,10 @@ export class ZInfoBox {
                     "tags": [],
                     "text": "render close icon flag"
                 },
-                "attribute": "isclosable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isclosable",
                 "defaultValue": "true"
             }
         };
@@ -83,4 +87,3 @@ export class ZInfoBox {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-info-box/index.stories.js

@@ -17,4 +17,3 @@ export const Default = {
       >
     </z-info-box>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-info-reveal/index.js

@@ -11,11 +11,19 @@ import { ControlSize, InfoRevealPosition } from "../../beans";
  */
 export class ZInfoReveal {
     constructor() {
+        /** Name of the icon for the trigger button */
         this.icon = "informationsource";
+        /**
+         * The position of the z-info-reveal in the page. This helps to correctly place the info panel.
+         * The panel will grow in the opposite direction of the position.
+         * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.
+         */
         this.position = InfoRevealPosition.BOTTOM_RIGHT;
-        this.label = undefined;
+        /** Aria label of the trigger button. It will be only used when `label` prop is empty. */
         this.ariaLabel = "Apri pannello informazioni";
+        /** Size of the trigger button */
         this.size = ControlSize.BIG;
+        /** Whether the info panel is open. */
         this.open = false;
     }
     /**
@@ -50,7 +58,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '250676e5bde8cb158ff19dd85c5b65aba329ab6d', open: this.open }, h("button", { key: 'ae9bd0a7a96c781ebc6e68f70b0553d9d08b8c4d', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'cda367464294fcdb6e87b7dd8804470fc600a196', name: this.icon }), this.label && h("span", { key: '33ee450958960b0eed18c6b630655c87d34d4b0f', class: "z-info-reveal-label" }, this.label)), h("div", { key: '717f241bbbd1034b8f7117d0875a859a27ecc3d0', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'f44d74a6183fdda5560fe8ced2e07ef12748b4b9' }), h("button", { key: '5071effe3449b8fe0285c080a0d9cb14be2b033c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '9f3088b1e5398bea476ea2da203cb8e2e106ea89', name: "multiply" })))));
+        return (h(Host, { key: '50e7cc3742371ca616f404374f63ccb337c3dc39', open: this.open }, h("button", { key: '906bdf2f949f4ae715ecc746e6e1feab8bf4d797', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'a4e890d446384c742df05db58a906b89e536f4e4', name: this.icon }), this.label && h("span", { key: 'b9955cb8ed95ecef6904d1cd4c8c9d08205b33c3', class: "z-info-reveal-label" }, this.label)), h("div", { key: '8c1d601f8e15f7f6dcd9cf235ff00ad251aaec54', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'c0f217e35810e1463d1f0761337353ea3940cc2b' }), h("button", { key: '6e507a1e6424c88dc90bf3fb9a841565d5bc6c6c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'd743f3aae62e253580122d556b933936b316c391', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }
@@ -80,8 +88,10 @@ export class ZInfoReveal {
                     "tags": [],
                     "text": "Name of the icon for the trigger button"
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "icon",
                 "defaultValue": "\"informationsource\""
             },
             "position": {
@@ -94,7 +104,8 @@ export class ZInfoReveal {
                         "InfoRevealPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InfoRevealPosition"
+                            "id": "src/beans/index.tsx::InfoRevealPosition",
+                            "referenceLocation": "InfoRevealPosition"
                         }
                     }
                 },
@@ -104,8 +115,10 @@ export class ZInfoReveal {
                     "tags": [],
                     "text": "The position of the z-info-reveal in the page. This helps to correctly place the info panel.\nThe panel will grow in the opposite direction of the position.\nFor example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left."
                 },
-                "attribute": "position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "position",
                 "defaultValue": "InfoRevealPosition.BOTTOM_RIGHT"
             },
             "label": {
@@ -122,8 +135,10 @@ export class ZInfoReveal {
                     "tags": [],
                     "text": "Label of the trigger button."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "ariaLabel": {
                 "type": "string",
@@ -139,8 +154,10 @@ export class ZInfoReveal {
                     "tags": [],
                     "text": "Aria label of the trigger button. It will be only used when `label` prop is empty."
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"Apri pannello informazioni\""
             },
             "size": {
@@ -153,7 +170,8 @@ export class ZInfoReveal {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -163,8 +181,10 @@ export class ZInfoReveal {
                     "tags": [],
                     "text": "Size of the trigger button"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             }
         };
@@ -200,4 +220,3 @@ export class ZInfoReveal {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-info-reveal/index.stories.js

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