@zanichelli/albe-web-components 8.0.1 → 9.0.0

package/dist/collection/components/table/cells/z-td/styles.css

@@ -0,0 +1,59 @@
+:host {
+  position: relative;
+  display: flex;
+  min-width: 128px;
+  box-sizing: border-box;
+  align-items: center;
+  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+  background-color: var(--color-surface01);
+  gap: calc(var(--space-unit) * 2) var(--space-unit);
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  box-shadow: 8px 0 16px -8px var(--shadow-color-base);
+}
+
+/* Leave the space for the menu button */
+:host([show-menu])::after {
+  display: inline-block;
+  height: 100%;
+  margin-right: calc(var(--space-unit) * 4);
+  background: transparent;
+  content: "";
+  user-select: none;
+}
+
+.cell--menu-container {
+  position: absolute;
+  z-index: 1;
+  top: var(--space-unit);
+  right: var(--space-unit);
+}
+
+:host(:not([show-menu])) .cell--menu-container {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host(:is([show-menu], [menu-open])) .cell--menu-container,
+:host([show-menu]) .cell--menu-container:focus-within {
+  opacity: 1;
+  pointer-events: all;
+}
+
+@media (min-width: 768px) and (hover: hover) {
+  :host([show-menu="hover"]) .cell--menu-container {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([show-menu="hover"]:hover) .cell--menu-container {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+

package/dist/collection/components/table/cells/z-th/index.js

@@ -0,0 +1,187 @@
+import { Host, h } from "@stencil/core";
+import { ButtonVariant, ControlSize, SortDirection } from "../../../../beans";
+/**
+ * ZTh component.
+ * @slot - ZTh content.
+ * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.
+ */
+export class ZTh {
+  constructor() {
+    /**
+     * Enables the contextual menu.
+     * Can be set to "hover" or "always" to show the button only on cell hover or always.
+     * Set a nullish value to hide the menu button.
+     */
+    this.showMenu = null;
+    /**
+     * Whether the cell should stick.
+     */
+    this.sticky = false;
+    /**
+     * Store the open state of the menu.
+     */
+    this.isMenuOpen = false;
+  }
+  /**
+   * Get the value to set to the `aria-sort` attribute based on the current sort direction.
+   */
+  get ariaSortDirection() {
+    if (!this.sortDirection) {
+      return null;
+    }
+    return this.sortDirection === SortDirection.ASC ? "ascending" : "descending";
+  }
+  /**
+   * Handle the click on the sort button.
+   * @fires sort
+   */
+  handleSort() {
+    if (!this.sortDirection) {
+      return;
+    }
+    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
+    this.sort.emit({
+      sortDirection: this.sortDirection,
+    });
+  }
+  updateColspan() {
+    if (this.colspan) {
+      this.host.style.gridColumn = `span ${this.colspan}`;
+    }
+    else {
+      this.host.style.removeProperty("grid-column");
+    }
+  }
+  componentWillLoad() {
+    this.updateColspan();
+  }
+  render() {
+    return (h(Host, { role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, h("slot", null), this.sortDirection && (h("button", { class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { name: this.sortDirection === SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { class: "cell--menu-container" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, h("slot", { name: "contextual-menu" }))))));
+  }
+  static get is() { return "z-th"; }
+  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 of columns that the cell should span."
+        },
+        "attribute": "colspan",
+        "reflect": false
+      },
+      "showMenu": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "VisibilityCondition",
+          "resolved": "VisibilityCondition.ALWAYS | VisibilityCondition.HOVER",
+          "references": {
+            "VisibilityCondition": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables the contextual menu.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the menu button."
+        },
+        "attribute": "show-menu",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "sticky": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the cell should stick."
+        },
+        "attribute": "sticky",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "sortDirection": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "SortDirection",
+          "resolved": "SortDirection.ASC | SortDirection.DESC",
+          "references": {
+            "SortDirection": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Current sorting direction.\nSet `SortDirection.ASC` or `SortDirection.DESC` to show the sort icon."
+        },
+        "attribute": "sort-direction",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMenuOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sort",
+        "name": "sort",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sort event fired when the user clicks on the sort button.\nThe sorting logic must be implemented by the app.\nYou can set an `id` on the `z-th` to easly identify the column in the event listener."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "colspan",
+        "methodName": "updateColspan"
+      }];
+  }
+}

package/dist/collection/components/table/cells/z-th/styles.css

@@ -0,0 +1,88 @@
+:host {
+  position: relative;
+  display: flex;
+  min-width: 128px;
+  box-sizing: border-box;
+  align-items: center;
+  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+  background-color: var(--color-surface01);
+  gap: calc(var(--space-unit) * 2) var(--space-unit);
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  box-shadow: 8px 0 16px -8px var(--shadow-color-base);
+}
+
+/* Leave the space for the menu button */
+:host([show-menu])::after {
+  display: inline-block;
+  height: 100%;
+  margin-right: calc(var(--space-unit) * 4);
+  background: transparent;
+  content: "";
+  user-select: none;
+}
+
+.cell--menu-container {
+  position: absolute;
+  z-index: 1;
+  top: var(--space-unit);
+  right: var(--space-unit);
+}
+
+:host(:not([show-menu])) .cell--menu-container {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host(:is([show-menu], [menu-open])) .cell--menu-container,
+:host([show-menu]) .cell--menu-container:focus-within {
+  opacity: 1;
+  pointer-events: all;
+}
+
+@media (min-width: 768px) and (hover: hover) {
+  :host([show-menu="hover"]) .cell--menu-container {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([show-menu="hover"]:hover) .cell--menu-container {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+
+:host {
+  background-color: var(--color-surface02);
+  font-weight: var(--font-sb);
+}
+
+/* :host([sticky]) {
+  background-color: var(--color-surface02);
+} */
+
+:host([sortable]) {
+  cursor: pointer;
+}
+
+.z-th--sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  margin-top: auto;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.z-th--sort-button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}

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

@@ -0,0 +1,115 @@
+import { Host, h } from "@stencil/core";
+import "../z-thead/index";
+import "../z-tbody/index";
+import "../z-tr/index";
+import "../z-tfoot/index";
+/**
+ * ZTable component.
+ * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).
+ * @cssprop --z-table--cells-padding - Padding of the cells.
+ */
+export class ZTable {
+  constructor() {
+    /**
+     * Whether the table cells should show a border between them.
+     */
+    this.bordered = false;
+    /**
+     * Whether the table contains some expandable rows.
+     */
+    this.expandable = false;
+  }
+  updateExpandable() {
+    this.expandable = this.host.querySelectorAll("z-tr[expandable]").length > 0;
+  }
+  /**
+   * Setup table:
+   * - create the resize observer for resize event
+   * - create mutation observer for expandable attribute
+   */
+  componentWillLoad() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.tableResize.emit(this);
+    });
+    this.resizeObserver.observe(this.host);
+    this.expandableMutationObserver = new MutationObserver(() => {
+      this.updateExpandable();
+    });
+    this.expandableMutationObserver.observe(this.host, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["expandable"],
+      attributeOldValue: false,
+    });
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+    this.expandableMutationObserver.disconnect();
+  }
+  render() {
+    return (h(Host, { expandable: this.expandable }, h("div", { class: "table", role: "table" }, h("slot", null))));
+  }
+  static get is() { return "z-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "bordered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the table cells should show a border between them."
+        },
+        "attribute": "bordered",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expandable": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tableResize",
+        "name": "tableResize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Table emits its own resize event when it changes size, using a ResizeObserver.\nThis is convenient for sticky cells that needs to update styles when stuck."
+        },
+        "complexType": {
+          "original": "ZTable",
+          "resolved": "ZTable",
+          "references": {
+            "ZTable": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,22 @@
+:host {
+  --z-table--cells-padding: calc(var(--space-unit) * 2);
+
+  position: relative;
+  display: block;
+  overflow: auto;
+  max-width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-surface01);
+}
+
+:host([expandable]) {
+  --z-table--expand-button-size: 40px;
+}
+
+:host([bordered]) {
+  --z-table--cell-left-border: 1px solid var(--color-surface03);
+}
+
+.table {
+  min-width: max-content;
+}

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

@@ -0,0 +1,22 @@
+import { Host, h } from "@stencil/core";
+/**
+ * ZTbody component.
+ * @slot - ZTbody content (`z-tr`).
+ */
+export class ZTbody {
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get is() { return "z-tbody"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+}

package/dist/collection/components/table/z-tbody/styles.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,50 @@
+import { Host, h } from "@stencil/core";
+/**
+ * ZTFoot component.
+ * @slot - ZTFoot content (`z-tr`).
+ */
+export class ZTfoot {
+  constructor() {
+    /**
+     * If true, the footer will be stuck to the bottom of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get is() { return "z-tfoot"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sticky": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, the footer will be stuck to the bottom of the table."
+        },
+        "attribute": "sticky",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/table/z-tfoot/styles.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  border-top: 1px solid var(--color-surface03);
+  border-bottom: 1px solid var(--color-surface03);
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 1;
+  bottom: 0;
+  background-color: var(--color-surface01);
+}

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

@@ -0,0 +1,50 @@
+import { Host, h } from "@stencil/core";
+/**
+ * ZThead component.
+ * @slot - ZThead content (`z-tr`).
+ */
+export class ZThead {
+  constructor() {
+    /**
+     * If true, the header will be stuck to the top of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get is() { return "z-thead"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sticky": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, the header will be stuck to the top of the table."
+        },
+        "attribute": "sticky",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/table/z-thead/styles.css

@@ -0,0 +1,19 @@
+:host {
+  --z-table--cells-bottom-border-size: var(
+    --border-size-medium
+  ); /* Needed to handle the border of the expand button cell */
+
+  --z-table--cells-background: var(
+    --color-surface02
+  ); /* Needed to handle the background-color of the expand button cell */
+
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  box-shadow: 0 2px 4px -2px var(--shadow-color-base);
+}