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

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: 'a1cdec0e15f102c34f4db49158857692298341b1' });
+        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.
@@ -23,13 +15,11 @@ export class ZIcon {
         }
         return h("polygon", { points: iconValue });
     }
+    renderBaseIcon() {
+        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() {
-        const svgAttrs = {
-            viewBox: "0 0 1000 1000",
-            width: this.width,
-            height: this.height,
-        };
-        return (h(Host, { key: '09183fdee2304748943d57bcfb10921369a84159', "aria-hidden": "true" }, h("div", { key: '8d1f3b6dd3a7cc69383be36f1951ee29694655b6', class: "icon-wrapper" }, h("svg", Object.assign({ key: '0ac79b86fdfa9083a7c4dc89d5a970d3fd89ded5', id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined }, svgAttrs), this.selectPathOrPolygon(ICONS[this.name])), COLOR_INDICATOR_ICONS.includes(this.name) && (h("svg", Object.assign({ key: '9b08ff27c45ced5b70184b495f66ca3accf756df', class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00" }, svgAttrs), this.selectPathOrPolygon(ICONS["picker-color"]))))));
+        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"; }
@@ -59,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",
@@ -76,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",
@@ -93,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",
@@ -110,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",
@@ -127,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",
@@ -144,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-icon/styles.css

@@ -1,4 +1,5 @@
 :host {
+  display: inline;
   margin-right: var(--z-icon-right-margin, 0);
   margin-left: var(--z-icon-left-margin, 0);
   line-height: 0;
@@ -8,7 +9,7 @@
 .icon-wrapper {
   position: relative;
   z-index: 0;
-  display: block;
+  display: inline-block;
 }
 
 svg:not([width]) {
@@ -19,7 +20,7 @@ svg:not([height]) {
   height: var(--z-icon-height, 1.125rem);
 }
 
-svg.color-indicator {
+.icon-wrapper svg.color-indicator {
   position: absolute;
   z-index: -1;
   bottom: 0;

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: '770d8904081080758219f87d24f5a56846f1fad1', id: this.boxid }, h("slot", { key: 'a6fa079647709fc3c8326c2d73cdd1da884c4b58', name: "content" }), this.isclosable && (h("z-icon", { key: '63de143e010971175608c651d2d2f0c87ee98797', 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: '1513bcc5c069d2139b545336a7727318c858715a', open: this.open }, h("button", { key: 'c9be4b8852ea1b3c304e0cb4ad4fb91cd6317b89', 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: '28ca4682e7b5df0f0f32e35347ff5ee6fadf5e50', name: this.icon }), this.label && h("span", { key: '5addb4ddd3faafda6c8643d601589ffa6401b736', class: "z-info-reveal-label" }, this.label)), h("div", { key: '303f34b830370e5272ef88ebbcba57a7167f8ff8', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'df5e74f3c5b119ae6dd76d817e0f4040abddfdc7' }), h("button", { key: 'cec932ffcdb5f5d1c2738f3ba5bf59621f3f114c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'c47908d600b21d38fc3135755c83545ed78fffcb', 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