@zanichelli/albe-web-components 9.1.2 → 9.2.1

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

@@ -1,133 +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
-      }];
-  }
-}
+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.\r\nUse a `z-td` as the last cell of the row for the additional content.\r\nIt will show a button to expand/collapse the row.\r\nThe last cell will be hidden until the button or row is clicked.\r\n\r\nIf some element inside the expandable row contains the `prevent-expand` css class,\r\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

@@ -1,87 +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;
-}
+: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,247 @@
+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 accordion. Default: `var(--color-surface02)`.
+ */
+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"
+      }];
+  }
+}