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

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

@@ -1,18 +1,12 @@
 import { Host, h } from "@stencil/core";
 import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
+// https://regex101.com/r/ZnoZQ5/3
+const ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;
 /**
  * Component to render an SVG icon from the internal icon set, selected by `name`.
  * 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 +17,38 @@ export class ZIcon {
         }
         return h("polygon", { points: iconValue });
     }
+    get hasColorIndicator() {
+        return COLOR_INDICATOR_ICONS.includes(this.name);
+    }
+    get needsTransparentIndicator() {
+        var _a;
+        return ["transparent", "#ffffff00"].includes((_a = this.indicatorColor) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+    }
+    /**
+     * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.
+     * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.
+     * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.
+     */
+    getTransparentIndicatorIconIfNeeded() {
+        var _a;
+        const transparentIconName = (_a = this.name) === null || _a === void 0 ? void 0 : _a.replace(ICON_NAME_SUFFIX_REGEX, "$1-transparent$3");
+        if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {
+            return this.name;
+        }
+        return transparentIconName;
+    }
+    /**
+     * Render the icon with the color indicator.
+     * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.
+     */
+    renderColorIndicator() {
+        return (h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS["picker-color"])));
+    }
+    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, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
+    }
     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: 'a25f6701cc68dc9fbf9d14b4e8747d4ead9ee44b', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -59,8 +78,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 +97,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 +116,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 +135,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 +154,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 +173,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/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: 'c3062d082fff5558ebcc44b6c15feaa9d4fdf9f9', id: this.boxid }, h("slot", { key: 'd4d4b0bdb644a777c22489afa52c990748bf1da7', name: "content" }), this.isclosable && (h("z-icon", { key: '4b02226c9a11e800ad1ac956471683f4546d39c3', 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-reveal/index.js

@@ -4,18 +4,22 @@ import { ControlSize, InfoRevealPosition } from "../../beans";
  * Info reveal component.
  *
  * @slot - content of the info panel.
- * @cssprop --z-info-reveal-panel-width - Width of the info panel.
- * @cssprop --trigger-icon-size - Size of the trigger icon for big size.
- * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
- * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
  */
 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 +54,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: 'f9bc69d9bdbc9b2e30687f54877b241b51df3e45', open: this.open }, h("button", { key: 'f0dc5ceaf6f24d5597699b3158074403bac8f641', 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: '5cddcacfd8d9e5f3dc8a1c171aa50621d6e2b044', name: this.icon }), this.label && h("span", { key: '5417e101306098a399a9f8e6a39d1637be4f8901', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'bd57a9686560c17c5d670a6fa87396a509ffb50a', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'bd5fd2a1cf9c2a95fbb9ea966a0f09ec1940c9f9' }), h("button", { key: '73a9178e3ea240abad5d91f2fd82879313d2df24', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'de404809d5ea1fd51b36abc74518448c7502927e', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }
@@ -80,8 +84,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 +100,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 +111,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 +131,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 +150,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 +166,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 +177,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 +216,3 @@ export class ZInfoReveal {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-info-reveal/styles.css

@@ -1,5 +1,11 @@
 :host {
-  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */
+  /**
+   * @prop --z-info-reveal-panel-width: Width of the info panel.
+   * @prop --trigger-icon-size: Size of the trigger icon for big size.
+   * @prop --trigger-icon-size-small: Size of the trigger icon for small size.
+   * @prop --trigger-icon-size-x-small: Size of the trigger icon for x-small size.
+   */
+  --z-info-reveal-panel-width: 384px; /* defaults to half the maximum size of the mobile breakpoint */
   --trigger-size: 44px;
 
   position: relative;