@zanichelli/albe-web-components 6.6.10-test → 6.8.0

package/dist/collection/components/file-upload/z-file/index.js

@@ -0,0 +1,131 @@
+import { h, Host } from "@stencil/core";
+import { PopoverPosition, ZChipType } from "../../../beans";
+import { tabletBreakpoint } from "../../../constants/breakpoints";
+export class ZFile {
+  constructor() {
+    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 > 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 (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+  }
+  static get is() { return "z-file"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "fileNumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "File chip id"
+        },
+        "attribute": "file-number",
+        "reflect": false
+      },
+      "fileName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "File name"
+        },
+        "attribute": "file-name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "allowPopover": {},
+      "popoverVisible": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "removeFile",
+        "name": "removeFile",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a z-file component is removed from the DOM"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "mouseover",
+        "method": "onMouseOver",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseleave",
+        "method": "onMouseLeave",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "interactiveIconClick",
+        "method": "onInteractiveIconClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/file-upload/z-file/styles.css

@@ -0,0 +1,23 @@
+:host {
+  position: relative;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > z-popover {
+  z-index: 10;
+}
+
+:host > z-popover > .tooltip-content {
+  white-space: nowrap;
+}
+
+:host > z-chip span {
+  display: block;
+  overflow: hidden;
+  max-width: 250px;
+  letter-spacing: 0.32px;
+  line-height: 1.33;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -0,0 +1,363 @@
+import { h, Host } from "@stencil/core";
+import { Device, DividerSize, ZFileUploadType } from "../../../beans";
+import { getDevice } from "../../../utils/utils";
+export class ZFileUpload {
+  constructor() {
+    /** Prop indicating the file upload type - can be default or dragdrop */
+    this.type = 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 (getDevice() !== Device.DESKTOP) {
+      return 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() === 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 (h("z-heading", { id: "title", variant: "semibold", level: 2 }, this.mainTitle));
+  }
+  renderDescription(variant, level) {
+    return (h("z-body", { variant: variant, level: level }, 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 h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null);
+  }
+  renderFileSection() {
+    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM })));
+  }
+  renderInput() {
+    return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
+  }
+  renderUploadButton() {
+    return [
+      this.renderInput(),
+      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(),
+      h("z-body", { class: "upload-link-text", variant: "regular", level: 1 }, "Trascinalo qui o", " ", h("z-body", { tabIndex: 0, class: "upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
+          if (e.code == "Space" || e.code == "Enter") {
+            e.preventDefault();
+            this.input.click();
+          }
+        }, variant: "semibold", level: 1, ref: (val) => (this.uploadLink = val) }, "caricalo"), " ", "dal tuo computer"),
+    ];
+  }
+  renderDefaultMode() {
+    return [
+      this.renderDescription("semibold", 3),
+      this.renderAllowedFileExtensions(),
+      this.renderFileSection(),
+      this.renderUploadButton(),
+    ];
+  }
+  renderDragDropMode() {
+    return [
+      this.renderFileSection(),
+      h("z-dragdrop-area", null, h("div", { class: "text-container" }, this.renderDescription("regular", 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 (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
+      return (h("z-body", { variant: "regular", level: 3 }, this.formatErrorString(key, value)));
+    })))));
+  }
+  render() {
+    return (h(Host, null, h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+  }
+  static get is() { return "z-file-upload"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ZFileUploadType",
+          "resolved": "ZFileUploadType.DEFAULT | ZFileUploadType.DRAGDROP",
+          "references": {
+            "ZFileUploadType": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop indicating the file upload type - can be default or dragdrop"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "ZFileUploadType.DEFAULT"
+      },
+      "buttonVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonVariant",
+          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
+          "references": {
+            "ButtonVariant": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Prop indicating the button variant"
+        },
+        "attribute": "button-variant",
+        "reflect": false
+      },
+      "acceptedFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\""
+        },
+        "attribute": "accepted-format",
+        "reflect": false
+      },
+      "fileMaxSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Max file dimension in Megabyte"
+        },
+        "attribute": "file-max-size",
+        "reflect": false
+      },
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Title"
+        },
+        "attribute": "main-title",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Description"
+        },
+        "attribute": "description",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "files": {},
+      "invalidFiles": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "fileInput",
+        "name": "fileInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user select one or more files"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getFiles": {
+        "complexType": {
+          "signature": "() => Promise<File[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "File": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<File[]>"
+        },
+        "docs": {
+          "text": "get array of uploaded files",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "removeFile",
+        "method": "removeFileListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "fileDropped",
+        "method": "fileDroppedListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/file-upload/z-file-upload/styles.css

@@ -0,0 +1,84 @@
+: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 z-body {
+  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 > z-heading {
+  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;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > .container > z-button {
+    align-self: flex-start;
+  }
+}