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

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

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

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

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+/**
+ * @deprecated
+ */
+export class ZTableExpandedRow {
+  render() {
+    return (h("td", { colSpan: this.colSpan }, h("div", { class: "content-container" }, h("slot", null))));
+  }
+  static get is() { return "z-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/deprecated/z-table-deprecated/z-table-expanded-row/styles.css

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

package/dist/collection/deprecated/z-table-deprecated/z-table-footer/index.js

@@ -0,0 +1,25 @@
+import { h } from "@stencil/core";
+/**
+ * @deprecated
+ */
+export class ZTableFooter {
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "z-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/deprecated/z-table-deprecated/z-table-footer/styles.css

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

package/dist/collection/deprecated/z-table-deprecated/z-table-head/index.js

@@ -0,0 +1,25 @@
+import { h } from "@stencil/core";
+/**
+ * @deprecated
+ */
+export class ZTableHead {
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "z-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/deprecated/z-table-deprecated/z-table-head/styles.css

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

package/dist/collection/deprecated/z-table-deprecated/z-table-header/index.js

@@ -0,0 +1,226 @@
+import { h, Host } from "@stencil/core";
+import { ButtonSize, ButtonVariant, PopoverPosition } from "../../../beans";
+import { getElementTree } from "../../../utils/utils";
+/**
+ * @deprecated
+ */
+export class ZTableHeader {
+  constructor() {
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = "medium";
+    /** [Optional] Default sort order */
+    this.defaultSortDirection = "asc";
+    /** Sort direction */
+    this.sortDirection = "none";
+    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 "asc":
+          return "desc";
+        case "desc":
+          return "asc";
+        case "none":
+          return this.defaultSortDirection;
+        default:
+          return "none";
+      }
+    })();
+    this.emitOnSort();
+  }
+  handleMenuClick() {
+    this.popover.open = !this.popover.open;
+  }
+  handleOutsideClick(e) {
+    const tree = getElementTree(e.target);
+    const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
+    if (!parent && this.popover) {
+      this.popover.open = false;
+    }
+  }
+  handleClickHeaders(e) {
+    const target = e.target;
+    const parent = getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-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 = "none";
+    }
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "columnheader");
+  }
+  render() {
+    return (h(Host, { class: {
+        sortable: this.sortable,
+      }, onClick: () => this.handleSort() }, h("div", { class: "container" }, h("slot", null), this.sortable && this.sortDirection !== "none" && (h("z-icon", { name: this.sortDirection === "asc" ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPosition.BOTTOM, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
+  }
+  static get is() { return "z-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
+      },
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"special\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"special\" | \"x-small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set padding size of cell, if special 0px padding will be set"
+        },
+        "attribute": "padding",
+        "reflect": true,
+        "defaultValue": "\"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": "\"asc\" | \"desc\" | \"none\"",
+          "resolved": "\"asc\" | \"desc\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[Optional] Default sort order"
+        },
+        "attribute": "default-sort-direction",
+        "reflect": false,
+        "defaultValue": "\"asc\""
+      },
+      "sortDirection": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"asc\" | \"desc\" | \"none\"",
+          "resolved": "\"asc\" | \"desc\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sort direction"
+        },
+        "attribute": "sort-direction",
+        "reflect": false,
+        "defaultValue": "\"none\""
+      }
+    };
+  }
+  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/deprecated/z-table-deprecated/z-table-header/styles.css

@@ -0,0 +1,71 @@
+:host {
+  position: relative;
+  display: table-cell;
+  border-bottom: var(--border-size-medium) solid var(--gray200);
+  background-color: var(--gray50);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  text-align: start;
+}
+
+.container {
+  display: flex;
+  align-items: flex-end;
+}
+
+:host(.sortable) {
+  cursor: pointer;
+}
+
+:host([padding="x-small"]) {
+  padding: calc(var(--space-unit) * 0.5);
+}
+
+:host([padding="small"]) {
+  padding: calc(var(--space-unit));
+}
+
+:host([padding="medium"]) {
+  padding: calc(var(--space-unit) * 2);
+}
+
+:host([padding="large"]) {
+  padding: calc(var(--space-unit) * 2.5);
+}
+
+:host([padding="special"]) {
+  padding: 0;
+}
+
+/*
+Sorting arrow
+*/
+.arrow {
+  padding-left: var(--space-unit);
+  opacity: 1;
+}
+
+/*
+Contextual menu
+*/
+.popover-container {
+  position: absolute;
+  top: var(--space-unit);
+  right: var(--space-unit);
+  display: none;
+}
+
+.popover-container z-popover {
+  --z-popover-theme--surface: var(--gray200);
+
+  position: relative;
+  z-index: 1;
+}
+
+.popover-container.visible {
+  display: block;
+}
+
+:host(:hover) .popover-container {
+  display: block;
+}

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

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @deprecated
+ */
+export class ZTableHeaderRow {
+  renderExpandHeader() {
+    return h("z-table-header", null);
+  }
+  render() {
+    return (h(Host, { role: "row" }, this.expandable && this.renderExpandHeader(), h("slot", null)));
+  }
+  static get is() { return "z-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": "Row expandable flag"
+        },
+        "attribute": "expandable",
+        "reflect": true
+      }
+    };
+  }
+}

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

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

package/dist/collection/deprecated/z-table-deprecated/z-table-row/index.js

@@ -0,0 +1,95 @@
+import { Host, h } from "@stencil/core";
+import { ZTableRowExpandedType } from "../../../beans";
+/**
+ * @deprecated
+ */
+export class ZTableRow {
+  constructor() {
+    /** Table row expanded type */
+    this.expandedType = ZTableRowExpandedType.NONE;
+    this.expanded = false;
+  }
+  emitOnExpand() {
+    this.expand.emit({ expanded: this.expanded });
+  }
+  handleExpand() {
+    this.expanded = !this.expanded;
+    this.emitOnExpand();
+  }
+  renderExpandButton() {
+    if (this.expandedType == ZTableRowExpandedType.EXPANDABLE) {
+      return (h("z-table-cell", { style: { borderRight: "none" } }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })));
+    }
+    return (h("z-table-cell", { style: { borderRight: "none" } }, h("div", { class: "z-icon-placeholder" })));
+  }
+  render() {
+    return (h(Host, { role: "row", expanded: this.expanded, onClick: (event) => {
+        const preventExpand = event.target.classList.contains("prevent-expand");
+        const isExpandable = this.expandedType === ZTableRowExpandedType.EXPANDABLE;
+        if (isExpandable && !preventExpand) {
+          this.handleExpand();
+        }
+      } }, this.expandedType !== ZTableRowExpandedType.NONE && this.renderExpandButton(), h("slot", null)));
+  }
+  static get is() { return "z-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": "ZTableRowExpandedType",
+          "resolved": "ZTableRowExpandedType.EXPANDABLE | ZTableRowExpandedType.NONE | ZTableRowExpandedType.PADDING",
+          "references": {
+            "ZTableRowExpandedType": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Table row expanded type"
+        },
+        "attribute": "expanded-type",
+        "reflect": true,
+        "defaultValue": "ZTableRowExpandedType.NONE"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "expand",
+        "name": "expand",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Row has been expanded"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/deprecated/z-table-deprecated/z-table-row/styles.css

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

package/dist/collection/deprecated/z-table-deprecated/z-table-sticky-footer/index.js

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+/**
+ * @deprecated
+ * @slot - table sticky footer content
+ */
+export class ZTableStickyFooter {
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "z-table-sticky-footer"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+}

package/dist/collection/deprecated/z-table-deprecated/z-table-sticky-footer/styles.css

@@ -0,0 +1,11 @@
+:host {
+  position: sticky;
+  left: 0;
+  display: block;
+  padding: calc(var(--space-unit) * 2);
+  border-width: var(--border-size-small) 0 var(--border-size-medium);
+  border-style: solid;
+  border-color: var(--color-surface03);
+  background-color: var(--color-surface01);
+  font-weight: var(--font-rg);
+}