@zanichelli/albe-web-components 6.6.10-test → 6.7.0

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

@@ -0,0 +1,238 @@
+import { h, Host } from "@stencil/core";
+import { ButtonSize, ButtonVariant, PopoverPosition, Size, SortDirection } from "../../../beans";
+import { getElementTree } from "../../../utils/utils";
+export class ZTableHeader {
+  constructor() {
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = Size.MEDIUM;
+    /** [Optional] Default sort order */
+    this.defaultSortDirection = SortDirection.ASC;
+    /** Sort direction */
+    this.sortDirection = 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 SortDirection.ASC:
+          return SortDirection.DESC;
+        case SortDirection.DESC:
+          return SortDirection.ASC;
+        case SortDirection.NONE:
+          return this.defaultSortDirection;
+        default:
+          return SortDirection.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 = 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 !== SortDirection.NONE && (h("z-icon", { name: this.sortDirection === 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": "Size",
+          "resolved": "Size.LARGE | Size.MEDIUM | Size.SMALL | Size.SPECIAL | Size.X_SMALL",
+          "references": {
+            "Size": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set padding size of cell, if special 0px padding will be set"
+        },
+        "attribute": "padding",
+        "reflect": true,
+        "defaultValue": "Size.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": "SortDirection.ASC | SortDirection.DESC | SortDirection.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": "SortDirection.ASC"
+      },
+      "sortDirection": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "SortDirection",
+          "resolved": "SortDirection.ASC | SortDirection.DESC | SortDirection.NONE",
+          "references": {
+            "SortDirection": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sort direction"
+        },
+        "attribute": "sort-direction",
+        "reflect": false,
+        "defaultValue": "SortDirection.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/components/z-table/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(--dashboard-font);
+  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/components/z-table/z-table-header-row/index.js

@@ -0,0 +1,41 @@
+import { Host, h } from "@stencil/core";
+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/components/z-table/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/components/z-table/z-table-row/index.js

@@ -0,0 +1,92 @@
+import { Host, h } from "@stencil/core";
+import { ZTableRowExpandedType } from "../../../beans";
+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/components/z-table/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(--myz-blue-dark);
+}
+
+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/components/z-table/z-table-sticky-footer/index.js

@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+/**
+ * @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/components/z-table/z-table-sticky-footer/styles.css

@@ -0,0 +1,11 @@
+:host {
+  position: sticky;
+  left: 0;
+  display: block;
+  padding: var(--basex2);
+  border-width: var(--border-size-small) 0 var(--border-base);
+  border-style: solid;
+  border-color: var(--gray200);
+  background-color: var(--bg-white);
+  font-weight: var(--font-rg);
+}

package/dist/collection/components/z-tag/index.js

@@ -0,0 +1,65 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Ztag  component.
+ * @slot - The text of the z-tag.
+ * @cssprop --z-tag-text-color - text and icon color using tokens.
+ * @cssprop --z-tag-bg - background color of the z-tag.
+ */
+export class ZTag {
+  render() {
+    return (h(Host, { class: {
+        "body-5-sb": true,
+        "expandable": this.expandable && !!this.icon,
+      } }, this.icon && h("z-icon", { name: this.icon }), h("div", null, h("slot", null))));
+  }
+  static get is() { return "z-tag"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Tag icon"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "expandable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Hide the text and show it on hover"
+        },
+        "attribute": "expandable",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/z-tag/styles.css

@@ -0,0 +1,46 @@
+:host {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+  --z-tag-text-color: var(--color-primary03);
+  --z-tag-bg: var(--color-hover-primary);
+
+  display: flex;
+  width: fit-content;
+  max-width: inherit;
+  height: fit-content;
+  max-height: inherit;
+  padding: calc(var(--space-unit) / 2);
+  background-color: var(--z-tag-bg);
+  border-radius: var(--border-radius);
+  color: var(--z-tag-text-color);
+  fill: var(--z-tag-text-color);
+  font-family: var(--font-family-sans);
+  line-height: 14px;
+  text-transform: uppercase;
+}
+
+:host > z-icon {
+  margin-right: var(--space-unit);
+}
+
+:host(.expandable) > z-icon {
+  margin-right: 0;
+  transition: margin-right 0.3s ease-out;
+}
+
+:host(:not(.expandable)) > z-icon:not(:last-child),
+:host(.expandable:hover) > z-icon:not(:last-child) {
+  margin-right: var(--space-unit);
+  transition: margin-right 0.3s ease-out 0s;
+}
+
+:host(.expandable) > div {
+  overflow: hidden;
+  max-width: 0;
+  max-height: 0;
+}
+
+:host(.expandable:hover) > div {
+  max-width: 100%;
+  max-height: 100%;
+}

package/dist/collection/components/z-visually-hidden/index.js

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+export class ZVisuallyHidden {
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "z-visually-hidden"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+}

package/dist/collection/components/z-visually-hidden/styles.css

@@ -0,0 +1,12 @@
+:host {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: 0 -1px -1px 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/{www/build/breakpoints-c386984e.js → dist/collection/constants/breakpoints.js}

@@ -1,4 +1,3 @@
 const mobileBreakpoint = 767;
 const tabletBreakpoint = 1023;
-
-export { mobileBreakpoint as m, tabletBreakpoint as t };
+export { mobileBreakpoint, tabletBreakpoint };

package/dist/collection/constants/icons.js

@@ -0,0 +1,6 @@
+const icons = {
+  iconuserlogo: "user.png",
+  iconarrowup: "arrowUp.png",
+  iconarrowdown: "arrowDown.png",
+};
+export default icons;