@zanichelli/albe-web-components 2.40.1 → 2.42.0

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

@@ -0,0 +1,329 @@
+import { Component, Prop, h, Event, State, Listen, Element, } from "@stencil/core";
+import { DeviceEnum, DividerSize, ZFileUploadTypeEnum, } from "../../../beans";
+import { getDevice } from "../../../utils/utils";
+export class ZFileUpload {
+  constructor() {
+    /** Prop indicating the file upload type - can be default or dragdrop */
+    this.type = ZFileUploadTypeEnum.default;
+    /** Number of files added by the user */
+    this.filesNumber = 0;
+    this.inputAttributes = {
+      type: "file",
+      id: "fileElem",
+      multiple: true,
+    };
+  }
+  /** Listen removeFile event sent from z-file component */
+  removeFileListener() {
+    this.filesNumber--;
+  }
+  /** 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();
+    if (this.type === ZFileUploadTypeEnum.dragdrop &&
+      getDevice() !== DeviceEnum.desktop)
+      this.type = ZFileUploadTypeEnum.default;
+  }
+  fileInputHandler() {
+    if (this.input.files.length) {
+      this.invalidFiles = this.checkFiles(Array.from(this.input.files));
+    }
+  }
+  handleAccessibility() {
+    if (this.filesNumber > 0) {
+      this.el.querySelector('z-file:last-child > z-chip').shadowRoot.querySelector('button').focus();
+    }
+    else {
+      this.type === ZFileUploadTypeEnum.default ? this.button.shadowRoot.querySelector('button').focus() : this.uploadLink.focus();
+    }
+  }
+  checkFiles(files) {
+    let 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) {
+        this.fileInput.emit(file);
+        this.filesNumber++;
+        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 (this.filesNumber > 0 && (h("section", { class: "files-container" },
+      h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"),
+      h("div", { class: "files" },
+        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: "modalWrapper" },
+        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("div", { tabIndex: 0, class: `container ${this.type}` },
+        this.renderTitle(),
+        this.type == ZFileUploadTypeEnum.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 "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "ZFileUploadTypeEnum",
+        "resolved": "ZFileUploadTypeEnum.default | ZFileUploadTypeEnum.dragdrop",
+        "references": {
+          "ZFileUploadTypeEnum": {
+            "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": "ZFileUploadTypeEnum.default"
+    },
+    "buttonVariant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonVariantEnum",
+        "resolved": "ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary | typeof ButtonVariantEnum[\"dark-bg\"]",
+        "references": {
+          "ButtonVariantEnum": {
+            "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 {
+    "filesNumber": {},
+    "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 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,87 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  color: var(--color-text01);
+}
+
+:host > .container {
+  display: flex;
+  flex-direction: column;
+}
+
+:host .modalWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:host .modalWrapper > .files {
+  margin: calc(var(--space-unit) * 4);
+  display: flex;
+  flex-direction: column;
+  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#fileElem {
+  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 > z-heading {
+  display: inline-block;
+  margin: calc(var(--space-unit) * 3) 0;
+}
+
+:host > .container > .files-container > .files {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: calc(var(--space-unit) * 2);
+  column-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;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/components/navigation/z-menu/index.js

@@ -142,8 +142,8 @@ export class ZMenu {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
       },
@@ -163,8 +163,8 @@ export class ZMenu {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "The opening state of the menu."
       },

package/dist/collection/components/notification/z-tooltip/index.js

@@ -275,8 +275,8 @@ export class ZTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": undefined
           }],
         "text": "Content text."
       },

package/dist/collection/utils/utils.js

@@ -69,7 +69,7 @@ export function convertJson(data) {
     return false;
   }
 }
-const prefix = 'avatar-C'; // prefix for color vars name
+const prefix = "avatar-C"; // prefix for color vars name
 const colorsCount = 19; // available colors
 export function colorFromId(id) {
   const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
@@ -78,5 +78,5 @@ export function colorFromId(id) {
   // es.: 3895229
   if (color === 0)
     color = 1;
-  return `${prefix}${color.toString().padStart(2, '0')}`;
+  return `${prefix}${color.toString().padStart(2, "0")}`;
 }