npm - @zanichelli/albe-web-components - Versions diffs - 19.6.1 → 20.0.0 - Mend

@zanichelli/albe-web-components 19.6.1 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (903) hide show

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

@@ -15,8 +15,8 @@ export class ZInfoReveal {
          * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.
          */
         this.position = InfoRevealPosition.BOTTOM_RIGHT;
-        /** Aria label of the trigger button. It will be only used when `label` prop is empty. */
-        this.ariaLabel = "Apri pannello informazioni";
+        /** `aria-label` of the trigger button. It will be used only when the `label` prop is empty. */
+        this.htmlAriaLabel = "Apri pannello informazioni";
         /** Size of the trigger button */
         this.size = ControlSize.BIG;
         /** Whether the info panel is open. */
@@ -54,7 +54,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '062623399b8e6d19274dd482570f4ae1649ef23b', open: this.open }, h("button", { key: '1fc4f3951ad4055943e7ef8fc61d94cc425e70c2', 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: '67d263d17b3a238af33c7fd5785a4409b3817eb7', name: this.icon }), this.label && h("span", { key: '8de421e649b240588bd11a87a4f241ddd7bee004', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'd588ee526e87e72712a00b78c9090ed40b6473c9', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'd6739b3a91ba44106ee1f72abd185bf2a7bc5727' }), h("button", { key: '978742081a1d1f51b0e05d99989e0bfc5c7cf276', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'bef98b8858f38d06099d94a33bb8b97c588a8465', name: "multiply" })))));
+        return (h(Host, { key: 'a22a540c0df59b75d4b370404df70d37103929dc', open: this.open }, h("button", { key: '598227d587b1ff22723db6f5213bbd9747bc2f3b', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.htmlAriaLabel || undefined : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '28f2d30a031423a803e9d7692b2303c627dabb77', name: this.icon }), this.label && h("span", { key: '3902d42ce7f4d265b298ab52bb448b93d42ec7a7', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'f8750e21dfd80927ad78dc3fcf1e97b7a7298308', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'd844cc6197c5459fde0c725670fa8a2f28fb7c01' }), h("button", { key: '67891868418b95d9de7f9ffee578ba58df9d0eef', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '66a137e3737db5bad4ca9acdc41d3bdcb7ab089f', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }
@@ -136,7 +136,7 @@ export class ZInfoReveal {
                 "reflect": false,
                 "attribute": "label"
             },
-            "ariaLabel": {
+            "htmlAriaLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -148,12 +148,12 @@ export class ZInfoReveal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Aria label of the trigger button. It will be only used when `label` prop is empty."
+                    "text": "`aria-label` of the trigger button. It will be used only when the `label` prop is empty."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-label",
+                "attribute": "html-aria-label",
                 "defaultValue": "\"Apri pannello informazioni\""
             },
             "size": {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-reveal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC1G,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE5D;;;;GAIG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME,8CAA8C;QAE9C,SAAI,GAAI,mBAAmB,CAAC;QAE5B;;;;WAIG;QAEH,aAAQ,GAAwB,kBAAkB,CAAC,YAAY,CAAC;QAMhE~~,yFAAyF~~;~~QAEzF~~,~~cAAS~~,GAAG,4BAA4B,CAAC;~~QAEzC~~,iCAAiC;QAEjC,SAAI,GAAiB,WAAW,CAAC,GAAG,CAAC;QAErC,sCAAsC;QAEtC,SAAI,GAAG,KAAK,CAAC;KAiFd;IA3EC;;OAEG;IAIH,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;QACvD,yGAAyG;QACzG,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;IACpD,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED;;OAEG;IACK,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACxC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,~~mBACrC~~,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC7B,qBAAqB;gBAElC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;gBACxC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D;YACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;gBAElB,8DAAa;gBACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B;oBAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/*\n Info reveal component.\n \n @slot - content of the info panel.\n /\n@Component({\n tag: \"z-info-reveal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoReveal implements ComponentInterface {\n /* Name of the icon for the trigger button /\n @Prop()\n icon? = \"informationsource\";\n\n /\n The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n * The panel will grow in the opposite direction of the position.\n * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n /\n @Prop({reflect: true})\n position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n /* Label of the trigger button. /\n @Prop()\n label?: string;\n\n /* ~~Aria~~ label of the trigger button. It will be only ~~used~~ when `label` prop is empty. /\n @Prop()\n ~~ariaLabel~~ = \"Apri pannello informazioni\";\n\n /* Size of the trigger button /\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n /* Whether the info panel is open. /\n @State()\n open = false;\n\n @Element() host: HTMLZInfoRevealElement;\n\n private panel: HTMLDivElement;\n\n /\n Adjust the position of the info panel to prevent exiting the viewport.\n /\n @Watch(\"position\")\n @Watch(\"open\")\n @Listen(\"resize\", {target: \"window\", passive: true})\n adjustPanelPosition(): void {\n if (!this.open \|\| !this.panel) {\n return;\n }\n\n const rect = this.host.getBoundingClientRect();\n const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n const pageWidth = document.documentElement.offsetWidth;\n // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n const availableSpace = Math.round(\n (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n );\n this.panel.style.maxWidth = `${availableSpace}px`;\n }\n\n /\n Toggle the open state of the info panel.\n /\n private togglePanel(): void {\n this.open = !this.open;\n }\n\n /\n Close the info panel.\n */\n private closePanel(): void {\n this.open = false;\n }\n\n @Listen(\"keydown\", {target: \"window\", capture: true})\n handleEscapeKey(event: KeyboardEvent): void {\n if (event.key === \"Escape\" && this.open) {\n this.closePanel();\n }\n }\n\n render(): HTMLZInfoRevealElement {\n return (\n <Host open={this.open}>\n <button\n class=\"z-info-reveal-trigger\"\n type=\"button\"\n onClick={this.togglePanel.bind(this)}\n aria-label={!this.label ? this.~~ariaLabel~~ : undefined}\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-controls=\"z-info-reveal-panel\"\n >\n {this.icon && <z-icon name={this.icon} />}\n {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n </button>\n <div\n class=\"z-info-reveal-panel\"\n id=\"z-info-reveal-panel\"\n ref={(el) => (this.panel = el)}\n hidden={!this.open}\n >\n <slot></slot>\n <button\n class=\"z-info-reveal-close\"\n type=\"button\"\n onClick={this.closePanel.bind(this)}\n aria-label=\"Chiudi pannello informazioni\"\n >\n <z-icon name=\"multiply\" />\n </button>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-reveal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/*\n Info reveal component.\n \n @slot - content of the info panel.\n /\n@Component({\n tag: \"z-info-reveal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoReveal implements ComponentInterface {\n /* Name of the icon for the trigger button /\n @Prop()\n icon? = \"informationsource\";\n\n /\n The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n * The panel will grow in the opposite direction of the position.\n * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n /\n @Prop({reflect: true})\n position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n /* Label of the trigger button. /\n @Prop()\n label?: string;\n\n /* `aria-label` of the trigger button. It will be used only when the `label` prop is empty. /\n @Prop()\n htmlAriaLabel = \"Apri pannello informazioni\";\n\n /* Size of the trigger button /\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n /* Whether the info panel is open. /\n @State()\n open = false;\n\n @Element() host: HTMLZInfoRevealElement;\n\n private panel: HTMLDivElement;\n\n /\n Adjust the position of the info panel to prevent exiting the viewport.\n /\n @Watch(\"position\")\n @Watch(\"open\")\n @Listen(\"resize\", {target: \"window\", passive: true})\n adjustPanelPosition(): void {\n if (!this.open \|\| !this.panel) {\n return;\n }\n\n const rect = this.host.getBoundingClientRect();\n const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n const pageWidth = document.documentElement.offsetWidth;\n // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n const availableSpace = Math.round(\n (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n );\n this.panel.style.maxWidth = `${availableSpace}px`;\n }\n\n /\n Toggle the open state of the info panel.\n /\n private togglePanel(): void {\n this.open = !this.open;\n }\n\n /\n Close the info panel.\n */\n private closePanel(): void {\n this.open = false;\n }\n\n @Listen(\"keydown\", {target: \"window\", capture: true})\n handleEscapeKey(event: KeyboardEvent): void {\n if (event.key === \"Escape\" && this.open) {\n this.closePanel();\n }\n }\n\n render(): HTMLZInfoRevealElement {\n return (\n <Host open={this.open}>\n <button\n class=\"z-info-reveal-trigger\"\n type=\"button\"\n onClick={this.togglePanel.bind(this)}\n aria-label={!this.label ? this.htmlAriaLabel \|\| undefined : undefined}\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-controls=\"z-info-reveal-panel\"\n >\n {this.icon && <z-icon name={this.icon} />}\n {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n </button>\n <div\n class=\"z-info-reveal-panel\"\n id=\"z-info-reveal-panel\"\n ref={(el) => (this.panel = el)}\n hidden={!this.open}\n >\n <slot></slot>\n <button\n class=\"z-info-reveal-close\"\n type=\"button\"\n onClick={this.closePanel.bind(this)}\n aria-label=\"Chiudi pannello informazioni\"\n >\n <z-icon name=\"multiply\" />\n </button>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1,15 +1,13 @@
 import { h, } from "@stencil/core";
-import { Fragment, Host } from "@stencil/core/internal";
+import { Fragment } from "@stencil/core/internal";
 import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
 import { boolean, randomId } from "../../utils/utils";
 export class ZInput {
     constructor() {
         /** the id of the input element */
         this.htmlid = `id-${randomId()}`;
-        /** the input aria-label */
-        this.ariaLabel = "";
-        /** the input aria-expaded: available for text, password, number, email */
-        this.htmlAriaExpanded = "";
+        /** Input type */
+        this.type = InputType.TEXT;
         /** the input is disabled */
         this.disabled = false;
         /** the input is readonly */
@@ -22,8 +20,6 @@ export class ZInput {
         this.message = true;
         /** the input label position: available for checkbox, radio */
         this.labelPosition = LabelPosition.RIGHT;
-        /** the input role */
-        this.role = "";
         /** render clear icon when typing (optional): available for text */
         this.hasclearicon = true;
         /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
@@ -146,27 +142,22 @@ export class ZInput {
         };
     }
     inputHasMessage() {
-        if (boolean(this.message) === false || boolean(this.message) === true) {
+        if (typeof boolean(this.message) === "boolean") {
             return false;
         }
         return true;
     }
     getAriaAttributes() {
-        return Object.assign(Object.assign(Object.assign({}, (this.role ? { role: this.role } : {})), (this.htmlAriaDescribedBy ? { "aria-describedby": this.htmlAriaDescribedBy } : {})), (this.htmlAriaLabelledby ? { "aria-labelledby": this.htmlAriaLabelledby } : {}));
+        return {
+            "role": this.htmlRole || undefined,
+            "aria-describedby": this.htmlAriaDescribedby || undefined,
+            "aria-labelledby": this.htmlAriaLabelledby || undefined,
+        };
     }
     getTextAriaAttributes() {
-        const expanded = this.htmlAriaExpanded ? { "aria-expanded": this.htmlAriaExpanded } : {};
-        const controls = this.htmlAriaControls ? { "aria-controls": this.htmlAriaControls } : {};
-        const autocomplete = this.htmlAriaAutocomplete ? { "aria-autocomplete": this.htmlAriaAutocomplete } : {};
-        const activedescendant = this.htmlAriaActivedescendant
-            ? { "aria-activedescendant": this.htmlAriaActivedescendant }
-            : {};
-        const ariaDescribedby = this.htmlAriaDescribedBy || this.inputHasMessage()
-            ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
-            : {};
-        const ariaInvalid = this.status === InputStatus.ERROR ? { "aria-invalid": "true" } : {};
-        const required = this.required ? { "aria-required": "true" } : {};
-        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getAriaAttributes()), expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid), required);
+        return Object.assign(Object.assign({}, this.getAriaAttributes()), { "aria-expanded": this.htmlAriaExpanded || undefined, "aria-controls": this.htmlAriaControls || undefined, "aria-autocomplete": this.htmlAriaAutocomplete || undefined, "aria-activedescendant": this.htmlAriaActivedescendant || undefined, "aria-describedby": this.htmlAriaDescribedby || this.inputHasMessage()
+                ? this.htmlAriaDescribedby || `${this.htmlid}-message`
+                : undefined, "aria-invalid": this.status === InputStatus.ERROR ? "true" : undefined, "aria-required": this.required ? "true" : undefined });
     }
     getFocusBlurAttributes() {
         return {
@@ -175,15 +166,9 @@ export class ZInput {
         };
     }
     renderInputText(type = InputType.TEXT) {
-        const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
-        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getTextAriaAttributes()), this.getFocusBlurAttributes());
-        if (this.icon || type === InputType.PASSWORD) {
-            Object.assign(attr.class, { "has-icon": true });
-        }
-        if (this.hasclearicon && type != InputType.NUMBER) {
-            Object.assign(attr.class, { "has-clear-icon": true });
-        }
-        return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
+        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), this.getTextAriaAttributes()), this.getFocusBlurAttributes()), { "aria-label": this.htmlAriaLabel || undefined });
+        attr.class = Object.assign(Object.assign({}, attr.class), { "has-icon": !!this.icon || type === InputType.PASSWORD, "has-clear-icon": this.hasclearicon && type != InputType.NUMBER });
+        return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({}, attr, { type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type, ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
     }
     renderLabel() {
         if (!this.label) {
@@ -228,7 +213,7 @@ export class ZInput {
     renderTextarea() {
         const attributes = this.getTextAttributes();
         const ariaAttributes = this.getTextAriaAttributes();
-        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.ariaLabel || undefined }))), this.renderMessage()));
+        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.htmlAriaLabel || undefined }))), this.renderMessage()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -256,21 +241,17 @@ export class ZInput {
     }
     /* END radio */
     render() {
-        let input;
         switch (this.type) {
             case InputType.TEXTAREA:
-                input = this.renderTextarea();
-                break;
+                return this.renderTextarea();
             case InputType.CHECKBOX:
-                input = this.renderCheckbox();
-                break;
+                return this.renderCheckbox();
             case InputType.RADIO:
-                input = this.renderRadio();
-                break;
+                return this.renderRadio();
+            case InputType.TEXT:
             default:
-                input = this.renderInputText(this.type);
+                return this.renderInputText(this.type);
         }
-        return h(Host, { key: '7a98a32f222c422a2f253f0cadd78cf27e0c8913' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
@@ -325,12 +306,13 @@ export class ZInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "input types"
+                    "text": "Input type"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "type",
+                "defaultValue": "InputType.TEXT"
             },
             "name": {
                 "type": "string",
@@ -344,7 +326,7 @@ export class ZInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input name"
+                    "text": "the input `name` attribute"
                 },
                 "getter": false,
                 "setter": false,
@@ -370,7 +352,7 @@ export class ZInput {
                 "reflect": false,
                 "attribute": "label"
             },
-            "ariaLabel": {
+            "htmlAriaLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -379,16 +361,15 @@ export class ZInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-label"
+                    "text": "the input `aria-label`"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-label",
-                "defaultValue": "\"\""
+                "attribute": "html-aria-label"
             },
             "htmlAriaExpanded": {
                 "type": "string",
@@ -399,16 +380,15 @@ export class ZInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-expaded: available for text, password, number, email"
+                    "text": "the input `aria-expanded`: available for text, password, number, email"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "html-aria-expanded",
-                "defaultValue": "\"\""
+                "attribute": "html-aria-expanded"
             },
             "htmlAriaControls": {
                 "type": "string",
@@ -422,7 +402,7 @@ export class ZInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-controls (optional): available for text, password, number, email"
+                    "text": "the input `aria-controls` (optional): available for text, password, number, email"
                 },
                 "getter": false,
                 "setter": false,
@@ -441,7 +421,7 @@ export class ZInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-autocomplete (optional): available for text, password, number, email"
+                    "text": "the input `aria-autocomplete` (optional): available for text, password, number, email"
                 },
                 "getter": false,
                 "setter": false,
@@ -460,14 +440,14 @@ export class ZInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-activedescendant (optional): available for text, password, number, email"
+                    "text": "the input `aria-activedescendant` (optional): available for text, password, number, email"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "html-aria-activedescendant"
             },
-            "htmlAriaDescribedBy": {
+            "htmlAriaDescribedby": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -479,12 +459,12 @@ export class ZInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-describedby (optional)"
+                    "text": "the input `aria-describedby` (optional)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "html-aria-described-by"
+                "attribute": "html-aria-describedby"
             },
             "htmlAriaLabelledby": {
                 "type": "string",
@@ -498,7 +478,7 @@ export class ZInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-labelledby (optional)"
+                    "text": "the input `aria-labelledby` (optional)"
                 },
                 "getter": false,
                 "setter": false,
@@ -734,7 +714,7 @@ export class ZInput {
                 "reflect": false,
                 "attribute": "autocomplete"
             },
-            "role": {
+            "htmlRole": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -743,16 +723,15 @@ export class ZInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input role"
+                    "text": "the input `role`"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "role",
-                "defaultValue": "\"\""
+                "attribute": "html-role"
             },
             "hasclearicon": {
                 "type": "boolean",

package/dist/collection/components/z-input/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n h,\n} from \"@stencil/core\";\nimport {Fragment, Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n shadow: false,\n scoped: true,\n})\nexport class ZInput implements ComponentInterface {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element /\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /* input types /\n @Prop()\n type: InputType;\n\n /* the input name /\n @Prop()\n name?: string;\n\n /* the input label /\n @Prop()\n label?: string;\n\n /* the input aria-label /\n @Prop()\n ariaLabel = \"\";\n\n /* the input aria-expaded: available for text, password, number, email /\n @Prop()\n htmlAriaExpanded = \"\";\n\n /* the input aria-controls (optional): available for text, password, number, email /\n @Prop()\n htmlAriaControls?: string;\n\n /* the input aria-autocomplete (optional): available for text, password, number, email /\n @Prop()\n htmlAriaAutocomplete?: string;\n\n /* the input aria-activedescendant (optional): available for text, password, number, email /\n @Prop()\n htmlAriaActivedescendant?: string;\n\n /* the input aria-describedby (optional) /\n @Prop()\n htmlAriaDescribedBy?: string;\n\n /* the input aria-labelledby (optional) /\n @Prop()\n htmlAriaLabelledby?: string;\n\n /* the input value /\n @Prop({mutable: true})\n value?: string;\n\n /* the input is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* the input is readonly /\n @Prop()\n readonly?: boolean = false;\n\n /* the input is required (optional): available for text, password, number, email, textarea, checkbox /\n @Prop()\n required?: boolean = false;\n\n /* checked: available for checkbox, radio /\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /* the input placeholder (optional) /\n @Prop()\n placeholder?: string;\n\n /* the input html title (optional) /\n @Prop()\n htmltitle?: string;\n\n /* the input status (optional): available for text, password, number, email, textarea /\n @Prop()\n status?: InputStatus;\n\n /* input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed /\n @Prop()\n message?: string \| boolean = true;\n\n /* the input label position: available for checkbox, radio /\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /* the input has autocomplete option (optional): available for text, password, number, email /\n @Prop()\n autocomplete?: string;\n\n /* the input role /\n @Prop()\n role = \"\";\n\n /* render clear icon when typing (optional): available for text /\n @Prop()\n hasclearicon?: boolean = true;\n\n /* render icon (optional): available for text /\n @Prop()\n icon?: string;\n\n /* min number value (optional): available for number /\n @Prop()\n min?: number;\n\n /* Min length value (optional): available for text /\n @Prop()\n minlength?: number;\n\n /* max number value (optional): available for number /\n @Prop()\n max?: number;\n\n /* Max length value (optional): available for text /\n @Prop()\n maxlength?: number;\n\n /* step number value (optional): available for number /\n @Prop()\n step?: number;\n\n /* pattern value (optional): available for tel, text, search, url, email, password/\n @Prop()\n pattern?: string;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /* get checked status /\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /* Emitted on input value change, returns value, validity /\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /* Emitted when user starts typing /\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /* Emitted when user stops typing, returns value, validity /\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /* Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity /\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /* Emitted on input focus /\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /* Emitted on input blur /\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n / START text/password/email/number /\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private inputHasMessage(): boolean {\n if (boolean(this.message) === false \|\| boolean(this.message) === true) {\n return false;\n }\n\n return true;\n }\n\n private getAriaAttributes(): Record<string, unknown> {\n return {\n ...(this.role ? {role: this.role} : {}),\n ...(this.htmlAriaDescribedBy ? {\"aria-describedby\": this.htmlAriaDescribedBy} : {}),\n ...(this.htmlAriaLabelledby ? {\"aria-labelledby\": this.htmlAriaLabelledby} : {}),\n };\n }\n\n private getTextAriaAttributes(): Record<string, unknown> {\n const expanded = this.htmlAriaExpanded ? {\"aria-expanded\": this.htmlAriaExpanded} : {};\n const controls = this.htmlAriaControls ? {\"aria-controls\": this.htmlAriaControls} : {};\n const autocomplete = this.htmlAriaAutocomplete ? {\"aria-autocomplete\": this.htmlAriaAutocomplete} : {};\n const activedescendant = this.htmlAriaActivedescendant\n ? {\"aria-activedescendant\": this.htmlAriaActivedescendant}\n : {};\n const ariaDescribedby =\n this.htmlAriaDescribedBy \|\| this.inputHasMessage()\n ? {\"aria-describedby\": this.htmlAriaDescribedBy \|\| `${this.htmlid}-message`}\n : {};\n\n const ariaInvalid = this.status === InputStatus.ERROR ? {\"aria-invalid\": \"true\"} : {};\n const required = this.required ? {\"aria-required\": \"true\"} : {};\n\n return {\n ...this.getAriaAttributes(),\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n ...ariaDescribedby,\n ...ariaInvalid,\n ...required,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getTextAriaAttributes(),\n ...this.getFocusBlurAttributes(),\n };\n if (this.icon \|\| type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"z-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <z-icon\n name={this.icon}\n class={{[this.size]: true, \"input-icon\": true}}\n />\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon \|\| !this.value \|\| this.disabled \|\| this.readonly \|\| this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n this.inputRef.focus();\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"input-icon toggle-password-icon\"\n disabled={this.disabled}\n aria-label=\"mostra password\"\n aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n html-id={`${this.htmlid}-message`}\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\n />\n );\n }\n\n / END text/password/email/number /\n\n / START textarea /\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaAttributes = this.getTextAriaAttributes();\n\n return (\n <Fragment>\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"textarea-wrapper\": true,\n \"readonly\": !!attributes.readonly,\n }}\n >\n <textarea\n {...attributes}\n {...ariaAttributes}\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"z-scrollbar\": true,\n }}\n aria-label={this.ariaLabel \|\| undefined}\n ></textarea>\n </div>\n {this.renderMessage()}\n </Fragment>\n );\n }\n\n / END textarea /\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n / START checkbox /\n private renderCheckbox(): HTMLDivElement {\n const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...ariaRequired}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n / END checkbox /\n\n / START radio /\n private renderRadio(): HTMLDivElement {\n const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n {...ariaRequired}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n / END radio */\n\n render(): HTMLInputElement \| HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,QAAQ,EAAU,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAQpD,MAAM,OAAO,MAAM;IANnB;QASE,kCAAkC;QAElC,WAAM,GAAG,MAAM,QAAQ,EAAE,EAAE,CAAC;QAE5B,iBAAiB;QAEjB,SAAI,GAAc,SAAS,CAAC,IAAI,CAAC;QA0CjC,4BAA4B;QAE5B,aAAQ,GAAa,KAAK,CAAC;QAE3B,4BAA4B;QAE5B,aAAQ,GAAa,KAAK,CAAC;QAE3B,wGAAwG;QAExG,aAAQ,GAAa,KAAK,CAAC;QAE3B,6CAA6C;QAE7C,YAAO,GAAa,KAAK,CAAC;QAc1B,4IAA4I;QAE5I,YAAO,GAAsB,IAAI,CAAC;QAElC,8DAA8D;QAE9D,kBAAa,GAAmB,aAAa,CAAC,KAAK,CAAC;QAUpD,mEAAmE;QAEnE,iBAAY,GAAa,IAAI,CAAC;QA8B9B,wEAAwE;QAExE,SAAI,GAAiB,WAAW,CAAC,GAAG,CAAC;QAGrC,aAAQ,GAAG,KAAK,CAAC;QAGjB,mBAAc,GAAG,IAAI,CAAC;QAId,kBAAa,GAAG,GAAG,CAAC;KAqd7B;IAhdC,kBAAkB,CAAC,CAAc;QAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC;QACtB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS,CAAC,KAAK;gBAClB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;oBACxF,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACvB,CAAC;gBACD,MAAM;QACV,CAAC;IACH,CAAC;IAED,yBAAyB;IAEzB,KAAK,CAAC,SAAS;QACb,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS,CAAC,QAAQ,CAAC;YACxB,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,IAAI,CAAC,OAAO,CAAC;YACtB;gBACE,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;gBAErF,OAAO,KAAK,CAAC;QACjB,CAAC;IACH,CAAC;IAMO,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QAED,IAAI,QAAuB,CAAC;QAC5B,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;QAEzC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC5C,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC;IAMO,eAAe;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC;IAMO,cAAc,CAAC,KAAa,EAAE,QAAuB;QAC3D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAMO,cAAc,CAAC,OAAgB;QACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;SACpC,CAAC,CAAC;IACL,CAAC;IAMO,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAC,CAAC,CAAC;IAC1C,CAAC;IAMO,aAAa;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAC,CAAC,CAAC;IACzC,CAAC;IAEO,WAAW,CAAC,IAAY;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,CAAqB,CAAC;QAEvE,OAAO,KAAK,CAAC,QAAQ,CAAC;IACxB,CAAC;IAED,sCAAsC;IAE9B,iBAAiB;QACvB,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,KAAK,EAAE;gBACL,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM;aACxC;YACD,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;SACvF,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,IAAe;QACzC,IAAI,IAAI,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,OAAO;YACL,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,IAAe;QACzC,IACE,IAAI,IAAI,SAAS,CAAC,QAAQ;YAC1B,IAAI,IAAI,SAAS,CAAC,IAAI;YACtB,IAAI,IAAI,SAAS,CAAC,GAAG;YACrB,IAAI,IAAI,SAAS,CAAC,MAAM;YACxB,IAAI,IAAI,SAAS,CAAC,GAAG;YACrB,IAAI,IAAI,SAAS,CAAC,KAAK,EACvB,CAAC;YACD,OAAO;QACT,CAAC;QAED,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,IAAI,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,SAAS,EAAE,CAAC;YAC/C,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,iBAAiB;QACvB,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS;YAClC,kBAAkB,EAAE,IAAI,CAAC,mBAAmB,IAAI,SAAS;YACzD,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,IAAI,SAAS;SACxD,CAAC;IACJ,CAAC;IAEO,qBAAqB;QAC3B,uCACK,IAAI,CAAC,iBAAiB,EAAE,KAC3B,eAAe,EAAE,IAAI,CAAC,gBAAgB,IAAI,SAAS,EACnD,eAAe,EAAE,IAAI,CAAC,gBAAgB,IAAI,SAAS,EACnD,mBAAmB,EAAE,IAAI,CAAC,oBAAoB,IAAI,SAAS,EAC3D,uBAAuB,EAAE,IAAI,CAAC,wBAAwB,IAAI,SAAS,EACnE,kBAAkB,EAChB,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,eAAe,EAAE;gBAChD,CAAC,CAAC,IAAI,CAAC,mBAAmB,IAAI,GAAG,IAAI,CAAC,MAAM,UAAU;gBACtD,CAAC,CAAC,SAAS,EACf,cAAc,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtE,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnD;IACJ,CAAC;IAEO,sBAAsB;QAC5B,OAAO;YACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;YACpC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;SACnC,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,OAAkB,SAAS,CAAC,IAAI;QACtD,MAAM,IAAI,2FACL,IAAI,CAAC,iBAAiB,EAAE,GACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAC9B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAC9B,IAAI,CAAC,qBAAqB,EAAE,GAC5B,IAAI,CAAC,sBAAsB,EAAE,KAChC,YAAY,EAAE,IAAI,CAAC,aAAa,IAAI,SAAS,GAC9C,CAAC;QAEF,IAAI,CAAC,KAAK,mCACJ,IAAI,CAAC,KAAwC,KACjD,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC,QAAQ,EACtD,gBAAgB,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,SAAS,CAAC,MAAM,GAChE,CAAC;QAEF,OAAO,CACL,WAAK,KAAK,EAAC,cAAc;YACtB,IAAI,CAAC,WAAW,EAAE;YACnB;gBACE,6BACM,IAAI,IACR,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACjF,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,IACjC;gBACD,IAAI,CAAC,WAAW,EAAE,CACf;YACL,IAAI,CAAC,aAAa,EAAE,CACjB,CACP,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,OAAO,CACL,aACE,KAAK,EAAC,mBAAmB,EACzB,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,QAAQ,EAC1B,OAAO,EAAE,IAAI,CAAC,MAAM,IAEnB,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,YAAM,KAAK,EAAC,eAAe;YACxB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,UAAU,EAAE,CACb,CACR,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACvC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,OAAO,CACL,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAC,GAC9C,CACH,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,IAAI,MAAM,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YACzG,MAAM,GAAG,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAC,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAC,gBAC5C,kCAAkC,EAC7C,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;gBACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACxB,CAAC;YAED,cACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACK,CACV,CAAC;IACJ,CAAC;IAEO,sBAAsB;QAC5B,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,iCAAiC,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACZ,iBAAiB,kBACd,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACrD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;YAE3D,cACE,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAC7D,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACK,CACV,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,OAAO,CACL,kCACW,GAAG,IAAI,CAAC,MAAM,UAAU,EACjC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,IAAI,CAAC,OAAkB,EAC9E,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,CAAC;IACJ,CAAC;IAED,oCAAoC;IAEpC,oBAAoB;IAEZ,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC5C,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEpD,OAAO,CACL,EAAC,QAAQ;YACN,IAAI,CAAC,WAAW,EAAE;YACnB,WACE,KAAK,kCACC,UAAU,CAAC,KAAwC,KACvD,kBAAkB,EAAE,IAAI,EACxB,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;gBAGnC,gCACM,UAAU,EACV,cAAc,IAClB,KAAK,kCACC,UAAU,CAAC,KAAwC,KACvD,aAAa,EAAE,IAAI,mBAET,IAAI,CAAC,aAAa,IAAI,SAAS,IACjC,CACR;YACL,IAAI,CAAC,aAAa,EAAE,CACZ,CACZ,CAAC;IACJ,CAAC;IAED,kBAAkB;IAEV,WAAW,CAAC,EAAS;QAC3B,IAAI,CAAC,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,oBAAoB;IACZ,cAAc;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,eAAe,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEpE,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;YAC3B,2BACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,YAAY,EACZ,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,sBAAsB,EAAE,EACjC;YAEF,aACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;oBACL,gBAAgB,EAAE,IAAI;oBACtB,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK;oBACnD,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI;iBACpD;gBAED,cACE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACpD,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB;gBACD,IAAI,CAAC,KAAK,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC7C,CACJ,CACP,CAAC;IACJ,CAAC;IAED,kBAAkB;IAElB,iBAAiB;IACT,WAAW;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,eAAe,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEpE,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;YACxB,2BACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,sBAAsB,EAAE,EAC7B,YAAY,EAChB;YAEF,aACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK;oBACnD,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI;iBACpD;gBAED,cACE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,EAC5D,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB;gBACD,IAAI,CAAC,KAAK,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,KAAK,GAAI,CACxC,CACJ,CACP,CAAC;IACJ,CAAC;IACD,eAAe;IAEf,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS,CAAC,QAAQ;gBACrB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/B,KAAK,SAAS,CAAC,QAAQ;gBACrB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/B,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YAC5B,KAAK,SAAS,CAAC,IAAI,CAAC;YACpB;gBACE,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n h,\n} from \"@stencil/core\";\nimport {Fragment, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n shadow: false,\n scoped: true,\n})\nexport class ZInput implements ComponentInterface {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element /\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /* Input type /\n @Prop()\n type: InputType = InputType.TEXT;\n\n /* the input `name` attribute /\n @Prop()\n name?: string;\n\n /* the input label /\n @Prop()\n label?: string;\n\n /* the input `aria-label` /\n @Prop()\n htmlAriaLabel?: string;\n\n /* the input `aria-expanded`: available for text, password, number, email /\n @Prop()\n htmlAriaExpanded?: string;\n\n /* the input `aria-controls` (optional): available for text, password, number, email /\n @Prop()\n htmlAriaControls?: string;\n\n /* the input `aria-autocomplete` (optional): available for text, password, number, email /\n @Prop()\n htmlAriaAutocomplete?: string;\n\n /* the input `aria-activedescendant` (optional): available for text, password, number, email /\n @Prop()\n htmlAriaActivedescendant?: string;\n\n /* the input `aria-describedby` (optional) /\n @Prop()\n htmlAriaDescribedby?: string;\n\n /* the input `aria-labelledby` (optional) /\n @Prop()\n htmlAriaLabelledby?: string;\n\n /* the input value /\n @Prop({mutable: true})\n value?: string;\n\n /* the input is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* the input is readonly /\n @Prop()\n readonly?: boolean = false;\n\n /* the input is required (optional): available for text, password, number, email, textarea, checkbox /\n @Prop()\n required?: boolean = false;\n\n /* checked: available for checkbox, radio /\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /* the input placeholder (optional) /\n @Prop()\n placeholder?: string;\n\n /* the input html title (optional) /\n @Prop()\n htmltitle?: string;\n\n /* the input status (optional): available for text, password, number, email, textarea /\n @Prop()\n status?: InputStatus;\n\n /* input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed /\n @Prop()\n message?: string \| boolean = true;\n\n /* the input label position: available for checkbox, radio /\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /* the input has autocomplete option (optional): available for text, password, number, email /\n @Prop()\n autocomplete?: string;\n\n /* the input `role` /\n @Prop()\n htmlRole?: string;\n\n /* render clear icon when typing (optional): available for text /\n @Prop()\n hasclearicon?: boolean = true;\n\n /* render icon (optional): available for text /\n @Prop()\n icon?: string;\n\n /* min number value (optional): available for number /\n @Prop()\n min?: number;\n\n /* Min length value (optional): available for text /\n @Prop()\n minlength?: number;\n\n /* max number value (optional): available for number /\n @Prop()\n max?: number;\n\n /* Max length value (optional): available for text /\n @Prop()\n maxlength?: number;\n\n /* step number value (optional): available for number /\n @Prop()\n step?: number;\n\n /* pattern value (optional): available for tel, text, search, url, email, password/\n @Prop()\n pattern?: string;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /* get checked status /\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /* Emitted on input value change, returns value, validity /\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /* Emitted when user starts typing /\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /* Emitted when user stops typing, returns value, validity /\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /* Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity /\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /* Emitted on input focus /\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /* Emitted on input blur /\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n / START text/password/email/number /\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private inputHasMessage(): boolean {\n if (typeof boolean(this.message) === \"boolean\") {\n return false;\n }\n\n return true;\n }\n\n private getAriaAttributes(): Record<string, string \| undefined> {\n return {\n \"role\": this.htmlRole \|\| undefined,\n \"aria-describedby\": this.htmlAriaDescribedby \|\| undefined,\n \"aria-labelledby\": this.htmlAriaLabelledby \|\| undefined,\n };\n }\n\n private getTextAriaAttributes(): Record<string, string \| undefined> {\n return {\n ...this.getAriaAttributes(),\n \"aria-expanded\": this.htmlAriaExpanded \|\| undefined,\n \"aria-controls\": this.htmlAriaControls \|\| undefined,\n \"aria-autocomplete\": this.htmlAriaAutocomplete \|\| undefined,\n \"aria-activedescendant\": this.htmlAriaActivedescendant \|\| undefined,\n \"aria-describedby\":\n this.htmlAriaDescribedby \|\| this.inputHasMessage()\n ? this.htmlAriaDescribedby \|\| `${this.htmlid}-message`\n : undefined,\n \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n \"aria-required\": this.required ? \"true\" : undefined,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...this.getTextAriaAttributes(),\n ...this.getFocusBlurAttributes(),\n \"aria-label\": this.htmlAriaLabel \|\| undefined,\n };\n\n attr.class = {\n ...(attr.class as {[className: string]: boolean}),\n \"has-icon\": !!this.icon \|\| type === InputType.PASSWORD,\n \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n };\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n {...attr}\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"z-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <z-icon\n name={this.icon}\n class={{[this.size]: true, \"input-icon\": true}}\n />\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon \|\| !this.value \|\| this.disabled \|\| this.readonly \|\| this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n this.inputRef.focus();\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"input-icon toggle-password-icon\"\n disabled={this.disabled}\n aria-label=\"mostra password\"\n aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n html-id={`${this.htmlid}-message`}\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\n />\n );\n }\n\n / END text/password/email/number /\n\n / START textarea /\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaAttributes = this.getTextAriaAttributes();\n\n return (\n <Fragment>\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"textarea-wrapper\": true,\n \"readonly\": !!attributes.readonly,\n }}\n >\n <textarea\n {...attributes}\n {...ariaAttributes}\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"z-scrollbar\": true,\n }}\n aria-label={this.htmlAriaLabel \|\| undefined}\n ></textarea>\n </div>\n {this.renderMessage()}\n </Fragment>\n );\n }\n\n / END textarea /\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n / START checkbox /\n private renderCheckbox(): HTMLDivElement {\n const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...ariaRequired}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n / END checkbox /\n\n / START radio /\n private renderRadio(): HTMLDivElement {\n const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n {...ariaRequired}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n / END radio */\n\n render(): HTMLInputElement \| HTMLDivElement {\n switch (this.type) {\n case InputType.TEXTAREA:\n return this.renderTextarea();\n case InputType.CHECKBOX:\n return this.renderCheckbox();\n case InputType.RADIO:\n return this.renderRadio();\n case InputType.TEXT:\n default:\n return this.renderInputText(this.type);\n }\n }\n}\n"]}

package/dist/collection/components/z-input-message/index.js CHANGED Viewed

@@ -2,25 +2,18 @@ import { Host, h } from "@stencil/core";
 import { randomId } from "../../utils/utils";
 export class ZInputMessage {
     constructor() {
-        /** the id of the message element (optional)*/
+        /** the id of the message element (optional) */
         this.htmlId = `id-${randomId()}`;
-        /** the role to set when both the message and the status are populated (optional)*/
+        /** the role to set when both the message and the status are populated (optional) */
         this.htmlRole = "alert";
         this.statusIcons = {
             success: "checkmark-circle",
             error: "multiply-circled",
             warning: "exclamation-circle",
         };
-        this.statusRole = {};
-    }
-    onMessageChange() {
-        this.statusRole = this.htmlRole && this.message && this.status ? { role: this.htmlRole } : {};
-    }
-    componentWillLoad() {
-        this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: 'a35cc36ee979d11215b973a0f11e2c8f59105a50' }, this.statusRole, { id: this.htmlId }), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'be5aa19afcdddefe15f252b8ea175b0615a5e983', name: this.statusIcons[this.status] }), h("span", { key: 'b1d11a0a9694e604b6aa252c2d8a77143288ad99', innerHTML: this.message })));
+        return (h(Host, { key: '071b2ab5bc953c916bf735be221071740cf48293', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && h("z-icon", { key: '3fa408351b28bb7998bb743ebcf05fbebe40ff4e', name: this.statusIcons[this.status] }), h("span", { key: '48d15076d87920c4e5abee2aae5b4e65fb17cefc', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }
@@ -142,22 +135,5 @@ export class ZInputMessage {
             }
         };
     }
-    static get states() {
-        return {
-            "statusRole": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "message",
-                "methodName": "onMessageChange"
-            }, {
-                "propName": "status",
-                "methodName": "onMessageChange"
-            }, {
-                "propName": "htmlRole",
-                "methodName": "onMessageChange"
-            }];
-    }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/z-input-message/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-input-message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,~~KAAK,EAAE,KAAK,EAAE,~~CAAC,EAAC,MAAM,eAAe,CAAC;~~AACzF~~,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAO3C,MAAM,OAAO,aAAa;IAL1B;QAUE~~,8CAA8C~~;~~QAE9C~~,WAAM,GAAI,MAAM,QAAQ,EAAE,EAAE,CAAC;QAE7B,~~mFAAmF~~;~~QAEnF~~,aAAQ,GAAkB,OAAO,CAAC;QAU1B,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;~~QAGF~~,~~eAAU~~,~~GAAG~~,~~EAAE~~,~~CAAC;KAwBjB;IAnBC~~,~~eAAe;QACb,~~IAAI,~~CAAC~~,~~UAAU~~,~~GAAG~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,~~EAAC,~~IAAI,~~EAAE,IAAI,~~CAAC,QAAQ,~~EAAC,~~CAAC,CAAC,CAAC,~~EAAE~~,~~CAAC;IAC9F~~,~~CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,~~EAAE,~~CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qEACC,IAAI,CAAC,UAAU,IACnB,~~EAAE,~~EAAE,~~IAAI,CAAC,MAAM;YAEd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW;YACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, ~~State, Watch,~~ h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input-message\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInputMessage implements ComponentInterface {\n /** input helper message /\n @Prop()\n message: string;\n\n /* the id of the message element (optional)/\n @Prop()\n htmlId? = `id-${randomId()}`;\n\n /* the role to set when both the message and the status are populated (optional)/\n @Prop()\n htmlRole: null \| string = \"alert\";\n\n /* input status (optional) /\n @Prop({reflect: true})\n status?: InputStatus;\n\n /* input disabled status (optional) */\n @Prop({reflect: true})\n disabled?: boolean;\n\n private statusIcons = {\n success: \"checkmark-circle\",\n error: \"multiply-circled\",\n warning: \"exclamation-circle\",\n };\n\n ~~@State~~()~~\n statusRole~~ = {~~};\n~~\n ~~@Watch~~(\~~"message\")\~~n ~~@Watch(~~\~~"status\")\~~n ~~@Watch(\"htmlRole\")\n onMessageChange(): void~~ {\n this.~~statusRole = this.~~htmlRole && this.message && this.status ? ~~{role:~~ this.htmlRole} : {}~~;\n }~~\n~~\n componentWillLoad(): void {\n this.onMessageChange();\n }\n\n render(): HTMLZInputMessageElement {\n return (\n <Host\n~~ ~~{...this.statusRole}\n~~ id={this.htmlId}\n >\n {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n <span innerHTML={this.message} />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-input-message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAO3C,MAAM,OAAO,aAAa;IAL1B;QAUE,+CAA+C;QAE/C,WAAM,GAAI,MAAM,QAAQ,EAAE,EAAE,CAAC;QAE7B,oFAAoF;QAEpF,aAAQ,GAAkB,OAAO,CAAC;QAU1B,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;KAaH;IAXC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC9E,EAAE,EAAE,IAAI,CAAC,MAAM;YAEd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW;YACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input-message\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInputMessage implements ComponentInterface {\n /** input helper message /\n @Prop()\n message: string;\n\n /* the id of the message element (optional) /\n @Prop()\n htmlId? = `id-${randomId()}`;\n\n /* the role to set when both the message and the status are populated (optional) /\n @Prop()\n htmlRole: null \| string = \"alert\";\n\n /* input status (optional) /\n @Prop({reflect: true})\n status?: InputStatus;\n\n /* input disabled status (optional) */\n @Prop({reflect: true})\n disabled?: boolean;\n\n private statusIcons = {\n success: \"checkmark-circle\",\n error: \"multiply-circled\",\n warning: \"exclamation-circle\",\n };\n\n render(): HTMLZInputMessageElement {\n return (\n <Host\n role={this.htmlRole && this.message && this.status ? this.htmlRole : undefined}\n id={this.htmlId}\n >\n {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n <span innerHTML={this.message} />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-input-range/index.js CHANGED Viewed

@@ -103,7 +103,7 @@ export class ZInputRange {
         this.needsNativeValueSync = false;
     }
     render() {
-        return (h(Host, { key: 'bbe608639444be9549dc727cbdbc68f906b41157' }, this.label && (h("label", { key: 'c2ee1ca74d1c5ccc09fb00b52443b4b97b6dfbfd', class: "z-label", htmlFor: this.htmlId }, this.label)), h("div", { key: '5f17e9204d1d07728adac5a237d664f6ec1f10c9', class: "input-container body-3" }, h("input", { key: '8574502254f8f457cce3f9124d8097c850d68fc8', ref: (el) => (this.inputRef = el), type: "range", "aria-label": this.ariaLabel, id: this.htmlId, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.currentValue, onInput: (event) => this.onInput(event), onChange: (event) => this.onChange(event), onFocus: () => (this.showValueTooltip = true), onBlur: () => (this.showValueTooltip = false) }), h("div", { key: '843596b2fe410d771ccbeb059d544a3f9daeb302', class: "tooltip-guide", ref: (el) => (this.tooltipGuideRef = el) }), h("z-tooltip", { key: '2be5826efecc132931d123a6be24822b0e224c81', position: this.tooltipPosition, bindTo: this.tooltipGuideRef, open: this.showValueTooltip, closable: false }, h("div", { key: '92a1578d37eb6ac6823dd5e9e547858e8b6d94ab', class: "current-value" }, this.currentValue))), this.showEdges && (h("div", { key: 'b0ad1133691483dbe2a135762b81311d32b6eba6', class: "edges body-3" }, h("span", { key: '699a22b70647ebf005aca8766e36007dc588cd0c', class: "min" }, this.min), h("span", { key: 'fbe2ea77473fc068c2ba7f9849cbb07225912fff', class: "max" }, this.max)))));
+        return (h(Host, { key: '1d75670f3820a7de46c7dc0ad03b00476f77fed9' }, this.label && (h("label", { key: '61938ff3fe18dc98eecf9c22cbb43a6855faaf80', class: "z-label", htmlFor: this.htmlId }, this.label)), h("div", { key: 'ffe7307d8ee4f5786630d8930d2c2e799348a5ca', class: "input-container body-3" }, h("input", { key: 'fb889a3056ff22cff303e4caaff83c675421ce1c', ref: (el) => (this.inputRef = el), type: "range", "aria-label": this.ariaLabel, id: this.htmlId, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.currentValue, onInput: (event) => this.onInput(event), onChange: (event) => this.onChange(event), onFocus: () => (this.showValueTooltip = true), onBlur: () => (this.showValueTooltip = false) }), h("div", { key: '8a0ab9de23950dbca2fef73f431f82bad234a66f', class: "tooltip-guide", ref: (el) => (this.tooltipGuideRef = el) }), h("z-tooltip", { key: '5aad182cf33c4e997c76565a4e2c2add54866cb4', position: this.tooltipPosition, bindTo: this.tooltipGuideRef, open: this.showValueTooltip, closable: false }, h("div", { key: '07879abebb3ed35ec105f6604d7927b029172b99', class: "current-value" }, this.currentValue))), this.showEdges && (h("div", { key: '6bf70a60ff94d0923e76a76f0bb17a00d40e5757', class: "edges body-3" }, h("span", { key: 'd9a1412d997644e1b9d275def26e040e091be195', class: "min" }, this.min), h("span", { key: 'd951901cf7d41f448c7a553b6c3fe48186c6c913', class: "max" }, this.max)))));
     }
     static get is() { return "z-input-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-logo/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: 'ab19d473781e8ab273d484799ea87324dd9188cd', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '0b01a3469ffb9aebe29b323dc73c203fb9a0db12', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-menu-section/index.js CHANGED Viewed

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: 'e6175335e6b2cff9e1789220c6ff64ca70b1e8b4', open: this.open }, h("button", { key: '097d0ad86fb95b7c29c4dba6c55cad958dad1b6c', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'bb9505220755332d911c976255aac4d228b615b8', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '92c9f44aca699c5604d7c67584698f30b39c7d27', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'fc43a6643a3bb3c6814da59f61a2e1411c5662de', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '4eb19cb44a7fd0f4e083c79bbe755d8016bb2bad', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: '60138a3f88a501b92620684544dff2ffc8e62000', open: this.open }, h("button", { key: 'a0f66e569cbd965a99af017d610edfd0c1d643e9', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '31b795bb337e72376c5f8362002e3967443c0e99', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '3bb008397ab68061713e88a758168043a892eaa2', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '3d43e8adc129b1c25d40cb6c4057d9f28349954c', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'b51e5f923be85b42bc5dd0158f779ae86485ee5a', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }