@zanichelli/albe-web-components 2.31.0 → 2.31.1

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

@@ -1,240 +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
-    }]; }
-}
+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

@@ -1,67 +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;
-}
+: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;
+}