@zanichelli/albe-web-components 15.0.1-RC → 15.0.2

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

@@ -13,15 +13,18 @@ export const Default = {
       <z-stepper-item
         index="1"
         pressed
-      ></z-stepper-item>
+        >I tuoi dati</z-stepper-item
+      >
       <z-stepper-item
         index="2"
         disabled
-      ></z-stepper-item>
+        >Le tue credenziali</z-stepper-item
+      >
       <z-stepper-item
         index="3"
         disabled
-      ></z-stepper-item>
+        >Conferma</z-stepper-item
+      >
     </z-stepper>`,
 };
 export const Completed = {
@@ -35,4 +38,42 @@ export const Completed = {
       >
     </z-stepper>`,
 };
+export const CompletedDisabled = {
+    render: () => html `<z-stepper>
+      <z-stepper-item
+        index="1"
+        disabled
+        >I tuoi dati</z-stepper-item
+      >
+      <z-stepper-item
+        index="2"
+        disabled
+        >Le tue credenziali</z-stepper-item
+      >
+      <z-stepper-item
+        index="3"
+        pressed
+        >Conferma</z-stepper-item
+      >
+    </z-stepper>`,
+};
+export const Checked = {
+    render: () => html `<z-stepper>
+      <z-stepper-item
+        index="1"
+        checked
+        >I tuoi dati</z-stepper-item
+      >
+      <z-stepper-item
+        index="2"
+        checked
+        >Le tue credenziali</z-stepper-item
+      >
+      <z-stepper-item
+        index="3"
+        checked
+        >Conferma</z-stepper-item
+      >
+    </z-stepper>`,
+};
 //# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-stepper/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE;QACb,YAAY,EAAE,gBAAgB;KAC/B;CACuB,CAAC;AAI3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;iBAaS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;iBAQS;CACA,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepper} from \".\";\nimport \"../z-stepper-item/index\";\nimport \"./index\";\n\nexport default {\n  title: \"ZStepper/ZStepper\",\n  component: \"z-stepper\",\n  subcomponents: {\n    ZStepperItem: \"z-stepper-item\",\n  },\n} satisfies Meta<ZStepper>;\n\ntype Story = StoryObj<ZStepper>;\n\nexport const Default = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        pressed\n      ></z-stepper-item>\n      <z-stepper-item\n        index=\"2\"\n        disabled\n      ></z-stepper-item>\n      <z-stepper-item\n        index=\"3\"\n        disabled\n      ></z-stepper-item>\n    </z-stepper>`,\n} satisfies Story;\n\nexport const Completed = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item index=\"1\">I tuoi dati</z-stepper-item>\n      <z-stepper-item index=\"2\">Le tue credenziali</z-stepper-item>\n      <z-stepper-item\n        index=\"3\"\n        pressed\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE;QACb,YAAY,EAAE,gBAAgB;KAC/B;CACuB,CAAC;AAI3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;iBAQS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepper} from \".\";\nimport \"../z-stepper-item/index\";\nimport \"./index\";\n\nexport default {\n  title: \"ZStepper/ZStepper\",\n  component: \"z-stepper\",\n  subcomponents: {\n    ZStepperItem: \"z-stepper-item\",\n  },\n} satisfies Meta<ZStepper>;\n\ntype Story = StoryObj<ZStepper>;\n\nexport const Default = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        pressed\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        disabled\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        disabled\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const Completed = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item index=\"1\">I tuoi dati</z-stepper-item>\n      <z-stepper-item index=\"2\">Le tue credenziali</z-stepper-item>\n      <z-stepper-item\n        index=\"3\"\n        pressed\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const CompletedDisabled = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        disabled\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        disabled\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        pressed\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const Checked = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        checked\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        checked\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        checked\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-stepper-item/index.stories.js

@@ -3,32 +3,57 @@ import "./index";
 export default {
     title: "ZStepper/ZStepperItem",
     component: "z-stepper-item",
+    args: {
+        pressed: false,
+        disabled: false,
+        checked: false,
+        index: 1,
+        text: "First Item",
+    },
 };
-export const WithIndex = {
-    render: () => html `<z-stepper-item index="1"></z-stepper-item>`,
-};
-export const WithText = {
-    render: () => html `<z-stepper-item index="1">First step</z-stepper-item>`,
-};
-export const Disabled = {
-    render: () => html `<z-stepper-item
-      index="1"
-      disabled
-      >First step</z-stepper-item
+export const Default = {
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
     >`,
 };
 export const Pressed = {
-    render: () => html `<z-stepper-item
-      index="1"
-      pressed
-      >First step</z-stepper-item
+    args: {
+        pressed: true,
+    },
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
+    >`,
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
     >`,
 };
 export const Checked = {
-    render: () => html `<z-stepper-item
-      index="1"
-      checked
-      >First step</z-stepper-item
+    args: {
+        checked: true,
+    },
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
     >`,
 };
 //# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-stepper-item/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper-item/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CACC,CAAC;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,6CAA6C;CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,uDAAuD;CAC1E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;MAIF;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;MAIF;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;MAIF;CACL,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepperItem} from \".\";\nimport \"./index\";\n\nexport default {\n  title: \"ZStepper/ZStepperItem\",\n  component: \"z-stepper-item\",\n} satisfies Meta<ZStepperItem>;\n\nexport const WithIndex = {\n  render: () => html`<z-stepper-item index=\"1\"></z-stepper-item>`,\n};\n\nexport const WithText = {\n  render: () => html`<z-stepper-item index=\"1\">First step</z-stepper-item>`,\n};\n\nexport const Disabled = {\n  render: () =>\n    html`<z-stepper-item\n      index=\"1\"\n      disabled\n      >First step</z-stepper-item\n    >`,\n};\n\nexport const Pressed = {\n  render: () =>\n    html`<z-stepper-item\n      index=\"1\"\n      pressed\n      >First step</z-stepper-item\n    >`,\n};\n\nexport const Checked = {\n  render: () =>\n    html`<z-stepper-item\n      index=\"1\"\n      checked\n      >First step</z-stepper-item\n    >`,\n};\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper-item/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAIjB,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,CAAC;QACR,IAAI,EAAE,YAAY;KACnB;CACsC,CAAC;AAE1C,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepperItem} from \".\";\nimport \"./index\";\n\ntype ZStepperItemStoriesArgs = ZStepperItem & {text: string};\n\nexport default {\n  title: \"ZStepper/ZStepperItem\",\n  component: \"z-stepper-item\",\n  args: {\n    pressed: false,\n    disabled: false,\n    checked: false,\n    index: 1,\n    text: \"First Item\",\n  },\n} satisfies Meta<ZStepperItemStoriesArgs>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n\nexport const Pressed = {\n  args: {\n    pressed: true,\n  },\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n  },\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n\nexport const Checked = {\n  args: {\n    checked: true,\n  },\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n"]}

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

@@ -17,22 +17,24 @@ const StoryMeta = {
         "--z-tag-bg": getColorTokenArgConfig(),
     },
     args: {
-        "text": "In progress",
-        "expandable": false,
-        "icon": "gear",
-        "--z-tag-text-color": undefined,
-        "--z-tag-bg": undefined,
+        text: "In progress",
+        expandable: false,
+        icon: "gear",
     },
 };
 export default StoryMeta;
 export const Default = {
     render: (args) => html `<z-tag
-      icon="gear"
+      icon=${args.icon}
       expandable=${args.expandable}
       >${args.text}
     </z-tag>`,
 };
 export const ColorTokens = {
+    args: {
+        "--z-tag-text-color": null,
+        "--z-tag-bg": null,
+    },
     render: (args) => html `<z-tag
       style=${styleMap({
         "--z-tag-text-color": args["--z-tag-text-color"],
@@ -45,7 +47,9 @@ export const ColorTokens = {
 };
 export const LongText = {
     args: {
-        text: "In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo",
+        "text": "In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo",
+        "--z-tag-text-color": null,
+        "--z-tag-bg": null,
     },
     render: (args) => html `<z-tag
       style=${styleMap({

package/dist/collection/components/z-tag/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;SACnC;QACD,oBAAoB,EAAE,sBAAsB,EAAE;QAC9C,YAAY,EAAE,sBAAsB,EAAE;KACvC;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,aAAa;QACrB,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,MAAM;QACd,oBAAoB,EAAE,SAAS;QAC/B,YAAY,EAAE,SAAS;KACxB;CAC8B,CAAC;AAElC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,UAAU;SACzB,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,6EAA6E;KACpF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTag} from \".\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZTagStoriesArgs = ZTag & CSSVarsArguments<\"z-tag-text-color\" | \"z-tag-bg\"> & {text: string};\n\nconst StoryMeta = {\n  title: \"ZTag\",\n  component: \"z-tag\",\n  argTypes: {\n    \"icon\": {\n      control: {\n        type: \"select\",\n      },\n      options: Object.keys(ICONS).sort(),\n    },\n    \"--z-tag-text-color\": getColorTokenArgConfig(),\n    \"--z-tag-bg\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"text\": \"In progress\",\n    \"expandable\": false,\n    \"icon\": \"gear\",\n    \"--z-tag-text-color\": undefined,\n    \"--z-tag-bg\": undefined,\n  },\n} satisfies Meta<ZTagStoriesArgs>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-tag\n      icon=\"gear\"\n      expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const ColorTokens = {\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const LongText = {\n  args: {\n    text: \"In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo\",\n  },\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;SACnC;QACD,oBAAoB,EAAE,sBAAsB,EAAE;QAC9C,YAAY,EAAE,sBAAsB,EAAE;KACvC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;QACnB,UAAU,EAAE,KAAK;QACjB,IAAI,EAAE,MAAM;KACb;CAC8B,CAAC;AAElC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,UAAU;SACzB,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,6EAA6E;QACrF,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTag} from \".\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZTagStoriesArgs = ZTag & CSSVarsArguments<\"z-tag-text-color\" | \"z-tag-bg\"> & {text: string};\n\nconst StoryMeta = {\n  title: \"ZTag\",\n  component: \"z-tag\",\n  argTypes: {\n    \"icon\": {\n      control: {\n        type: \"select\",\n      },\n      options: Object.keys(ICONS).sort(),\n    },\n    \"--z-tag-text-color\": getColorTokenArgConfig(),\n    \"--z-tag-bg\": getColorTokenArgConfig(),\n  },\n  args: {\n    text: \"In progress\",\n    expandable: false,\n    icon: \"gear\",\n  },\n} satisfies Meta<ZTagStoriesArgs>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-tag\n      icon=${args.icon}\n      expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const ColorTokens = {\n  args: {\n    \"--z-tag-text-color\": null,\n    \"--z-tag-bg\": null,\n  },\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const LongText = {\n  args: {\n    \"text\": \"In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo\",\n    \"--z-tag-text-color\": null,\n    \"--z-tag-bg\": null,\n  },\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n"]}

package/dist/collection/components/z-toast-notification/styles.css

@@ -194,6 +194,18 @@
   fill: var(--color-white);
 }
 
+z-icon {
+  display: inline-block;
+  vertical-align: 0;
+}
+
+z-icon:focus {
+  padding: calc(var(--space-unit) / 4);
+  border-radius: 50%;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
 :host > #external-container.dark {
   background: var(--gray800);
 }

package/dist/collection/snowflakes/myz/card/z-myz-card-list/styles.css

@@ -1,3 +1,8 @@
+*:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
 ul {
   overflow: hidden;
   width: auto;

package/dist/collection/snowflakes/myz/z-otp/styles.css

@@ -1,3 +1,8 @@
+input:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
 :host {
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);

package/dist/collection/snowflakes/myz/z-slideshow/styles.css

@@ -93,6 +93,13 @@ footer .bullet-container .bullet.selected {
   background-color: var(--gray400);
 }
 
+main z-icon:focus,
+footer .bullet-container .bullet:focus {
+  border-radius: 50%;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
 /* Tablet breakpoint */
 
 @media only screen and (min-width: 768px) {

package/dist/components/index10.js

@@ -4,16 +4,16 @@ import { r as randomId, b as boolean } from './utils.js';
 import { d as defineCustomElement$2 } from './index9.js';
 import { d as defineCustomElement$1 } from './index11.js';
 
-const stylesGeneralCss = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{-webkit-box-sizing:border-box;box-sizing:border-box;border:var(--border-size-small) solid var(--gray700);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,[readonly=\"false\"].sc-z-input-h .textarea-wrapper.sc-z-input:focus-within{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-input-field02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-primary01)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{-webkit-box-shadow:none;box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--gray700);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);-webkit-box-shadow:none;box-shadow:none;color:var(--color-disabled03);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::-webkit-input-placeholder,textarea.sc-z-input::-webkit-input-placeholder{color:var(--color-text05)}input.sc-z-input::-moz-placeholder,textarea.sc-z-input::-moz-placeholder{color:var(--color-text05)}input.sc-z-input:-ms-input-placeholder,textarea.sc-z-input:-ms-input-placeholder{color:var(--color-text05)}input.sc-z-input::-ms-input-placeholder,textarea.sc-z-input::-ms-input-placeholder{color:var(--color-text05)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::-webkit-input-placeholder{color:var(--color-text05)}.sc-z-input::-moz-placeholder{color:var(--color-text05)}.sc-z-input:-ms-input-placeholder{color:var(--color-text05)}.sc-z-input::-ms-input-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled03)}";
+const stylesGeneralCss = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{-webkit-box-sizing:border-box;box-sizing:border-box;border:var(--border-size-small) solid var(--gray700);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly=\"true\"]) .textarea-wrapper.sc-z-input:focus-within{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-input-field02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-primary01)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{-webkit-box-shadow:none;box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--gray700);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);-webkit-box-shadow:none;box-shadow:none;color:var(--color-disabled03);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::-webkit-input-placeholder,textarea.sc-z-input::-webkit-input-placeholder{color:var(--color-text05)}input.sc-z-input::-moz-placeholder,textarea.sc-z-input::-moz-placeholder{color:var(--color-text05)}input.sc-z-input:-ms-input-placeholder,textarea.sc-z-input:-ms-input-placeholder{color:var(--color-text05)}input.sc-z-input::-ms-input-placeholder,textarea.sc-z-input::-ms-input-placeholder{color:var(--color-text05)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::-webkit-input-placeholder{color:var(--color-text05)}.sc-z-input::-moz-placeholder{color:var(--color-text05)}.sc-z-input:-ms-input-placeholder{color:var(--color-text05)}.sc-z-input::-ms-input-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled03)}";
 const ZInputStyle0 = stylesGeneralCss;
 
-const stylesTextCss = ".text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--gray900)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:-ms-flexbox;display:flex;pointer-events:none;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}";
+const stylesTextCss = ".text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--gray900)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:-ms-flexbox;display:flex;pointer-events:none;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}";
 const ZInputStyle1 = stylesTextCss;
 
 const stylesTextareaCss = ".textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}";
 const ZInputStyle2 = stylesTextareaCss;
 
-const stylesCheckboxRadioCss = ".radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;color:var(--color-default-text);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{-ms-flex-direction:row;flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
+const stylesCheckboxRadioCss = ".radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;color:var(--color-default-text);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{-ms-flex-direction:row;flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
 const ZInputStyle3 = stylesCheckboxRadioCss;
 
 const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement {

package/dist/components/index10.js.map

@@ -1 +1 @@
-{"file":"index10.js","mappings":"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","names":[],"sources":["src/components/z-input/styles-general.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-text.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-textarea.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-checkbox-radio.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n}\n\ninput::-ms-clear,\ninput::-ms-reveal {\n  display: none;\n}\n\n/* GENERAL */\n:host input::-ms-clear,\n:host input::-ms-reveal {\n  display: none;\n}\n\ninput,\ntextarea,\n.textarea-wrapper {\n  box-sizing: border-box;\n  border: var(--border-size-small) solid var(--gray700);\n  background: var(--color-input-field01);\n  border-radius: var(--border-radius-small);\n  color: var(--gray900);\n  fill: var(--gray900);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"small\"]) .textarea-wrapper,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea,\n:host([size=\"x-small\"]) .textarea-wrapper {\n  font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n  cursor: pointer;\n}\n\n/* FOCUS */\n:host:not(.active-select) input:focus:focus-visible,\n:host([readonly=\"false\"]) .textarea-wrapper:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\ninput:focus:focus-visible,\ntextarea:focus:focus-visible {\n  color: var(--color-input-field02);\n}\n\n:host.active-select input {\n  border: var(--border-size-small) solid var(--color-primary01);\n}\n\n:host.cursor-select input:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host input[readonly]:focus:focus-visible {\n  box-shadow: none;\n}\n\n/* FILLED */\n.filled {\n  border-color: var(--color-surface05);\n}\n\n/* STATUSES (success, warning, error) */\n.input-success {\n  border-color: var(--color-success01);\n  background: var(--color-success-inverse);\n  fill: var(--color-success01);\n}\n\n.input-error {\n  border-color: var(--color-error01);\n  background: var(--color-error-inverse);\n  fill: var(--color-error01);\n}\n\n.input-warning {\n  border-color: var(--color-warning01);\n  background: var(--color-warning-inverse);\n  fill: var(--color-warning01);\n}\n\n/* HOVER */\ninput:not([readonly]):hover,\n.textarea-wrapper:hover {\n  outline: var(--border-size-medium) solid var(--gray700);\n  outline-offset: -2px;\n}\n\n/* READONLY */\n:host:not(.active-select) input[readonly],\n.readonly {\n  border-color: var(--color-disabled01);\n  fill: var(--color-disabled01);\n  pointer-events: none;\n}\n\n/* DISABLED */\n:host([disabled]:not([disabled=\"false\"])) input,\n:host([disabled]:not([disabled=\"false\"])) .textarea-wrapper,\n:host([disabled]:not([disabled=\"false\"])) z-icon {\n  border-color: var(--color-disabled01);\n  box-shadow: none;\n  color: var(--color-disabled03);\n  fill: var(--color-disabled01);\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) input:hover {\n  border-width: var(--border-size-small);\n}\n\n/* PLACEHOLDER */\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-text05);\n}\n\n::-webkit-textarea-placeholder {\n  color: var(--color-text05);\n}\n\n:-ms-textarea-placeholder {\n  color: var(--color-text05);\n}\n\n::placeholder {\n  color: var(--color-text05);\n}\n\n/* LABEL */\nlabel.input-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.input-label {\n  color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n  position: relative;\n  z-index: 1;\n  fill: var(--gray900);\n}\n\n.text-wrapper > div > input {\n  width: 100%;\n  height: calc(var(--space-unit) * 5.5);\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  margin: 0;\n}\n\n:host([size=\"small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4.5);\n}\n\n:host([size=\"x-small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4);\n}\n\n.text-wrapper > div > input.has-icon,\n.text-wrapper > div > input.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 5.25);\n}\n\n.text-wrapper > div > input.has-icon.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 8);\n}\n\n.text-wrapper .icons-wrapper {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: calc(var(--space-unit) * 1.5);\n  display: flex;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  pointer-events: initial;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.hidden {\n  display: none;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.reset-icon,\n.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {\n  cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon {\n  --z-icon-width: 18px;\n  --z-icon-height: 18px;\n\n  display: block;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n/* stylelint-disable property-no-vendor-prefix */\n.text-wrapper > div > input:-webkit-autofill {\n  -webkit-box-shadow: 0 0 0 1000px #fff inset;\n  -webkit-text-fill-color: currentcolor;\n}\n",".textarea-wrapper {\n  padding: calc(var(--space-unit) * 1.5);\n\n  /* Firefox scrollbar */\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\ntextarea::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\ntextarea::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\ntextarea::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\ntextarea::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\ntextarea {\n  width: 100%;\n  min-height: 132px;\n  padding: 0;\n  border: none;\n  margin: 0;\n  resize: none;\n}\n",".radio-wrapper,\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  color: var(--color-default-text);\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n}\n\n.radio-wrapper:hover,\n.checkbox-wrapper:hover {\n  color: var(--color-hover-primary);\n  fill: currentcolor;\n}\n\n.radio-wrapper > input,\n.checkbox-wrapper > input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.radio-wrapper .radio-label,\n.checkbox-wrapper .checkbox-label {\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1;\n  text-transform: inherit;\n}\n\n.radio-wrapper input:not(:disabled) + .radio-label,\n.checkbox-wrapper input:not(:disabled) + .checkbox-label {\n  cursor: pointer;\n}\n\n.radio-wrapper .radio-label z-icon,\n.checkbox-wrapper .checkbox-label z-icon {\n  cursor: pointer;\n  fill: inherit;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-1);\n}\n\n.radio-wrapper .radio-label.after,\n.checkbox-wrapper .checkbox-label.after {\n  flex-direction: row;\n}\n\n.radio-wrapper .radio-label.before,\n.checkbox-wrapper .checkbox-label.before {\n  flex-direction: row-reverse;\n}\n\n.radio-wrapper .radio-label.after > span,\n.checkbox-wrapper .checkbox-label.after > span {\n  margin-left: var(--space-unit);\n}\n\n.radio-wrapper .radio-label.before > span,\n.checkbox-wrapper .checkbox-label.before > span {\n  margin-right: var(--space-unit);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.after > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.after > span {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.before > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.before > span {\n  margin-right: calc(var(--space-unit) * 0.5);\n}\n\n/* focus */\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  border-radius: var(--border-radius-small);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* disabled */\n.radio-wrapper > input:disabled + .radio-label,\n.checkbox-wrapper > input:disabled + .checkbox-label {\n  color: var(--color-disabled03);\n}\n\n.radio-wrapper > input:disabled + .radio-label > z-icon,\n.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {\n  cursor: default;\n  fill: var(--color-disabled01);\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {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 {\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  ariaExpanded = \"\";\n\n  /** the input aria-controls (optional): available for text, password, number, email */\n  @Prop()\n  ariaControls?: string;\n\n  /** the input aria-autocomplete (optional): available for text, password, number, email */\n  @Prop()\n  ariaAutocomplete?: string;\n\n  /** the input aria-activedescendant (optional): available for text, password, number, email */\n  @Prop()\n  ariaActivedescendant?: 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        filled: !!this.value,\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 getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return this.role ? {role: this.role} : {};\n  }\n\n  private getAriaAttrubutes(): Record<string, unknown> {\n    const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n    const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n    const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n    const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n    return {\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\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.getRoleAttribute(),\n      ...this.getAriaAttrubutes(),\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=\"input-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      <button\n        type=\"button\"\n        class=\"icon-button input-icon\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        <z-icon\n          name={this.icon}\n          class={this.size}\n        />\n      </button>\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={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\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=\"icon-button toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\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        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\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 ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as Record<string, boolean>),\n            \"textarea-wrapper\": true,\n            \"readonly\": attributes.readonly as boolean,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaLabel}\n            {...this.getRoleAttribute()}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </div>\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    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          {...this.getRoleAttribute()}\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            aria-hidden=\"true\"\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    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          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getRoleAttribute()}\n          {...this.getFocusBlurAttributes()}\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            aria-hidden=\"true\"\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"],"version":3}
+{"file":"index10.js","mappings":"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","names":[],"sources":["src/components/z-input/styles-general.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-text.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-textarea.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-checkbox-radio.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n}\n\ninput::-ms-clear,\ninput::-ms-reveal {\n  display: none;\n}\n\n/* GENERAL */\n:host input::-ms-clear,\n:host input::-ms-reveal {\n  display: none;\n}\n\ninput,\ntextarea,\n.textarea-wrapper {\n  box-sizing: border-box;\n  border: var(--border-size-small) solid var(--gray700);\n  background: var(--color-input-field01);\n  border-radius: var(--border-radius-small);\n  color: var(--gray900);\n  fill: var(--gray900);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"small\"]) .textarea-wrapper,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea,\n:host([size=\"x-small\"]) .textarea-wrapper {\n  font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n  cursor: pointer;\n}\n\n/* FOCUS */\n:host:not(.active-select) input:focus:focus-visible,\n:host:not([readonly=\"true\"]) .textarea-wrapper:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\ninput:focus:focus-visible,\ntextarea:focus:focus-visible {\n  color: var(--color-input-field02);\n}\n\n:host.active-select input {\n  border: var(--border-size-small) solid var(--color-primary01);\n}\n\n:host.cursor-select input:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host input[readonly]:focus:focus-visible {\n  box-shadow: none;\n}\n\n/* FILLED */\n.filled {\n  border-color: var(--color-surface05);\n}\n\n/* STATUSES (success, warning, error) */\n.input-success {\n  border-color: var(--color-success01);\n  background: var(--color-success-inverse);\n  fill: var(--color-success01);\n}\n\n.input-error {\n  border-color: var(--color-error01);\n  background: var(--color-error-inverse);\n  fill: var(--color-error01);\n}\n\n.input-warning {\n  border-color: var(--color-warning01);\n  background: var(--color-warning-inverse);\n  fill: var(--color-warning01);\n}\n\n/* HOVER */\ninput:not([readonly]):hover,\n.textarea-wrapper:hover {\n  outline: var(--border-size-medium) solid var(--gray700);\n  outline-offset: -2px;\n}\n\n/* READONLY */\n:host:not(.active-select) input[readonly],\n.readonly {\n  border-color: var(--color-disabled01);\n  fill: var(--color-disabled01);\n  pointer-events: none;\n}\n\n/* DISABLED */\n:host([disabled]:not([disabled=\"false\"])) input,\n:host([disabled]:not([disabled=\"false\"])) .textarea-wrapper,\n:host([disabled]:not([disabled=\"false\"])) z-icon {\n  border-color: var(--color-disabled01);\n  box-shadow: none;\n  color: var(--color-disabled03);\n  fill: var(--color-disabled01);\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) input:hover {\n  border-width: var(--border-size-small);\n}\n\n/* PLACEHOLDER */\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-text05);\n}\n\n::-webkit-textarea-placeholder {\n  color: var(--color-text05);\n}\n\n:-ms-textarea-placeholder {\n  color: var(--color-text05);\n}\n\n::placeholder {\n  color: var(--color-text05);\n}\n\n/* LABEL */\nlabel.input-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.input-label {\n  color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n  position: relative;\n  z-index: 1;\n  fill: var(--gray900);\n}\n\n.text-wrapper > div > input {\n  width: 100%;\n  height: calc(var(--space-unit) * 5.5);\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  margin: 0;\n}\n\n:host([size=\"small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4.5);\n}\n\n:host([size=\"x-small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4);\n}\n\n.text-wrapper > div > input.has-icon,\n.text-wrapper > div > input.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 5.25);\n}\n\n.text-wrapper > div > input.has-icon.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 8);\n}\n\n.text-wrapper .icons-wrapper {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: calc(var(--space-unit) * 1.5);\n  display: flex;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  pointer-events: initial;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.hidden {\n  display: none;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.reset-icon,\n.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {\n  cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon {\n  --z-icon-width: 18px;\n  --z-icon-height: 18px;\n\n  display: block;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n/* stylelint-disable property-no-vendor-prefix */\n.text-wrapper > div > input:-webkit-autofill {\n  -webkit-box-shadow: 0 0 0 1000px #fff inset;\n  -webkit-text-fill-color: currentcolor;\n}\n",".textarea-wrapper {\n  padding: calc(var(--space-unit) * 1.5);\n\n  /* Firefox scrollbar */\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\ntextarea::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\ntextarea::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\ntextarea::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\ntextarea::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\ntextarea {\n  width: 100%;\n  min-height: 132px;\n  padding: 0;\n  border: none;\n  margin: 0;\n  resize: none;\n}\n",".radio-wrapper,\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  color: var(--color-default-text);\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n}\n\n.radio-wrapper:hover,\n.checkbox-wrapper:hover {\n  color: var(--color-hover-primary);\n  fill: currentcolor;\n}\n\n.radio-wrapper > input,\n.checkbox-wrapper > input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.radio-wrapper .radio-label,\n.checkbox-wrapper .checkbox-label {\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1;\n  text-transform: inherit;\n}\n\n.radio-wrapper input:not(:disabled) + .radio-label,\n.checkbox-wrapper input:not(:disabled) + .checkbox-label {\n  cursor: pointer;\n}\n\n.radio-wrapper .radio-label z-icon,\n.checkbox-wrapper .checkbox-label z-icon {\n  cursor: pointer;\n  fill: inherit;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-1);\n}\n\n.radio-wrapper .radio-label.after,\n.checkbox-wrapper .checkbox-label.after {\n  flex-direction: row;\n}\n\n.radio-wrapper .radio-label.before,\n.checkbox-wrapper .checkbox-label.before {\n  flex-direction: row-reverse;\n}\n\n.radio-wrapper .radio-label.after > span,\n.checkbox-wrapper .checkbox-label.after > span {\n  margin-left: var(--space-unit);\n}\n\n.radio-wrapper .radio-label.before > span,\n.checkbox-wrapper .checkbox-label.before > span {\n  margin-right: var(--space-unit);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.after > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.after > span {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.before > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.before > span {\n  margin-right: calc(var(--space-unit) * 0.5);\n}\n\n/* focus */\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {\n  border-radius: 50%;\n}\n\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  border-radius: var(--border-radius-small);\n}\n\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* disabled */\n.radio-wrapper > input:disabled + .radio-label,\n.checkbox-wrapper > input:disabled + .checkbox-label {\n  color: var(--color-disabled03);\n}\n\n.radio-wrapper > input:disabled + .radio-label > z-icon,\n.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {\n  cursor: default;\n  fill: var(--color-disabled01);\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {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 {\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  ariaExpanded = \"\";\n\n  /** the input aria-controls (optional): available for text, password, number, email */\n  @Prop()\n  ariaControls?: string;\n\n  /** the input aria-autocomplete (optional): available for text, password, number, email */\n  @Prop()\n  ariaAutocomplete?: string;\n\n  /** the input aria-activedescendant (optional): available for text, password, number, email */\n  @Prop()\n  ariaActivedescendant?: 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        filled: !!this.value,\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 getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return this.role ? {role: this.role} : {};\n  }\n\n  private getAriaAttrubutes(): Record<string, unknown> {\n    const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n    const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n    const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n    const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n    return {\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\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.getRoleAttribute(),\n      ...this.getAriaAttrubutes(),\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=\"input-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      <button\n        type=\"button\"\n        class=\"icon-button input-icon\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        <z-icon\n          name={this.icon}\n          class={this.size}\n        />\n      </button>\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={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\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=\"icon-button toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\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        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\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 ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as Record<string, boolean>),\n            \"textarea-wrapper\": true,\n            \"readonly\": attributes.readonly as boolean,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaLabel}\n            {...this.getRoleAttribute()}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </div>\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    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          {...this.getRoleAttribute()}\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            aria-hidden=\"true\"\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    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          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getRoleAttribute()}\n          {...this.getFocusBlurAttributes()}\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            aria-hidden=\"true\"\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"],"version":3}