@zanichelli/albe-web-components 2.33.1 → 2.33.3

package/dist/collection/snowflakes/registro-table/z-registro-table-empty-box/index.js

@@ -0,0 +1,69 @@
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+export class ZRegistroTableEmptyBox {
+  constructor() {
+    /** Sets main title message*/
+    this.message = "Siamo spiacenti, al momento non sono presenti dati da visualizzare.";
+    /** Sets message */
+    this.subtitle = "";
+  }
+  componentWillLoad() {
+    this.hasCta1Slot = !!this.hostElement.querySelector('[slot="cta1"]');
+    this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
+  }
+  render() {
+    return (h(Host, null,
+      h("z-body", { level: 3, variant: "semibold" }, this.message),
+      h("br", null),
+      !!this.subtitle && (h("z-body", { level: 4, variant: "regular" }, this.subtitle)),
+      (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: "cta" },
+        h("slot", { name: "cta1" }),
+        h("slot", { name: "cta2" })))));
+  }
+  static get is() { return "z-registro-table-empty-box"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "message": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets main title message"
+      },
+      "attribute": "message",
+      "reflect": false,
+      "defaultValue": "\"Siamo spiacenti, al momento non sono presenti dati da visualizzare.\""
+    },
+    "subtitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets message"
+      },
+      "attribute": "subtitle",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-empty-box/styles.css

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 7)
+    calc(var(--space-unit) * 3) calc(var(--space-unit) * 7);
+  background-color: var(--bg-white);
+}
+
+::slotted(*) {
+  margin-right: calc(var(--space-unit) * 2);
+  margin-top: var(--space-unit);
+}
+
+div.cta {
+  display: flex;
+  flex-direction: row;
+  margin-top: var(--space-unit);
+}
+
+/* Mobile */
+@media only screen and (max-width: 768px) {
+  div.cta {
+    flex-direction: column;
+  }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-expanded-row/index.js

@@ -0,0 +1,35 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZRegistroTableExpandedRow {
+  render() {
+    return (h("td", { colSpan: this.colSpan },
+      h("div", { class: "content-container" },
+        h("slot", null))));
+  }
+  static get is() { return "z-registro-table-expanded-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "colSpan": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number table column plus 1 for the expand button"
+      },
+      "attribute": "col-span",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-expanded-row/styles.css

@@ -0,0 +1,9 @@
+:host {
+  background-color: var(--gray50);
+  display: none;
+}
+
+:host > td > div.content-container {
+  box-shadow: var(--shadow-2);
+  margin-bottom: calc(var(--space-unit) / 2);
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-footer/index.js

@@ -0,0 +1,18 @@
+import { Component, Element, h } from "@stencil/core";
+export class ZRegistroTableFooter {
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "z-registro-table-footer"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-footer/styles.css

@@ -0,0 +1,5 @@
+:host {
+    display: table-footer-group;
+    font-family: var(--dashboard-font);
+    font-weight: var(--font-rg);
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-head/index.js

@@ -0,0 +1,18 @@
+import { Component, Element, h } from "@stencil/core";
+export class ZRegistroTableHead {
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "z-registro-table-head"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-head/styles.css

@@ -0,0 +1,5 @@
+:host {
+  display: table-header-group;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-header/index.js

@@ -0,0 +1,240 @@
+import { Component, Element, Event, h, Host, Listen, Prop, State, } from "@stencil/core";
+import classNames from "classnames";
+import { ButtonSizeEnum, ButtonVariantEnum, PopoverPosition, SortDirectionEnum, TableHeaderSize, } from "../../../beans";
+import { getElementTree } from "../../../utils/utils";
+export class ZRegistroTableHeader {
+  constructor() {
+    /** [Optional] Padding of the header */
+    this.size = TableHeaderSize["medium"];
+    /** [Optional] Default sort order */
+    this.defaultSortDirection = SortDirectionEnum.asc;
+    this.sortDirection = SortDirectionEnum.none;
+    this.isMenuOpened = false;
+    this.emitOnSort = this.emitOnSort.bind(this);
+  }
+  emitOnSort() {
+    this.sort.emit({
+      columnId: this.columnId,
+      sortDirection: this.sortDirection
+    });
+  }
+  handleSort() {
+    if (!this.sortable) {
+      return;
+    }
+    this.sortDirection = (() => {
+      switch (this.sortDirection) {
+        case (SortDirectionEnum.asc): return SortDirectionEnum.desc;
+        case (SortDirectionEnum.desc): return SortDirectionEnum.asc;
+        case (SortDirectionEnum.none): return this.defaultSortDirection;
+        default: return SortDirectionEnum.none;
+      }
+    })();
+    this.emitOnSort();
+  }
+  handleMenuClick() {
+    this.isMenuOpened = !this.isMenuOpened;
+  }
+  handleOutsideClick(e) {
+    const tree = getElementTree(e.target);
+    const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
+    if (!parent) {
+      this.isMenuOpened = false;
+    }
+  }
+  handleClickHeaders(e) {
+    const { target } = e;
+    const parent = getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-registro-table-header");
+    if (!this.sortable || !parent) {
+      return;
+    }
+    const parentColumnId = parent.attributes.getNamedItem("column-id").value;
+    const isSortable = target.parentNode.sortable || target.sortable;
+    if (parentColumnId !== this.columnId && isSortable) {
+      this.sortDirection = SortDirectionEnum.none;
+    }
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "columnheader");
+  }
+  render() {
+    return (h(Host, { class: classNames(`size-${this.size}`, {
+        sortable: this.sortable,
+      }), onClick: () => this.handleSort() },
+      h("div", { class: classNames("container") },
+        h("slot", null),
+        this.sortable && this.sortDirection !== SortDirectionEnum.none && (h("z-icon", { name: this.sortDirection === SortDirectionEnum.asc
+            ? "arrow-up"
+            : "arrow-down", class: "arrow" }))),
+      this.showButton && (h("div", { class: classNames("popover-container", {
+          visible: this.isMenuOpened,
+        }) },
+        h("z-popover", { position: PopoverPosition["below-center"], "background-color": "gray200" },
+          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
+          h("div", { slot: "popover" },
+            h("slot", { name: "contextual-menu" })))))));
+  }
+  static get is() { return "z-registro-table-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "columnId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Column ID"
+      },
+      "attribute": "column-id",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TableHeaderSize",
+        "resolved": "TableHeaderSize.large | TableHeaderSize.medium | TableHeaderSize.small | TableHeaderSize.special | typeof TableHeaderSize[\"x-small\"]",
+        "references": {
+          "TableHeaderSize": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[Optional] Padding of the header"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "TableHeaderSize[\"medium\"]"
+    },
+    "sortable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[Optional] Make the header sortable"
+      },
+      "attribute": "sortable",
+      "reflect": false
+    },
+    "showButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[Optional] Show contextual menu button"
+      },
+      "attribute": "show-button",
+      "reflect": false
+    },
+    "defaultSortDirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SortDirection",
+        "resolved": "SortDirectionEnum.asc | SortDirectionEnum.desc | SortDirectionEnum.none",
+        "references": {
+          "SortDirection": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[Optional] Default sort order"
+      },
+      "attribute": "default-sort-direction",
+      "reflect": false,
+      "defaultValue": "SortDirectionEnum.asc"
+    },
+    "sortDirection": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "SortDirection",
+        "resolved": "SortDirectionEnum.asc | SortDirectionEnum.desc | SortDirectionEnum.none",
+        "references": {
+          "SortDirection": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sort-direction",
+      "reflect": false,
+      "defaultValue": "SortDirectionEnum.none"
+    }
+  }; }
+  static get states() { return {
+    "isMenuOpened": {}
+  }; }
+  static get events() { return [{
+      "method": "sort",
+      "name": "sort",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "[Optional] callback for sorting"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleOutsideClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "handleClickHeaders",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }]; }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-header/styles.css

@@ -0,0 +1,67 @@
+:host {
+  display: table-cell;
+  background-color: var(--gray50);
+  border-bottom: var(--border-size-medium) solid var(--gray200);
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-sb);
+  text-align: start;
+  position: relative;
+}
+
+.container {
+  display: flex;
+  align-items: flex-end;
+}
+
+:host(.sortable) {
+  cursor: pointer;
+}
+
+/*
+Padding
+*/
+:host(.size-x-small) {
+  padding: calc(var(--space-unit) / 2);
+}
+
+:host(.size-small) {
+  padding: var(--space-unit);
+}
+
+:host(.size-medium) {
+  padding: calc(var(--space-unit) * 2);
+}
+
+:host(.size-large) {
+  padding: calc(var(--space-unit) * 3);
+}
+
+:host(.size-special) {
+  padding: 20px 40px;
+}
+
+/*
+Sorting arrow
+*/
+.arrow {
+  opacity: 1;
+  padding-left: var(--space-unit);
+}
+
+/*
+Contextual menu
+*/
+.popover-container {
+  position: absolute;
+  top: var(--space-unit);
+  right: var(--space-unit);
+  display: none;
+}
+
+.popover-container.visible {
+  display: block;
+}
+
+:host(:hover) .popover-container {
+  display: block;
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-header-row/index.js

@@ -0,0 +1,37 @@
+import { Component, Prop, Host, h } from "@stencil/core";
+export class ZRegistroTableHeaderRow {
+  _renderExpandHeader() {
+    return h("z-registro-table-header", null);
+  }
+  render() {
+    return (h(Host, { role: "row" },
+      this.expandable && this._renderExpandHeader(),
+      h("slot", null)));
+  }
+  static get is() { return "z-registro-table-header-row"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "expandable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "expandable",
+      "reflect": true
+    }
+  }; }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-header-row/styles.css

@@ -0,0 +1,13 @@
+z-registro-table-header-row {
+  display: table-row;
+}
+
+z-registro-table-header-row[expandable] > z-registro-table-header:first-child {
+  width: 40px;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+z-registro-table-header-row[expandable] > z-registro-table-header:nth-child(2) {
+  padding-left: 8px;
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-row/index.js

@@ -0,0 +1,86 @@
+import { Component, Prop, State, Host, h, Event, } from "@stencil/core";
+import { ZRegistroTableRowExpandedType } from "../../../beans";
+export class ZRegistroTableRow {
+  constructor() {
+    this.expandedType = ZRegistroTableRowExpandedType.none;
+    this.expanded = false;
+  }
+  emitOnExpand() {
+    this.expand.emit({ expanded: this.expanded });
+  }
+  handleExpand() {
+    this.expanded = !this.expanded;
+    this.emitOnExpand();
+  }
+  renderExpandButton() {
+    if (this.expandedType == ZRegistroTableRowExpandedType.expandable) {
+      return (h("z-registro-table-cell", { style: { borderRight: "none" } },
+        h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })));
+    }
+    return (h("z-registro-table-cell", { style: { borderRight: "none" } },
+      h("div", { class: "z-icon-placeholder" })));
+  }
+  render() {
+    return (h(Host, { role: "row", expanded: this.expanded, onClick: (event) => {
+        const contextualMenuClick = event.target.nodeName === 'Z-CONTEXTUAL-MENU';
+        const isExpandable = this.expandedType === ZRegistroTableRowExpandedType.expandable;
+        if (isExpandable && !contextualMenuClick) {
+          this.handleExpand();
+        }
+      } },
+      this.expandedType !== ZRegistroTableRowExpandedType.none &&
+        this.renderExpandButton(),
+      h("slot", null)));
+  }
+  static get is() { return "z-registro-table-row"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "expandedType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ZRegistroTableRowExpandedType",
+        "resolved": "ZRegistroTableRowExpandedType.expandable | ZRegistroTableRowExpandedType.none | ZRegistroTableRowExpandedType.padding",
+        "references": {
+          "ZRegistroTableRowExpandedType": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "expanded-type",
+      "reflect": true,
+      "defaultValue": "ZRegistroTableRowExpandedType.none"
+    }
+  }; }
+  static get states() { return {
+    "expanded": {}
+  }; }
+  static get events() { return [{
+      "method": "expand",
+      "name": "expand",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/snowflakes/registro-table/z-registro-table-row/styles.css

@@ -0,0 +1,54 @@
+z-registro-table-row {
+  display: table-row;
+  font-family: var(--font-family-sans);
+}
+
+z-registro-table-row[expanded-type="expandable"]:hover {
+  cursor: pointer;
+}
+
+z-registro-table-row[expanded-type="expandable"]
+  > z-registro-table-cell:first-child,
+z-registro-table-row[expanded-type="padding"]
+  > z-registro-table-cell:first-child {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+
+  width: 24px;
+  padding-left: 16px;
+  padding-right: 0px;
+  box-sizing: border-box;
+  text-align: center;
+
+  fill: var(--gray800);
+
+  user-select: none;
+}
+
+.z-icon-placeholder {
+  width: 24px;
+  padding-right: 0px;
+}
+
+z-registro-table-row[expanded-type="expandable"]
+  > z-registro-table-cell:nth-child(2),
+z-registro-table-row[expanded-type="padding"]
+  > z-registro-table-cell:nth-child(2) {
+  padding-left: 8px;
+}
+
+z-registro-table-row[expanded-type]:hover > z-registro-table-cell:first-child {
+  fill: var(--myz-blue-dark);
+}
+
+z-registro-table-row[expanded] > z-registro-tale-cell {
+  background-color: var(--gray50);
+}
+
+z-registro-table-row[expanded] + z-registro-table-expanded-row {
+  display: table-row;
+}
+
+z-registro-table-row[expanded] > z-registro-table-cell {
+  border-bottom: none;
+}