@zanichelli/albe-web-components 7.3.2 → 7.3.4

package/dist/cjs/z-file-upload.cjs.entry.js

@@ -3,183 +3,183 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-7a9a8430.js');
-const utils = require('./utils-305151da.js');
-require('./breakpoints-88c4fd6c.js');
+const index$1 = require('./index-677bbad4.js');
+const utils = require('./utils-3b7e4fdf.js');
+require('./breakpoints-776c8868.js');
 
 const stylesCss = ":host{color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin-bottom:var(--space-unit)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}}";
 
-const ZFileUpload = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.fileInput = index.createEvent(this, "fileInput", 7);
-    /** Prop indicating the file upload type - can be default or dragdrop */
-    this.type = index$1.ZFileUploadType.DEFAULT;
-    /** Files added by the user */
-    this.files = [];
-    this.inputAttributes = {
-      type: "file",
-      id: "file-elem",
-      multiple: true,
-    };
-  }
-  /** Listen removeFile event sent from z-file component */
-  removeFileListener(e) {
-    const files = this.files;
-    const file = files.find((file) => file.name === e.detail.fileName);
-    if (file) {
-      const index = files.indexOf(file);
-      if (index >= 0) {
-        files.splice(index, 1);
-        this.files = [...files];
-      }
-    }
-  }
-  /** Listen fileDropped event sent from z-dragdrop-area component */
-  fileDroppedListener(e) {
-    this.input.files = e.detail;
-    this.fileInputHandler();
-  }
-  componentDidUpdate() {
-    this.handleAccessibility();
-    this.invalidFiles.size && this.errorModal.focus();
-  }
-  componentWillLoad() {
-    this.invalidFiles = new Map();
-  }
-  fileInputHandler() {
-    if (this.input.files.length) {
-      this.invalidFiles = this.checkFiles(Array.from(this.input.files));
-    }
-  }
-  /** get array of uploaded files */
-  async getFiles() {
-    return this.files;
-  }
-  getType() {
-    if (utils.getDevice() !== index$1.Device.DESKTOP) {
-      return index$1.ZFileUploadType.DEFAULT;
-    }
-    return this.type;
-  }
-  handleAccessibility() {
-    const lastFile = this.el.querySelector("z-file:last-child z-chip button");
-    if (this.files.length > 0 && lastFile) {
-      lastFile.focus();
-    }
-    else {
-      this.getType() === index$1.ZFileUploadType.DEFAULT
-        ? this.button.querySelector("button").focus()
-        : this.uploadLink.focus();
-    }
-  }
-  checkFiles(files) {
-    const errors = new Map();
-    const sizeErrorString = `supera i ${this.fileMaxSize}MB`;
-    const formatErrorString = " ha un'estensione non prevista";
-    files.forEach((file) => {
-      const fileSize = file.size / 1024 / 1024;
-      const fileFormatOk = this.acceptedFormat
-        .split(",")
-        .some((ext) => file.name.toLowerCase().endsWith(ext.trim()));
-      const fileSizeOk = fileSize <= this.fileMaxSize;
-      if (fileSizeOk && fileFormatOk) {
-        if (!this.files.find((f) => f.name === file.name)) {
-          this.files.push(file);
-          this.fileInput.emit(file);
-          this.input.value = "";
-        }
-        return;
-      }
-      errors.set(file.name, []);
-      if (!fileSizeOk) {
-        errors.get(file.name).push(sizeErrorString);
-      }
-      if (!fileFormatOk) {
-        errors.get(file.name).push(formatErrorString);
-      }
-    });
-    return errors;
-  }
-  renderTitle() {
-    return (index.h("h2", { class: "heading-2-sb", id: "title" }, this.mainTitle));
-  }
-  renderDescription(cssClass) {
-    return index.h("span", { class: cssClass }, this.description);
-  }
-  renderAllowedFileExtensions() {
-    let fileFormatString = "";
-    let fileWeightString = "";
-    if (this.acceptedFormat) {
-      const fileFormat = this.acceptedFormat
-        .split(", ")
-        .map((string) => string.substring(1).toUpperCase())
-        .join(", ");
-      fileFormatString = ` nei formati ${fileFormat}`;
-    }
-    if (this.fileMaxSize) {
-      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
-    }
-    const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
-    return index.h("span", { class: "body-3" }, fileFormatString || fileWeightString ? finalString : null);
-  }
-  renderFileSection() {
-    return (index.h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, index.h("h4", { class: "heading-4-sb" }, "File appena caricati"), index.h("div", { class: "files-wrapper" }, index.h("slot", { name: "files" })), index.h("z-divider", { size: index$1.DividerSize.MEDIUM })));
-  }
-  renderInput() {
-    return (index.h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
-  }
-  renderUploadButton() {
-    return [
-      this.renderInput(),
-      index.h("z-button", { onClick: () => this.input.click(), onKeyPress: (e) => {
-          if (e.code == "Space" || e.code == "Enter") {
-            e.preventDefault();
-            this.input.click();
-          }
-        }, id: "fileSelect", variant: this.buttonVariant, icon: "upload", ref: (val) => (this.button = val) }, "Allega"),
-    ];
-  }
-  renderUploadLink() {
-    return [
-      this.renderInput(),
-      index.h("span", { class: "body-1 upload-link-text" }, "Trascinalo qui o", " ", index.h("span", { tabIndex: 0, class: "body-1-sb upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
-          if (e.code == "Space" || e.code == "Enter") {
-            e.preventDefault();
-            this.input.click();
-          }
-        }, ref: (val) => (this.uploadLink = val) }, "caricalo"), " ", "dal tuo computer"),
-    ];
-  }
-  renderDefaultMode() {
-    return [
-      this.renderDescription("body-3-sb"),
-      this.renderAllowedFileExtensions(),
-      this.renderFileSection(),
-      this.renderUploadButton(),
-    ];
-  }
-  renderDragDropMode() {
-    return [
-      this.renderFileSection(),
-      index.h("z-dragdrop-area", null, index.h("div", { class: "text-container" }, this.renderDescription("body-1"), this.renderUploadLink(), this.renderAllowedFileExtensions())),
-    ];
-  }
-  formatErrorString(key, value) {
-    var _a, _b;
-    const bothErrors = value[0] && value[1] ? ", " : "";
-    return `Il file ${key} ${(_a = value[0]) !== null && _a !== void 0 ? _a : ""}${bothErrors} ${(_b = value[1]) !== null && _b !== void 0 ? _b : ""} e non può quindi essere caricato.`;
-  }
-  handleErrorModalContent() {
-    return (index.h("div", { slot: "modalContent" }, index.h("div", { class: "modal-wrapper" }, index.h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
-      return index.h("span", { class: "body-3" }, this.formatErrorString(key, value));
-    })))));
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == index$1.ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (index.h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
-  }
-  get el() { return index.getElement(this); }
-};
+const ZFileUpload = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fileInput = index.createEvent(this, "fileInput", 7);
+    /** Prop indicating the file upload type - can be default or dragdrop */
+    this.type = index$1.ZFileUploadType.DEFAULT;
+    /** Files added by the user */
+    this.files = [];
+    this.inputAttributes = {
+      type: "file",
+      id: "file-elem",
+      multiple: true,
+    };
+  }
+  /** Listen removeFile event sent from z-file component */
+  removeFileListener(e) {
+    const files = this.files;
+    const file = files.find((file) => file.name === e.detail.fileName);
+    if (file) {
+      const index = files.indexOf(file);
+      if (index >= 0) {
+        files.splice(index, 1);
+        this.files = [...files];
+      }
+    }
+  }
+  /** Listen fileDropped event sent from z-dragdrop-area component */
+  fileDroppedListener(e) {
+    this.input.files = e.detail;
+    this.fileInputHandler();
+  }
+  componentDidUpdate() {
+    this.handleAccessibility();
+    this.invalidFiles.size && this.errorModal.focus();
+  }
+  componentWillLoad() {
+    this.invalidFiles = new Map();
+  }
+  fileInputHandler() {
+    if (this.input.files.length) {
+      this.invalidFiles = this.checkFiles(Array.from(this.input.files));
+    }
+  }
+  /** get array of uploaded files */
+  async getFiles() {
+    return this.files;
+  }
+  getType() {
+    if (utils.getDevice() !== index$1.Device.DESKTOP) {
+      return index$1.ZFileUploadType.DEFAULT;
+    }
+    return this.type;
+  }
+  handleAccessibility() {
+    const lastFile = this.el.querySelector("z-file:last-child z-chip button");
+    if (this.files.length > 0 && lastFile) {
+      lastFile.focus();
+    }
+    else {
+      this.getType() === index$1.ZFileUploadType.DEFAULT
+        ? this.button.querySelector("button").focus()
+        : this.uploadLink.focus();
+    }
+  }
+  checkFiles(files) {
+    const errors = new Map();
+    const sizeErrorString = `supera i ${this.fileMaxSize}MB`;
+    const formatErrorString = " ha un'estensione non prevista";
+    files.forEach((file) => {
+      const fileSize = file.size / 1024 / 1024;
+      const fileFormatOk = this.acceptedFormat
+        .split(",")
+        .some((ext) => file.name.toLowerCase().endsWith(ext.trim()));
+      const fileSizeOk = fileSize <= this.fileMaxSize;
+      if (fileSizeOk && fileFormatOk) {
+        if (!this.files.find((f) => f.name === file.name)) {
+          this.files.push(file);
+          this.fileInput.emit(file);
+          this.input.value = "";
+        }
+        return;
+      }
+      errors.set(file.name, []);
+      if (!fileSizeOk) {
+        errors.get(file.name).push(sizeErrorString);
+      }
+      if (!fileFormatOk) {
+        errors.get(file.name).push(formatErrorString);
+      }
+    });
+    return errors;
+  }
+  renderTitle() {
+    return (index.h("h2", { class: "heading-2-sb", id: "title" }, this.mainTitle));
+  }
+  renderDescription(cssClass) {
+    return index.h("span", { class: cssClass }, this.description);
+  }
+  renderAllowedFileExtensions() {
+    let fileFormatString = "";
+    let fileWeightString = "";
+    if (this.acceptedFormat) {
+      const fileFormat = this.acceptedFormat
+        .split(", ")
+        .map((string) => string.substring(1).toUpperCase())
+        .join(", ");
+      fileFormatString = ` nei formati ${fileFormat}`;
+    }
+    if (this.fileMaxSize) {
+      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
+    }
+    const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
+    return index.h("span", { class: "body-3" }, fileFormatString || fileWeightString ? finalString : null);
+  }
+  renderFileSection() {
+    return (index.h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, index.h("h4", { class: "heading-4-sb" }, "File appena caricati"), index.h("div", { class: "files-wrapper" }, index.h("slot", { name: "files" })), index.h("z-divider", { size: index$1.DividerSize.MEDIUM })));
+  }
+  renderInput() {
+    return (index.h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
+  }
+  renderUploadButton() {
+    return [
+      this.renderInput(),
+      index.h("z-button", { onClick: () => this.input.click(), onKeyPress: (e) => {
+          if (e.code == "Space" || e.code == "Enter") {
+            e.preventDefault();
+            this.input.click();
+          }
+        }, id: "fileSelect", variant: this.buttonVariant, icon: "upload", ref: (val) => (this.button = val) }, "Allega"),
+    ];
+  }
+  renderUploadLink() {
+    return [
+      this.renderInput(),
+      index.h("span", { class: "body-1 upload-link-text" }, "Trascinalo qui o", " ", index.h("span", { tabIndex: 0, class: "body-1-sb upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
+          if (e.code == "Space" || e.code == "Enter") {
+            e.preventDefault();
+            this.input.click();
+          }
+        }, ref: (val) => (this.uploadLink = val) }, "caricalo"), " ", "dal tuo computer"),
+    ];
+  }
+  renderDefaultMode() {
+    return [
+      this.renderDescription("body-3-sb"),
+      this.renderAllowedFileExtensions(),
+      this.renderFileSection(),
+      this.renderUploadButton(),
+    ];
+  }
+  renderDragDropMode() {
+    return [
+      this.renderFileSection(),
+      index.h("z-dragdrop-area", null, index.h("div", { class: "text-container" }, this.renderDescription("body-1"), this.renderUploadLink(), this.renderAllowedFileExtensions())),
+    ];
+  }
+  formatErrorString(key, value) {
+    var _a, _b;
+    const bothErrors = value[0] && value[1] ? ", " : "";
+    return `Il file ${key} ${(_a = value[0]) !== null && _a !== void 0 ? _a : ""}${bothErrors} ${(_b = value[1]) !== null && _b !== void 0 ? _b : ""} e non può quindi essere caricato.`;
+  }
+  handleErrorModalContent() {
+    return (index.h("div", { slot: "modalContent" }, index.h("div", { class: "modal-wrapper" }, index.h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
+      return index.h("span", { class: "body-3" }, this.formatErrorString(key, value));
+    })))));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == index$1.ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (index.h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+  }
+  get el() { return index.getElement(this); }
+};
 ZFileUpload.style = stylesCss;
 
 exports.z_file_upload = ZFileUpload;

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

@@ -3,46 +3,46 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-7a9a8430.js');
-const breakpoints = require('./breakpoints-88c4fd6c.js');
+const index$1 = require('./index-677bbad4.js');
+const breakpoints = require('./breakpoints-776c8868.js');
 
 const stylesCss = ".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";
 
-const ZFile = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.removeFile = index.createEvent(this, "removeFile", 7);
-    this.allowPopover = false;
-    this.popoverVisible = false;
-  }
-  removeFileHandler() {
-    this.removeFile.emit({ fileName: this.fileName });
-    this.el.remove();
-  }
-  onMouseOver() {
-    this.popoverVisible = true;
-  }
-  onMouseLeave() {
-    this.popoverVisible = false;
-  }
-  onInteractiveIconClick() {
-    this.removeFileHandler();
-  }
-  componentDidLoad() {
-    var _a, _b;
-    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint) {
-      this.allowPopover = true;
-    }
-    (_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-  }
-  elementHasEllipsis() {
-    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
-  }
-  render() {
-    return (index.h(index.Host, null, this.allowPopover && (index.h("z-popover", { open: this.popoverVisible, position: index$1.PopoverPosition.AUTO, bindTo: this.chip }, index.h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: index$1.ZChipType.DEFAULT }, index.h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
-  }
-  get el() { return index.getElement(this); }
-};
+const ZFile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.removeFile = index.createEvent(this, "removeFile", 7);
+    this.allowPopover = false;
+    this.popoverVisible = false;
+  }
+  removeFileHandler() {
+    this.removeFile.emit({ fileName: this.fileName });
+    this.el.remove();
+  }
+  onMouseOver() {
+    this.popoverVisible = true;
+  }
+  onMouseLeave() {
+    this.popoverVisible = false;
+  }
+  onInteractiveIconClick() {
+    this.removeFileHandler();
+  }
+  componentDidLoad() {
+    var _a, _b;
+    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint) {
+      this.allowPopover = true;
+    }
+    (_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  elementHasEllipsis() {
+    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+  }
+  render() {
+    return (index.h(index.Host, null, this.allowPopover && (index.h("z-popover", { open: this.popoverVisible, position: index$1.PopoverPosition.AUTO, bindTo: this.chip }, index.h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: index$1.ZChipType.DEFAULT }, index.h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+  }
+  get el() { return index.getElement(this); }
+};
 ZFile.style = stylesCss;
 
 exports.z_file = ZFile;

package/dist/cjs/z-ghost-loading.cjs.entry.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--bg-neutral-100);border-radius:4px;transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\n    90deg,\n    var(--bg-neutral-100) 0%,\n    var(--bg-neutral-150) 95%,\n    var(--bg-neutral-100) 100%\n  );box-shadow:#e8ebee20 0 0 1px;content:\" \"}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
+const stylesCss = ":host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--bg-neutral-100);border-radius:4px;transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\r\n    90deg,\r\n    var(--bg-neutral-100) 0%,\r\n    var(--bg-neutral-150) 95%,\r\n    var(--bg-neutral-100) 100%\r\n  );box-shadow:#e8ebee20 0 0 1px;content:\" \"}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
 
-const ZGhostLoading = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return index.h(index.Host, null);
-  }
-};
+const ZGhostLoading = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return index.h(index.Host, null);
+  }
+};
 ZGhostLoading.style = stylesCss;
 
 exports.z_ghost_loading = ZGhostLoading;

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

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const ZHeading = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Font weight variant */
-    this.variant = "regular";
-  }
-  render() {
-    return (index.h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, index.h("slot", null)));
-  }
+const ZHeading = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Font weight variant */
+    this.variant = "regular";
+  }
+  render() {
+    return (index.h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, index.h("slot", null)));
+  }
 };
 
 exports.z_heading = ZHeading;

package/dist/cjs/z-info-box.cjs.entry.js

@@ -6,20 +6,20 @@ const index = require('./index-e3299e0a.js');
 
 const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;padding:calc(var(--space-unit) * 2);background:var(--accent-lighter);border-radius:var(--border-radius)}:host>div>slot{color:var(--text-grey-800);font-size:14px}:host>div>z-icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--myz-blue)}";
 
-const ZInfoBox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.infoBoxClose = index.createEvent(this, "infoBoxClose", 7);
-    /** render close icon flag */
-    this.isclosable = true;
-  }
-  emitInfoBoxClose() {
-    this.infoBoxClose.emit({ boxid: this.boxid });
-  }
-  render() {
-    return (index.h("div", { id: this.boxid }, index.h("slot", { name: "content" }), this.isclosable && (index.h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
-  }
-};
+const ZInfoBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.infoBoxClose = index.createEvent(this, "infoBoxClose", 7);
+    /** render close icon flag */
+    this.isclosable = true;
+  }
+  emitInfoBoxClose() {
+    this.infoBoxClose.emit({ boxid: this.boxid });
+  }
+  render() {
+    return (index.h("div", { id: this.boxid }, index.h("slot", { name: "content" }), this.isclosable && (index.h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+  }
+};
 ZInfoBox.style = stylesCss;
 
 exports.z_info_box = ZInfoBox;

package/dist/cjs/z-info-reveal.cjs.entry.js

@@ -3,63 +3,63 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-7a9a8430.js');
+const index$1 = require('./index-677bbad4.js');
 
 const stylesCss = ":host{--z-info-reveal-theme--surface:var(--color-black);--z-info-reveal-theme--text:var(--color-white);--z-info-reveal-shadow:var(--shadow-2);--z-info-reveal-max-width:375px;position:relative;display:flex;width:fit-content;background-color:var(--z-info-reveal-theme--surface);color:var(--z-info-reveal-theme--text);font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}button{padding:0;border:none;background-color:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3);display:flex}.z-info-reveal-trigger{display:flex;width:fit-content;height:100%;align-items:center;padding:calc(var(--space-unit) / 2);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2)}:host([position=\"top_left\"]) .z-info-reveal-trigger,:host([position=\"bottom_left\"]) .z-info-reveal-trigger{flex-direction:row-reverse}:host([open]) .z-info-reveal-trigger{box-shadow:none}.info-box{position:absolute;display:flex;max-width:var(--z-info-reveal-max-width);padding:calc(var(--space-unit) / 2);background-color:var(--z-info-reveal-theme--surface);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2);cursor:pointer}:host([position=\"bottom_left\"]) .info-box,:host([position=\"bottom_right\"]) .info-box{bottom:0}:host([position=\"top_right\"]) .info-box,:host([position=\"bottom_right\"]) .info-box{right:0}:host([position=\"top_left\"]) .info-box,:host([position=\"bottom_left\"]) .info-box{left:0;flex-direction:row-reverse}::slotted(*){display:none;width:max-content}::slotted([data-current]){display:block}:host([position=\"top_left\"]) .z-info-reveal-close,:host([position=\"top_right\"]) .z-info-reveal-close{align-self:flex-start}:host([position=\"bottom_left\"]) .z-info-reveal-close,:host([position=\"bottom_right\"]) .z-info-reveal-close{align-self:flex-end}";
 
-const ZInfoReveal = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Name of the icon for the open button */
-    this.icon = "informationsource";
-    /** Info reveal's position */
-    this.position = index$1.InfoRevealPosition.BOTTOM_RIGHT;
-    /** Whether the info panel is open. */
-    this.open = false;
-    /** Current index for the info queue. */
-    this.currentIndex = null;
-  }
-  watchItems() {
-    Array.from(this.el.children).forEach((child, index) => {
-      if (this.currentIndex === index) {
-        child.setAttribute("data-current", "");
-      }
-      else {
-        child.removeAttribute("data-current");
-      }
-    });
-  }
-  /**
-   * Open the info box.
-   */
-  openInfoBox() {
-    this.currentIndex = 0;
-    this.open = true;
-  }
-  /**
-   * Close the info box.
-   */
-  closeInfoBox() {
-    this.open = false;
-  }
-  /**
-   * Navigate slotted info.
-   * It closes the info box after the last info has been navigated.
-   */
-  next() {
-    this.currentIndex = this.currentIndex + 1;
-    if (this.currentIndex === this.el.children.length) {
-      this.closeInfoBox();
-    }
-  }
-  render() {
-    return (index.h(index.Host, { open: this.open }, index.h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && index.h("span", { class: "z-info-reveal-label" }, this.label), index.h("z-icon", { name: this.icon })), this.open && (index.h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, index.h("slot", null), index.h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, index.h("z-icon", { name: "close" }))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "currentIndex": ["watchItems"]
-  }; }
-};
+const ZInfoReveal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Name of the icon for the open button */
+    this.icon = "informationsource";
+    /** Info reveal's position */
+    this.position = index$1.InfoRevealPosition.BOTTOM_RIGHT;
+    /** Whether the info panel is open. */
+    this.open = false;
+    /** Current index for the info queue. */
+    this.currentIndex = null;
+  }
+  watchItems() {
+    Array.from(this.el.children).forEach((child, index) => {
+      if (this.currentIndex === index) {
+        child.setAttribute("data-current", "");
+      }
+      else {
+        child.removeAttribute("data-current");
+      }
+    });
+  }
+  /**
+   * Open the info box.
+   */
+  openInfoBox() {
+    this.currentIndex = 0;
+    this.open = true;
+  }
+  /**
+   * Close the info box.
+   */
+  closeInfoBox() {
+    this.open = false;
+  }
+  /**
+   * Navigate slotted info.
+   * It closes the info box after the last info has been navigated.
+   */
+  next() {
+    this.currentIndex = this.currentIndex + 1;
+    if (this.currentIndex === this.el.children.length) {
+      this.closeInfoBox();
+    }
+  }
+  render() {
+    return (index.h(index.Host, { open: this.open }, index.h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && index.h("span", { class: "z-info-reveal-label" }, this.label), index.h("z-icon", { name: this.icon })), this.open && (index.h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, index.h("slot", null), index.h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, index.h("z-icon", { name: "close" }))))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "currentIndex": ["watchItems"]
+  }; }
+};
 ZInfoReveal.style = stylesCss;
 
 exports.z_info_reveal = ZInfoReveal;