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

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);
+}

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

@@ -0,0 +1,133 @@
+import { Host, h } from "@stencil/core";
+import { randomId } from "../../../utils/utils";
+import "../cells/z-td/index";
+import "../cells/z-th/index";
+/**
+ * ZTr component.
+ * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row
+ * to prevent the row from expanding.
+ * @slot - ZTr content (`z-td` or `z-th`).
+ */
+export class ZTr {
+  constructor() {
+    /**
+     * Whether the row is expandable.
+     * Use a `z-td` as the last cell of the row for the additional content.
+     * It will show a button to expand/collapse the row.
+     * The last cell will be hidden until the button or row is clicked.
+     *
+     * If some element inside the expandable row contains the `prevent-expand` css class,
+     * the row will not expand by clicking that element.
+     */
+    this.expandable = false;
+    /**
+     * Whether the row is currently expanded.
+     */
+    this.expanded = false;
+  }
+  updateColumns() {
+    const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
+    if (this.expandable) {
+      cells.pop();
+    }
+    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+    this.host.style.setProperty("--columns", `${columns}`);
+    if (this.expandable) {
+      const expandableContent = cells.pop();
+      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
+      this.expandableContentId = expandableContent.id;
+    }
+  }
+  /**
+   * Handle click on row.
+   * Skip expansion if the click is on a element with `prevent-expand` css class.
+   */
+  onRowClick(event) {
+    const preventExpand = event.target.closest(".prevent-expand");
+    if (!this.expandable || preventExpand) {
+      return;
+    }
+    this.expanded = !this.expanded;
+    this.expand.emit({ expanded: this.expanded });
+  }
+  componentWillLoad() {
+    this.updateColumns();
+  }
+  render() {
+    return (h(Host, { role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { class: "z-tr--expand-button-container" }, this.expandable && (h("button", { "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { onSlotchange: this.updateColumns.bind(this) })));
+  }
+  static get is() { return "z-tr"; }
+  static get encapsulation() { return "shadow"; }
+  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": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the row is expandable.\nUse a `z-td` as the last cell of the row for the additional content.\nIt will show a button to expand/collapse the row.\nThe last cell will be hidden until the button or row is clicked.\n\nIf some element inside the expandable row contains the `prevent-expand` css class,\nthe row will not expand by clicking that element."
+        },
+        "attribute": "expandable",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {},
+      "expandableContentId": {}
+    };
+  }
+  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": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "expandable",
+        "methodName": "updateColumns"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "colspanchange",
+        "method": "updateColumns",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,87 @@
+:host {
+  /* number of columns of the row. will be set in component's ts code */
+  --columns: 1;
+
+  display: grid;
+  min-width: max-content;
+  box-sizing: border-box;
+  grid-auto-flow: column;
+  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.z-tr--expand-button-container,
+::slotted(*) {
+  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);
+}
+
+::slotted(*:not(:last-child)) {
+  border-right: var(--z-table--cell-left-border, none);
+}
+
+:host([expandable]) {
+  --show-expandable-button: visible;
+
+  cursor: pointer;
+}
+
+:host([expandable]) ::slotted(*) {
+  grid-row: 1;
+}
+
+:host([expandable]) ::slotted(:nth-last-child(2)) {
+  border-right: none;
+}
+
+:host([expandable]) ::slotted(*:last-child) {
+  border-left: 0;
+  grid-column: 1 / span calc(var(--columns) + 1);
+  grid-row: 2;
+}
+
+:host([expandable]:not([expanded])) ::slotted(*:last-child) {
+  display: none;
+}
+
+:host([expanded]) {
+  margin-bottom: 4px; /* prevents shadow to be cut by the next element */
+  box-shadow: 0 4px 4px -2px var(--shadow-color-base);
+}
+
+:host([expanded]) .z-tr--expand-button-container,
+:host([expanded]) ::slotted(*) {
+  background-color: var(--color-surface02);
+}
+
+.z-tr--expand-button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--z-table--cells-background, var(--color-surface01));
+}
+
+.z-tr--expand-button-container button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  margin: auto;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  visibility: var(--show-expandable-button, hidden);
+}
+
+.z-tr--expand-button-container button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+.z-tr--expand-button-container button z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}

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

@@ -0,0 +1,255 @@
+import { h } from "@stencil/core";
+import { ControlSize, AccordionVariant } from "../../beans";
+/**
+ * Accordion component.
+ *
+ * @slot - Slot for the main content.
+ * @slot tag - Slot for tags.
+ * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
+ * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
+ * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+ * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
+ * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
+ * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+ * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
+ * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
+ * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
+ * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
+ */
+export class ZAccordion {
+  constructor() {
+    /**
+     * Size of the component.
+     */
+    this.size = ControlSize.BIG;
+    /**
+     * Disabled state of the accordion.
+     */
+    this.isDisabled = false;
+    /**
+     * The open state of the accordion.
+     */
+    this.open = false;
+    /**
+     * Enable highlight band on the `summary`'s left edge.
+     */
+    this.highlight = false;
+    /**
+     * Accordion variant.
+     */
+    this.variant = AccordionVariant.DEFAULT;
+    /**
+     * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.
+     */
+    this.shadow = true;
+  }
+  onDisabledChange() {
+    if (this.isDisabled) {
+      this.open = false;
+    }
+  }
+  /**
+   * Handle `details` element toggle.
+   * If currently disabled, prevent toggling by forcing the `open` state to `false`.
+   * Unfortunately the "toggle" event is not cancelable and when catched, the `open` state is already changed.
+   */
+  onDetailsToggle() {
+    if (this.isDisabled) {
+      this.open = false;
+      this.detailsElm.open = false;
+      return;
+    }
+    this.open = this.detailsElm.open;
+    this.toggled.emit(this.open);
+  }
+  render() {
+    return (h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { class: "z-accordion-label" }, this.label), h("span", { class: "z-accordion-tags" }, h("slot", { name: "tag" })), h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
+  }
+  static get is() { return "z-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text label."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the z-icon to display before the label's text."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ControlSize",
+          "resolved": "ControlSize.BIG | ControlSize.SMALL | ControlSize.X_SMALL",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the component."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "ControlSize.BIG"
+      },
+      "isDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled state of the accordion."
+        },
+        "attribute": "is-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The open state of the accordion."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "highlight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable highlight band on the `summary`'s left edge."
+        },
+        "attribute": "highlight",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AccordionVariant",
+          "resolved": "AccordionVariant.BACKGROUND | AccordionVariant.DEFAULT",
+          "references": {
+            "AccordionVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accordion variant."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "AccordionVariant.DEFAULT"
+      },
+      "shadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`."
+        },
+        "attribute": "shadow",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "toggled",
+        "name": "toggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the accordion is toggled."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "isDisabled",
+        "methodName": "onDisabledChange"
+      }];
+  }
+}