@zanichelli/albe-web-components 12.1.1 → 12.1.3-rc

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

@@ -1,131 +0,0 @@
-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

@@ -1,23 +0,0 @@
-: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

@@ -1,363 +0,0 @@
-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 && getDevice() !== Device.DESKTOP_WIDE) {
-      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("h2", { class: "heading-2-sb", id: "title" }, this.mainTitle));
-  }
-  renderDescription(cssClass) {
-    return 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 h("span", { class: "body-3" }, fileFormatString || fileWeightString ? finalString : null);
-  }
-  renderFileSection() {
-    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("h4", { class: "heading-4-sb" }, "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("span", { class: "body-1 upload-link-text" }, "Trascinalo qui o", " ", 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(),
-      h("z-dragdrop-area", null, 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 (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
-      return h("span", { class: "body-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.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

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