@zanichelli/albe-web-components 13.0.0 → 13.1.0-rc2

package/dist/components/z-file-upload.js.map

@@ -1 +1 @@
-{"file":"z-file-upload.js","mappings":"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","names":["ZFileUpload"],"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":[":host {\n  color: var(--color-text01);\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/* 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, Prop, h, EventEmitter, Event, State, Listen, Element, Host, Method} 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  /** 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    const files = this.files;\n    const file = files.find((file) => file.name === e.detail.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  /** 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  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'estensione non prevista\";\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 <span class=\"body-3\">{fileFormatString || fileWeightString ? finalString : null}</span>;\n  }\n\n  private renderFileSection(): HTMLElement {\n    return (\n      <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n        <span class=\"heading-4-sb\">File appena caricati</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        Trascina o{\" \"}\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          carica\n        </span>{\" \"}\n        dal tuo computer\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] ? \", ed \" : \"\";\n\n    return `Il file ${key} ${value[0] ?? \"\"}${bothErrors}${value[1] ?? \"\"}.`;\n  }\n\n  private handleErrorModalContent(): HTMLDivElement {\n    return (\n      <div slot=\"modalContent\">\n        <div class=\"modal-wrapper\">\n          <div class=\"files\">\n            {Array.from(this.invalidFiles).map(([key, value]) => {\n              return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n            })}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          class={`container ${this.getType()}`}\n        >\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=\"Attenzione\"\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"],"version":3}
+{"file":"z-file-upload.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,w/DAAw/D,CAAC;AAC3gE,0BAAe,SAAS;;MCQXA,aAAW;;;;;;QAuDd,oBAAe,GAAG;YACxB,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,WAAW;YACf,QAAQ,EAAE,IAAI;SACf,CAAC;oBAxDsB,eAAe,CAAC,OAAO;;;;;;qBAwB/B,EAAE;8BAIQ,QAAQ;gCAIN,+CAA+C;8BAIhD,IAAI;;;;IAwB/B,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KAC5B;;IAID,mBAAmB,CAAC,CAAc;QAChC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KACnD;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,EAAoB,CAAC;KACjD;IAMO,gBAAgB;QACtB,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE;YAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;SACnE;KACF;;IAID,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;;IAID,MAAM,UAAU,CAAC,QAAgB;QAC/B,MAAM,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;KAClC;IAEO,MAAM,WAAW,CAAC,QAAgB;QACxC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;QAC1D,IAAI,IAAI,EAAE;YACR,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,KAAK,IAAI,CAAC,EAAE;gBACd,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBACvB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;aACzB;SACF;KACF;IAEO,OAAO;QACb,IAAI,SAAS,EAAE,KAAK,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,KAAK,MAAM,CAAC,YAAY,EAAE;YACzE,OAAO,eAAe,CAAC,OAAO,CAAC;SAChC;QAED,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAEO,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;QAC1E,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,EAAE;YACpC,QAAwB,CAAC,KAAK,EAAE,CAAC;SACnC;aAAM;YACL,IAAI,CAAC,OAAO,EAAE,KAAK,eAAe,CAAC,OAAO;kBACtC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;kBAC3C,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;SAC7B;KACF;IAEO,UAAU,CAAC,KAAa;QAC9B,MAAM,MAAM,GAAG,IAAI,GAAG,EAAoB,CAAC;QAC3C,MAAM,eAAe,GAAG,uBAAuB,IAAI,CAAC,WAAW,IAAI,CAAC;QACpE,MAAM,iBAAiB,GAAG,+BAA+B,CAAC;QAC1D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAU;YACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;YACzC,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc;iBACrC,KAAK,CAAC,GAAG,CAAC;iBACV,IAAI,CAAC,CAAC,GAAW,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC;YAChD,IAAI,UAAU,IAAI,YAAY,EAAE;gBAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE;oBACjD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;iBACvB;gBAED,OAAO;aACR;YACD,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC1B,IAAI,CAAC,UAAU,EAAE;gBACf,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aAC7C;YACD,IAAI,CAAC,YAAY,EAAE;gBACjB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;aAC/C;SACF,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;KACf;IAEO,WAAW;QACjB,OAAO,YAAM,EAAE,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CAAC;KACjD;IAEO,iBAAiB,CAAC,QAAQ;QAChC,OAAO,YAAM,KAAK,EAAE,QAAQ,IAAG,IAAI,CAAC,WAAW,CAAQ,CAAC;KACzD;IAEO,2BAA2B;QACjC,IAAI,gBAAgB,GAAG,EAAE,CAAC;QAC1B,IAAI,gBAAgB,GAAG,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc;iBACnC,KAAK,CAAC,IAAI,CAAC;iBACX,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;iBAClD,IAAI,CAAC,IAAI,CAAC,CAAC;YACd,gBAAgB,GAAG,gBAAgB,UAAU,EAAE,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,gBAAgB,GAAG,sBAAsB,IAAI,CAAC,WAAW,YAAY,CAAC;SACvE;QAED,MAAM,WAAW,GAAG,qBAAqB,gBAAgB,GAAG,gBAAgB,GAAG,CAAC;QAEhF,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,gBAAgB,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI,CAAQ,CAAC;KAChG;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,OAAO;SACR;QAED,QACE,eAAS,KAAK,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,EAAE,IACrE,YAAM,KAAK,EAAC,cAAc,2BAA4B,EACtD,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB,EACN,iBAAW,IAAI,EAAE,WAAW,CAAC,MAAM,GAAI,CAC/B,EACV;KACH;IAEO,WAAW;QACjB,QACE,6BACM,IAAI,CAAC,eAAe,IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EACvC,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,IAChC,EACF;KACH;IAEO,kBAAkB;QACxB,OAAO;YACL,IAAI,CAAC,WAAW,EAAE;YAClB,gBACE,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACjC,UAAU,EAAE,CAAC,CAAC;oBACZ,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,EAAE;wBAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;qBACpB;iBACF,EACD,EAAE,EAAC,YAAY,EACf,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,IAEhC,IAAI,CAAC,cAAc,CACX;SACZ,CAAC;KACH;IAEO,gBAAgB;QACtB,OAAO;YACL,IAAI,CAAC,WAAW,EAAE;YAClB,YAAM,KAAK,EAAC,yBAAyB,kBACxB,GAAG,EACd,YACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACjC,UAAU,EAAE,CAAC,CAAC;oBACZ,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,EAAE;wBAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;qBACpB;iBACF,EACD,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,aAGhC,EAAC,GAAG,qBAEN;SACR,CAAC;KACH;IAEO,iBAAiB;QACvB,OAAO;YACL,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,2BAA2B,EAAE;YAClC,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,kBAAkB,EAAE;SAC1B,CAAC;KACH;IAEO,kBAAkB;QACxB,OAAO;YACL,IAAI,CAAC,iBAAiB,EAAE;YACxB,8CAAsC,IAAI,CAAC,gBAAgB,IACzD,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAChC,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,2BAA2B,EAAE,CAC/B,CACU;SACnB,CAAC;KACH;IAEO,iBAAiB,CAAC,GAAG,EAAE,KAAK;;QAClC,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;QAErD,QACE,YAAM,KAAK,EAAC,eAAe,gBACjB,YAAM,KAAK,EAAC,WAAW,IAAE,GAAG,CAAQ,OAAE,MAAA,KAAK,CAAC,CAAC,CAAC,mCAAI,EAAE,EAC3D,UAAU,EACV,MAAA,KAAK,CAAC,CAAC,CAAC,mCAAI,EAAE,MACV,EACP;KACH;IAEO,uBAAuB;QAC7B,QACE,WAAK,IAAI,EAAC,cAAc,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,WAAK,KAAK,EAAC,OAAO,IACf,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC;YAC9C,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAQ,CAAC;SACzE,CAAC,CACE,CACF,CACF,EACN;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,EAAE,EAAE,IAEnC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,EACpC,IAAI,CAAC,OAAO,EAAE,IAAI,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAC7F,EACL,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,KACvB,eACE,OAAO,EAAE,eAAe,IAAI,CAAC,IAAI,cAAc,EAC/C,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACrC,UAAU,EAAC,uBAAuB,EAClC,YAAY,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,EAAoB,CAAC,EACrE,sBAAsB,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,EAAoB,CAAC,IAE9E,IAAI,CAAC,uBAAuB,EAAE,CACvB,CACX,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZFileUpload"],"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":[":host {\n  color: var(--color-text01);\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, Prop, h, EventEmitter, Event, State, Listen, Element, Host, Method} 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  /** 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.removeFiles(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    await this.removeFiles(fileName);\n  }\n\n  private async removeFiles(fileName: string): Promise<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 <span class=\"body-3\">{fileFormatString || fileWeightString ? finalString : null}</span>;\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\">File appena caricati</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        Trascina o{\" \"}\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          carica\n        </span>{\" \"}\n        dal tuo computer\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            {Array.from(this.invalidFiles).map(([key, value]) => {\n              return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n            })}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          class={`container ${this.getType()}`}\n        >\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=\"Errore di caricamento\"\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"],"version":3}

package/dist/components/z-info-reveal.js

@@ -50,7 +50,7 @@ const ZInfoReveal$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends
         }
     }
     render() {
-        return (h(Host, { key: '51bcd6c5884e26ac25f2cf5b46d579e70c4a0562', open: this.open }, h("button", { key: '7d8754375d54f85145cb193845dd823f931c321e', class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { key: '3bd934391dc01c04380db1a77107558e95661e6c', name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
+        return (h(Host, { key: '0edaf256477519c003699874f8f2de0837eeae3a', open: this.open }, h("button", { key: '0b60861bf9e23c0238e5f9bffc97aa5d2398f6d6', class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { key: '649cfbfda1ef3a7d0947fc680817aa461f48a71c', name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/z-link.js

@@ -50,7 +50,7 @@ const ZLink$1 = /*@__PURE__*/ proxyCustomElement(class ZLink extends HTMLElement
         }
     }
     render() {
-        return (h("a", { key: 'e5b80b5dac596f11648e2e8afa373c1da00e6e5d', id: this.htmlid, href: this.href ? this.href : null, class: {
+        return (h("a", { key: 'b5b630a2b5ffe83a239315612faf6b673158c782', id: this.htmlid, href: this.href ? this.href : null, class: {
                 disabled: this.isdisabled,
                 active: this.isactive,
                 white: this.iswhite,

package/dist/components/z-messages-pocket.js

@@ -42,7 +42,7 @@ const ZMessagesPocket$1 = /*@__PURE__*/ proxyCustomElement(class ZMessagesPocket
         return (h("z-pocket-body", { pocketid: this.pocketid }, h("div", { class: "body" }, h("slot", null)), h("div", { class: "gradient" })));
     }
     render() {
-        return (h("z-pocket", { key: '2bf2ce854eb809ffe7cc0b64d071e6926d08814c', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
+        return (h("z-pocket", { key: '3aefef3d845cb5f672ed037667da8d59bf2355dd', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
     }
     static get style() { return ZMessagesPocketStyle0; }
 }, [1, "z-messages-pocket", {

package/dist/components/z-myz-card-alert.js

@@ -56,7 +56,7 @@ const ZMyzCardAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardAlert ext
         }
     }
     render() {
-        return (h("div", { key: '470f1e9563148daba93a5d2dd19727bc04d706c5', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '4e42f67a1fd020466c3b9ab94301927f94230da2', type: this.getAlertType() }, h("div", { key: 'f395f1d7d32f23ab38badc5ce27894a7fbfb2cc4', class: "relative-container" }, h("z-icon", { key: '4e6cab20b05b8843982c640cd99243693abcc36c', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: '9b6c135f64c3ab78fe740e91efedcc5282a0de01', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: '1b444689e78b349adce31ea4d4b318ae447acc05', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '8774b645a0c306246db8afbed890b372ae8dcdff', type: this.getAlertType() }, h("div", { key: '03df6396443cffd9b791a9b29b146f05f405a035', class: "relative-container" }, h("z-icon", { key: '7d0a21e9cd2dbbde634440b3e36f2d892023cc81', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'a0bc80e8f7b28cebba25ad3f8a5f9bf3233a6930', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/components/z-myz-card-dictionary.js

@@ -31,7 +31,7 @@ const ZMyzCardDictionary$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardDict
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (h("div", { key: '75b18feaa0c930cafb3eeadfbd3a815acf629ad3' }, h("z-myz-card", { key: '069f6f457a1245042e32e1d79101f76d40a065bc' }, h("z-myz-card-header", { key: '7143e0aa8db6f3130778bb34c84f84074950a8ec', titolo: this.name }), h("div", { key: '9562c13fbd46a054f9a8a2a307803a62a3973462', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '2887ee676e44064eaaa5ec96981b1d6f2ec75553', class: "front" }, h("z-myz-card-body", { key: '46a2ae89fb4aa4ff0283f6bd8315da9572bf9e12' }, h("z-myz-card-cover", { key: '15ae6368e0adee0b691acae69456ca57151f22e5', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: 'c8c0a403c084f72c934fb4c9c4a171bec8cf7cdd', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '5923095048d52d5c2ac78b4074e4e876468e06b0', class: "back" }, h("slot", { key: '4e934ba81c365e10e411fd758edfad1593642bb0', name: "info" }))), h("slot", { key: '211875e202f745c2e4d44c90858c3edc878e762b' }))));
+        return (h("div", { key: '27902c8b5de865c26c56ba38e245b9bad6edbd18' }, h("z-myz-card", { key: 'fc8095edfa2a7d59331977975e24af5fb6e35930' }, h("z-myz-card-header", { key: '66dd4738696aa8417d36de2bcd4e8b6957a5f5e2', titolo: this.name }), h("div", { key: '5f825ad42844b2e895f17516e7b090d3c5ce8a6c', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: 'f86a2a9e7378ba99b4eacf5c106f1a0dce5f4f96', class: "front" }, h("z-myz-card-body", { key: 'ca603d9fde5d8eef714dce707d6d7107d3211e4d' }, h("z-myz-card-cover", { key: '63381a0912ced7fd24ad16865417c4e1da993e77', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '0cdfdcd7c39064180d4ec16bd5c0beb4b82c6e8c', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: 'ca62bad1d808d9f5fec3b620fa558c0a6ecea908', class: "back" }, h("slot", { key: '068e582536a203fbf6bbd56eeef4ede786b89d1c', name: "info" }))), h("slot", { key: '97fb9bea58f45f42d81ff5344f34a9acaba32639' }))));
     }
     static get style() { return ZMyzCardDictionaryStyle0; }
 }, [1, "z-myz-card-dictionary", {

package/dist/components/z-myz-card-footer-sections.js

@@ -10,7 +10,7 @@ const ZMyzCardFooterSections$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCard
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'ad5a5b4ce763cd24f68d02ec7b6e29b2545b94be' }, h("footer", { key: '85252bc9e7ac49dd5250160f31eda28d0cd9b56c' }, h("div", { key: '43fdf6d47836f0c6cddb8e6a2a807837642a46b6', class: "top" }, h("slot", { key: 'ec8b4121c2c3aa2975f19c8ba846689f5a0e0dea', name: "top" })), h("div", { key: 'a76056af1fba864d1dd3dbc7c4c6a109ee1e5e9d', class: "bottom" }, h("slot", { key: 'b1f51897fe2f8bac34c21b409c74003651bc641a', name: "bottom" })))));
+        return (h("div", { key: '62c6d04f17701a66638885f241c6cee08411eb45' }, h("footer", { key: '935193a38295ec3b700b3c30a32aca8ed310b3ad' }, h("div", { key: '8c7af9e6f32e4353942a7831dea7f9875455e868', class: "top" }, h("slot", { key: '3a93460244816042d5a46a37909fe150b7dad333', name: "top" })), h("div", { key: '3bc02862cb0fcebbc1a763ba6f40e909cf39dbf1', class: "bottom" }, h("slot", { key: '600288fe385b411013722ca70809a8f841236563', name: "bottom" })))));
     }
     static get style() { return ZMyzCardFooterSectionsStyle0; }
 }, [1, "z-myz-card-footer-sections"]);

package/dist/components/z-myz-card-footer.js

@@ -62,7 +62,7 @@ const ZMyzCardFooter$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooter e
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (h("div", { key: '5dd8a1450395437b275fb926b09da03549915574', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '7b7e36ef2959885e4a560982cb7e08ac04818780', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: '1c40adf2f5d502c07c9376b63a8698d4667db396', class: "toggle" }, h("slot", { key: 'bd6af616f75d683d7be56058acc8b73b3bf93df6', name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '65e8bf56114cffbd456848ee1f8d1114e6e5080a', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '66e9bc72b76b51fd62b480fdcd79fb1275fa6025' }, h("p", { key: '3ed9294e4344921197fab0e6514060c44fbb1e1b', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '59377aadd8b9390fe356ef2b43c19deba9215ef8', title: this.getTitleAuthors() }, h("span", { key: 'ee5c8a2ae408e4e5188dc446155c9aeb718166d4', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'e18fb80f72dcc4167f9f3a9b01125bee192d93c4', class: "year-isbn" }, h("span", { key: '2bd10075dbcad13130986d76b0a1876b83c38a3e', class: "isbn" }, h("span", { key: '0db0267195bbac8406e70f4476b5f47063fe94b5' }, h("span", { key: '2353a8330af27b7cb67b581867684fd8038aa482', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: 'bcd81eae284110276be84b0493386f50280714bb', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: '74920df025462ca9464bbe269036a5c72a1b239e', name: "list" })))), this.customContent && h("slot", { name: "content" })));
+        return (h("div", { key: '3f351c6ae37e9756acb54ba18a33141902b36f66', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: 'a7813aa007cc2a85dbb2b14cfc26fc174e49929d', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: 'ab1b726546099b8f5ac53294e9ecfefb8501cf8a', class: "toggle" }, h("slot", { key: 'acda20d4eb36305f614d74aa930131f8f4ecd270', name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '0f090b00007fa5b7f5fe6b7d9553e83449d0a11a', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '4f9c2e93e4e73f38dd9012b8a7e12be58ed506f7' }, h("p", { key: '342ce9c1c2a3b0d8eb0a585b84933441bccc044b', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '0c7fbe530be3eae718701f62bcfc190cfe1c3cbe', title: this.getTitleAuthors() }, h("span", { key: 'c6f1cd41b9353bbb39eb2a0f3a92664c05cb45d9', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: '8f5930ae90e38554151c10e5996014103f6fae6a', class: "year-isbn" }, h("span", { key: '18ebc65de360d4fdbc09a31f1e35fb07af7930d0', class: "isbn" }, h("span", { key: '25b8d2bf3bd332132b28f16b72ad81ee870a0202' }, h("span", { key: '7ba427f38f89b31f0228c09419281188d9f0e6a9', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: '1b553a8af97ebf9035a3411dbefc34db332ae3bb', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'e38a67048f019687d6b0a40b84ccdf0075adf98a', name: "list" })))), this.customContent && h("slot", { name: "content" })));
     }
     get host() { return this; }
     static get style() { return ZMyzCardFooterStyle0; }

package/dist/components/z-myz-card-icon.js

@@ -14,7 +14,7 @@ const ZMyzCardIcon$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardIcon exten
         this.ariaLabel = "";
     }
     render() {
-        return (h("button", { key: 'a847d6b5a8492bcd22ed033aeece36f7652dd5f2', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '0f7e06abb02b75cd18a905cceaaed460808c9685' }, h("z-icon", { key: '178e3cd6a28c2533c3443348bb635125cec14099', name: this.icon, width: 16, height: 16 }))));
+        return (h("button", { key: 'e68fbaeb5c1d0522eebc83712a35599040eb6e29', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '221fd2a3d3b6a5f540488000659d405ac9b6cdb1' }, h("z-icon", { key: '244e5acf3ecd37c1db63f094e1783500814cdd6d', name: this.icon, width: 16, height: 16 }))));
     }
     static get style() { return ZMyzCardIconStyle0; }
 }, [1, "z-myz-card-icon", {

package/dist/components/z-myz-card-info.js

@@ -121,7 +121,7 @@ const ZMyzCardInfo$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardInfo exten
         return (h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, h("span", { class: "license-heading" }, h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", h("b", null, this.cardData.offlineLicense.expiration), h("br", null), "Installazioni disponibili: ", h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (h("div", { key: 'e34d518208aaf68c4b793dbc7b019a8e4dd81b7f' }, this.renderCloseIcon(), h("div", { key: '649ceef05259db97c3e6d2277dd4397abb3ea45d', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: '66876539093110aa88efdb94aab18ffccf19f8c1', class: "cta-wrapper" }, h("slot", { key: '13a47c231d3685a33693e88841d92277b763a3f2' }))));
+        return (h("div", { key: 'cdc99e22e6b891a80166dfd1c8fe5643687c6ac5' }, this.renderCloseIcon(), h("div", { key: '4a987a72789738cacaaf56874141b616b5121ee4', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: 'd0437dfce9bf76ddcdb5606f31da3c1c661a2e66', class: "cta-wrapper" }, h("slot", { key: '9d1b541e7d4e64e87ce6e2b08d98a7e96f0c1b7e' }))));
     }
     static get style() { return ZMyzCardInfoStyle0; }
 }, [1, "z-myz-card-info", {

package/dist/components/z-myz-card-list.js

@@ -30,7 +30,7 @@ const ZMyzCardList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardList exten
         });
     }
     render() {
-        return h("ul", { key: '1ab3695f896cb1c963751a88e9513b90678aea47' }, this.renderList(JSON.parse(this.listdata)));
+        return h("ul", { key: 'd233563583f4c1de64348fee709013c5a48781ca' }, this.renderList(JSON.parse(this.listdata)));
     }
     static get style() { return ZMyzCardListStyle0; }
 }, [1, "z-myz-card-list", {

package/dist/components/z-myz-list.js

@@ -26,7 +26,7 @@ const ZMyzList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzList extends HTMLE
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: '8441b9ea072bc8d0e77ef66cbdcc6a71dc37cfca' }, this.list &&
+        return (h("ul", { key: '9cf88d3a10f5a2239690c9b548ba18e2a21f4285' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {

package/dist/components/z-navigation-tab-link.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZNavigationTabLink extends Components.ZNavigationTabLink, HTMLElement {}
+export const ZNavigationTabLink: {
+    prototype: ZNavigationTabLink;
+    new (): ZNavigationTabLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-navigation-tab-link.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index2.js';
+import { I as ICONS } from './icons.js';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;width:auto;align-items: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;letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--color-highlight)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"horizontal\"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation=\"horizontal\"] z-icon,z-navigation-tab-link[orientation=\"horizontal\"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*,z-navigation-tab-link[disabled]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]>*,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,z-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation=\"vertical\"]>*,z-navigation-tab-link[orientation=\"vertical\"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"vertical\"][selected]>*::after,z-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"vertical\"][selected]>*::after{top:0;right:0;width:var(--border-size-large);height:100%}";
+const ZNavigationTabLinkStyle0 = navigationTabCss;
+
+const ZNavigationTabLink$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTabLink extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.selectedEvent = createEvent(this, "selected", 7);
+        this.ariaControls = undefined;
+        this.tabId = undefined;
+        this.selected = false;
+        this.disabled = false;
+        this.orientation = NavigationTabsOrientation.HORIZONTAL;
+        this.size = NavigationTabsSize.BIG;
+        this.htmlTitle = undefined;
+        this.target = undefined;
+        this.href = undefined;
+        this.icon = undefined;
+        this.label = undefined;
+    }
+    /**
+     * Scroll into view to center the tab.
+     */
+    scrollToTab({ target: button }) {
+        const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
+            ? { block: "nearest", inline: "center" }
+            : { block: "center", inline: "nearest" });
+        button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+    }
+    onClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.selected = true;
+    }
+    onSelected() {
+        if (this.selected) {
+            this.selectedEvent.emit();
+        }
+    }
+    /**
+     * Render the icon component using the icon's name passed from prop.
+     * Use the `filled` version when the tab is `selected`.
+     * @returns {HTMLElement}
+     */
+    renderIcon() {
+        let icon = this.icon;
+        const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
+        if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
+            icon = iconFilled;
+        }
+        return h("z-icon", { name: icon });
+    }
+    render() {
+        return (h(Host, { key: '77c729dd9c1bfd412d958eb477f2e227ba7fc7a7', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("a", { key: '3b70074a8637c2df922e6c5dcfc38f45c14ae770', tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), href: this.disabled ? null : this.href, title: this.htmlTitle, target: this.target }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label)));
+    }
+    static get watchers() { return {
+        "selected": ["onSelected"]
+    }; }
+    static get style() { return ZNavigationTabLinkStyle0; }
+}, [0, "z-navigation-tab-link", {
+        "ariaControls": [1, "aria-controls"],
+        "tabId": [1, "tab-id"],
+        "selected": [1540],
+        "disabled": [516],
+        "orientation": [513],
+        "size": [513],
+        "htmlTitle": [1, "html-title"],
+        "target": [1],
+        "href": [1],
+        "icon": [1],
+        "label": [1]
+    }, [[0, "click", "onClick"]], {
+        "selected": ["onSelected"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-navigation-tab-link", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-navigation-tab-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZNavigationTabLink$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZNavigationTabLink = ZNavigationTabLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZNavigationTabLink, defineCustomElement };
+
+//# sourceMappingURL=z-navigation-tab-link.js.map

package/dist/components/z-navigation-tab-link.js.map

@@ -0,0 +1 @@
+{"file":"z-navigation-tab-link.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,iCAAe,gBAAgB;;MCalBA,oBAAkB;;;;;;;wBAuBR,KAAK;wBAML,KAAK;2BAMZ,yBAAyB,CAAC,UAAU;oBAM3C,kBAAkB,CAAC,GAAG;;;;;;;;;;IA0CrB,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;IAGD,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;KACF;;;;;;IAOO,UAAU;QAChB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YAC5D,IAAI,GAAG,UAAU,CAAC;SACnB;QAED,OAAO,cAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;KACtC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,YAAY,IAEhC,0DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,CAC9C,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNavigationTabLink"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab-link","src/deprecated/z-navigation-tab-link/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\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  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link 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\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n * @deprecated Use a native `<a>` instead.\n */\n@Component({\n  tag: \"z-navigation-tab-link\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTabLink {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size = NavigationTabsSize.BIG;\n\n  /**\n   * Html title attribute for the anchor element.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * Html `target` attribute for the anchor element.\n   */\n  @Prop()\n  target: string;\n\n  /**\n   * Url to set to the anchor element.\n   */\n  @Prop()\n  href: string;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = true;\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabLinkElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <a\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          href={this.disabled ? null : this.href}\n          title={this.htmlTitle}\n          target={this.target}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === \"horizontal\" && this.label}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-navigation-tab.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZNavigationTab extends Components.ZNavigationTab, HTMLElement {}
+export const ZNavigationTab: {
+    prototype: ZNavigationTab;
+    new (): ZNavigationTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-navigation-tab.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index2.js';
+import { I as ICONS } from './icons.js';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;width:auto;align-items: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;letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--color-highlight)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"horizontal\"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation=\"horizontal\"] z-icon,z-navigation-tab-link[orientation=\"horizontal\"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*,z-navigation-tab-link[disabled]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]>*,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,z-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation=\"vertical\"]>*,z-navigation-tab-link[orientation=\"vertical\"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"vertical\"][selected]>*::after,z-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"vertical\"][selected]>*::after{top:0;right:0;width:var(--border-size-large);height:100%}";
+const ZNavigationTabStyle0 = navigationTabCss;
+
+const ZNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTab extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.selectedEvent = createEvent(this, "selected", 7);
+        this.ariaControls = undefined;
+        this.tabId = undefined;
+        this.selected = false;
+        this.disabled = false;
+        this.orientation = NavigationTabsOrientation.HORIZONTAL;
+        this.size = NavigationTabsSize.BIG;
+        this.icon = undefined;
+        this.label = undefined;
+        this.htmlTitle = undefined;
+    }
+    /**
+     * Scroll into view to center the tab.
+     */
+    scrollToTab({ target: button }) {
+        const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
+            ? { block: "nearest", inline: "center" }
+            : { block: "center", inline: "nearest" });
+        button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+    }
+    onClick() {
+        if (!this.disabled) {
+            this.selected = true;
+        }
+    }
+    onSelected() {
+        if (this.selected) {
+            this.selectedEvent.emit();
+        }
+    }
+    /**
+     * Render the icon component using the icon's name passed from prop.
+     * Use the `filled` version when the tab is `selected`.
+     * @returns {HTMLElement}
+     */
+    renderIcon() {
+        let icon = this.icon;
+        const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
+        if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
+            icon = iconFilled;
+        }
+        return h("z-icon", { name: icon });
+    }
+    render() {
+        return (h(Host, { key: '9f7613292bba051a6fbf38a9da4979d9ad46bce3', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("button", { key: '724d57e9b6d12f6f4cf30755ff17e5ae51bdc4a5', tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), disabled: this.disabled, title: this.htmlTitle }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label)));
+    }
+    static get watchers() { return {
+        "selected": ["onSelected"]
+    }; }
+    static get style() { return ZNavigationTabStyle0; }
+}, [0, "z-navigation-tab", {
+        "ariaControls": [1, "aria-controls"],
+        "tabId": [1, "tab-id"],
+        "selected": [1540],
+        "disabled": [516],
+        "orientation": [513],
+        "size": [513],
+        "icon": [1],
+        "label": [1],
+        "htmlTitle": [1, "html-title"]
+    }, [[0, "click", "onClick"]], {
+        "selected": ["onSelected"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-navigation-tab", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-navigation-tab":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZNavigationTab$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZNavigationTab = ZNavigationTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZNavigationTab, defineCustomElement };
+
+//# sourceMappingURL=z-navigation-tab.js.map

package/dist/components/z-navigation-tab.js.map

@@ -0,0 +1 @@
+{"file":"z-navigation-tab.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,6BAAe,gBAAgB;;MCYlBA,gBAAc;;;;;;;wBAuBJ,KAAK;wBAML,KAAK;2BAMe,yBAAyB,CAAC,UAAU;oBAMlD,kBAAkB,CAAC,GAAG;;;;;;;;IA+BzC,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;IAGD,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;KACF;;;;;;IAOO,UAAU;QAChB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YAC5D,IAAI,GAAG,UAAU,CAAC;SACnB;QAED,OAAO,cAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;KACtC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,YAAY,IAEhC,+DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,SAAS,IAEpB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CACjE,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNavigationTab"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab","src/deprecated/z-navigation-tab/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\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  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link 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\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders a button.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n */\n@Component({\n  tag: \"z-navigation-tab\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTab {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation: NavigationTabsOrientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size: NavigationTabsSize = NavigationTabsSize.BIG;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   * @deprecated Use a native `<button>` instead.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Html `title` attribute for the button.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (!this.disabled) {\n      this.selected = true;\n    }\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <button\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          disabled={this.disabled}\n          title={this.htmlTitle}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-otp.js

@@ -24,7 +24,7 @@ const ZOtp$1 = /*@__PURE__*/ proxyCustomElement(class ZOtp extends HTMLElement {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: '52fb020b2ebcd1d55b61a700c42b9292e23e88d7', class: "otp-container" }, h("div", { key: 'fd1c71d7029342f745a0adee68b79b5440c01927', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: 'ed4894a5e991ebb5e870ab0a1f54c75217721c5c', class: "otp-container" }, h("div", { key: '1bef4aae264fb80813a5b7b71412eb638c17736d', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -35,7 +35,7 @@ const ZOtp$1 = /*@__PURE__*/ proxyCustomElement(class ZOtp extends HTMLElement {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '2eb46b8273e78ce177f352d50441493e5ac260e8', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '6b40b61f792ad0f1789a44d27b51657e2f446a8b', message: this.message, status: this.status })));
     }
     static get style() { return ZOtpStyle0; }
 }, [1, "z-otp", {

package/dist/components/z-pocket-message.js

@@ -11,7 +11,7 @@ const ZPocketMessage$1 = /*@__PURE__*/ proxyCustomElement(class ZPocketMessage e
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'af350f4364cdc056efb2bfb7573f32aff6e1fb74' }, h("z-icon", { key: '978d77e166c93ff7dc66ce4488b9de335ad222f1', name: "exclamation-circle" }), h("div", { key: '8b2b15f096af975a001abc24f13145c19a93df10', class: "content" }, h("slot", { key: 'dc4a2c27b657fa13e1ed27b095c31903f481dfb6' })), h("div", { key: '73f8485447c46858f416f8cf10c332808ee8a129', class: "cta-wrapper" }, h("slot", { key: '9b36b26758f23f527da634df4a115d0db6ca8b51', name: "cta" }))));
+        return (h("div", { key: 'fd2ad4b6202ff5ec00783d54f10852f5afead5cc' }, h("z-icon", { key: 'a6872094ff69a350e72992874e641480ef1bd582', name: "exclamation-circle" }), h("div", { key: 'b9c7d36ea2c2f6beed7aaf98f409db7e37eff2d0', class: "content" }, h("slot", { key: '04b72c04be291ffc5690c162ed8bea07251346da' })), h("div", { key: 'b51c6836991f7f66a0e21968cefe81e49fda0043', class: "cta-wrapper" }, h("slot", { key: '944145d6af60175fc717951e1a8b5a03e533c2d8', name: "cta" }))));
     }
     static get style() { return ZPocketMessageStyle0; }
 }, [1, "z-pocket-message"]);

package/dist/components/z-section-title.js

@@ -17,7 +17,7 @@ const ZSectionTitle$1 = /*@__PURE__*/ proxyCustomElement(class ZSectionTitle ext
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: 'b629b236477e358e5e1f839dfab33ac08aa3cd68' }, h("slot", { key: 'f0752bbd190a7ad8a1e5f72a81c0cd92c77137f7', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'a4477bb9b91f62cdf839532f54eeb783615cc498', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: '73bb5aa52dd0ebf377b6dc6c341a6fe856689753' }, h("slot", { key: '69342bb343240b870f387b2f8b81433d6c44adcd', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'b13fc5c19b76b950806457e9ccd93cc21b850bc0', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     get host() { return this; }
     static get style() { return ZSectionTitleStyle0; }

package/dist/components/z-skip-to-content.js

@@ -48,7 +48,7 @@ const ZSkipToContent$1 = /*@__PURE__*/ proxyCustomElement(class ZSkipToContent e
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '08004b426a63113ef27d0cac85716b5433a2a292', class: {
+        return (h(Host, { key: '148da854d3c5a83e5c103b3efcc5358f86278936', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/components/z-table-body.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZTableBody extends Components.ZTableBody, HTMLElement {}
+export const ZTableBody: {
+    prototype: ZTableBody;
+    new (): ZTableBody;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;