@zanichelli/albe-web-components 20.0.5 → 20.1.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"z-file-upload.entry.js","sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=scoped","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host .modal-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2);\n  row-gap: 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  text-align: center;\n}\n\n:host .text-container .upload-link {\n  color: var(--color-text-link-blue);\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host .text-container .upload-link:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host .text-container .upload-link-text {\n  margin-bottom: var(--space-unit);\n}\n\n:host input[type=\"file\"] {\n  display: none;\n}\n\n:host #title + #description {\n  margin-top: var(--space-unit);\n}\n\n:host > * + z-button,\n:host > .files-container + *,\n:host > .files-container:not(:first-child) {\n  margin-top: calc(var(--space-unit) * 3);\n}\n\n:host > .files-container.hidden {\n  display: none;\n}\n\n:host > .files-container > .uploaded-files-label {\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > .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/* Tablet breakpoint */\n@media (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 (min-width: 1152px) {\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 4);\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\n\nexport type ZFileUploadError = {cause: \"format\" | \"size\"; message: string};\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFileUpload implements ComponentInterface {\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  /** 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  /** Value to set on the file input's `name` attribute (for use with forms) */\n  @Prop()\n  inputName? = \"z-file-upload\";\n\n  /**\n   * Whether to show errors in the internal modal or leave the handling to the app.\n   * Errors will still be emitted.\n   */\n  @Prop()\n  showErrors = true;\n\n  /** Internal store of the component type. It will change when viewport goes from desktop to tablet/mobile and vice versa */\n  @State()\n  private _type: ZFileUploadType = this.type;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** Map of files whose upload caused an error and the relative errors, with the cause and a message */\n  @State()\n  invalidFiles: Map<string, ZFileUploadError[]> = new Map<string, ZFileUploadError[]>();\n\n  /** Input ref */\n  @State()\n  private input: HTMLInputElement;\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter<File>;\n\n  /**\n   * Emits an array of error messages related to one or more files not allowed.\n   * Emitted when some file is dropped or selected.\n   */\n  @Event()\n  fileError: EventEmitter<{file: string; errors: ZFileUploadError[]}>;\n\n  @Element() host: HTMLZFileUploadElement;\n\n  private errorModal: HTMLZModalElement;\n\n  /** Listen `removeFile` event sent from z-file component */\n  @Listen(\"removeFile\")\n  onFileRemoved(e: CustomEvent): void {\n    this.removeFile(e.detail.fileName);\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.checkFilesValidity(this.input.files);\n  }\n\n  /** Get the list of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** Remove a previously uploaded file */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    const files = this.files;\n    const index = files.findIndex((file) => file.name === fileName);\n    if (index >= 0) {\n      files.splice(index, 1);\n      this.files = [...files];\n    }\n  }\n\n  private checkFilesValidity(files: FileList): Map<string, string[]> {\n    if (!files.length) {\n      return;\n    }\n\n    Array.from(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 && !this.files.find((f) => f.name === file.name)) {\n        this.files = [...this.files, file];\n        this.fileInput.emit(file);\n        this.input.value = \"\";\n\n        return;\n      }\n\n      const sizeError = `Il file ${file.name} supera il limite di ${this.fileMaxSize}MB`;\n      const formatError = `Il file ${file.name} ha un formato non supportato`;\n      const errors = [\n        !fileSizeOk && {cause: \"size\" as const, message: sizeError},\n        !fileFormatOk && {cause: \"format\" as const, message: formatError},\n      ].filter(Boolean);\n      this.invalidFiles.set(file.name, errors);\n      this.invalidFiles = new Map(this.invalidFiles); // trigger state update\n      this.fileError.emit({file: file.name, errors});\n    });\n  }\n\n  private resetErrors(): void {\n    this.invalidFiles = new Map<string, ZFileUploadError[]>();\n  }\n\n  private onFilesChange(e: Event): void {\n    this.checkFilesValidity((e.target as HTMLInputElement).files);\n  }\n\n  componentWillLoad(): void {\n    // force default type on mobile and tablet viewport\n    const mql = window.matchMedia(\"(max-width: 1151px)\");\n    this._type = mql.matches ? ZFileUploadType.DEFAULT : this.type;\n    mql.addEventListener(\"change\", (e) => {\n      this._type = e.matches ? ZFileUploadType.DEFAULT : this.type;\n    });\n  }\n\n  componentDidUpdate(): void {\n    if (!this.showErrors || !this.invalidFiles.size) {\n      return;\n    }\n\n    this.errorModal.open();\n  }\n\n  private renderDescription(cssClass): HTMLElement | undefined {\n    if (!this.description) {\n      return;\n    }\n\n    return (\n      <span\n        id=\"description\"\n        class={cssClass}\n      >\n        {this.description}\n      </span>\n    );\n  }\n\n  private renderAllowedFilesMessage(): 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 defaultMessage =\n      fileFormatString || fileWeightString ? `Puoi allegare file${fileFormatString}${fileWeightString}.` : undefined;\n\n    if (!this.allowedFilesMessage && !defaultMessage) {\n      return;\n    }\n\n    return <span class=\"allowed-files-message body-3\">{this.allowedFilesMessage || defaultMessage}</span>;\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={{\"files-container\": true, \"hidden\": !this.files.length}}>\n        <div class=\"uploaded-files-label heading-3-sb\">{this.uploadedFilesLabel}</div>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        type=\"file\"\n        name={this.inputName}\n        multiple\n        onChange={(e) => this.onFilesChange(e)}\n        accept={this.acceptedFormat}\n        aria-labelledby={this.description ? \"description\" : undefined}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\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      >\n        {this.uploadBtnLabel}\n      </z-button>,\n      this.renderInput(),\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        >\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.renderAllowedFilesMessage(),\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.renderAllowedFilesMessage()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private renderFileErrors(): HTMLElement[] {\n    return Array.from(this.invalidFiles).map(([fileName, errors]) => {\n      const prefix = `Il file ${fileName}`;\n\n      return (\n        <span class=\"error-message\">\n          Il file <span class=\"body-3-sb\">{fileName}</span>\n          {errors.map(({message}) => message.replace(prefix, \"\")).join(\" e \")}.\n        </span>\n      );\n    });\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        {this.mainTitle && (\n          <div\n            id=\"title\"\n            class=\"heading-3-sb\"\n          >\n            {this.mainTitle}\n          </div>\n        )}\n        {this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        {!!this.invalidFiles.size && this.showErrors && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => this.resetErrors()}\n            onModalBackgroundClick={() => this.resetErrors()}\n          >\n            <div slot=\"modalContent\">\n              <div class=\"modal-wrapper body-3\">\n                {this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()}\n              </div>\n            </div>\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"z-file.entry.js","sources":["src/components/file-upload/z-file/styles.css?tag=z-file&encapsulation=scoped","src/components/file-upload/z-file/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-popover {\n  z-index: 10;\n}\n\n:host > z-popover > .tooltip-content {\n  white-space: nowrap;\n}\n\n:host > z-chip span {\n  display: block;\n  overflow: hidden;\n  max-width: 250px;\n  letter-spacing: 0.32px;\n  line-height: 1.33;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {Breakpoints} from \"../../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-file\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFile implements ComponentInterface {\n  private icon: HTMLElement;\n\n  private ellipsis?: HTMLSpanElement;\n\n  private chip?: HTMLZChipElement;\n\n  /** File chip id */\n  @Prop()\n  fileNumber: number;\n\n  /** File name */\n  @Prop()\n  fileName: string;\n\n  @State()\n  allowPopover = false;\n\n  @State()\n  popoverVisible = false;\n\n  @Element() el: HTMLZFileElement;\n\n  /** Emitted when a z-file component is removed from the DOM */\n  @Event()\n  removeFile: EventEmitter;\n\n  private removeFileHandler(): void {\n    this.removeFile.emit({fileName: this.fileName});\n    this.el.remove();\n  }\n\n  @Listen(\"mouseover\")\n  onMouseOver(): void {\n    this.popoverVisible = true;\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave(): void {\n    this.popoverVisible = false;\n  }\n\n  @Listen(\"interactiveIconClick\")\n  onInteractiveIconClick(): void {\n    this.removeFileHandler();\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowPopover = true;\n    }\n\n    this.icon?.focus?.();\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLZFileElement {\n    return (\n      <Host>\n        {this.allowPopover && (\n          <z-popover\n            open={this.popoverVisible}\n            position={PopoverPosition.AUTO}\n            bindTo={this.chip}\n          >\n            <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n          </z-popover>\n        )}\n        <z-chip\n          ref={(el) => (this.chip = el as HTMLZChipElement)}\n          id={`chip-${this.fileNumber}`}\n          interactiveIcon=\"multiply-circled\"\n          type={ZChipType.DEFAULT}\n        >\n          <span\n            ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n            tabIndex={-1}\n          >\n            {this.fileName}\n          </span>\n        </z-chip>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,qYAAqY,CAAC;;MCUlZ,KAAK,GAAA,MAAA;AANlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAsBE,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK;AAGpB,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK;AAoEvB;IA5DS,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC;AAC/C,QAAA,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE;;IAIlB,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;IAI5B,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;IAI7B,sBAAsB,GAAA;QACpB,IAAI,CAAC,iBAAiB,EAAE;;IAG1B,gBAAgB,GAAA;;AACd,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,EAAE;AACvE,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;QAG1B,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,kDAAI;;IAGd,kBAAkB,GAAA;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW;;IAG9D,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,YAAY,KAChB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI,EAAA,EAEjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb,EACD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,UAAU,CAAA,CAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,EAAE,EAAA,EAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ;;;;;;;;"}

package/dist/esm/z-ghost-loading.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-ghost-loading.entry.js","sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import {Component, ComponentInterface, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading implements ComponentInterface {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,qgBAAqgB,CAAC;;MCMlhB,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,OAAO,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAG;;;;;;;"}

package/dist/esm/z-info-box.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-info-box.entry.js","sources":["src/components/z-info-box/styles.css?tag=z-info-box&encapsulation=shadow","src/components/z-info-box/index.tsx"],"sourcesContent":[":host,\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  /**\n   * @prop --z-info-box--border-color: The border color of the info box.\n   * @prop --z-info-box--background-color: The background color of the info box.\n   * @prop --z-info-box--left-icon-color: The fill color of the icon displayed on the top left of the info box. If `--z-info-box--border-color` is set, this property will default to that value. Otherwise, it will default to `--color-primary01-icon`.\n   */\n  --z-info-box--border-color: unset;\n  --z-info-box--left-icon-color: var(--z-info-box--border-color, var(--color-primary01-icon));\n  --z-info-box--background-color: var(--color-primary03);\n\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  border: var(--border-size-medium) solid var(--z-info-box--border-color, transparent);\n  background: var(--z-info-box--background-color);\n  border-radius: var(--border-radius);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  gap: calc(var(--space-unit) * 2);\n}\n\n.main-content {\n  display: flex;\n  align-items: flex-start;\n}\n\n/* visually vertically align the icons to the first line of the text content */\n.main-content .left-icon,\n.close-button {\n  display: flex;\n  height: 1.25rem;\n  align-items: center;\n}\n\n.main-content .left-icon z-icon {\n  --z-icon-width: 1rem;\n  --z-icon-height: 1rem;\n\n  fill: var(--z-info-box--left-icon-color);\n}\n\n::slotted([slot=\"content\"]) {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  line-height: 1.25rem;\n}\n\n.main-content .left-icon + ::slotted([slot=\"content\"]) {\n  margin-left: var(--space-unit);\n}\n\n:host([isclosable]) ::slotted([slot=\"content\"]) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n.close-button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  margin-left: auto;\n  background: none;\n  cursor: pointer;\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01-icon);\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {IconName} from \"../../constants/iconset\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n  tag: \"z-info-box\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoBox implements ComponentInterface {\n  /** info box unique id */\n  @Prop()\n  boxid: string;\n\n  /** render close icon */\n  @Prop({reflect: true})\n  isclosable = true;\n\n  /** Aria label for the close button */\n  @Prop()\n  closeButtonAriaLabel = \"Chiudi pannello informazioni\";\n\n  /**\n   * Name of the icon to display on the top left of the info box.\n   * The icon's color will be inherited from the border color set through the `--z-info-box--border-color` CSS variable, if set.\n   * Otherwise it can be customized using the `--z-info-box--left-icon-color` CSS variable.\n   * If none of them is set, the icon will be colored using the `--color-primary01-icon` token.\n   */\n  @Prop()\n  leftIcon: IconName;\n\n  /** emitted on close icon click */\n  @Event()\n  infoBoxClose: EventEmitter<{boxid: string}>;\n\n  private emitInfoBoxClose(): void {\n    this.infoBoxClose.emit({boxid: this.boxid});\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <Host id={this.boxid}>\n        <div class=\"main-content\">\n          {this.leftIcon && (\n            <div class=\"left-icon\">\n              <z-icon name={this.leftIcon} />\n            </div>\n          )}\n\n          <slot name=\"content\" />\n\n          {this.isclosable && (\n            <button\n              class=\"close-button\"\n              aria-label={this.closeButtonAriaLabel}\n              onClick={() => this.emitInfoBoxClose()}\n            >\n              <z-icon name=\"multiply\" />\n            </button>\n          )}\n        </div>\n\n        <slot name=\"additional-content\" />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,kvCAAkvC,CAAC;;MCW/vC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAYE,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI;;AAIjB,QAAA,IAAA,CAAA,oBAAoB,GAAG,8BAA8B;AA8CtD;IA/BS,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC;;IAG7C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAA,EAClB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3B,CACP,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,EAEtB,IAAI,CAAC,UAAU,KACd,+DACE,KAAK,EAAC,cAAc,EAAA,YAAA,EACR,IAAI,CAAC,oBAAoB,EACrC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAA,EAEtC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,UAAU,EAAA,CAAG,CACnB,CACV,CACG,EAEN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,oBAAoB,EAAA,CAAG,CAC7B;;;;;;;"}

package/dist/esm/z-info-reveal.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-info-reveal.entry.js","sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-info-reveal-panel-width: Width of the info panel.\n   * @prop --trigger-icon-size: Size of the trigger icon for big size.\n   * @prop --trigger-icon-size-small: Size of the trigger icon for small size.\n   * @prop --trigger-icon-size-x-small: Size of the trigger icon for x-small size.\n   */\n  --z-info-reveal-panel-width: 384px; /* defaults to half the maximum size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-small, 18px);\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-x-small, 16px);\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  z-index: 19;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    top: auto !important;\n    bottom: auto !important;\n    width: calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import {Component, ComponentInterface, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal implements ComponentInterface {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** `aria-label` of the trigger button. It will be used only when the `label` prop is empty. */\n  @Prop()\n  htmlAriaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.htmlAriaLabel || undefined : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,6gFAA6gF,CAAC;;MCa1hF,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE,QAAA,IAAA,CAAA,IAAI,GAAI,mBAAmB;AAE3B;;;;AAIG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAwB,kBAAkB,CAAC,YAAY;;AAQ/D,QAAA,IAAA,CAAA,aAAa,GAAG,4BAA4B;;AAI5C,QAAA,IAAA,CAAA,IAAI,GAAiB,WAAW,CAAC,GAAG;;AAIpC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;AAiFb;AA3EC;;AAEG;IAIH,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC7B;;QAGF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;AAC9C,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC;AAC7G,QAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW;;AAEtD,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CACnF;QACD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAA,EAAG,cAAc,CAAA,EAAA,CAAI;;AAGnD;;AAEG;IACK,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;;AAGxB;;AAEG;IACK,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAInB,IAAA,eAAe,CAAC,KAAoB,EAAA;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,UAAU,EAAE;;;IAIrB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,EACnB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,YAAA,EACxB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,SAAS,GAAG,SAAS,EAAA,eAAA,EACtD,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC7B,qBAAqB,EAAA,EAElC,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,EACxC,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,EACb,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B,EAAA,EAEzC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,UAAU,EAAA,CAAG,CACnB,CACL,CACD;;;;;;;;;;;;;;;;"}

package/dist/esm/z-input-range.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-input-range.entry.js","sources":["src/components/z-input-range/styles.css?tag=z-input-range&encapsulation=shadow","src/tokens/typography.css?tag=z-input-range&encapsulation=shadow","src/components/z-input-range/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  /* Internal CSS variable used to store the progress of the input range as a percentage.\n  Needed to color the progress in the runnable track of the input (only Firefox natively provides a pseudo-element to do that: `::-moz-range-progress`).\n  The value is updated by the component. */\n  --progress: 0%;\n\n  /* Internal CSS variable used to store the ratio of the current value to the total range, used for positioning the tooltip guide.\n  The value is updated by the component. */\n  --progress-ratio: 0;\n  --z-input-range-thumb-size: calc(var(--space-unit) * 3);\n\n  display: flex;\n  width: fit-content;\n  height: fit-content;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]) {\n  --z-input-range-thumb-size: calc(var(--space-unit) * 2);\n}\n\n:host([size=\"x-small\"]) {\n  --z-input-range-thumb-size: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) {\n  height: 100%;\n  flex-direction: row;\n}\n\n.input-container {\n  /* Thickness of the track. It is calculated as one-third of the thumb size. */\n  --z-input-range-track-size: calc(var(--z-input-range-thumb-size) / 3);\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\nlabel.z-label {\n  padding: 0;\n  margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) label.z-label {\n  display: none;\n}\n\ninput[type=\"range\"] {\n  --main-color: var(--color-primary01);\n\n  width: 100%;\n  height: var(--z-input-range-thumb-size);\n  padding: 0;\n  margin: 0;\n  appearance: none;\n  background: transparent;\n  writing-mode: horizontal-tb;\n}\n\ninput[type=\"range\"]:hover,\ninput[type=\"range\"]:hover ~ z-tooltip {\n  --main-color: var(--color-hover-primary);\n}\n\ninput[type=\"range\"]:focus:focus-visible {\n  outline: none;\n}\n\ninput[type=\"range\"]:disabled,\ninput[type=\"range\"]:disabled ~ z-tooltip {\n  --main-color: var(--color-form-disabled03);\n\n  cursor: default;\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: var(--z-input-range-track-size);\n  border: none;\n  appearance: none;\n  background:\n    linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat,\n    var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"] {\n  width: var(--z-input-range-thumb-size);\n  height: 100%;\n  direction: rtl;\n  writing-mode: vertical-lr;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-runnable-track {\n  width: var(--z-input-range-track-size);\n  height: 100%;\n  background:\n    linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat,\n    var(--color-surface03);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  width: var(--z-input-range-thumb-size);\n  height: var(--z-input-range-thumb-size);\n  box-sizing: border-box;\n  border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n  margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n  appearance: none;\n  background-color: var(--color-surface01);\n  border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-thumb {\n  margin-top: 0;\n  margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-runnable-track {\n  cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-thumb {\n  cursor: grab;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-webkit-slider-thumb {\n  box-shadow: var(--shadow-focus-primary);\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-webkit-slider-thumb {\n  cursor: grabbing;\n}\n\n/* --- Firefox styles --- */\n\n/* All styles must be duplicated, because using comma-separated selectors\n(like `input[type=\"range\"]::-webkit-slider-thumb, input[type=\"range\"]::-moz-range-thumb`) would break webkit styles...\n*/\ninput[type=\"range\"]::-moz-range-track {\n  width: 100%;\n  height: var(--z-input-range-track-size);\n  border: none;\n  appearance: none;\n  background: var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-track {\n  width: var(--z-input-range-track-size);\n  height: 100%;\n}\n\ninput[type=\"range\"]::-moz-range-progress {\n  height: var(--z-input-range-track-size);\n  border: none;\n  background: var(--main-color);\n  border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-progress {\n  width: var(--z-input-range-track-size);\n  height: auto;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n  width: var(--z-input-range-thumb-size);\n  height: var(--z-input-range-thumb-size);\n  box-sizing: border-box;\n  border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n  margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n  appearance: none;\n  background-color: var(--color-surface01);\n  border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-thumb {\n  margin-top: 0;\n  margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-track,\ninput[type=\"range\"]:not(:disabled)::-moz-range-progress {\n  cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-thumb {\n  cursor: grab;\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-moz-range-thumb {\n  cursor: grabbing;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-moz-range-thumb {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* --- End of Firefox styles --- */\n\n.tooltip-guide {\n  --progress-position: calc(\n    (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2)\n  );\n\n  position: absolute;\n  z-index: -1;\n  top: 0;\n\n  /* `--progress` is good for painting the filled track, but not enough for representing the thumb center.\n   * The thumb center cannot go from 0 to 100%:\n   * at min it sits at thumbSize/2, and at max it sits at width - thumbSize/2.\n   * So we map a normalized ratio (0..1) over the usable travel distance\n   * (width - thumbSize), then add thumbSize/2 to get the correct center coordinate.\n   */\n  left: var(--progress-position);\n  width: var(--z-input-range-thumb-size);\n  height: var(--z-input-range-thumb-size);\n  background: transparent;\n  pointer-events: none;\n  transform: translateX(-50%);\n}\n\n:host([orientation=\"vertical\"]) .tooltip-guide {\n  top: auto;\n  bottom: var(--progress-position);\n  left: 0;\n  transform: translateY(50%);\n}\n\nz-tooltip {\n  --main-color: var(--color-primary01);\n  --z-tooltip-theme--surface: var(--main-color);\n  --z-tooltip-theme--text: var(--color-text-inverse);\n  --z-tooltip-padding: calc(var(--space-unit) / 2);\n}\n\nz-tooltip .current-value {\n  min-width: calc(var(--space-unit) * 3.5);\n}\n\n.edges {\n  display: flex;\n  justify-content: space-between;\n}\n\n.edges :is(.min, .max) {\n  min-width: var(--z-input-range-thumb-size); /* visually align single digit values to the center of the thumb */\n  text-align: center;\n}\n\n:host([orientation=\"vertical\"]) .edges {\n  display: none;\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  AttachInternals,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ControlSize, Orientation, PopoverPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * Input range component.\n */\n@Component({\n  tag: \"z-input-range\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n  formAssociated: true,\n})\nexport class ZInputRange implements ComponentInterface {\n  @Element() host: HTMLZInputRangeElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Whether the input range is disabled. */\n  @Prop()\n  disabled = false;\n\n  /**\n   * The aria label of the input range. for accessibility.\n   * Not necessary if the `label` prop is set.\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /** ID of the input range. */\n  @Prop()\n  htmlId = `z-input-range-${randomId()}`;\n\n  /**\n   * The label of the input range.\n   * When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.\n   */\n  @Prop()\n  label: string;\n\n  /** The greatest value in the range of permitted values. */\n  @Prop()\n  max = 100;\n\n  /** The lowest value in the range of permitted values. */\n  @Prop()\n  min = 0;\n\n  /** The orientation of the input range. */\n  @Prop({reflect: true})\n  orientation: Orientation;\n\n  /** Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation. */\n  @Prop()\n  showEdges = false;\n\n  /** The size of the input range. Default: `ControlSize.BIG` */\n  @Prop({reflect: true})\n  size: ControlSize.BIG;\n\n  /** The step value for the input range. */\n  @Prop()\n  step = 1;\n\n  /** The value of the input range. */\n  @Prop()\n  value = 0;\n\n  /**\n   * The position of the tooltip displaying the current value.\n   * Defaults to `top` for horizontal orientation and `left` for vertical orientation.\n   * May be necessary to adjust this prop when the input range is close to the edges of the screen,\n   * to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment.\n   * For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.\n   */\n  @Prop()\n  valuePosition: PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;\n\n  /** Emitted when the value of the input range is being changed (`input` native event). */\n  @Event()\n  rangeInput: EventEmitter<number>;\n\n  /** Emitted when the value of the input range has changed (`change` native event). */\n  @Event()\n  rangeChange: EventEmitter<number>;\n\n  /** The current value of the input range synchronized with the native input element. */\n  @State()\n  currentValue = this.value;\n\n  /**\n   * Whether to show the tooltip displaying the current value.\n   * The tooltip is shown only when the input range is focused or while the user is changing the value.\n   */\n  @State()\n  showValueTooltip = false;\n\n  /**\n   * Whether the native input value needs to be synced with the component state.\n   * This is necessary when the `step` prop changes, as the browser may round the value,\n   * so we need to update the component state accordingly.\n   */\n  private needsNativeValueSync = false;\n\n  private inputRef: HTMLInputElement;\n\n  private tooltipGuideRef: HTMLSpanElement;\n\n  private get ariaLabel(): string | undefined {\n    return this.htmlAriaLabel ?? (this.orientation === Orientation.VERTICAL ? this.label : undefined);\n  }\n\n  private get tooltipPosition(): typeof this.valuePosition {\n    return (\n      this.valuePosition ?? (this.orientation === Orientation.VERTICAL ? PopoverPosition.LEFT : PopoverPosition.TOP)\n    );\n  }\n\n  private updateCurrentValue(nextValue: number): void {\n    if (Number.isNaN(nextValue) || nextValue === this.currentValue) {\n      return;\n    }\n\n    this.currentValue = nextValue;\n    this.internals.setFormValue(this.currentValue.toString());\n  }\n\n  /** Calculates the current ratio of the input range value. */\n  private getCurrentRatio(): number {\n    const range = this.max - this.min;\n    if (range <= 0) {\n      return 0;\n    }\n\n    const ratio = (this.currentValue - this.min) / range;\n\n    return Math.min(1, Math.max(0, ratio));\n  }\n\n  /** Updates the CSS variables used to color the track progress and tooltip guide position. */\n  private updateProgress(): void {\n    const ratio = this.getCurrentRatio();\n    const progress = ratio * 100;\n\n    this.host?.style.setProperty(\"--progress-ratio\", `${ratio}`);\n    this.host?.style.setProperty(\"--progress\", `${progress}%`);\n  }\n\n  /**\n   * Syncs current value from native input after render-time browser coercions:\n   * when `step` changes, the browser may round the value, so we need to update the component state accordingly.\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step\n   */\n  private syncCurrentValueFromNativeInput(): void {\n    if (!this.inputRef) {\n      return;\n    }\n\n    this.updateCurrentValue(this.inputRef.valueAsNumber);\n    this.updateProgress();\n  }\n\n  private onInput(event: InputEvent): void {\n    event.stopPropagation();\n    this.syncCurrentValueFromNativeInput();\n    this.rangeInput.emit(this.currentValue);\n  }\n\n  private onChange(event: Event): void {\n    event.stopPropagation();\n    this.syncCurrentValueFromNativeInput();\n    this.rangeChange.emit(this.currentValue);\n  }\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  @Watch(\"step\")\n  @Watch(\"value\")\n  onConstraintsChange(): void {\n    this.needsNativeValueSync = true;\n  }\n\n  componentDidLoad() {\n    this.needsNativeValueSync = true;\n    this.syncCurrentValueFromNativeInput();\n  }\n\n  componentDidRender() {\n    if (!this.needsNativeValueSync) {\n      return;\n    }\n\n    this.syncCurrentValueFromNativeInput();\n    this.needsNativeValueSync = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && (\n          <label\n            class=\"z-label\"\n            htmlFor={this.htmlId}\n          >\n            {this.label}\n          </label>\n        )}\n        <div class=\"input-container body-3\">\n          <input\n            ref={(el) => (this.inputRef = el)}\n            type=\"range\"\n            aria-label={this.ariaLabel}\n            id={this.htmlId}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.currentValue}\n            onInput={(event) => this.onInput(event)}\n            onChange={(event) => this.onChange(event)}\n            onFocus={() => (this.showValueTooltip = true)}\n            onBlur={() => (this.showValueTooltip = false)}\n          />\n          <div\n            class=\"tooltip-guide\"\n            ref={(el) => (this.tooltipGuideRef = el)}\n          ></div>\n          <z-tooltip\n            position={this.tooltipPosition}\n            bindTo={this.tooltipGuideRef}\n            open={this.showValueTooltip}\n            closable={false}\n          >\n            <div class=\"current-value\">{this.currentValue}</div>\n          </z-tooltip>\n        </div>\n        {this.showEdges && (\n          <div class=\"edges body-3\">\n            <span class=\"min\">{this.min}</span>\n            <span class=\"max\">{this.max}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/z-logo.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-logo.entry.js","sources":["src/components/z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/z-logo/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 255px;\n  height: 64px;\n  vertical-align: top;\n}\n\nimg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n\na {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\na:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(.mobile) {\n  width: 31px;\n  height: 40px;\n}\n\n:host(.mobile) img {\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-logo\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZLogo implements ComponentInterface {\n  /** image width */\n  @Prop()\n  width?: number;\n\n  /** image height */\n  @Prop()\n  height?: number;\n\n  /** alternative image text */\n  @Prop()\n  imageAlt?: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target: true means _blank, false means _self */\n  @Prop()\n  targetBlank?: boolean;\n\n  /** if true, the mobile logo is displayed, otherwise the desktop one */\n  @Prop()\n  mobileLogo?: boolean;\n\n  render(): HTMLZLogoElement {\n    const style = {};\n\n    if (this.width) {\n      style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n    }\n\n    if (this.height) {\n      style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{mobile: !!this.mobileLogo}}\n      >\n        {this.link ? (\n          <a\n            href={this.link}\n            target={this.targetBlank ? \"_blank\" : \"_self\"}\n          >\n            <img alt={this.imageAlt} />\n          </a>\n        ) : (\n          <img alt={this.imageAlt} />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,g5IAAg5I,CAAC;;MCO75I,KAAK,GAAA,MAAA;;;;IAyBhB,MAAM,GAAA;QACJ,MAAM,KAAK,GAAG,EAAE;AAEhB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,IAAI;;AAGzD,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,IAAI;;QAG5D,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAC,EAAA,EAEjC,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,OAAO,EAAA,EAE7C,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CACzB,KAEJ,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC5B,CACI;;;;;;;"}

package/dist/esm/z-menu-section.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-menu-section.entry.js","sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: var(--space-unit) 0;\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n  border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items[hidden] {\n  display: none;\n}\n\n::slotted([slot=\"section\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n  outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n  border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"]:active),\n::slotted([slot=\"section\"][active]),\n::slotted([slot=\"section\"][data-active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection implements ComponentInterface {\n  @Element() host: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Tabindex value to set on the label button.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n   */\n  @Prop()\n  htmlTabindex = -1;\n\n  /** The opening state of the section. */\n  @Prop({mutable: true})\n  open: boolean;\n\n  @State()\n  hasItems: boolean;\n\n  @State()\n  items: HTMLElement[];\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private label: HTMLButtonElement;\n\n  private get focusableItem(): HTMLElement {\n    return this.items.find(({tabIndex}) => tabIndex === 0);\n  }\n\n  private toggle(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  private setItemsA11yAttrs(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.tabIndex = -1;\n    });\n  }\n\n  private onItemsChange(): void {\n    this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n    this.hasItems = this.items.length > 0;\n    this.setItemsA11yAttrs();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.focustFirstItem();\n      }\n    }\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   */\n  private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n    receiver.tabIndex = 0;\n    setTimeout(() => {\n      receiver.focus();\n    }, 100);\n    if (current) {\n      current.tabIndex = -1;\n    }\n  }\n\n  private focustFirstItem(): void {\n    this.moveFocus(this.items[0]);\n  }\n\n  /** Focus the last item. */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    this.moveFocus(this.items[this.items.length - 1]);\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    setTimeout(() => {\n      this.label.focus();\n    }, 100);\n  }\n\n  @Watch(\"open\")\n  onOpenChange(): void {\n    if (!this.open) {\n      this.setItemsA11yAttrs();\n      this.closed.emit();\n    } else {\n      this.opened.emit();\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  onTabindexChange(): void {\n    if (!this.label) {\n      return;\n    }\n\n    this.label.tabIndex = this.htmlTabindex;\n  }\n\n  @Listen(\"keydown\")\n  private onItemsKeydown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.moveFocus(this.label, this.focusableItem);\n        this.open = false;\n        break;\n      case KeyboardCode.ARROW_RIGHT:\n        if (this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = true;\n        this.focustFirstItem();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (!this.open) {\n          break;\n        }\n        if (document.activeElement === this.host) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.focustFirstItem();\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex + 1];\n        if (receiver) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          this.htmlTabindex = 0;\n          this.focusableItem.tabIndex = -1;\n        }\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (!this.open || document.activeElement === this.host) {\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex - 1];\n        ev.preventDefault();\n        ev.stopPropagation();\n        if (receiver) {\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          // since there isn't a previous item to focus, give the focus to the label element\n          this.focusableItem.tabIndex = -1;\n          this.setFocus();\n        }\n        break;\n      }\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n    this.onItemsKeydown = this.onItemsKeydown.bind(this);\n  }\n\n  connectedCallback(): void {\n    this.onItemsChange();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host open={this.open}>\n        <button\n          ref={(el) => (this.label = el)}\n          class=\"label\"\n          aria-haspopup={`${!!this.hasItems}`}\n          aria-expanded={`${!!this.open}`}\n          role=\"menuitem\"\n          tabindex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        <div\n          class=\"items\"\n          role=\"menu\"\n          hidden={!this.open}\n        >\n          <slot\n            name=\"section\"\n            onSlotchange={this.onItemsChange}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/z-menu.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-menu.entry.js","sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n  outline: none;\n}\n\n:host {\n  /**\n   * @prop --z-menu-label-color: Color of the label's text.\n   */\n  --z-menu-label-color: ;\n\n  position: relative;\n  display: inline-flex;\n  height: fit-content;\n  flex-direction: column;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-bottom: var(--border-size-large) solid transparent;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(:is([active], [open])) .menu-label ::slotted(*),\n.menu-label:focus-visible ::slotted(*),\ndiv.menu-label:focus-within ::slotted(*) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n\n:host([vertical-context]) .menu-label {\n  padding: var(--space-unit) 0;\n  border-width: var(--border-size-small);\n  border-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label,\n.menu-label:hover,\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  border-color: var(--color-primary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-visible::after,\n:host([vertical-context]) div.menu-label:focus-within::after {\n  position: absolute;\n  bottom: calc(var(--border-size-small) * -1);\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n  content: \"\";\n}\n\n:host([vertical-context]) .menu-label ::slotted(*) {\n  padding: 0;\n}\n\n.menu-label ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  min-width: fit-content;\n  padding-bottom: 2px;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color, var(--color-default-text));\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: inherit;\n  line-height: 1.5;\n  white-space: nowrap;\n}\n\n.menu-label z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text]:not([slot]))::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text]:not([slot]))::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]:not([slot])) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: 0 calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:last-child) {\n  border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active),\n.items > ::slotted([slot=\"item\"][active]),\n.items > ::slotted([slot=\"item\"][data-active]) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu implements ComponentInterface {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop({mutable: true})\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"z-navigation-tabs.entry.js","sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  /**\n   * @prop --z-navigation-tabs-nav-buttons-bg: Background color of the navigation buttons. The default is `--color-surface01`.\n   * @prop --z-navigation-tabs-nav-buttons-fg: Foreground color of the navigation buttons. The default is `--color-primary01`.\n   */\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 2px 2px var(--shadow-color-base);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-background);\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-primary);\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-primary);\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 {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} 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 */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs implements ComponentInterface {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  htmlAriaLabel?: string;\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 container = tabElement.parentElement;\n\n    if (!container) {\n      return;\n    }\n\n    setTimeout(() => {\n      const isHorizontal = this.orientation === NavigationTabsOrientation.HORIZONTAL;\n\n      const containerRect = container.getBoundingClientRect();\n      const tabRect = tabElement.getBoundingClientRect();\n\n      const offset = isHorizontal ? tabRect.left - containerRect.left : tabRect.top - containerRect.top;\n      const containerSize = isHorizontal ? container.clientWidth : container.clientHeight;\n      const tabSize = isHorizontal ? tabElement.clientWidth : tabElement.clientHeight;\n      const scrollAmount = offset - containerSize / 2 + tabSize / 2;\n\n      container.scrollTo({\n        [isHorizontal ? \"left\" : \"top\"]: container[isHorizontal ? \"scrollLeft\" : \"scrollTop\"] + scrollAmount,\n        behavior: \"smooth\",\n      });\n    }, 100);\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?.name.replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        if (zicon) {\n          zicon.name = strokeIcon;\n        }\n\n        return;\n      }\n\n      if (zicon) {\n        zicon.name = `${strokeIcon}-filled`;\n      }\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.htmlAriaLabel || undefined}\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"],"names":[],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"z-notification.entry.js","sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --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   * @prop --z-notification--content-max-width: The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.\n   * @prop --z-notification--inline-padding: The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).\n   */\n  --z-notification--top-offset: 0;\n  --z-notification--content-max-width: 100%;\n  --z-notification--inline-padding: ;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\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-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\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-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\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  width: 100%;\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: 1.4;\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: 1.333;\n  outline: none;\n}\n\n.action-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\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 (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, ComponentInterface, 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 */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification implements ComponentInterface {\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  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\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        <div class=\"main-container\">\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        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,qkEAAqkE,CAAC;;MCYllE,aAAa,GAAA,MAAA;AAoChB,IAAA,uBAAuB,CAAC,CAAa,EAAA;QAC3C,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE;;AAOxB,IAAA,sBAAsB,CAAC,CAAa,EAAA;QAC1C,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE;;AAG/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAnCA,QAAA,IAAA,CAAA,SAAS,GAAa,KAAK;AAE3B;;;AAGG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAa,KAAK;;AAI5B,QAAA,IAAA,CAAA,MAAM,GAAa,KAAK;;AAIxB,QAAA,IAAA,CAAA,cAAc,GAAsB,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC;QACtE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;AACrE;IAED,MAAM,GAAA;;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CACH,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,EAAE,CAAA,KACxB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,EAAA,EAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAA,EAEpC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CACK,CACV,CACG,CACD;;;;;;;"}

package/dist/esm/z-pagination.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"z-pagination.entry.js","sources":["src/components/z-pagination/styles.css?tag=z-pagination","src/components/z-pagination/index.tsx"],"sourcesContent":["z-pagination {\n  /**\n   * @prop --z-pagination--page-button-width: Width of the pagination's page buttons. The default is 64px on mobile and 88px on desktop.\n   * @prop --z-pagination--pages-container-max-width: Max width of the container of the page buttons. The default is 100% (full width).\n   * @prop --z-pagination-background-color: Background of the pagination's tabs. The default is --color-background\n   * @prop --z-pagination-background-color-hover: Background of the pagination's tabs on hover. The default is --color-surface01\n   */\n  --z-pagination--page-button-width: 64px;\n  --z-pagination--pages-container-max-width: 100%;\n  --z-pagination-background-color: var(--color-background);\n  --z-pagination-background-color-hover: var(--color-surface01);\n\n  display: flex;\n  max-width: 100%;\n  flex-flow: column wrap;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);\n}\n\nz-pagination,\nz-pagination * {\n  box-sizing: border-box;\n}\n\nz-pagination button {\n  height: 100%;\n}\n\nz-pagination z-icon {\n  fill: var(--color-primary01-icon);\n}\n\nz-pagination *:disabled z-icon {\n  fill: var(--color-disabled03);\n}\n\nz-pagination .page-label {\n  margin-right: calc(var(--space-unit) * 3);\n  color: var(--color-default-text);\n}\n\nz-pagination .pagination-bar {\n  display: flex;\n  max-width: 100%;\n  height: 48px;\n  align-items: center;\n}\n\nz-pagination .pagination-bar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  margin: 0;\n  background-color: var(--z-pagination-background-color);\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-family: inherit;\n  font-weight: inherit;\n  transition:\n    background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out;\n}\n\nz-pagination .pagination-bar button:focus-visible {\n  background-color: var(--color-surface01);\n  outline: none;\n}\n\nz-pagination .pagination-bar .pagination-button {\n  padding: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\nz-pagination .pagination-bar .navigation-button {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);\n}\n\nz-pagination .pagination-bar .pagination-button:disabled,\nz-pagination .pagination-bar .navigation-button:disabled {\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  pointer-events: none;\n}\n\nz-pagination .pagination-bar .page-button,\nz-pagination .pagination-bar .ellipsis-button {\n  width: var(--z-pagination--page-button-width);\n}\n\nz-pagination .pages-container {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  height: 100%;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scroll-snap-align: center;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-pagination .pages-container::-webkit-scrollbar {\n  display: none;\n}\n\nz-pagination .pages-chunk {\n  display: flex;\n  scroll-snap-align: center;\n}\n\nz-pagination .pagination-bar .page-button {\n  padding-top: var(--border-size-large) solid transparent;\n  border-bottom: var(--border-size-large) solid transparent;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n}\n\nz-pagination .pagination-bar .page-button[data-current] {\n  border-bottom-color: var(--color-primary01);\n  font-size: var(--font-size-7);\n}\n\nz-pagination .go-to-page {\n  display: flex;\n  flex-direction: column;\n}\n\nz-pagination .go-to-page .inputs {\n  display: flex;\n  column-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .inputs z-input {\n  width: calc(var(--space-unit) * 11);\n}\n\nz-pagination .go-to-page .inputs z-input input,\nz-pagination .mobile-go-to-page z-input input {\n  padding: 0 calc(var(--space-unit) * 1.5) !important;\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page {\n  display: flex;\n  height: 100%;\n  flex: 1 auto;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--color-surface02);\n}\n\nz-pagination .mobile-go-to-page z-input {\n  width: var(--z-pagination--page-button-width);\n  margin-right: var(--space-unit);\n}\n\nz-pagination .mobile-go-to-page z-input input {\n  text-align: center;\n}\n\nz-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,\nz-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page > span {\n  font-size: var(--font-size-2);\n}\n\n@media (hover: hover) {\n  z-pagination .pagination-bar button:hover {\n    background-color: var(--z-pagination-background-color-hover);\n  }\n\n  z-pagination .pagination-bar .page-button:hover {\n    border-bottom-color: var(--color-hover-primary);\n    color: var(--color-hover-primary);\n  }\n}\n\n@media (min-width: 768px) {\n  z-pagination {\n    --z-pagination--page-button-width: 88px;\n\n    flex-direction: row;\n    align-items: flex-end;\n  }\n\n  z-pagination .pages-container {\n    max-width: var(--z-pagination--pages-container-max-width);\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n */\n@Component({\n  tag: \"z-pagination\",\n  styleUrl: \"styles.css\",\n})\nexport class ZPagination implements ComponentInterface {\n  @Element() host: HTMLZPaginationElement;\n\n  /** Pagination label placed before the bar. */\n  @Prop()\n  label?: string;\n\n  /** Enable navigation arrows. */\n  @Prop()\n  navArrows = true;\n\n  /** Total number of pages. Required. */\n  @Prop()\n  totalPages!: number;\n\n  /** Number of pages to skip. */\n  @Prop()\n  skip = 0;\n\n  /** Enable buttons to go to the first and last pages. */\n  @Prop()\n  edges = false;\n\n  /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n  @Prop()\n  split?: number;\n\n  /** Number of pages to show at a time. If not set, all pages will be shown. */\n  @Prop()\n  visiblePages?: number;\n\n  /** Current page. */\n  @Prop({mutable: true})\n  currentPage = 1;\n\n  /** Whether to show \"go to page\" feature. */\n  @Prop()\n  goToPage: boolean;\n\n  /**\n   * Internal visible pages variable.\n   * Needed to better handle conflicting props like `visiblePages` and `split`.\n   * This state will change based on props values and validation,\n   * keeping original `visiblePages` value intact.\n   */\n  @State()\n  private _visiblePages = this.visiblePages;\n\n  /** Used to hides/change some functionalities on smaller screen sizes */\n  @State()\n  isMobile = false;\n\n  /** Value of the go to page input */\n  @State()\n  goToPageValue = null;\n\n  /** Event emitted when the current page has changed. */\n  @Event()\n  pageChanged: EventEmitter;\n\n  /**\n   * Set the max width of the pages container.\n   */\n  @Watch(\"_visiblePages\")\n  setPagesContainerWidth(): void {\n    if (!this._visiblePages || this.split) {\n      this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n      return;\n    }\n\n    const pagesContainerStyle = window.getComputedStyle(this.host);\n    const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n    this.host.style.setProperty(\n      \"--z-pagination--pages-container-max-width\",\n      `calc(${pageButtonWidth} * ${this._visiblePages})`\n    );\n  }\n\n  /**\n   * Set visible pages.\n   * Ensure that the visible pages are always <= the total pages.\n   * If `visiblePages` isn't set, fallback to the total pages.\n   */\n  @Watch(\"visiblePages\")\n  setVisiblePages(): void {\n    this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n  }\n\n  /**\n   * On page changed.\n   * @emits pageChanged\n   */\n  @Watch(\"currentPage\")\n  onPageChanged(): void {\n    this.pageChanged.emit(this.currentPage);\n    this.scrollToPage();\n  }\n\n  /**\n   * On split changed.\n   * Empty `edges` value. The split feature wins over the pages chunks and edges.\n   */\n  @Watch(\"split\")\n  onSplitChanged(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n  }\n\n  /**\n   * Hide stuff on mobile.\n   */\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  onResize(): void {\n    this.setMobile();\n  }\n\n  /**\n   * Set functionalities according to screen size.\n   */\n  private setMobile(): void {\n    const mobileMediaQuery = \"screen and (max-width: 767px)\";\n    this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n  }\n\n  /**\n   * Get a list of pages chunks, each of `visiblePages` length.\n   * @returns {number[][]}\n   */\n  private getPagesChunks(): number[][] {\n    // array of numbers from 1 to `totalPages`\n    const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n    const chunks = [];\n    const chunksCount = Math.ceil(pages.length / this._visiblePages);\n    for (let index = 0; index < chunksCount; index++) {\n      chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n    }\n\n    return chunks;\n  }\n\n  /**\n   * Scroll to the left the chunk of pages containing the current page.\n   */\n  private scrollToPage(): void {\n    const container = this.host.querySelector(\".pages-container\") as HTMLElement;\n    const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n    const navBtn = this.host.querySelector(\".navigation-button\") as HTMLElement;\n\n    if (!pageBtn || !container) {\n      return;\n    }\n\n    const containerWidth = container.getBoundingClientRect().width;\n    const pageBtnWidth = pageBtn.getBoundingClientRect().width;\n    const navBtnWidth = navBtn?.getBoundingClientRect()?.width ?? 0;\n\n    container.scrollLeft = this.currentPage * pageBtnWidth - navBtnWidth - containerWidth / 2;\n  }\n\n  /**\n   * Select a page.\n   * Do validations on the passed value before assigning it to `currentPage`.\n   * @param {number} page Page number to set\n   */\n  private selectPage(page): void {\n    this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n  }\n\n  /**\n   * Render page number button.\n   * @param {number} page Page number to render\n   * @returns {HTMLButtonElement}\n   */\n  private renderPage(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"page-button\"\n        type=\"button\"\n        aria-current={this.currentPage === page ? \"page\" : \"false\"}\n        title={`Vai alla pagina ${page}`}\n        data-page={page}\n        data-current={this.currentPage === page}\n        onClick={() => this.selectPage(page)}\n      >\n        {page}\n      </button>\n    );\n  }\n\n  /**\n   * Render split button.\n   * @param {number} page Page to select on click.\n   * @returns {HTMLButtonElement}\n   */\n  private renderEllipsisButton(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"ellipsis-button\"\n        type=\"button\"\n        title={`Vai alla pagina ${page}`}\n        onClick={() => this.selectPage(page)}\n      >\n        …\n      </button>\n    );\n  }\n\n  /**\n   * Render chunked page buttons.\n   * @returns {HTMLDivElement[]}\n   */\n  private renderPages(): HTMLDivElement[] {\n    const pagesChunks = this.getPagesChunks();\n    if (pagesChunks.length <= 0) {\n      return;\n    }\n\n    return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n  }\n\n  /**\n   * Render page buttons when split feature is enabled.\n   * @returns {HTMLButtonElement[]}\n   */\n  private renderSplitPages(): HTMLButtonElement[] {\n    // left and right split pages, current page, first and last page, left and right ellipsis button\n    if (this.totalPages <= this.split * 2 + 5) {\n      // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n      return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n    }\n\n    if (this.currentPage <= this.split * 2 + 2) {\n      // Render first (2 * split + 3) pages, ellipsis, then last page.\n      return [\n        ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n        this.renderEllipsisButton(this.split * 2 + 4),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n      // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n      return [\n        this.renderPage(1),\n        this.renderEllipsisButton(this.currentPage - this.split - 1),\n        ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n        this.renderEllipsisButton(this.currentPage + this.split + 1),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    // Render first page, ellipsis, then last (2 * split + 3) pages.\n    return [\n      this.renderPage(1),\n      this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n      ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n    ];\n  }\n\n  private renderBackButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        aria-label=\"Vai alla pagina precedente\"\n        title=\"Vai alla pagina precedente\"\n        disabled={this.currentPage === 1}\n        onClick={() => this.selectPage(this.currentPage - 1)}\n      >\n        <z-icon name=\"chevron-left\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderForwardButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        aria-label=\"Vai alla prossima pagina\"\n        title=\"Vai alla prossima pagina\"\n        disabled={this.currentPage === this.totalPages}\n        onClick={() => this.selectPage(this.currentPage + 1)}\n      >\n        <z-icon name=\"chevron-right\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderMobile(): HTMLElement[] {\n    const pagesChunks = this.getPagesChunks();\n\n    return [\n      this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n      <div class=\"pagination-bar\">\n        {this.renderBackButton()}\n\n        {!this.goToPage && (\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {pagesChunks.length > 0 &&\n              pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n          </div>\n        )}\n\n        {this.goToPage && (\n          <form\n            class=\"mobile-go-to-page\"\n            onSubmit={(ev) => {\n              ev.preventDefault();\n              this.selectPage(this.goToPageValue);\n            }}\n          >\n            <z-input\n              class=\"go-to-page-input\"\n              type={InputType.NUMBER}\n              min={1}\n              max={this.totalPages}\n              message={false}\n              onInput={(ev: InputEvent) => {\n                this.goToPageValue = (ev.target as HTMLZInputElement).value;\n              }}\n              placeholder={this.currentPage.toString()}\n              hasclearicon={false}\n            ></z-input>\n            <span>{`/${this.totalPages}`}</span>\n          </form>\n        )}\n\n        {this.renderForwardButton()}\n      </div>,\n    ];\n  }\n\n  componentDidLoad(): void {\n    this.setVisiblePages();\n  }\n\n  componentDidRender(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n\n    this.setPagesContainerWidth();\n    this.setMobile();\n    this.scrollToPage();\n  }\n\n  render(): HTMLZPaginationElement {\n    if (this.isMobile) {\n      return <Host>{this.renderMobile()}</Host>;\n    }\n\n    return (\n      <Host>\n        <div class=\"pagination-bar\">\n          {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title=\"Vai alla pagina 1\"\n              disabled={this.currentPage === 1}\n              onClick={() => this.selectPage(1)}\n            >\n              Pagina 1\n            </button>\n          )}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage - this.skip}`}\n              disabled={this.currentPage <= this.skip}\n              onClick={() => this.selectPage(this.currentPage - this.skip)}\n            >\n              -{this.skip}\n            </button>\n          )}\n\n          {this.navArrows && this.renderBackButton()}\n\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {this.split ? this.renderSplitPages() : this.renderPages()}\n          </div>\n\n          {this.navArrows && this.renderForwardButton()}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage + this.skip}`}\n              disabled={this.currentPage > this.totalPages - this.skip}\n              onClick={() => this.selectPage(this.currentPage + this.skip)}\n            >\n              +{this.skip}\n            </button>\n          )}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.totalPages}`}\n              disabled={this.currentPage === this.totalPages}\n              onClick={() => this.selectPage(this.totalPages)}\n            >\n              Pagina {this.totalPages}\n            </button>\n          )}\n        </div>\n        {this.goToPage && (\n          <div class=\"go-to-page\">\n            <span class=\"z-label body-5-sb\">Vai a pagina:</span>\n            <div class=\"inputs\">\n              <z-input\n                class=\"go-to-page-input\"\n                type={InputType.NUMBER}\n                min={1}\n                max={this.totalPages}\n                message={false}\n                placeholder=\"2\"\n                hasclearicon={false}\n                onInput={(ev: InputEvent) => {\n                  this.goToPageValue = (ev.target as HTMLZInputElement).value;\n                }}\n                onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n              ></z-input>\n              <z-button\n                disabled={!this.goToPageValue}\n                title=\"Vai alla pagina inserita\"\n                onClick={() => this.selectPage(this.goToPageValue)}\n              >\n                vai\n              </z-button>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}