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

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

@@ -1,238 +0,0 @@
-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

@@ -1,71 +0,0 @@
-: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

@@ -1,41 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,11 +0,0 @@
-: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

@@ -1,65 +0,0 @@
-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

@@ -1,46 +0,0 @@
-: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

@@ -1,18 +0,0 @@
-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

@@ -1,12 +0,0 @@
-: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/dist/collection/constants/icons.js

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

package/dist/collection/index.js

@@ -1,7 +0,0 @@
-import { colorFromId } from "./utils/utils";
-const UTILS = {
-  colorFromId,
-};
-export { UTILS as Utils };
-export * from "./components";
-export * from "./beans";