@zanichelli/albe-web-components 19.2.4 → 19.2.6-RC1

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

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

@@ -1,43 +1,36 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { Fragment, Host } from "@stencil/core/internal";
 import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
 import { boolean, randomId } from "../../utils/utils";
 export class ZInput {
     constructor() {
-        this.typingtimeout = 300;
+        /** the id of the input element */
         this.htmlid = `id-${randomId()}`;
-        this.type = undefined;
-        this.name = undefined;
-        this.label = undefined;
+        /** the input aria-label */
         this.ariaLabel = "";
+        /** the input aria-expaded: available for text, password, number, email */
         this.htmlAriaExpanded = "";
-        this.htmlAriaControls = undefined;
-        this.htmlAriaAutocomplete = undefined;
-        this.htmlAriaActivedescendant = undefined;
-        this.value = undefined;
+        /** the input is disabled */
         this.disabled = false;
+        /** the input is readonly */
         this.readonly = false;
+        /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
         this.required = false;
+        /** checked: available for checkbox, radio */
         this.checked = false;
-        this.placeholder = undefined;
-        this.htmltitle = undefined;
-        this.status = undefined;
+        /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
         this.message = true;
-        this.htmlAriaDescribedBy = undefined;
+        /** the input label position: available for checkbox, radio */
         this.labelPosition = LabelPosition.RIGHT;
-        this.autocomplete = undefined;
+        /** the input role */
         this.role = "";
+        /** render clear icon when typing (optional): available for text */
         this.hasclearicon = true;
-        this.icon = undefined;
-        this.min = undefined;
-        this.minlength = undefined;
-        this.max = undefined;
-        this.maxlength = undefined;
-        this.step = undefined;
-        this.pattern = undefined;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
         this.isTyping = false;
         this.passwordHidden = true;
+        this.typingtimeout = 300;
     }
     inputCheckListener(e) {
         const data = e.detail;
@@ -273,7 +266,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '5947648f0faeea551f24f57b685f0872cdabe77e' }, input);
+        return h(Host, { key: 'e3f830979b2d6306b19c5a0357ca48b42d142a74' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
@@ -303,8 +296,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the id of the input element"
                 },
-                "attribute": "htmlid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "htmlid",
                 "defaultValue": "`id-${randomId()}`"
             },
             "type": {
@@ -317,7 +312,8 @@ export class ZInput {
                         "InputType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputType"
+                            "id": "src/beans/index.tsx::InputType",
+                            "referenceLocation": "InputType"
                         }
                     }
                 },
@@ -327,8 +323,10 @@ export class ZInput {
                     "tags": [],
                     "text": "input types"
                 },
-                "attribute": "type",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type"
             },
             "name": {
                 "type": "string",
@@ -344,8 +342,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input name"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "label": {
                 "type": "string",
@@ -361,8 +361,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input label"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "ariaLabel": {
                 "type": "string",
@@ -378,8 +380,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-label"
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             },
             "htmlAriaExpanded": {
@@ -396,8 +400,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-expaded: available for text, password, number, email"
                 },
-                "attribute": "html-aria-expanded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-aria-expanded",
                 "defaultValue": "\"\""
             },
             "htmlAriaControls": {
@@ -414,8 +420,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-controls (optional): available for text, password, number, email"
                 },
-                "attribute": "html-aria-controls",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-controls"
             },
             "htmlAriaAutocomplete": {
                 "type": "string",
@@ -431,8 +439,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-autocomplete (optional): available for text, password, number, email"
                 },
-                "attribute": "html-aria-autocomplete",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-autocomplete"
             },
             "htmlAriaActivedescendant": {
                 "type": "string",
@@ -448,8 +458,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-activedescendant (optional): available for text, password, number, email"
                 },
-                "attribute": "html-aria-activedescendant",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-activedescendant"
             },
             "value": {
                 "type": "string",
@@ -465,8 +477,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input value"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
@@ -482,8 +496,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
@@ -500,8 +516,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is readonly"
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "required": {
@@ -518,8 +536,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is required (optional): available for text, password, number, email, textarea, checkbox"
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "checked": {
@@ -536,8 +556,10 @@ export class ZInput {
                     "tags": [],
                     "text": "checked: available for checkbox, radio"
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "placeholder": {
@@ -554,8 +576,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input placeholder (optional)"
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "htmltitle": {
                 "type": "string",
@@ -571,8 +595,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input html title (optional)"
                 },
-                "attribute": "htmltitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "htmltitle"
             },
             "status": {
                 "type": "string",
@@ -584,7 +610,8 @@ export class ZInput {
                         "InputStatus": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputStatus"
+                            "id": "src/beans/index.tsx::InputStatus",
+                            "referenceLocation": "InputStatus"
                         }
                     }
                 },
@@ -594,8 +621,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input status (optional): available for text, password, number, email, textarea"
                 },
-                "attribute": "status",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
             },
             "message": {
                 "type": "any",
@@ -611,8 +640,10 @@ export class ZInput {
                     "tags": [],
                     "text": "input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed"
                 },
-                "attribute": "message",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "message",
                 "defaultValue": "true"
             },
             "htmlAriaDescribedBy": {
@@ -629,8 +660,10 @@ export class ZInput {
                     "tags": [],
                     "text": "input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value"
                 },
-                "attribute": "html-aria-described-by",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-described-by"
             },
             "labelPosition": {
                 "type": "string",
@@ -642,7 +675,8 @@ export class ZInput {
                         "LabelPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::LabelPosition"
+                            "id": "src/beans/index.tsx::LabelPosition",
+                            "referenceLocation": "LabelPosition"
                         }
                     }
                 },
@@ -652,8 +686,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input label position: available for checkbox, radio"
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "LabelPosition.RIGHT"
             },
             "autocomplete": {
@@ -670,8 +706,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input has autocomplete option (optional): available for text, password, number, email"
                 },
-                "attribute": "autocomplete",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
             },
             "role": {
                 "type": "string",
@@ -687,8 +725,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input role"
                 },
-                "attribute": "role",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "role",
                 "defaultValue": "\"\""
             },
             "hasclearicon": {
@@ -705,8 +745,10 @@ export class ZInput {
                     "tags": [],
                     "text": "render clear icon when typing (optional): available for text"
                 },
-                "attribute": "hasclearicon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hasclearicon",
                 "defaultValue": "true"
             },
             "icon": {
@@ -723,8 +765,10 @@ export class ZInput {
                     "tags": [],
                     "text": "render icon (optional): available for text"
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "min": {
                 "type": "number",
@@ -740,8 +784,10 @@ export class ZInput {
                     "tags": [],
                     "text": "min number value (optional): available for number"
                 },
-                "attribute": "min",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
             },
             "minlength": {
                 "type": "number",
@@ -757,8 +803,10 @@ export class ZInput {
                     "tags": [],
                     "text": "Min length value (optional): available for text"
                 },
-                "attribute": "minlength",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minlength"
             },
             "max": {
                 "type": "number",
@@ -774,8 +822,10 @@ export class ZInput {
                     "tags": [],
                     "text": "max number value (optional): available for number"
                 },
-                "attribute": "max",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
             },
             "maxlength": {
                 "type": "number",
@@ -791,8 +841,10 @@ export class ZInput {
                     "tags": [],
                     "text": "Max length value (optional): available for text"
                 },
-                "attribute": "maxlength",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
             },
             "step": {
                 "type": "number",
@@ -808,8 +860,10 @@ export class ZInput {
                     "tags": [],
                     "text": "step number value (optional): available for number"
                 },
-                "attribute": "step",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
             },
             "pattern": {
                 "type": "string",
@@ -825,8 +879,10 @@ export class ZInput {
                     "tags": [],
                     "text": "pattern value (optional): available for tel, text, search, url, email, password"
                 },
-                "attribute": "pattern",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
             },
             "size": {
                 "type": "string",
@@ -838,7 +894,8 @@ export class ZInput {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -848,8 +905,10 @@ export class ZInput {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             }
         };
@@ -985,4 +1044,3 @@ export class ZInput {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -291,4 +291,3 @@ export const ZInputNumber = {
     ></z-input>
   `,
 };
-//# sourceMappingURL=index.stories.js.map