@zanichelli/albe-web-components 2.38.0 → 2.40.0

package/dist/collection/components/buttons/z-toggle-switch/index.js

@@ -0,0 +1,136 @@
+import { Component, Prop, h, Event } from "@stencil/core";
+import { randomId } from "../../../utils/utils";
+import { ZtoggleSwitchPositionEnum, } from "../../../beans";
+export class ZToggleSwitch {
+  constructor() {
+    this.disabled = false;
+    this.labelPosition = ZtoggleSwitchPositionEnum.left;
+    this.checked = false;
+    this.htmlid = `id-${randomId()}`;
+  }
+  emitToggleClick(checked) {
+    this.toggleClick.emit({
+      id: this.htmlid,
+      checked: checked,
+    });
+  }
+  handleClick(ev) {
+    if (this.disabled)
+      return;
+    this.checked = ev.target.checked;
+    this.emitToggleClick(this.checked);
+  }
+  render() {
+    return [
+      h("input", { id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }),
+      h("label", { htmlFor: this.htmlid, class: this.labelPosition },
+        h("span", { class: this.labelPosition },
+          h("slot", null)),
+        h("span", { class: `container ${this.disabled && "disabled"} ${this.checked && "active"}` },
+          h("span", { class: `circle ${this.disabled && "disabled"} ${this.checked && "checked"}` }, this.checked && (h("z-icon", { width: 12, height: 12, name: "checkmark" }))))),
+    ];
+  }
+  static get is() { return "z-toggle-switch"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "labelPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ZtoggleSwitchPositionEnum",
+        "resolved": "ZtoggleSwitchPositionEnum.left | ZtoggleSwitchPositionEnum.right",
+        "references": {
+          "ZtoggleSwitchPositionEnum": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-position",
+      "reflect": true,
+      "defaultValue": "ZtoggleSwitchPositionEnum.left"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "htmlid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "htmlid",
+      "reflect": false,
+      "defaultValue": "`id-${randomId()}`"
+    }
+  }; }
+  static get events() { return [{
+      "method": "toggleClick",
+      "name": "toggleClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/buttons/z-toggle-switch/styles.css

@@ -0,0 +1,115 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  display: inline-flex;
+  position: relative;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+label.left {
+  margin: 0 var(--space-unit) 0 0;
+}
+
+label.right {
+  margin: 0 var(--space-unit) 0 0;
+  flex-direction: row-reverse;
+}
+
+label > span {
+  letter-spacing: 0;
+  color: var(--text-grey-800);
+}
+
+label > span.left {
+  margin-right: var(--space-unit);
+}
+
+label > span.right {
+  margin-left: var(--space-unit);
+}
+
+label > span.container {
+  display: flex;
+  align-items: center;
+}
+
+label > span.container {
+  height: 18px;
+  width: calc(var(--space-unit) * 4);
+  border-radius: var(--space-unit);
+  color: var(--gray500);
+  background-color: var(--gray500);
+  position: relative;
+  cursor: pointer;
+}
+
+label > span.container.disabled,
+label > span.container.active.disabled {
+  background-color: var(--bg-grey-200);
+  cursor: default;
+}
+
+label > span.container.active.disabled > span.circle.checked.disabled > z-icon {
+  fill: var(--gray200);
+}
+
+label > span.container.active {
+  background-color: var(--color-primary01);
+  fill: var(--color-primary01);
+}
+
+input:focus:focus-visible + label > span.container:not(.disabled) {
+  outline: none;
+  box-shadow: var(--shadow-focus-primary);
+}
+
+input:focus:focus-visible + label > span.container.disabled {
+  outline: none;
+}
+
+label > span.container:not(.disabled):hover {
+  background-color: var(--color-hover-primary);
+  fill: var(--color-hover-primary);
+}
+
+label > span.container > span.circle {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  height: calc(var(--space-unit) * 2);
+  width: calc(var(--space-unit) * 2);
+  border-radius: 7px;
+  background-color: var(--bg-white);
+  box-shadow: var(--shadow-2);
+  transition: transform 0.3s ease;
+}
+
+label > span.container > span.circle.checked {
+  transform: translateX(100%);
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

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

@@ -0,0 +1,52 @@
+import { Component, h, Event } from "@stencil/core";
+export class ZDragdropArea {
+  fileDroppedHandler(files) {
+    this.fileDropped.emit(files);
+  }
+  renderOnDragOverMessage() {
+    return (h("div", { class: "dragover-container" },
+      h("div", { class: "dragover-message" },
+        h("z-body", { variant: "semibold", level: 2 }, "Rilascia i file in questa area per allegarli."))));
+  }
+  render() {
+    return (h("div", { tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
+        console.log(e);
+        e.preventDefault();
+        this.dragDropContainer.classList.add("dragover");
+      }, onDragLeave: () => {
+        this.dragDropContainer.classList.remove("dragover");
+      }, onDragEnd: () => { }, onDrop: (e) => {
+        e.preventDefault();
+        if (e.dataTransfer.files.length) {
+          this.dragDropContainer.classList.remove("dragover");
+          this.fileDroppedHandler(e.dataTransfer.files);
+        }
+      } },
+      this.renderOnDragOverMessage(),
+      h("slot", null)));
+  }
+  static get is() { return "z-dragdrop-area"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get events() { return [{
+      "method": "fileDropped",
+      "name": "fileDropped",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when user drop one or more files"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,62 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  margin-top: calc(var(--space-unit) * 3);
+}
+
+:host > .dragdrop {
+  display: flex;
+  color: var(--color-text01);
+  flex-direction: column;
+  position: relative;
+  /* Native CSS properties don't support the customization of border-style. 
+  Therefore, we use a trick with an SVG image inside background-image property. 
+  The SVG features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap. 
+  Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have. */
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e");
+  border-radius: 2px;
+  border-color: var(--color-surface04);
+  height: 228px;
+  background-color: var(--color-surface02);
+}
+
+/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */
+:host > .dragdrop.dragover * {
+  pointer-events: none;
+}
+
+:host > .dragdrop .dragover-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  display: none;
+  background-color: var(--color-primary03);
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host > .dragdrop .dragover-container .dragover-message {
+  background-color: var(--color-link-primary);
+  color: var(--color-text04);
+  padding: 10px 28px;
+}
+
+:host > .dragdrop.dragover .dragover-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

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

@@ -0,0 +1,108 @@
+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";
+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": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "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) {
+}