@zanichelli/albe-web-components 17.0.4 → 17.0.5-RC2

package/dist/cjs/z-toggle-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-96af6326.js');
 
-const stylesCss = "button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
+const stylesCss = "button{display:-ms-flexbox;display:flex;height:36px;-ms-flex-align:center;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);-webkit-box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 200ms linear;transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
 const ZToggleButtonStyle0 = stylesCss;
 
 const ZToggleButton = class {

package/dist/cjs/z-toggle-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-toggle-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,4iCAA4iC,CAAC;AAC/jC,4BAAe,SAAS;;MCMX,aAAa;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACEA,qEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErCA,qEACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  padding-right: calc(var(--space-unit) * 2);\n  padding-left: 0;\n  border: var(--border-size-medium) solid;\n  border-color: transparent;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n  text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n\nz-icon {\n  display: inline-block;\n  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\nbutton.isopen {\n  top: -20px;\n}\n\nbutton.avoid-clicks {\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-toggle-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2xCAA2xC,CAAC;AAC9yC,4BAAe,SAAS;;MCMX,aAAa;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACEA,qEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErCA,qEACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  padding-right: calc(var(--space-unit) * 2);\n  padding-left: 0;\n  border: var(--border-size-medium) solid;\n  border-color: transparent;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n  text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n\nz-icon {\n  display: inline-block;\n  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\nbutton.isopen {\n  top: -20px;\n}\n\nbutton.avoid-clicks {\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-toggle-switch.cjs.entry.js

@@ -7,7 +7,7 @@ const index$1 = require('./index-f5ebcaa2.js');
 const utils = require('./utils-d08d4b80.js');
 require('./breakpoints-8a1e87e0.js');
 
-const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
+const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{-ms-flex-direction:row-reverse;flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 4);height:18px;-ms-flex-align:center;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;-webkit-box-shadow:var(--shadow-1);box-shadow:var(--shadow-1);-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{-webkit-transform:translateX(calc(100% - 2px));transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
 const ZToggleSwitchStyle0 = stylesCss;
 
 const ZToggleSwitch = class {

package/dist/cjs/z-toggle-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-toggle-switch.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,25EAA25E,CAAC;AAC96E,4BAAe,SAAS;;MCSX,aAAa;;;;wBAGH,KAAK;6BAITA,qBAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoBC,cAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,oEACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACFA,oEACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACEA,oEAAQ,CACH,EACPA,mEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAEDA,mEAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACXA,qEACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;","names":["LabelPosition","randomId","h","Host"],"sources":["src/components/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n\nlabel.disabled {\n  cursor: default;\n}\n\nlabel.right {\n  flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n  color: var(--color-default-text);\n  letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n  margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n  margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n  position: relative;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: 18px;\n  align-items: center;\n  background-color: var(--gray500);\n  border-radius: var(--space-unit);\n  color: var(--gray500);\n  cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n  background-color: var(--color-disabled01);\n  cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n  fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n  background-color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n  outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n  background-color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  background-color: var(--color-white);\n  border-radius: 7px;\n  box-shadow: var(--shadow-1);\n  transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n  transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-toggle-switch.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,k5FAAk5F,CAAC;AACr6F,4BAAe,SAAS;;MCSX,aAAa;;;;wBAGH,KAAK;6BAITA,qBAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoBC,cAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,oEACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACFA,oEACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACEA,oEAAQ,CACH,EACPA,mEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAEDA,mEAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACXA,qEACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;","names":["LabelPosition","randomId","h","Host"],"sources":["src/components/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n\nlabel.disabled {\n  cursor: default;\n}\n\nlabel.right {\n  flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n  color: var(--color-default-text);\n  letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n  margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n  margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n  position: relative;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: 18px;\n  align-items: center;\n  background-color: var(--gray500);\n  border-radius: var(--space-unit);\n  color: var(--gray500);\n  cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n  background-color: var(--color-disabled01);\n  cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n  fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n  background-color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n  outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n  background-color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  background-color: var(--color-white);\n  border-radius: 7px;\n  box-shadow: var(--shadow-1);\n  transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n  transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-tr.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aa56c709.js');
+const index = require('./index-c286015f.js');
 require('./index-96af6326.js');
 require('./utils-d08d4b80.js');
 require('./index-f5ebcaa2.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-2a9a328d.js');
-require('./index-b2f35532.js');
+require('./index-6c84c7e8.js');
+require('./index-72dcc0c1.js');
 
 
 

package/dist/cjs/z-visually-hidden.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-96af6326.js');
 
-const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}";
 const ZVisuallyHiddenStyle0 = stylesCss;
 
 const ZVisuallyHidden = class {

package/dist/cjs/z-visually-hidden.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-visually-hidden.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,kKAAkK,CAAC;AACrL,8BAAe,SAAS;;MCMX,eAAe;;;;IAC1B,MAAM;QACJ,OAAOA,oEAAQ,CAAC;KACjB;;;;;;","names":["h"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  margin: 0 -1px -1px 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"z-visually-hidden.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,+LAA+L,CAAC;AAClN,8BAAe,SAAS;;MCMX,eAAe;;;;IAC1B,MAAM;QACJ,OAAOA,oEAAQ,CAAC;KACjB;;;;;;","names":["h"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  margin: 0 -1px -1px 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"version":3}

package/dist/components/index10.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { H as InfoRevealPosition, e as ControlSize } from './index2.js';
 import { d as defineCustomElement$1 } from './index9.js';
 
-const stylesCss = ":host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size=\"big\"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size=\"small\"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size=\"x-small\"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size=\"small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:18px}:host([size=\"x-small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:16px}.z-info-reveal-panel{position:absolute;z-index:99;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"top_right\"]) .z-info-reveal-panel{top:0}:host([position=\"bottom_left\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{bottom:0}:host([position=\"top_right\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{right:0}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"bottom_left\"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{position:fixed;top:auto !important;bottom:auto !important;left:var(--grid-margin) !important;width:calc(100% - (var(--grid-margin) * 2)) !important;max-width:none !important;margin-top:calc(var(--trigger-size) * -1)}}";
+const stylesCss = ":host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size=\"big\"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size=\"small\"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size=\"x-small\"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:-ms-flexbox;display:flex;fill:var(--color-inverse-icon)}:host([size=\"small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:18px}:host([size=\"x-small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:16px}.z-info-reveal-panel{position:absolute;z-index:99;display:-ms-flexbox;display:flex;width:var(--z-info-reveal-panel-width);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-ms-flex-align:start;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);-webkit-box-shadow:var(--shadow-4);box-shadow:var(--shadow-4);color:var(--color-text-inverse);-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"top_right\"]) .z-info-reveal-panel{top:0}:host([position=\"bottom_left\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{bottom:0}:host([position=\"top_right\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{right:0}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"bottom_left\"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{position:fixed;top:auto !important;bottom:auto !important;left:var(--grid-margin) !important;width:calc(100% - (var(--grid-margin) * 2)) !important;max-width:none !important;margin-top:calc(var(--trigger-size) * -1)}}";
 const ZInfoRevealStyle0 = stylesCss;
 
 const ZInfoReveal = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends HTMLElement {

package/dist/components/index10.js.map

@@ -1 +1 @@
-{"file":"index10.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,uhFAAuhF,CAAC;AAC1iF,0BAAe,SAAS;;MCaX,WAAW;;;;;oBAGd,mBAAmB;wBAQK,kBAAkB,CAAC,YAAY;;yBAQnD,4BAA4B;oBAInB,WAAW,CAAC,GAAG;oBAI7B,KAAK;;;;;IAYZ,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;;QAEvD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;KACnD;;;;IAKO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;;;;IAKO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,mBACrC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC7B,qBAAqB,IAElC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,EACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAElB,8DAAa,EACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B,IAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: 18px;\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: 16px;\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  z-index: 99;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    position: fixed;\n    top: auto !important;\n    bottom: auto !important;\n    left: var(--grid-margin) !important;\n    width: calc(100% - (var(--grid-margin) * 2)) !important;\n    max-width: none !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import {Component, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index10.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,o8FAAo8F,CAAC;AACv9F,0BAAe,SAAS;;MCaX,WAAW;;;;;oBAGd,mBAAmB;wBAQK,kBAAkB,CAAC,YAAY;;yBAQnD,4BAA4B;oBAInB,WAAW,CAAC,GAAG;oBAI7B,KAAK;;;;;IAYZ,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;;QAEvD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;KACnD;;;;IAKO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;;;;IAKO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,mBACrC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC7B,qBAAqB,IAElC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,EACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAElB,8DAAa,EACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B,IAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: 18px;\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: 16px;\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  z-index: 99;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    position: fixed;\n    top: auto !important;\n    bottom: auto !important;\n    left: var(--grid-margin) !important;\n    width: calc(100% - (var(--grid-margin) * 2)) !important;\n    max-width: none !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import {Component, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index11.js

@@ -4,7 +4,7 @@ import { r as randomId, b as boolean } from './utils.js';
 import { d as defineCustomElement$2 } from './index9.js';
 import { d as defineCustomElement$1 } from './index12.js';
 
-const stylesCss = ".sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}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{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.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{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-warning-inverse)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h input.sc-z-input,[disabled].sc-z-input-h .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}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 label.input-label.sc-z-input{color:var(--color-disabled03)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);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:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-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.input-icon.sc-z-input:focus{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}.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}textarea.sc-z-input::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}textarea.sc-z-input::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(textarea::-webkit-scrollbar-track){textarea.sc-z-input{scrollbar-color:var(--color-primary01) transparent}}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-form-default-text);fill:var(--color-form-active-primary);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-form-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:inline-flex;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{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{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{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-form-disabled-text)}.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-form-disabled01-icon)}";
+const stylesCss = ".sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{-webkit-box-sizing:border-box;box-sizing:border-box}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{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.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{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.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}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-warning-inverse)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h input.sc-z-input,[disabled].sc-z-input-h .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h z-icon.sc-z-input{border-color:var(--color-form-disabled03);-webkit-box-shadow:none;box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h 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-form-placeholder-text)}input.sc-z-input::-moz-placeholder,textarea.sc-z-input::-moz-placeholder{color:var(--color-form-placeholder-text)}input.sc-z-input:-ms-input-placeholder,textarea.sc-z-input:-ms-input-placeholder{color:var(--color-form-placeholder-text)}input.sc-z-input::-ms-input-placeholder,textarea.sc-z-input::-ms-input-placeholder{color:var(--color-form-placeholder-text)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-input-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-moz-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-input-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-ms-input-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}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 label.input-label.sc-z-input{color:var(--color-disabled03)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.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.input-icon.sc-z-input{display:-ms-flexbox;display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-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.input-icon.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}.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}textarea.sc-z-input::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}textarea.sc-z-input::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(textarea::-webkit-scrollbar-track){textarea.sc-z-input{scrollbar-color:var(--color-primary01) transparent}}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}.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-form-default-text);fill:var(--color-form-active-primary);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-form-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-form-disabled-text)}.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-form-disabled01-icon)}";
 const ZInputStyle0 = stylesCss;
 
 const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement {

package/dist/components/index11.js.map

@@ -1 +1 @@
-{"file":"index11.js","mappings":"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","names":[],"sources":["src/components/z-input/styles.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":["@import \"styles-general.css\";\n@import \"styles-text.css\";\n@import \"styles-textarea.css\";\n@import \"styles-checkbox-radio.css\";\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Fragment, Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input\",\n  styleUrl: \"styles.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      },\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      <z-icon\n        name={this.icon}\n        class={{[this.size]: true, \"input-icon\": true}}\n      />\n    );\n  }\n\n  private renderResetIcon(): HTMLButtonElement {\n    let hidden = false;\n    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n      hidden = true;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\n        }}\n      >\n        <z-icon\n          name=\"multiply\"\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderShowHidePassword(): HTMLButtonElement {\n    return (\n      <button\n        type=\"button\"\n        class=\"input-icon toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label={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        disabled={this.disabled}\n      />\n    );\n  }\n\n  /* END text/password/email/number */\n\n  /* START textarea */\n\n  private renderTextarea(): HTMLDivElement {\n    const attributes = this.getTextAttributes();\n\n    return (\n      <Fragment>\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as {[className: string]: boolean}),\n            \"textarea-wrapper\": true,\n            \"readonly\": !!attributes.readonly,\n          }}\n        >\n          <textarea\n            {...attributes}\n            aria-label={this.ariaLabel || undefined}\n            {...this.getRoleAttribute()}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </Fragment>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  /* START checkbox */\n  private renderCheckbox(): HTMLDivElement {\n    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            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            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":"index11.js","mappings":"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","names":[],"sources":["src/components/z-input/styles.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":["@import \"styles-general.css\";\n@import \"styles-text.css\";\n@import \"styles-textarea.css\";\n@import \"styles-checkbox-radio.css\";\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Fragment, Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input\",\n  styleUrl: \"styles.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      },\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      <z-icon\n        name={this.icon}\n        class={{[this.size]: true, \"input-icon\": true}}\n      />\n    );\n  }\n\n  private renderResetIcon(): HTMLButtonElement {\n    let hidden = false;\n    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n      hidden = true;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\n        }}\n      >\n        <z-icon\n          name=\"multiply\"\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderShowHidePassword(): HTMLButtonElement {\n    return (\n      <button\n        type=\"button\"\n        class=\"input-icon toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label={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        disabled={this.disabled}\n      />\n    );\n  }\n\n  /* END text/password/email/number */\n\n  /* START textarea */\n\n  private renderTextarea(): HTMLDivElement {\n    const attributes = this.getTextAttributes();\n\n    return (\n      <Fragment>\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as {[className: string]: boolean}),\n            \"textarea-wrapper\": true,\n            \"readonly\": !!attributes.readonly,\n          }}\n        >\n          <textarea\n            {...attributes}\n            aria-label={this.ariaLabel || undefined}\n            {...this.getRoleAttribute()}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </Fragment>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  /* START checkbox */\n  private renderCheckbox(): HTMLDivElement {\n    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            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            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}

package/dist/components/index12.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './index9.js';
 
-const stylesCss = ":host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-default-text);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-success01)}:host([status=\"error\"]){color:var(--color-hover-error)}:host([status=\"warning\"]){color:var(--color-hover-warning)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}:host([disabled]){color:var(--color-disabled03);fill:var(--color-disabled03)}";
+const stylesCss = ":host{display:-ms-flexbox;display:flex;min-height:calc(var(--space-unit) * 2.5);-ms-flex-align:start;align-items:start;margin-top:var(--space-unit);color:var(--color-default-text);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-success01)}:host([status=\"error\"]){color:var(--color-hover-error)}:host([status=\"warning\"]){color:var(--color-hover-warning)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}:host([disabled]){color:var(--color-disabled03);fill:var(--color-disabled03)}";
 const ZInputMessageStyle0 = stylesCss;
 
 const ZInputMessage = /*@__PURE__*/ proxyCustomElement(class ZInputMessage extends HTMLElement {

package/dist/components/index12.js.map

@@ -1 +1 @@
-{"file":"index12.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,g7BAAg7B,CAAC;AACn8B,4BAAe,SAAS;;MCOX,aAAa;;;;;QAahB,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;;;;0BAGW,EAAE;;IAIf,eAAe;QACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,GAAG,EAAC,IAAI,EAAE,OAAO,EAAC,GAAG,EAAE,CAAC;KACtE;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qEACC,IAAI,CAAC,UAAU,kBACP,IAAI,CAAC,OAAO,KAEvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW,EACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  min-height: calc(var(--space-unit) * 2.5);\n  align-items: start;\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n  margin-top: calc(var(--space-unit) * 0.5);\n  font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n  color: var(--color-success01);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-hover-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-hover-warning);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n  --z-icon-right-margin: var(--space-unit);\n\n  margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n\n:host([disabled]) {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n","import {Component, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  @State()\n  statusRole = {};\n\n  @Watch(\"message\")\n  @Watch(\"status\")\n  onMessageChange(): void {\n    this.statusRole = this.message && this.status ? {role: \"alert\"} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        {...this.statusRole}\n        aria-label={this.message}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index12.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,y9BAAy9B,CAAC;AAC5+B,4BAAe,SAAS;;MCOX,aAAa;;;;;QAahB,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;;;;0BAGW,EAAE;;IAIf,eAAe;QACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,GAAG,EAAC,IAAI,EAAE,OAAO,EAAC,GAAG,EAAE,CAAC;KACtE;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qEACC,IAAI,CAAC,UAAU,kBACP,IAAI,CAAC,OAAO,KAEvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW,EACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  min-height: calc(var(--space-unit) * 2.5);\n  align-items: start;\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n  margin-top: calc(var(--space-unit) * 0.5);\n  font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n  color: var(--color-success01);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-hover-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-hover-warning);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n  --z-icon-right-margin: var(--space-unit);\n\n  margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n\n:host([disabled]) {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n","import {Component, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  @State()\n  statusRole = {};\n\n  @Watch(\"message\")\n  @Watch(\"status\")\n  onMessageChange(): void {\n    this.statusRole = this.message && this.status ? {role: \"alert\"} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        {...this.statusRole}\n        aria-label={this.message}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index13.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as ListSize, m as ListType } from './index2.js';
 
-const stylesCss = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
+const stylesCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
 const ZListStyle0 = stylesCss;
 
 const ZList = /*@__PURE__*/ proxyCustomElement(class ZList extends HTMLElement {

package/dist/components/index13.js.map

@@ -1 +1 @@
-{"file":"index13.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,0GAA0G,CAAC;AAC7H,oBAAe,SAAS;;MCOX,KAAK;;;;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;SACvE;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","src/components/list/z-list/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * Sets role of the element.\n   */\n  @Prop({reflect: true})\n  role = \"list\";\n\n  private setChildrenSizeType(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setChildrenSizeType();\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index13.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,wJAAwJ,CAAC;AAC3K,oBAAe,SAAS;;MCOX,KAAK;;;;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;SACvE;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","src/components/list/z-list/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * Sets role of the element.\n   */\n  @Prop({reflect: true})\n  role = \"list\";\n\n  private setChildrenSizeType(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setChildrenSizeType();\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index14.js

@@ -3,7 +3,7 @@ import { j as ExpandableListButtonAlign, l as ListDividerType, D as DividerSize,
 import { d as defineCustomElement$2 } from './index6.js';
 import { d as defineCustomElement$1 } from './index9.js';
 
-const stylesCss = ":host{outline:none}:host>.container{--background-color-list-element:var(--color-surface01);--background-hover-color-list-element:var(--color-background);--background-active-color-list-element:var(--color-background);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}";
+const stylesCss = ":host{outline:none}:host>.container{--background-color-list-element:var(--color-surface01);--background-hover-color-list-element:var(--color-background);--background-active-color-list-element:var(--color-background);display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:-ms-flexbox;display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:justify;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
 const ZListElementStyle0 = stylesCss;
 
 const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends HTMLElement {

package/dist/components/index14.js.map

@@ -1 +1 @@
-{"file":"index14.js","mappings":"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","names":[],"sources":["src/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","src/components/list/z-list-element/index.tsx"],"sourcesContent":[":host {\n  outline: none;\n}\n\n:host > .container {\n  --background-color-list-element: var(--color-surface01);\n  --background-hover-color-list-element: var(--color-background);\n  --background-active-color-list-element: var(--color-background);\n\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: center;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\n/* z-list-element size */\n\n:host([size=\"small\"]) > .container {\n  min-height: calc(var(--space-unit) * 4);\n  padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n  min-height: calc(var(--space-unit) * 5);\n  padding: var(--space-unit) 0;\n}\n\n:host([size=\"large\"]) > .container {\n  min-height: calc(var(--space-unit) * 7);\n  padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n  min-height: calc(var(--space-unit) * 9);\n  padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- */\n\n:host([expandable]) > .container,\n:host([clickable]) > .container {\n  cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([clickable]:hover) > .container {\n  background-color: var(--background-hover-color-list-element);\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([clickable]:active) > .container {\n  background-color: var(--background-active-color-list-element);\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container {\n  display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded {\n  display: block;\n}\n\n.z-list-content-container {\n  display: flex;\n  align-items: center;\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"listitem\";\n\n  /** set tabindex to Host tag (optional). Defaults to 0. */\n  @Prop()\n  htmlTabindex?: number | null = 0;\n\n  @State()\n  showInnerContent = false;\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   * @returns void\n   */\n  private handleClick(): void {\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  /**\n   * Renders button to expand element.\n   * @returns expadable button\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   * @returns expanded content\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   * @returns list content\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={this.htmlTabindex}\n      >\n        <div\n          class=\"container\"\n          style={{color: `var(--${this.color})`}}\n          tabindex=\"-1\"\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index14.js","mappings":"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","names":[],"sources":["src/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","src/components/list/z-list-element/index.tsx"],"sourcesContent":[":host {\n  outline: none;\n}\n\n:host > .container {\n  --background-color-list-element: var(--color-surface01);\n  --background-hover-color-list-element: var(--color-background);\n  --background-active-color-list-element: var(--color-background);\n\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: center;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\n/* z-list-element size */\n\n:host([size=\"small\"]) > .container {\n  min-height: calc(var(--space-unit) * 4);\n  padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n  min-height: calc(var(--space-unit) * 5);\n  padding: var(--space-unit) 0;\n}\n\n:host([size=\"large\"]) > .container {\n  min-height: calc(var(--space-unit) * 7);\n  padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n  min-height: calc(var(--space-unit) * 9);\n  padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- */\n\n:host([expandable]) > .container,\n:host([clickable]) > .container {\n  cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([clickable]:hover) > .container {\n  background-color: var(--background-hover-color-list-element);\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([clickable]:active) > .container {\n  background-color: var(--background-active-color-list-element);\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container {\n  display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded {\n  display: block;\n}\n\n.z-list-content-container {\n  display: flex;\n  align-items: center;\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"listitem\";\n\n  /** set tabindex to Host tag (optional). Defaults to 0. */\n  @Prop()\n  htmlTabindex?: number | null = 0;\n\n  @State()\n  showInnerContent = false;\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   * @returns void\n   */\n  private handleClick(): void {\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  /**\n   * Renders button to expand element.\n   * @returns expadable button\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   * @returns expanded content\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   * @returns list content\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={this.htmlTabindex}\n      >\n        <div\n          class=\"container\"\n          style={{color: `var(--${this.color})`}}\n          tabindex=\"-1\"\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index16.js

@@ -859,7 +859,7 @@ if (window.HTMLDialogElement === undefined) {
   HTMLFormElement.prototype.submit = replacementFormSubmit;
 }
 
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-modal-content-padding:calc(var(--space-unit) * 2)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}::slotted([slot=\"modalContent\"]){padding:var(--z-modal-content-padding)}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.75)\n    calc(var(--space-unit) * 2);background:var(--color-background)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header button:focus-visible{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}.modal-container>header button::after{position:absolute;top:6px;right:4px;display:block;width:40px;height:40px;background-color:transparent;content:\"\"}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.25);--z-icon-height:calc(var(--space-unit) * 2.25);display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:flex;width:100%;align-items:baseline;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-sb)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}}@media only screen and (min-width: 1152px){.modal-container>header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) * 1.5)}.modal-container>header h1{font-size:var(--font-size-6);font-weight:var(--font-sb);letter-spacing:0;line-height:1.333}.modal-container>header .subtitle{font-size:var(--font-size-4);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-modal-content-padding:calc(var(--space-unit) * 2)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::-webkit-backdrop{display:none}:host>dialog::-ms-backdrop{display:none}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}::slotted([slot=\"modalContent\"]){padding:var(--z-modal-content-padding)}.modal-container{z-index:1010;display:-ms-flexbox;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;-ms-flex-direction:column;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.75)\n    calc(var(--space-unit) * 2);background:var(--color-background)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header button:focus-visible{border-radius:50%;-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}.modal-container>header button::after{position:absolute;top:6px;right:4px;display:block;width:40px;height:40px;background-color:transparent;content:\"\"}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.25);--z-icon-height:calc(var(--space-unit) * 2.25);display:-ms-flexbox;display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:baseline;align-items:baseline;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-sb)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;-ms-flex:1 auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:-webkit-sticky;position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}}@media only screen and (min-width: 1152px){.modal-container>header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) * 1.5)}.modal-container>header h1{font-size:var(--font-size-6);font-weight:var(--font-sb);letter-spacing:0;line-height:1.333}.modal-container>header .subtitle{font-size:var(--font-size-4);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}";
 const ZModalStyle0 = stylesCss;
 
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';