@zanichelli/albe-web-components 2.41.1 → 2.42.0

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

@@ -0,0 +1,109 @@
+import { Component, h, Event, Element, Host, State, Listen, Prop, } from "@stencil/core";
+import { DeviceEnum, TooltipPosition, ZChipType } from "../../../beans";
+import { tabletBreakpoint } from "../../../constants/breakpoints";
+import { getDevice } from "../../../utils/utils";
+import './index';
+export class ZFile {
+  constructor() {
+    this.allowTooltip = false;
+    this.tooltipVisible = false;
+  }
+  removeFileHandler() {
+    this.removeFile.emit();
+    this.el.remove();
+  }
+  onMouseOver() {
+    this.tooltipVisible = true;
+  }
+  onMouseLeave() {
+    this.tooltipVisible = false;
+  }
+  componentDidLoad() {
+    var _a, _b;
+    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint)
+      this.allowTooltip = 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.allowTooltip && (h("z-tooltip", { open: this.tooltipVisible, type: TooltipPosition.AUTO, "bind-to": `#chip-${this.fileNumber}` },
+        h("span", { class: "body-5 tootip-content" }, this.ellipsis.innerText))),
+      h("z-chip", { id: `chip-${this.fileNumber}`, filter: true, type: ZChipType.default },
+        h("div", { class: "chip-content" },
+          h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1, class: {
+              "body-3-sb": getDevice() == DeviceEnum.desktop,
+              "body-2-sb": getDevice() !== DeviceEnum.desktop,
+            } },
+            h("slot", null)),
+          h("z-icon", { "aria-label": "Elimina file", tabIndex: 0, onClick: () => this.removeFileHandler(), onKeyPress: (e) => {
+              if (e.code == "Space" || e.code == "Enter") {
+                e.preventDefault();
+                this.removeFileHandler();
+              }
+            }, name: "multiply-circled", height: getDevice() !== DeviceEnum.desktop ? 20 : 15, width: getDevice() !== DeviceEnum.desktop ? 20 : 15, ref: (val) => (this.icon = val) })))));
+  }
+  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": ""
+      },
+      "attribute": "file-number",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "allowTooltip": {},
+    "tooltipVisible": {}
+  }; }
+  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
+    }]; }
+}

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

@@ -0,0 +1,61 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  position: relative;
+}
+
+:host .chip-content {
+  display: flex;
+  align-items: center;
+}
+
+:host > z-tooltip {
+  z-index: 10;
+}
+
+:host > z-tooltip > .tootip-content {
+  white-space: nowrap;
+}
+
+:host > z-chip > .chip-content > span {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 1.33;
+  letter-spacing: 0.32px;
+}
+
+:host > z-chip > .chip-content > span.regular {
+  font-weight: var(--font-rg);
+}
+
+:host > z-chip > .chip-content > span.bold {
+  font-weight: var(--font-sb);
+}
+
+:host .chip-content > z-icon:last-child {
+  margin-left: var(--space-unit);
+  cursor: pointer;
+  fill: var(--color-icon01);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host {
+    border-radius: 16px;
+  }
+
+  :host > z-chip > .chip-content > span {
+    font-size: 12px;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

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/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")}`;
 }

package/dist/esm/{index-1877eca4.js → index-90e18641.js}

@@ -1169,6 +1169,9 @@ const postUpdateComponent = (hostRef) => {
         }
     }
     else {
+        {
+            safeCall(instance, 'componentDidUpdate');
+        }
         endPostUpdate();
     }
     {

package/dist/esm/{index-672bd95c.js → index-cda2110a.js}

@@ -268,10 +268,15 @@ var OffCanvasVariantsEnum;
   OffCanvasVariantsEnum["overlay"] = "overlay";
   OffCanvasVariantsEnum["pushcontent"] = "pushcontent";
 })(OffCanvasVariantsEnum || (OffCanvasVariantsEnum = {}));
+var ZFileUploadTypeEnum;
+(function (ZFileUploadTypeEnum) {
+  ZFileUploadTypeEnum["default"] = "default";
+  ZFileUploadTypeEnum["dragdrop"] = "dragdrop";
+})(ZFileUploadTypeEnum || (ZFileUploadTypeEnum = {}));
 var ZChipType;
 (function (ZChipType) {
   ZChipType["default"] = "default";
   ZChipType["mini"] = "mini";
 })(ZChipType || (ZChipType = {}));
 
-export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardKeys as K, LicenseTypeEnum as L, NotificationType as N, OffCanvasVariantsEnum as O, PopoverPosition as P, StatusTagStatus as S, ThemeVariant as T, ZAriaAlertMode as Z, DividerOrientation as a, ButtonVariantEnum as b, ButtonSizeEnum as c, DividerSize as d, TransitionDirectionEnum as e, ZChipType as f, PocketStatusEnum as g, InputStatusEnum as h, AlertTypesEnum as i, TooltipPosition as j, keybordKeyCodeEnum as k, TabOrientationEnum as l, TabSizeEnum as m, ZTableRowExpandedType as n, ToastNotificationTransitionsEnum as o, ToastNotificationPositionsEnum as p, ZtoggleSwitchPositionEnum as q, ListSize as r, ListDividerType as s, ExpandableListStyle as t, Size as u, SortDirectionEnum as v, PopoverBorderRadius as w, PopoverShadow as x };
+export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardKeys as K, LicenseTypeEnum as L, NotificationType as N, OffCanvasVariantsEnum as O, PopoverPosition as P, StatusTagStatus as S, ThemeVariant as T, ZAriaAlertMode as Z, DividerOrientation as a, ButtonVariantEnum as b, ButtonSizeEnum as c, DividerSize as d, TransitionDirectionEnum as e, ZChipType as f, TooltipPosition as g, ZFileUploadTypeEnum as h, PocketStatusEnum as i, InputStatusEnum as j, keybordKeyCodeEnum as k, AlertTypesEnum as l, TabOrientationEnum as m, TabSizeEnum as n, ZTableRowExpandedType as o, ToastNotificationTransitionsEnum as p, ToastNotificationPositionsEnum as q, ZtoggleSwitchPositionEnum as r, ListSize as s, ListDividerType as t, ExpandableListStyle as u, Size as v, SortDirectionEnum as w, PopoverBorderRadius as x, PopoverShadow as y };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { c as colorFromId } from './utils-c01fe130.js';
-import './index-672bd95c.js';
+import { c as colorFromId } from './utils-436360f5.js';
+import './index-cda2110a.js';
 import './breakpoints-c386984e.js';
 
 const Utils = {