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

package/dist/esm-es5/z-file-upload.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,i,n,e){function a(t){return t instanceof n?t:new n((function(i){i(t)}))}return new(n||(n=Promise))((function(n,r){function s(t){try{c(e.next(t))}catch(t){r(t)}}function o(t){try{c(e["throw"](t))}catch(t){r(t)}}function c(t){t.done?n(t.value):a(t.value).then(s,o)}c((e=e.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},e,a,r,s;return s={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function o(t){return function(i){return c([t,i])}}function c(o){if(e)throw new TypeError("Generator is already executing.");while(s&&(s=0,o[0]&&(n=0)),n)try{if(e=1,a&&(r=o[0]&2?a["return"]:o[0]?a["throw"]||((r=a["return"])&&r.call(a),0):a.next)&&!(r=r.call(a,o[1])).done)return r;if(a=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:n.label++;return{value:o[1],done:false};case 5:n.label++;a=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){n.label=o[1];break}if(o[0]===6&&n.label<r[1]){n.label=r[1];r=o;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(o);break}if(r[2])n.ops.pop();n.trys.pop();continue}o=i.call(t,n)}catch(t){o=[6,t];a=0}finally{e=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,i,n){if(n||arguments.length===2)for(var e=0,a=i.length,r;e<a;e++){if(r||!(e in i)){if(!r)r=Array.prototype.slice.call(i,0,e);r[e]=i[e]}}return t.concat(r||Array.prototype.slice.call(i))};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{w as ZFileUploadType,p as Device,D as DividerSize}from"./index-2255c6c8.js";import{g as getDevice}from"./utils-7983d02c.js";import"./breakpoints-680e0e56.js";var stylesCss='*:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}:host{color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .modal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 2)}:host .modal-wrapper>.files-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin:calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);font-size:calc(var(--space-unit) * 3);font-weight:var(--font-sb)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0;font-size:calc(var(--space-unit) * 2);font-weight:var(--font-sb)}:host([type="dragdrop"])>.container>.files-container>.heading-4-sb{margin-top:0;margin-bottom:calc(var(--space-unit) * 3)}:host>.container>.files-container>.files-wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:calc(var(--space-unit) * 2);-moz-column-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}:host([type="dragdrop"])>.container>.files-container>z-divider{margin:calc(var(--space-unit) * 3) 0}:host .error-message{font-size:14px;font-weight:400;letter-spacing:0.16%;line-height:20px;text-align:left}:host .error-message>.file-name{font-weight:600}@media only screen and (min-width: 768px){:host>.container>z-button{-ms-flex-item-align:start;align-self:flex-start}:host .modal-wrapper{padding:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){:host .modal-wrapper{padding:calc(var(--space-unit) * 4)}}';var ZFileUploadStyle0=stylesCss;var ZFileUpload=function(){function t(t){registerInstance(this,t);this.fileInput=createEvent(this,"fileInput",7);this.inputAttributes={type:"file",id:"file-elem",multiple:true};this.type=ZFileUploadType.DEFAULT;this.buttonVariant=undefined;this.acceptedFormat=undefined;this.fileMaxSize=undefined;this.mainTitle=undefined;this.description=undefined;this.files=[];this.uploadBtnLabel="allega";this.dragAndDropLabel="Rilascia i file in questa area per allegarli.";this.allowedFilesMessage=undefined;this.uploadClickableMessage="Carica";this.uploadMessage="o trascina dal tuo computer";this.errorModalTitle="Errore di caricamento";this.errorModalMessage=undefined;this.uploadedFilesLabel="File appena caricati";this.hasFileSection=true;this.invalidFiles=undefined}t.prototype.removeFileListener=function(t){this.removeFileHandler(t.detail)};t.prototype.fileDroppedListener=function(t){this.input.files=t.detail;this.fileInputHandler()};t.prototype.componentDidUpdate=function(){this.handleAccessibility();this.invalidFiles.size&&this.errorModal.focus()};t.prototype.componentWillLoad=function(){this.invalidFiles=new Map};t.prototype.fileInputHandler=function(){if(this.input.files.length){this.invalidFiles=this.checkFiles(Array.from(this.input.files))}};t.prototype.getFiles=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.files]}))}))};t.prototype.removeFile=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.removeFileHandler(t);return[2]}))}))};t.prototype.removeFileHandler=function(t){var i=this.files;var n=i.find((function(i){return i.name===t}));if(n){var e=i.indexOf(n);if(e>=0){i.splice(e,1);this.files=__spreadArray([],i,true)}}};t.prototype.getType=function(){if(getDevice()!==Device.DESKTOP&&getDevice()!==Device.DESKTOP_WIDE){return ZFileUploadType.DEFAULT}return this.type};t.prototype.handleAccessibility=function(){var t=this.el.querySelector("z-file:last-child z-chip button");if(this.files.length>0&&t){t.focus()}else{this.getType()===ZFileUploadType.DEFAULT?this.button.querySelector("button").focus():this.uploadLink.focus()}};t.prototype.checkFiles=function(t){var i=this;var n=new Map;var e="supera il limite di ".concat(this.fileMaxSize,"MB");var a=" ha un formato non supportato";t.forEach((function(t){var r=t.size/1024/1024;var s=i.acceptedFormat.split(",").some((function(i){return t.name.toLowerCase().endsWith(i.trim())}));var o=r<=i.fileMaxSize;if(o&&s){if(!i.files.find((function(i){return i.name===t.name}))){i.files.push(t);i.fileInput.emit(t);i.input.value=""}return}n.set(t.name,[]);if(!o){n.get(t.name).push(e)}if(!s){n.get(t.name).push(a)}}));return n};t.prototype.renderTitle=function(){return h("span",{id:"title"},this.mainTitle)};t.prototype.renderDescription=function(t){return h("span",{class:t},this.description)};t.prototype.renderAllowedFileExtensions=function(){var t="";var i="";if(this.acceptedFormat){var n=this.acceptedFormat.split(", ").map((function(t){return t.substring(1).toUpperCase()})).join(", ");t=" nei formati ".concat(n)}if(this.fileMaxSize){i=" per un massimo di ".concat(this.fileMaxSize,"MB di peso")}var e="Puoi allegare file".concat(t).concat(i,".");return h("span",{class:"body-3"},this.allowedFilesMessage?this.allowedFilesMessage:t||i?e:null)};t.prototype.renderFileSection=function(){if(!this.hasFileSection){return}return h("section",{class:"files-container ".concat(!this.files.length?"hidden":"")},h("span",{class:"heading-4-sb"},this.uploadedFilesLabel),h("div",{class:"files-wrapper"},h("slot",{name:"files"})),h("z-divider",{size:DividerSize.MEDIUM}))};t.prototype.renderInput=function(){var t=this;return h("input",Object.assign({},this.inputAttributes,{onChange:function(){return t.fileInputHandler()},accept:this.acceptedFormat,ref:function(i){return t.input=i}}))};t.prototype.renderUploadButton=function(){var t=this;return[this.renderInput(),h("z-button",{onClick:function(){return t.input.click()},onKeyPress:function(i){if(i.code=="Space"||i.code=="Enter"){i.preventDefault();t.input.click()}},id:"fileSelect",variant:this.buttonVariant,icon:"upload",ref:function(i){return t.button=i}},this.uploadBtnLabel)]};t.prototype.renderUploadLink=function(){var t=this;return[this.renderInput(),h("span",{class:"body-1 upload-link-text"},h("span",{tabIndex:0,class:"body-1-sb upload-link",onClick:function(){return t.input.click()},onKeyPress:function(i){if(i.code=="Space"||i.code=="Enter"){i.preventDefault();t.input.click()}},ref:function(i){return t.uploadLink=i}},this.uploadClickableMessage)," ",this.uploadMessage)]};t.prototype.renderDefaultMode=function(){return[this.renderDescription("body-3-sb"),this.renderAllowedFileExtensions(),this.renderFileSection(),this.renderUploadButton()]};t.prototype.renderDragDropMode=function(){return[this.renderFileSection(),h("z-dragdrop-area",{"drag-and-drop-label":this.dragAndDropLabel},h("div",{class:"text-container"},this.renderDescription("body-1"),this.renderUploadLink(),this.renderAllowedFileExtensions()))]};t.prototype.formatErrorString=function(t,i){var n,e;var a=i[0]&&i[1]?" e ":"";return h("span",{class:"error-message"},"Il file ",h("span",{class:"file-name"},t)," ",(n=i[1])!==null&&n!==void 0?n:"",a,(e=i[0])!==null&&e!==void 0?e:"",".")};t.prototype.handleErrorModalContent=function(){var t=this;return h("div",{slot:"modalContent"},h("div",{class:"modal-wrapper"},h("div",{class:"files"},this.errorModalMessage?h("span",{class:"body-3"},this.errorModalMessage):Array.from(this.invalidFiles).map((function(i){var n=i[0],e=i[1];return h("span",{class:"body-3"},t.formatErrorString(n,e))})))))};t.prototype.render=function(){var t=this;return h(Host,{key:"30d78f7ce88aa6e994de1355cf4bb8bbc79e6f85"},h("div",{key:"b95129c709a9161cb1c08bc39a308196fc26644d",class:"container ".concat(this.getType())},this.mainTitle&&this.renderTitle(),this.getType()==ZFileUploadType.DEFAULT?this.renderDefaultMode():this.renderDragDropMode()),!!this.invalidFiles.size&&h("z-modal",{key:"2e0db26fa301fa0141ac14fe92f2a222f2a5f2c8",modalid:"file-upload-".concat(this.type,"-error-modal"),tabIndex:0,ref:function(i){return t.errorModal=i},modaltitle:this.errorModalTitle,onModalClose:function(){return t.invalidFiles=new Map},onModalBackgroundClick:function(){return t.invalidFiles=new Map}},this.handleErrorModalContent()))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZFileUpload.style=ZFileUploadStyle0;export{ZFileUpload as z_file_upload};
+//# sourceMappingURL=z-file-upload.entry.js.map

package/dist/esm-es5/z-file-upload.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZFileUploadStyle0","ZFileUpload","this","inputAttributes","type","id","multiple","ZFileUploadType","DEFAULT","class_1","prototype","removeFileListener","e","removeFileHandler","detail","fileDroppedListener","input","files","fileInputHandler","componentDidUpdate","handleAccessibility","invalidFiles","size","errorModal","focus","componentWillLoad","Map","length","checkFiles","Array","from","getFiles","removeFile","fileName","file","find","name","index","indexOf","splice","__spreadArray","getType","getDevice","Device","DESKTOP","DESKTOP_WIDE","lastFile","el","querySelector","button","uploadLink","_this","errors","sizeErrorString","concat","fileMaxSize","formatErrorString","forEach","fileSize","fileFormatOk","acceptedFormat","split","some","ext","toLowerCase","endsWith","trim","fileSizeOk","f","push","fileInput","emit","value","set","get","renderTitle","h","mainTitle","renderDescription","cssClass","class","description","renderAllowedFileExtensions","fileFormatString","fileWeightString","fileFormat","map","string","substring","toUpperCase","join","finalString","allowedFilesMessage","renderFileSection","hasFileSection","uploadedFilesLabel","DividerSize","MEDIUM","renderInput","Object","assign","onChange","accept","ref","val","renderUploadButton","onClick","click","onKeyPress","code","preventDefault","variant","buttonVariant","icon","uploadBtnLabel","renderUploadLink","tabIndex","uploadClickableMessage","uploadMessage","renderDefaultMode","renderDragDropMode","dragAndDropLabel","key","bothErrors","_a","_b","handleErrorModalContent","slot","errorModalMessage","_c","render","Host","modalid","modaltitle","errorModalTitle","onModalClose","onModalBackgroundClick"],"sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=shadow","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":["*:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .container {\n  display: flex;\n  flex-direction: column;\n}\n\n:host .modal-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host .modal-wrapper > .files-wrapper {\n  display: flex;\n  flex-direction: column;\n  margin: calc(var(--space-unit) * 4);\n  gap: var(--space-unit);\n}\n\n:host .text-container {\n  display: flex;\n  flex-direction: column;\n  margin: auto;\n}\n\n:host .text-container .body-1 {\n  text-align: center;\n}\n\n:host .text-container .upload-link {\n  color: var(--color-link-primary);\n  cursor: pointer;\n}\n\n:host .text-container .upload-link-text {\n  margin-bottom: var(--space-unit);\n}\n\ninput#file-elem {\n  display: none;\n}\n\n#title {\n  display: inline-block;\n  margin: calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);\n  font-size: calc(var(--space-unit) * 3);\n  font-weight: var(--font-sb);\n}\n\n:host > .container > z-button {\n  display: inline-block;\n  margin-top: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container.hidden {\n  display: none;\n}\n\n:host > .container > .files-container > .heading-4-sb {\n  display: inline-block;\n  margin: calc(var(--space-unit) * 3) 0;\n  font-size: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > .heading-4-sb {\n  margin-top: 0;\n  margin-bottom: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container > .files-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: calc(var(--space-unit) * 2);\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n:host > .container > .files-container > z-divider {\n  margin-top: calc(var(--space-unit) * 3);\n  margin-bottom: 0;\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > z-divider {\n  margin: calc(var(--space-unit) * 3) 0;\n}\n\n:host .error-message {\n  font-size: 14px;\n  font-weight: 400;\n  letter-spacing: 0.16%;\n  line-height: 20px;\n  text-align: left;\n}\n\n:host .error-message > .file-name {\n  font-weight: 600;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > .container > z-button {\n    align-self: flex-start;\n  }\n\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 3);\n  }\n}\n\n@media only screen and (min-width: 1152px) {\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 4);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZFileUpload {\n  /** Prop indicating the file upload type - can be default or dragdrop */\n  @Prop({reflect: true})\n  type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n  /** Prop indicating the button variant*/\n  @Prop()\n  buttonVariant?: ButtonVariant;\n\n  /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n  @Prop()\n  acceptedFormat?: string;\n\n  /** Max file dimension in Megabyte */\n  @Prop()\n  fileMaxSize?: number;\n\n  /** Title */\n  @Prop()\n  mainTitle?: string;\n\n  /** Description */\n  @Prop()\n  description?: string;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** upoload button label */\n  @Prop()\n  uploadBtnLabel?: string = \"allega\";\n\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n  /** allowed file message */\n  @Prop()\n  allowedFilesMessage?: string;\n\n  /** upload clickable message */\n  @Prop()\n  uploadClickableMessage?: string = \"Carica\";\n\n  /** upload message */\n  @Prop()\n  uploadMessage?: string = \"o trascina dal tuo computer\";\n\n  /** error modal title */\n  @Prop()\n  errorModalTitle?: string = \"Errore di caricamento\";\n\n  /** error modal message */\n  @Prop()\n  errorModalMessage?: string;\n\n  /** loaded files label */\n  @Prop()\n  uploadedFilesLabel?: string = \"File appena caricati\";\n\n  /** uploaded files history rendering */\n  @Prop()\n  hasFileSection?: boolean = true;\n\n  /** List of files not allowed to be uploaded */\n  @State()\n  invalidFiles: Map<string, string[]>;\n\n  @Element() el: HTMLZFileUploadElement;\n\n  private input: HTMLInputElement;\n\n  private button: HTMLZButtonElement;\n\n  private errorModal: HTMLZModalElement;\n\n  private uploadLink: HTMLSpanElement;\n\n  private inputAttributes = {\n    type: \"file\",\n    id: \"file-elem\",\n    multiple: true,\n  };\n\n  /** Listen removeFile event sent from z-file component */\n  @Listen(\"removeFile\")\n  removeFileListener(e: CustomEvent): void {\n    this.removeFileHandler(e.detail);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.fileInputHandler();\n  }\n\n  componentDidUpdate(): void {\n    this.handleAccessibility();\n    this.invalidFiles.size && this.errorModal.focus();\n  }\n\n  componentWillLoad(): void {\n    this.invalidFiles = new Map<string, string[]>();\n  }\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter;\n\n  private fileInputHandler(): void {\n    if (this.input.files.length) {\n      this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n    }\n  }\n\n  /** get array of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** remove file from the array */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    this.removeFileHandler(fileName);\n  }\n\n  private removeFileHandler(fileName: string): void {\n    const files = this.files;\n    const file = files.find((file) => file.name === fileName);\n    if (file) {\n      const index = files.indexOf(file);\n      if (index >= 0) {\n        files.splice(index, 1);\n        this.files = [...files];\n      }\n    }\n  }\n\n  private getType(): ZFileUploadType {\n    if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n      return ZFileUploadType.DEFAULT;\n    }\n\n    return this.type;\n  }\n\n  private handleAccessibility(): void {\n    const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n    if (this.files.length > 0 && lastFile) {\n      (lastFile as HTMLElement).focus();\n    } else {\n      this.getType() === ZFileUploadType.DEFAULT\n        ? this.button.querySelector(\"button\").focus()\n        : this.uploadLink.focus();\n    }\n  }\n\n  private checkFiles(files: File[]): Map<string, string[]> {\n    const errors = new Map<string, string[]>();\n    const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n    const formatErrorString = \" ha un formato non supportato\";\n    files.forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk) {\n        if (!this.files.find((f) => f.name === file.name)) {\n          this.files.push(file);\n          this.fileInput.emit(file);\n          this.input.value = \"\";\n        }\n\n        return;\n      }\n      errors.set(file.name, []);\n      if (!fileSizeOk) {\n        errors.get(file.name).push(sizeErrorString);\n      }\n      if (!fileFormatOk) {\n        errors.get(file.name).push(formatErrorString);\n      }\n    });\n\n    return errors;\n  }\n\n  private renderTitle(): HTMLElement {\n    return <span id=\"title\">{this.mainTitle}</span>;\n  }\n\n  private renderDescription(cssClass): HTMLElement {\n    return <span class={cssClass}>{this.description}</span>;\n  }\n\n  private renderAllowedFileExtensions(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n    return (\n      <span class=\"body-3\">\n        {this.allowedFilesMessage\n          ? this.allowedFilesMessage\n          : fileFormatString || fileWeightString\n            ? finalString\n            : null}\n      </span>\n    );\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n        <span class=\"heading-4-sb\">{this.uploadedFilesLabel}</span>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n        <z-divider size={DividerSize.MEDIUM} />\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        {...this.inputAttributes}\n        onChange={() => this.fileInputHandler()}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      this.renderInput(),\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n        ref={(val) => (this.button = val)}\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n          ref={(val) => (this.uploadLink = val)}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFileExtensions(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFileExtensions()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private formatErrorString(key, value): string {\n    const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n    return (\n      <span class=\"error-message\">\n        Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n        {bothErrors}\n        {value[0] ?? \"\"}.\n      </span>\n    );\n  }\n\n  private handleErrorModalContent(): HTMLDivElement {\n    return (\n      <div slot=\"modalContent\">\n        <div class=\"modal-wrapper\">\n          <div class=\"files\">\n            {this.errorModalMessage ? (\n              <span class=\"body-3\">{this.errorModalMessage}</span>\n            ) : (\n              Array.from(this.invalidFiles).map(([key, value]) => {\n                return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n              })\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        <div class={`container ${this.getType()}`}>\n          {this.mainTitle && this.renderTitle()}\n          {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        </div>\n        {!!this.invalidFiles.size && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            tabIndex={0}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n            onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n          >\n            {this.handleErrorModalContent()}\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm-es5/z-myz-card-list.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h}from"./index-ab5f1eaa.js";var stylesCss='ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:"•"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}';var ZMyzCardListStyle0=stylesCss;var ZMyzCardList=function(){function t(t){registerInstance(this,t);this.listdata=undefined;this.renderList=this.renderList.bind(this)}t.prototype.handleSpaceKeyPress=function(t,n){if(t.keyCode==32||t.keyCode==13){t.preventDefault();window.open(n,"_blank")}};t.prototype.formatListContent=function(t){var n=this;var a=t.value,i=t.isLink,r=t.url;if(!i){return h("span",null,a)}return h("a",{role:"button",onKeyPress:function(t){return n.handleSpaceKeyPress(t,r)},href:r,target:"_blank"},a)};t.prototype.renderList=function(t){var n=this;return t.map((function(t){return h("li",null,n.formatListContent(t))}))};t.prototype.render=function(){return h("ul",{key:"04fd2a50aca23fe43cb8126e7325dda58393cb7b"},this.renderList(JSON.parse(this.listdata)))};return t}();ZMyzCardList.style=ZMyzCardListStyle0;export{ZMyzCardList as z_myz_card_list};
+import{r as registerInstance,h}from"./index-ab5f1eaa.js";var stylesCss='*:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:"•"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}';var ZMyzCardListStyle0=stylesCss;var ZMyzCardList=function(){function t(t){registerInstance(this,t);this.listdata=undefined;this.renderList=this.renderList.bind(this)}t.prototype.handleSpaceKeyPress=function(t,a){if(t.keyCode==32||t.keyCode==13){t.preventDefault();window.open(a,"_blank")}};t.prototype.formatListContent=function(t){var a=this;var n=t.value,r=t.isLink,i=t.url;if(!r){return h("span",null,n)}return h("a",{role:"button",onKeyPress:function(t){return a.handleSpaceKeyPress(t,i)},href:i,target:"_blank"},n)};t.prototype.renderList=function(t){var a=this;return t.map((function(t){return h("li",null,a.formatListContent(t))}))};t.prototype.render=function(){return h("ul",{key:"04fd2a50aca23fe43cb8126e7325dda58393cb7b"},this.renderList(JSON.parse(this.listdata)))};return t}();ZMyzCardList.style=ZMyzCardListStyle0;export{ZMyzCardList as z_myz_card_list};
 //# sourceMappingURL=z-myz-card-list.entry.js.map

package/dist/esm-es5/z-myz-card-list.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZMyzCardListStyle0","ZMyzCardList","hostRef","this","renderList","bind","prototype","handleSpaceKeyPress","e","url","keyCode","preventDefault","window","open","formatListContent","data","_this","value","isLink","h","role","onKeyPress","href","target","dataArray","map","render","key","JSON","parse","listdata"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["ul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"mappings":"yDAAA,IAAMA,UAAY,8qBAClB,IAAAC,mBAAeD,U,ICOFE,aAAY,WAKvB,SAAAA,EAAAC,G,iDACEC,KAAKC,WAAaD,KAAKC,WAAWC,KAAKF,K,CAGjCF,EAAAK,UAAAC,oBAAA,SAAoBC,EAAkBC,GAC5C,GAAID,EAAEE,SAAW,IAAMF,EAAEE,SAAW,GAAI,CACtCF,EAAEG,iBACFC,OAAOC,KAAKJ,EAAK,S,GAIbR,EAAAK,UAAAQ,kBAAA,SAAkBC,GAAlB,IAAAC,EAAAb,KACC,IAAAc,EAAsBF,EAAIE,MAAnBC,EAAeH,EAAIG,OAAXT,EAAOM,EAAIN,IACjC,IAAKS,EAAQ,CACX,OAAOC,EAAA,YAAOF,E,CAGhB,OACEE,EAAA,KACEC,KAAK,SACLC,WAAY,SAACb,GAAqB,OAAAQ,EAAKT,oBAAoBC,EAAGC,EAA5B,EAClCa,KAAMb,EACNc,OAAO,UAENN,E,EAKChB,EAAAK,UAAAF,WAAA,SAAWoB,GAAX,IAAAR,EAAAb,KACN,OAAOqB,EAAUC,KAAI,SAACV,GACpB,OAAOI,EAAA,UAAKH,EAAKF,kBAAkBC,G,KAIvCd,EAAAK,UAAAoB,OAAA,WACE,OAAOP,EAAA,MAAAQ,IAAA,4CAAKxB,KAAKC,WAAWwB,KAAKC,MAAM1B,KAAK2B,W,WAzCvB,G","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZMyzCardListStyle0","ZMyzCardList","hostRef","this","renderList","bind","prototype","handleSpaceKeyPress","e","url","keyCode","preventDefault","window","open","formatListContent","data","_this","value","isLink","h","role","onKeyPress","href","target","dataArray","map","render","key","JSON","parse","listdata"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["*:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\nul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"mappings":"yDAAA,IAAMA,UAAY,oyBAClB,IAAAC,mBAAeD,U,ICOFE,aAAY,WAKvB,SAAAA,EAAAC,G,iDACEC,KAAKC,WAAaD,KAAKC,WAAWC,KAAKF,K,CAGjCF,EAAAK,UAAAC,oBAAA,SAAoBC,EAAkBC,GAC5C,GAAID,EAAEE,SAAW,IAAMF,EAAEE,SAAW,GAAI,CACtCF,EAAEG,iBACFC,OAAOC,KAAKJ,EAAK,S,GAIbR,EAAAK,UAAAQ,kBAAA,SAAkBC,GAAlB,IAAAC,EAAAb,KACC,IAAAc,EAAsBF,EAAIE,MAAnBC,EAAeH,EAAIG,OAAXT,EAAOM,EAAIN,IACjC,IAAKS,EAAQ,CACX,OAAOC,EAAA,YAAOF,E,CAGhB,OACEE,EAAA,KACEC,KAAK,SACLC,WAAY,SAACb,GAAqB,OAAAQ,EAAKT,oBAAoBC,EAAGC,EAA5B,EAClCa,KAAMb,EACNc,OAAO,UAENN,E,EAKChB,EAAAK,UAAAF,WAAA,SAAWoB,GAAX,IAAAR,EAAAb,KACN,OAAOqB,EAAUC,KAAI,SAACV,GACpB,OAAOI,EAAA,UAAKH,EAAKF,kBAAkBC,G,KAIvCd,EAAAK,UAAAoB,OAAA,WACE,OAAOP,EAAA,MAAAQ,IAAA,4CAAKxB,KAAKC,WAAWwB,KAAKC,MAAM1B,KAAK2B,W,WAzCvB,G","ignoreList":[]}

package/dist/esm-es5/z-navigation-tabs.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{N as NavigationTabsOrientation,a as NavigationTabsSize,b as NavigationTabsKeyboardEvents}from"./index-2255c6c8.js";var stylesCss='z-navigation-tabs{position:relative;z-index:0;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:row;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{-webkit-box-sizing:border-box;box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);-webkit-box-shadow:0 0 4px 1px var(--shadow-color-base);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:-ms-flexbox;display:flex;overflow:auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-ms-flex-direction:column;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:-ms-inline-flexbox;display:inline-flex;width:auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;-webkit-box-shadow:inset 0 0 4px 3px var(--color-highlight);box-shadow:inset 0 0 4px 3px var(--color-highlight)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-secondary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:-ms-flexbox;display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';var ZNavigationTabsStyle0=stylesCss;var ZNavigationTabs=function(){function i(i){registerInstance(this,i);this.selected=createEvent(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=NavigationTabsOrientation.HORIZONTAL;this.size=NavigationTabsSize.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}Object.defineProperty(i.prototype,"direction",{get:function(){return this.orientation==NavigationTabsOrientation.HORIZONTAL?"Left":"Top"},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"dimension",{get:function(){return this.orientation==NavigationTabsOrientation.HORIZONTAL?"Width":"Height"},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"tabs",{get:function(){return Array.from(this.nav.children)},enumerable:false,configurable:true});i.prototype.scrollToTab=function(i){var t=this.orientation===NavigationTabsOrientation.HORIZONTAL?{block:"nearest",inline:"center"}:{block:"center",inline:"nearest"};i.scrollIntoView(Object.assign({behavior:"smooth"},t))};i.prototype.navigateBackwards=function(){var i;this.nav.scrollBy((i={},i[this.direction.toLowerCase()]=0-this.nav["client".concat(this.dimension)]/2,i.behavior="smooth",i))};i.prototype.navigateForward=function(){var i;this.nav.scrollBy((i={},i[this.direction.toLowerCase()]=this.nav["scroll".concat(this.direction)]+this.nav["client".concat(this.dimension)]/2,i.behavior="smooth",i))};i.prototype.isArrowNavigation=function(i){return Object.values(NavigationTabsKeyboardEvents).includes(i.key)};i.prototype.checkScrollVisible=function(){if(!this.nav){return}this.canNavigate=this.nav["scroll".concat(this.dimension)]>this.nav["client".concat(this.dimension)]};i.prototype.checkScrollEnabled=function(){if(!this.nav){return}this.canNavigateNext=this.nav["scroll".concat(this.direction)]+this.nav["client".concat(this.dimension)]<this.nav["scroll".concat(this.dimension)];this.canNavigatePrev=this.nav["scroll".concat(this.direction)]>0};i.prototype.onTabSelected=function(){var i=this;this.tabs.forEach((function(t,a){var n=t.querySelector("z-icon");var e=n===null||n===void 0?void 0:n.getAttribute("name").replace("-filled","");if(a!==i.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;n===null||n===void 0?void 0:n.setAttribute("name",e);return}n===null||n===void 0?void 0:n.setAttribute("name","".concat(e,"-filled"));t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}};i.prototype.handleTabClick=function(i){var t=i.target.closest("[role='tab']");if(!this.tabs.some((function(i){return i.contains(t)}))){return}this.selectedTab=this.tabs.indexOf(t)};i.prototype.onTabFocusIn=function(i){var t=this.tabs.findIndex((function(t){return t.contains(i.target)}));if(t===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=t;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])};i.prototype.navigateThroughTabs=function(i){if(!this.tabs.some((function(t){return t.contains(i.target)}))||!this.isArrowNavigation(i)){return true}i.preventDefault();if(i.key===NavigationTabsKeyboardEvents.RIGHT&&this.orientation==NavigationTabsOrientation.HORIZONTAL||i.key===NavigationTabsKeyboardEvents.DOWN&&this.orientation==NavigationTabsOrientation.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(i.key===NavigationTabsKeyboardEvents.LEFT&&this.orientation==NavigationTabsOrientation.HORIZONTAL||i.key===NavigationTabsKeyboardEvents.UP&&this.orientation==NavigationTabsOrientation.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(i)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])};i.prototype.onTabFocusOut=function(i){var t;if(!this.tabs.some((function(t){return t.contains(i.relatedTarget)}))){this.tabs[(t=this.selectedTab)!==null&&t!==void 0?t:0].tabIndex=0;this.focusedTab=undefined}};i.prototype.connectedCallback=function(){var i=this;this.resizeObserver=new ResizeObserver((function(){return i.checkScrollVisible()}))};i.prototype.componentDidLoad=function(){var i;this.tabs.forEach((function(i){i.setAttribute("role","tab");i.tabIndex=-1}));var t=(i=this.selectedTab)!==null&&i!==void 0?i:this.tabs.findIndex((function(i){return i.ariaSelected==="true"}));if(t!==-1){this.selectedTab=t;this.tabs[t].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)};i.prototype.disconnectedCallback=function(){var i;(i=this.resizeObserver)===null||i===void 0?void 0:i.disconnect()};i.prototype.render=function(){var i=this;return h(Host,{key:"0dfbe739542add5d05e82462f9ca115734f75ab7",class:{"interactive-2":this.size===NavigationTabsSize.SMALL,"interactive-1":this.size!==NavigationTabsSize.SMALL},scrollable:this.canNavigate},h("button",{key:"a679c4104ef79c5245a205e634872992ad6b7702",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},h("z-icon",{key:"13b64410e78d66d28b9a2a870535a393b5361f06",name:this.orientation===NavigationTabsOrientation.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),h("nav",{key:"ae01aa47ea6620209017d612b3b6e1b0664efcba",role:"tablist","aria-label":this.ariaLabel,ref:function(t){return i.nav=t!==null&&t!==void 0?t:i.nav},onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},h("slot",{key:"bd1f92fef8fde67a415964efd61b89d9895192a7"})),h("button",{key:"0b7a9b4ecf5773f576f25468a8f64118b57c4480",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},h("z-icon",{key:"91686040ca32ff9136c6a96ce70ed3ca20a6b753",name:this.orientation===NavigationTabsOrientation.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))};Object.defineProperty(i.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}},enumerable:false,configurable:true});return i}();ZNavigationTabs.style=ZNavigationTabsStyle0;export{ZNavigationTabs as z_navigation_tabs};
+import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{N as NavigationTabsOrientation,a as NavigationTabsSize,b as NavigationTabsKeyboardEvents}from"./index-2255c6c8.js";var stylesCss='z-navigation-tabs{position:relative;z-index:0;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:row;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{-webkit-box-sizing:border-box;box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);-webkit-box-shadow:0 0 4px 1px var(--shadow-color-base);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:-ms-flexbox;display:flex;overflow:auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-ms-flex-direction:column;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:-ms-inline-flexbox;display:inline-flex;width:auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;-webkit-box-shadow:inset 0 0 4px 3px var(--blue800);box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-secondary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:-ms-flexbox;display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';var ZNavigationTabsStyle0=stylesCss;var ZNavigationTabs=function(){function i(i){registerInstance(this,i);this.selected=createEvent(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=NavigationTabsOrientation.HORIZONTAL;this.size=NavigationTabsSize.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}Object.defineProperty(i.prototype,"direction",{get:function(){return this.orientation==NavigationTabsOrientation.HORIZONTAL?"Left":"Top"},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"dimension",{get:function(){return this.orientation==NavigationTabsOrientation.HORIZONTAL?"Width":"Height"},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"tabs",{get:function(){return Array.from(this.nav.children)},enumerable:false,configurable:true});i.prototype.scrollToTab=function(i){var t=this.orientation===NavigationTabsOrientation.HORIZONTAL?{block:"nearest",inline:"center"}:{block:"center",inline:"nearest"};i.scrollIntoView(Object.assign({behavior:"smooth"},t))};i.prototype.navigateBackwards=function(){var i;this.nav.scrollBy((i={},i[this.direction.toLowerCase()]=0-this.nav["client".concat(this.dimension)]/2,i.behavior="smooth",i))};i.prototype.navigateForward=function(){var i;this.nav.scrollBy((i={},i[this.direction.toLowerCase()]=this.nav["scroll".concat(this.direction)]+this.nav["client".concat(this.dimension)]/2,i.behavior="smooth",i))};i.prototype.isArrowNavigation=function(i){return Object.values(NavigationTabsKeyboardEvents).includes(i.key)};i.prototype.checkScrollVisible=function(){if(!this.nav){return}this.canNavigate=this.nav["scroll".concat(this.dimension)]>this.nav["client".concat(this.dimension)]};i.prototype.checkScrollEnabled=function(){if(!this.nav){return}this.canNavigateNext=this.nav["scroll".concat(this.direction)]+this.nav["client".concat(this.dimension)]<this.nav["scroll".concat(this.dimension)];this.canNavigatePrev=this.nav["scroll".concat(this.direction)]>0};i.prototype.onTabSelected=function(){var i=this;this.tabs.forEach((function(t,a){var n=t.querySelector("z-icon");var e=n===null||n===void 0?void 0:n.getAttribute("name").replace("-filled","");if(a!==i.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;n===null||n===void 0?void 0:n.setAttribute("name",e);return}n===null||n===void 0?void 0:n.setAttribute("name","".concat(e,"-filled"));t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}};i.prototype.handleTabClick=function(i){var t=i.target.closest("[role='tab']");if(!this.tabs.some((function(i){return i.contains(t)}))){return}this.selectedTab=this.tabs.indexOf(t)};i.prototype.onTabFocusIn=function(i){var t=this.tabs.findIndex((function(t){return t.contains(i.target)}));if(t===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=t;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])};i.prototype.navigateThroughTabs=function(i){if(!this.tabs.some((function(t){return t.contains(i.target)}))||!this.isArrowNavigation(i)){return true}i.preventDefault();if(i.key===NavigationTabsKeyboardEvents.RIGHT&&this.orientation==NavigationTabsOrientation.HORIZONTAL||i.key===NavigationTabsKeyboardEvents.DOWN&&this.orientation==NavigationTabsOrientation.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(i.key===NavigationTabsKeyboardEvents.LEFT&&this.orientation==NavigationTabsOrientation.HORIZONTAL||i.key===NavigationTabsKeyboardEvents.UP&&this.orientation==NavigationTabsOrientation.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(i)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])};i.prototype.onTabFocusOut=function(i){var t;if(!this.tabs.some((function(t){return t.contains(i.relatedTarget)}))){this.tabs[(t=this.selectedTab)!==null&&t!==void 0?t:0].tabIndex=0;this.focusedTab=undefined}};i.prototype.connectedCallback=function(){var i=this;this.resizeObserver=new ResizeObserver((function(){return i.checkScrollVisible()}))};i.prototype.componentDidLoad=function(){var i;this.tabs.forEach((function(i){i.setAttribute("role","tab");i.tabIndex=-1}));var t=(i=this.selectedTab)!==null&&i!==void 0?i:this.tabs.findIndex((function(i){return i.ariaSelected==="true"}));if(t!==-1){this.selectedTab=t;this.tabs[t].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)};i.prototype.disconnectedCallback=function(){var i;(i=this.resizeObserver)===null||i===void 0?void 0:i.disconnect()};i.prototype.render=function(){var i=this;return h(Host,{key:"0dfbe739542add5d05e82462f9ca115734f75ab7",class:{"interactive-2":this.size===NavigationTabsSize.SMALL,"interactive-1":this.size!==NavigationTabsSize.SMALL},scrollable:this.canNavigate},h("button",{key:"a679c4104ef79c5245a205e634872992ad6b7702",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},h("z-icon",{key:"13b64410e78d66d28b9a2a870535a393b5361f06",name:this.orientation===NavigationTabsOrientation.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),h("nav",{key:"ae01aa47ea6620209017d612b3b6e1b0664efcba",role:"tablist","aria-label":this.ariaLabel,ref:function(t){return i.nav=t!==null&&t!==void 0?t:i.nav},onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},h("slot",{key:"bd1f92fef8fde67a415964efd61b89d9895192a7"})),h("button",{key:"0b7a9b4ecf5773f576f25468a8f64118b57c4480",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},h("z-icon",{key:"91686040ca32ff9136c6a96ce70ed3ca20a6b753",name:this.orientation===NavigationTabsOrientation.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))};Object.defineProperty(i.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}},enumerable:false,configurable:true});return i}();ZNavigationTabs.style=ZNavigationTabsStyle0;export{ZNavigationTabs as z_navigation_tabs};
 //# sourceMappingURL=z-navigation-tabs.entry.js.map

package/dist/esm-es5/z-navigation-tabs.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZNavigationTabsStyle0","ZNavigationTabs","this","focusedTab","undefined","NavigationTabsOrientation","HORIZONTAL","NavigationTabsSize","BIG","Object","defineProperty","prototype","orientation","Array","from","nav","children","scrollToTab","tabElement","scrollOptions","block","inline","scrollIntoView","assign","behavior","navigateBackwards","scrollBy","_b","direction","toLowerCase","concat","dimension","navigateForward","isArrowNavigation","e","values","NavigationTabsKeyboardEvents","includes","key","checkScrollVisible","canNavigate","checkScrollEnabled","canNavigateNext","canNavigatePrev","onTabSelected","_this","tabs","forEach","tab","i","zicon","querySelector","strokeIcon","getAttribute","replace","selectedTab","setAttribute","tabIndex","selected","emit","handleTabClick","event","clickedTab","target","closest","some","child","contains","indexOf","onTabFocusIn","focused","findIndex","navigateThroughTabs","preventDefault","RIGHT","DOWN","VERTICAL","length","LEFT","UP","hasAttribute","focus","onTabFocusOut","relatedTarget","_a","connectedCallback","resizeObserver","ResizeObserver","componentDidLoad","preselectedTab","ariaSelected","observe","disconnectedCallback","disconnect","render","h","Host","class","size","SMALL","scrollable","onClick","bind","disabled","hidden","name","width","height","role","ariaLabel","ref","el","onScroll"],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  --z-navigation-tabs-nav-buttons-bg: ;\n  --z-navigation-tabs-nav-buttons-fg: ;\n\n  position: relative;\n  z-index: 0;\n  display: flex;\n  overflow: hidden;\n  flex-direction: row;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n  box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n  display: none;\n}\n\nz-navigation-tabs .navigation-button {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n  border-radius: var(--border-no-radius);\n  box-shadow: 0 0 4px 1px var(--shadow-color-base);\n  cursor: pointer;\n  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n  outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n  display: none;\n}\n\nz-navigation-tabs > nav {\n  z-index: 0;\n  display: flex;\n  overflow: auto;\n  align-items: center;\n  justify-content: flex-start;\n  scroll-behavior: smooth;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n  width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n  top: 0;\n  width: calc(var(--space-unit) * 4);\n  height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n  left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n  right: 0;\n}\n\n/* Orientation vertical */\nz-navigation-tabs[orientation=\"vertical\"] {\n  width: fit-content;\n  flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n  left: 0;\n  width: 100%;\n  height: calc(var(--space-unit) * 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n  top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n  bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n  height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs */\n\nz-navigation-tabs > nav > * {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  gap: var(--space-unit);\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n  text-decoration: none;\n}\n\nz-navigation-tabs > nav > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-surface02);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel = \"\";\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    tabElement.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.getAttribute(\"name\").replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        zicon?.setAttribute(\"name\", strokeIcon);\n\n        return;\n      }\n\n      zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZNavigationTabsStyle0","ZNavigationTabs","this","focusedTab","undefined","NavigationTabsOrientation","HORIZONTAL","NavigationTabsSize","BIG","Object","defineProperty","prototype","orientation","Array","from","nav","children","scrollToTab","tabElement","scrollOptions","block","inline","scrollIntoView","assign","behavior","navigateBackwards","scrollBy","_b","direction","toLowerCase","concat","dimension","navigateForward","isArrowNavigation","e","values","NavigationTabsKeyboardEvents","includes","key","checkScrollVisible","canNavigate","checkScrollEnabled","canNavigateNext","canNavigatePrev","onTabSelected","_this","tabs","forEach","tab","i","zicon","querySelector","strokeIcon","getAttribute","replace","selectedTab","setAttribute","tabIndex","selected","emit","handleTabClick","event","clickedTab","target","closest","some","child","contains","indexOf","onTabFocusIn","focused","findIndex","navigateThroughTabs","preventDefault","RIGHT","DOWN","VERTICAL","length","LEFT","UP","hasAttribute","focus","onTabFocusOut","relatedTarget","_a","connectedCallback","resizeObserver","ResizeObserver","componentDidLoad","preselectedTab","ariaSelected","observe","disconnectedCallback","disconnect","render","h","Host","class","size","SMALL","scrollable","onClick","bind","disabled","hidden","name","width","height","role","ariaLabel","ref","el","onScroll"],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  --z-navigation-tabs-nav-buttons-bg: ;\n  --z-navigation-tabs-nav-buttons-fg: ;\n\n  position: relative;\n  z-index: 0;\n  display: flex;\n  overflow: hidden;\n  flex-direction: row;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n  box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n  display: none;\n}\n\nz-navigation-tabs .navigation-button {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n  border-radius: var(--border-no-radius);\n  box-shadow: 0 0 4px 1px var(--shadow-color-base);\n  cursor: pointer;\n  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n  outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n  display: none;\n}\n\nz-navigation-tabs > nav {\n  z-index: 0;\n  display: flex;\n  overflow: auto;\n  align-items: center;\n  justify-content: flex-start;\n  scroll-behavior: smooth;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n  width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n  top: 0;\n  width: calc(var(--space-unit) * 4);\n  height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n  left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n  right: 0;\n}\n\n/* Orientation vertical */\nz-navigation-tabs[orientation=\"vertical\"] {\n  width: fit-content;\n  flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n  left: 0;\n  width: 100%;\n  height: calc(var(--space-unit) * 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n  top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n  bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n  height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs */\n\nz-navigation-tabs > nav > * {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  gap: var(--space-unit);\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n  text-decoration: none;\n}\n\nz-navigation-tabs > nav > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--blue800);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-surface02);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel = \"\";\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    tabElement.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.getAttribute(\"name\").replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        zicon?.setAttribute(\"name\", strokeIcon);\n\n        return;\n      }\n\n      zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm-es5/z-notification.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,a as Host}from"./index-ab5f1eaa.js";var stylesCss=':host{--z-notification--top-offset:0;display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:start;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host[sticky]{position:-webkit-sticky;position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-success-inverse)}:host([type="warning"]){background:var(--color-warning-inverse)}:host([type="error"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:-ms-flexbox;display:flex;height:20px;-ms-flex-align:center;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-success01)}:host([type="warning"]) .status-icon{fill:var(--color-warning02)}:host([type="error"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media and (min-width: 768px){.content-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}';var ZNotificationStyle0=stylesCss;var ZNotification=function(){function t(t){registerInstance(this,t);this.notificationAction=createEvent(this,"notificationAction",7);this.notificationClose=createEvent(this,"notificationClose",7);this.contenticonname=undefined;this.actiontext=undefined;this.type=undefined;this.showclose=false;this.showshadow=false;this.sticky=false;this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}t.prototype.handleActionButtonClick=function(t){t.preventDefault();this.notificationAction.emit()};t.prototype.handleCloseButtonClick=function(t){t.preventDefault();this.notificationClose.emit()};t.prototype.render=function(){var t;return h(Host,{key:"49e877c8628f367adc596b40d5f12d5e66f78ed0"},this.contenticonname&&h("z-icon",{key:"56257c6011f6b5b17c8bbd6250ec99b8d1e41ee2",class:"status-icon",name:this.contenticonname,width:16,height:16}),h("div",{key:"dc56b45ea4f7d52bb193f8d3c22bb5910be9eeea",class:"content-container"},h("div",{key:"2637553cf2f72a948014110e96559d15c45513fa",class:"content-text"},h("slot",{key:"1e60cbb429a9620b88d7cb90df90874d3e454f48"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&h("button",{key:"844e0ba5cef8b13f9d91d5c09472893de5127cc4",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&h("button",{key:"8761fc65bd1b44b38a219e80d8f12b10a898cefe",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},h("z-icon",{key:"7bd949a2c0abf7431765f28542443c9110097ab3",name:"multiply-circle",width:16,height:16})))};return t}();ZNotification.style=ZNotificationStyle0;export{ZNotification as z_notification};
+import{r as registerInstance,c as createEvent,h,a as Host}from"./index-ab5f1eaa.js";var stylesCss=':host{--z-notification--top-offset:0;display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:start;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host[sticky]{position:-webkit-sticky;position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-success-inverse)}:host([type="warning"]){background:var(--color-warning-inverse)}:host([type="error"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:-ms-flexbox;display:flex;height:20px;-ms-flex-align:center;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-success01)}:host([type="warning"]) .status-icon{fill:var(--color-warning02)}:host([type="error"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}';var ZNotificationStyle0=stylesCss;var ZNotification=function(){function t(t){registerInstance(this,t);this.notificationAction=createEvent(this,"notificationAction",7);this.notificationClose=createEvent(this,"notificationClose",7);this.contenticonname=undefined;this.actiontext=undefined;this.type=undefined;this.showclose=false;this.showshadow=false;this.sticky=false;this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}t.prototype.handleActionButtonClick=function(t){t.preventDefault();this.notificationAction.emit()};t.prototype.handleCloseButtonClick=function(t){t.preventDefault();this.notificationClose.emit()};t.prototype.render=function(){var t;return h(Host,{key:"49e877c8628f367adc596b40d5f12d5e66f78ed0"},this.contenticonname&&h("z-icon",{key:"56257c6011f6b5b17c8bbd6250ec99b8d1e41ee2",class:"status-icon",name:this.contenticonname,width:16,height:16}),h("div",{key:"dc56b45ea4f7d52bb193f8d3c22bb5910be9eeea",class:"content-container"},h("div",{key:"2637553cf2f72a948014110e96559d15c45513fa",class:"content-text"},h("slot",{key:"1e60cbb429a9620b88d7cb90df90874d3e454f48"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&h("button",{key:"844e0ba5cef8b13f9d91d5c09472893de5127cc4",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&h("button",{key:"8761fc65bd1b44b38a219e80d8f12b10a898cefe",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},h("z-icon",{key:"7bd949a2c0abf7431765f28542443c9110097ab3",name:"multiply-circle",width:16,height:16})))};return t}();ZNotification.style=ZNotificationStyle0;export{ZNotification as z_notification};
 //# sourceMappingURL=z-notification.entry.js.map

package/dist/esm-es5/z-notification.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZNotificationStyle0","ZNotification","hostRef","this","handleActionButtonClick","bind","handleCloseButtonClick","prototype","e","preventDefault","notificationAction","emit","notificationClose","render","h","Host","key","contenticonname","class","name","width","height","_a","actiontext","trim","type","onClick","showclose"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  outline: none;\n}\n\n:host[sticky] {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host[sticky],\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-success-inverse);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-warning-inverse);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-error-inverse);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-success01);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-warning02);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-error01);\n}\n\n:host > button,\n.content-container > button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  max-width: 800px;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oFAAA,IAAMA,UAAY,0+DAClB,IAAAC,oBAAeD,U,ICYFE,cAAa,WA8CxB,SAAAA,EAAAC,G,qPA/BsB,M,gBAOC,M,YAIJ,MAqBjBC,KAAKC,wBAA0BD,KAAKC,wBAAwBC,KAAKF,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBD,KAAKF,K,CAhBzDF,EAAAM,UAAAH,wBAAA,SAAwBI,GAC9BA,EAAEC,iBACFN,KAAKO,mBAAmBC,M,EAOlBV,EAAAM,UAAAD,uBAAA,SAAuBE,GAC7BA,EAAEC,iBACFN,KAAKS,kBAAkBD,M,EAQzBV,EAAAM,UAAAM,OAAA,W,MACE,OACEC,EAACC,KAAI,CAAAC,IAAA,4CACFb,KAAKc,iBACJH,EAAA,UAAAE,IAAA,2CACEE,MAAM,cACNC,KAAMhB,KAAKc,gBACXG,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,qBACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACTJ,EAAA,QAAAE,IAAA,kDAECM,EAAAnB,KAAKoB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEE,MAAM,gBACNO,KAAK,SACLC,QAASvB,KAAKC,yBAEbD,KAAKoB,aAIXpB,KAAKwB,WACJb,EAAA,UAAAE,IAAA,2CACEE,MAAM,eACNO,KAAK,SACLC,QAASvB,KAAKG,wBAEdQ,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,M,WArFI,G","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZNotificationStyle0","ZNotification","hostRef","this","handleActionButtonClick","bind","handleCloseButtonClick","prototype","e","preventDefault","notificationAction","emit","notificationClose","render","h","Host","key","contenticonname","class","name","width","height","_a","actiontext","trim","type","onClick","showclose"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  outline: none;\n}\n\n:host[sticky] {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host[sticky],\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-success-inverse);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-warning-inverse);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-error-inverse);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-success01);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-warning02);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-error01);\n}\n\n:host > button,\n.content-container > button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  max-width: 800px;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.action-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oFAAA,IAAMA,UAAY,ynEAClB,IAAAC,oBAAeD,U,ICYFE,cAAa,WA8CxB,SAAAA,EAAAC,G,qPA/BsB,M,gBAOC,M,YAIJ,MAqBjBC,KAAKC,wBAA0BD,KAAKC,wBAAwBC,KAAKF,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBD,KAAKF,K,CAhBzDF,EAAAM,UAAAH,wBAAA,SAAwBI,GAC9BA,EAAEC,iBACFN,KAAKO,mBAAmBC,M,EAOlBV,EAAAM,UAAAD,uBAAA,SAAuBE,GAC7BA,EAAEC,iBACFN,KAAKS,kBAAkBD,M,EAQzBV,EAAAM,UAAAM,OAAA,W,MACE,OACEC,EAACC,KAAI,CAAAC,IAAA,4CACFb,KAAKc,iBACJH,EAAA,UAAAE,IAAA,2CACEE,MAAM,cACNC,KAAMhB,KAAKc,gBACXG,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,qBACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACTJ,EAAA,QAAAE,IAAA,kDAECM,EAAAnB,KAAKoB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEE,MAAM,gBACNO,KAAK,SACLC,QAASvB,KAAKC,yBAEbD,KAAKoB,aAIXpB,KAAKwB,WACJb,EAAA,UAAAE,IAAA,2CACEE,MAAM,eACNO,KAAK,SACLC,QAASvB,KAAKG,wBAEdQ,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,M,WArFI,G","ignoreList":[]}

package/dist/esm-es5/z-otp.entry.js

@@ -1,2 +1,2 @@
-var __spreadArray=this&&this.__spreadArray||function(t,r,e){if(e||arguments.length===2)for(var n=0,a=r.length,i;n<a;n++){if(i||!(n in r)){if(!i)i=Array.prototype.slice.call(r,0,n);i[n]=r[n]}}return t.concat(i||Array.prototype.slice.call(r))};import{r as registerInstance,c as createEvent,h}from"./index-ab5f1eaa.js";import{f as InputStatus}from"./index-2255c6c8.js";var stylesCss=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";var ZOtpStyle0=stylesCss;var ZOtp=function(){function t(t){registerInstance(this,t);this.otpChange=createEvent(this,"otpChange",7);this.inputNum=6;this.status=undefined;this.message=undefined}t.prototype.emitInputChange=function(t){this.otpChange.emit({value:t})};t.prototype.componentWillLoad=function(){this.otp=__spreadArray([],Array(this.inputNum),true);this.otpRef=__spreadArray([],Array(this.inputNum),true)};t.prototype.render=function(){var t=this;return h("div",{key:"9e28959418f6f1b382f16836935e12b3acddfa8f",class:"otp-container"},h("div",{key:"9348bd6807e797441789a465ebdae3a03d1a7534",class:"digits-container"},this.otp.map((function(r,e){return h("input",{class:t.status==InputStatus.ERROR?"error":null,onKeyDown:function(r){if(r.keyCode>47){t.otpRef[e].value=""}},onKeyUp:function(r){if(r.keyCode>47){e<t.inputNum-1&&t.otpRef[e+1].focus()}},onInput:function(r){t.otp[e]=r.target.value;t.emitInputChange(t.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:function(r){return t.otpRef[e]=r}})}))),h("z-input-message",{key:"87ee18c72daec6c0c903aa91e5a717c4d5a729b5",message:this.message,status:this.status}))};return t}();ZOtp.style=ZOtpStyle0;export{ZOtp as z_otp};
+var __spreadArray=this&&this.__spreadArray||function(t,r,n){if(n||arguments.length===2)for(var a=0,e=r.length,i;a<e;a++){if(i||!(a in r)){if(!i)i=Array.prototype.slice.call(r,0,a);i[a]=r[a]}}return t.concat(i||Array.prototype.slice.call(r))};import{r as registerInstance,c as createEvent,h}from"./index-ab5f1eaa.js";import{f as InputStatus}from"./index-2255c6c8.js";var stylesCss="input:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";var ZOtpStyle0=stylesCss;var ZOtp=function(){function t(t){registerInstance(this,t);this.otpChange=createEvent(this,"otpChange",7);this.inputNum=6;this.status=undefined;this.message=undefined}t.prototype.emitInputChange=function(t){this.otpChange.emit({value:t})};t.prototype.componentWillLoad=function(){this.otp=__spreadArray([],Array(this.inputNum),true);this.otpRef=__spreadArray([],Array(this.inputNum),true)};t.prototype.render=function(){var t=this;return h("div",{key:"9e28959418f6f1b382f16836935e12b3acddfa8f",class:"otp-container"},h("div",{key:"9348bd6807e797441789a465ebdae3a03d1a7534",class:"digits-container"},this.otp.map((function(r,n){return h("input",{class:t.status==InputStatus.ERROR?"error":null,onKeyDown:function(r){if(r.keyCode>47){t.otpRef[n].value=""}},onKeyUp:function(r){if(r.keyCode>47){n<t.inputNum-1&&t.otpRef[n+1].focus()}},onInput:function(r){t.otp[n]=r.target.value;t.emitInputChange(t.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:function(r){return t.otpRef[n]=r}})}))),h("z-input-message",{key:"87ee18c72daec6c0c903aa91e5a717c4d5a729b5",message:this.message,status:this.status}))};return t}();ZOtp.style=ZOtpStyle0;export{ZOtp as z_otp};
 //# sourceMappingURL=z-otp.entry.js.map

package/dist/esm-es5/z-otp.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZOtpStyle0","ZOtp","prototype","emitInputChange","value","this","otpChange","emit","componentWillLoad","otp","__spreadArray","Array","inputNum","otpRef","render","_this","h","key","class","map","_val","i","status","InputStatus","ERROR","onKeyDown","e","keyCode","onKeyUp","focus","onInput","target","join","type","minlength","maxlength","autoComplete","ref","el","message"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-error01);\n  background-color: var(--color-error-inverse);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"mappings":"8WAAA,IAAMA,UAAY,4xBAClB,IAAAC,WAAeD,U,ICOFE,KAAI,W,oGAGK,E,6CAkBZA,EAAAC,UAAAC,gBAAA,SAAgBC,GACtBC,KAAKC,UAAUC,KAAK,CAACH,MAAKA,G,EAG5BH,EAAAC,UAAAM,kBAAA,WACEH,KAAKI,IAAGC,cAAA,GAAOC,MAAMN,KAAKO,UAAS,MACnCP,KAAKQ,OAAMH,cAAA,GAAOC,MAAMN,KAAKO,UAAS,K,EAGxCX,EAAAC,UAAAY,OAAA,eAAAC,EAAAV,KACE,OACEW,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACRb,KAAKI,IAAIU,KAAI,SAACC,EAAMC,GAAC,OACpBL,EAAA,SACEE,MAAOH,EAAKO,QAAUC,YAAYC,MAAQ,QAAU,KACpDC,UAAW,SAACC,GACV,GAAIA,EAAEC,QAAU,GAAI,CAClBZ,EAAKF,OAAOQ,GAAGjB,MAAQ,E,GAG3BwB,QAAS,SAACF,GACR,GAAIA,EAAEC,QAAU,GAAI,CAClBN,EAAIN,EAAKH,SAAW,GAAKG,EAAKF,OAAOQ,EAAI,GAAGQ,O,GAGhDC,QAAS,SAACJ,GACRX,EAAKN,IAAIY,GAAMK,EAAEK,OAA4B3B,MAC7CW,EAAKZ,gBAAgBY,EAAKN,IAAIuB,KAAK,I,EAErCC,KAAK,OACLC,UAAU,IACVC,UAAU,IACVC,aAAa,MACbC,IAAK,SAACC,GAAE,OAAMvB,EAAKF,OAAOQ,GAAKiB,CAAvB,GArBU,KAyBxBtB,EAAA,mBAAAC,IAAA,2CACEsB,QAASlC,KAAKkC,QACdjB,OAAQjB,KAAKiB,S,WA7DN,G","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZOtpStyle0","ZOtp","prototype","emitInputChange","value","this","otpChange","emit","componentWillLoad","otp","__spreadArray","Array","inputNum","otpRef","render","_this","h","key","class","map","_val","i","status","InputStatus","ERROR","onKeyDown","e","keyCode","onKeyUp","focus","onInput","target","join","type","minlength","maxlength","autoComplete","ref","el","message"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-error01);\n  background-color: var(--color-error-inverse);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"mappings":"8WAAA,IAAMA,UAAY,s5BAClB,IAAAC,WAAeD,U,ICOFE,KAAI,W,oGAGK,E,6CAkBZA,EAAAC,UAAAC,gBAAA,SAAgBC,GACtBC,KAAKC,UAAUC,KAAK,CAACH,MAAKA,G,EAG5BH,EAAAC,UAAAM,kBAAA,WACEH,KAAKI,IAAGC,cAAA,GAAOC,MAAMN,KAAKO,UAAS,MACnCP,KAAKQ,OAAMH,cAAA,GAAOC,MAAMN,KAAKO,UAAS,K,EAGxCX,EAAAC,UAAAY,OAAA,eAAAC,EAAAV,KACE,OACEW,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACRb,KAAKI,IAAIU,KAAI,SAACC,EAAMC,GAAC,OACpBL,EAAA,SACEE,MAAOH,EAAKO,QAAUC,YAAYC,MAAQ,QAAU,KACpDC,UAAW,SAACC,GACV,GAAIA,EAAEC,QAAU,GAAI,CAClBZ,EAAKF,OAAOQ,GAAGjB,MAAQ,E,GAG3BwB,QAAS,SAACF,GACR,GAAIA,EAAEC,QAAU,GAAI,CAClBN,EAAIN,EAAKH,SAAW,GAAKG,EAAKF,OAAOQ,EAAI,GAAGQ,O,GAGhDC,QAAS,SAACJ,GACRX,EAAKN,IAAIY,GAAMK,EAAEK,OAA4B3B,MAC7CW,EAAKZ,gBAAgBY,EAAKN,IAAIuB,KAAK,I,EAErCC,KAAK,OACLC,UAAU,IACVC,UAAU,IACVC,aAAa,MACbC,IAAK,SAACC,GAAE,OAAMvB,EAAKF,OAAOQ,GAAKiB,CAAvB,GArBU,KAyBxBtB,EAAA,mBAAAC,IAAA,2CACEsB,QAASlC,KAAKkC,QACdjB,OAAQjB,KAAKiB,S,WA7DN,G","ignoreList":[]}