@zanichelli/albe-web-components 7.3.2 → 7.3.4

package/dist/collection/components/list/z-list-element/styles.css

@@ -1,121 +1,121 @@
-:host {
-  outline: none;
-}
-
-:host > .container,
-:host > .container-contextual-menu {
-  --background-color-list-element: var(--bg-white);
-  --background-hover-color-list-element: var(--color-surface02);
-  --background-active-color-list-element: var(--color-surface02);
-
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  justify-content: center;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  outline: none;
-}
-
-/* z-list-element size */
-
-:host([size="small"]) > .container {
-  min-height: calc(var(--space-unit) * 4);
-  padding: calc(var(--space-unit) / 2) 0;
-}
-
-:host([size="medium"]) > .container {
-  min-height: calc(var(--space-unit) * 5);
-  padding: var(--space-unit) 0;
-}
-
-:host([size="large"]) > .container {
-  min-height: calc(var(--space-unit) * 7);
-  padding: calc(var(--space-unit) * 2) 0;
-}
-
-:host([size="x-large"]) > .container {
-  min-height: calc(var(--space-unit) * 9);
-  padding: calc(var(--space-unit) * 3) 0;
-}
-
-/* ----------------- */
-
-:host([expandable]) > .container,
-:host([expandable]) > .container-contextual-menu,
-:host([clickable]) > .container,
-:host([clickable]) > .container-contextual-menu {
-  cursor: pointer;
-}
-
-:host([expandable]:hover) > .container,
-:host([expandable]:hover) > .container-contextual-menu,
-:host([clickable]:hover) > .container,
-:host([clickable]:hover) > .container-contextual-menu {
-  background-color: var(--background-hover-color-list-element);
-}
-
-:host([expandable]:focus:focus-visible) > .container,
-:host([expandable]:focus:focus-visible) > .container-contextual-menu,
-:host([clickable]:focus:focus-visible) > .container,
-:host([clickable]:focus:focus-visible) > .container-contextual-menu {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([clickable]:not([expandable])) > .container.clicked,
-:host([clickable]:not([expandable])) > .container-contextual-menu.clicked {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([expandable]:active) > .container,
-:host([expandable]:active) > .container-contextual-menu,
-:host([clickable]:active) > .container,
-:host([clickable]:active) > .container-contextual-menu {
-  background-color: var(--background-active-color-list-element);
-}
-
-:host([align-button="left"][expandable]) > .container > .z-list-element-container,
-:host([align-button="left"][expandable]) > .container-contextual-menu > .z-list-element-container {
-  display: flex;
-}
-
-:host([align-button="right"][expandable]) > .container > .z-list-element-container,
-:host([align-button="right"][expandable]) > .container-contextual-menu > .z-list-element-container {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-}
-
-:host([align-button="left"][expandable]) > .container > .z-list-element-container > z-icon,
-:host([align-button="left"][expandable]) > .container-contextual-menu > .z-list-element-container > z-icon {
-  margin-right: var(--space-unit);
-}
-
-:host([align-button="right"][expandable]) > .container > .z-list-element-container > z-icon,
-:host([align-button="right"][expandable]) > .container-contextual-menu > .z-list-element-container > z-icon {
-  margin-left: var(--space-unit);
-}
-
-:host > .container > .z-list-element-inner-container,
-:host > .container-contextual-menu > .z-list-element-inner-container {
-  display: none;
-}
-
-:host > .container > .z-list-element-inner-container.expanded,
-:host > .container-contextual-menu > .z-list-element-inner-container.expanded {
-  display: block;
-}
-
-:host([clickable]:hover) > .container-contextual-menu {
-  background-color: var(--color-surface03);
-}
-
-.container-contextual-menu:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
-.z-list-content-container {
-  display: flex;
-  align-items: center;
-}
+:host {
+  outline: none;
+}
+
+:host > .container,
+:host > .container-contextual-menu {
+  --background-color-list-element: var(--bg-white);
+  --background-hover-color-list-element: var(--color-surface02);
+  --background-active-color-list-element: var(--color-surface02);
+
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  outline: none;
+}
+
+/* z-list-element size */
+
+:host([size="small"]) > .container {
+  min-height: calc(var(--space-unit) * 4);
+  padding: calc(var(--space-unit) / 2) 0;
+}
+
+:host([size="medium"]) > .container {
+  min-height: calc(var(--space-unit) * 5);
+  padding: var(--space-unit) 0;
+}
+
+:host([size="large"]) > .container {
+  min-height: calc(var(--space-unit) * 7);
+  padding: calc(var(--space-unit) * 2) 0;
+}
+
+:host([size="x-large"]) > .container {
+  min-height: calc(var(--space-unit) * 9);
+  padding: calc(var(--space-unit) * 3) 0;
+}
+
+/* ----------------- */
+
+:host([expandable]) > .container,
+:host([expandable]) > .container-contextual-menu,
+:host([clickable]) > .container,
+:host([clickable]) > .container-contextual-menu {
+  cursor: pointer;
+}
+
+:host([expandable]:hover) > .container,
+:host([expandable]:hover) > .container-contextual-menu,
+:host([clickable]:hover) > .container,
+:host([clickable]:hover) > .container-contextual-menu {
+  background-color: var(--background-hover-color-list-element);
+}
+
+:host([expandable]:focus:focus-visible) > .container,
+:host([expandable]:focus:focus-visible) > .container-contextual-menu,
+:host([clickable]:focus:focus-visible) > .container,
+:host([clickable]:focus:focus-visible) > .container-contextual-menu {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host([clickable]:not([expandable])) > .container.clicked,
+:host([clickable]:not([expandable])) > .container-contextual-menu.clicked {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host([expandable]:active) > .container,
+:host([expandable]:active) > .container-contextual-menu,
+:host([clickable]:active) > .container,
+:host([clickable]:active) > .container-contextual-menu {
+  background-color: var(--background-active-color-list-element);
+}
+
+:host([align-button="left"][expandable]) > .container > .z-list-element-container,
+:host([align-button="left"][expandable]) > .container-contextual-menu > .z-list-element-container {
+  display: flex;
+}
+
+:host([align-button="right"][expandable]) > .container > .z-list-element-container,
+:host([align-button="right"][expandable]) > .container-contextual-menu > .z-list-element-container {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+:host([align-button="left"][expandable]) > .container > .z-list-element-container > z-icon,
+:host([align-button="left"][expandable]) > .container-contextual-menu > .z-list-element-container > z-icon {
+  margin-right: var(--space-unit);
+}
+
+:host([align-button="right"][expandable]) > .container > .z-list-element-container > z-icon,
+:host([align-button="right"][expandable]) > .container-contextual-menu > .z-list-element-container > z-icon {
+  margin-left: var(--space-unit);
+}
+
+:host > .container > .z-list-element-inner-container,
+:host > .container-contextual-menu > .z-list-element-inner-container {
+  display: none;
+}
+
+:host > .container > .z-list-element-inner-container.expanded,
+:host > .container-contextual-menu > .z-list-element-inner-container.expanded {
+  display: block;
+}
+
+:host([clickable]:hover) > .container-contextual-menu {
+  background-color: var(--color-surface03);
+}
+
+.container-contextual-menu:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+.z-list-content-container {
+  display: flex;
+  align-items: center;
+}

package/dist/collection/components/list/z-list-group/index.js

@@ -1,175 +1,175 @@
-import { h, Host } from "@stencil/core";
-import { DividerSize, ListSize, ListDividerType, ListType } from "../../../beans";
-export class ZListGroup {
-  constructor() {
-    /**
-     * [optional] Sets size of inside elements.
-     */
-    this.size = ListSize.MEDIUM;
-    /**
-     * [optional] Sets the position where to insert the divider.
-     */
-    this.dividerType = ListDividerType.NONE;
-    /**
-     * [optional] Sets the divider size.
-     */
-    this.dividerSize = DividerSize.SMALL;
-    /**
-     * [optional] Sets the divider color.
-     */
-    this.dividerColor = "gray200";
-    /**
-     * [optional] type of the list marker for each element
-     */
-    this.listType = ListType.NONE;
-  }
-  componentDidLoad() {
-    const children = this.host.children;
-    for (let i = 0; i < children.length; i++) {
-      if (children.length - 1 > i) {
-        children[i].setAttribute("divider-type", this.dividerType);
-        children[i].setAttribute("divider-size", this.dividerSize);
-        children[i].setAttribute("divider-color", this.dividerColor);
-      }
-      children[i].setAttribute("size", this.size);
-      children[i].setAttribute("list-type", this.listType);
-      children[i].setAttribute("list-element-position", i.toString());
-    }
-  }
-  componentWillLoad() {
-    this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
-  }
-  render() {
-    return (h(Host, { role: "group" }, h("div", { class: {
-        "z-list-group-header-container": true,
-        "has-header": this.hasHeader,
-      } }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
-  }
-  static get is() { return "z-list-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ListSize",
-          "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
-          "references": {
-            "ListSize": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets size of inside elements."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "ListSize.MEDIUM"
-      },
-      "dividerType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ListDividerType",
-          "resolved": "ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE",
-          "references": {
-            "ListDividerType": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets the position where to insert the divider."
-        },
-        "attribute": "divider-type",
-        "reflect": true,
-        "defaultValue": "ListDividerType.NONE"
-      },
-      "dividerSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DividerSize",
-          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
-          "references": {
-            "DividerSize": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets the divider size."
-        },
-        "attribute": "divider-size",
-        "reflect": true,
-        "defaultValue": "DividerSize.SMALL"
-      },
-      "dividerColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets the divider color."
-        },
-        "attribute": "divider-color",
-        "reflect": true,
-        "defaultValue": "\"gray200\""
-      },
-      "listType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ListType",
-          "resolved": "ListType.NONE | ListType.ORDERED | ListType.UNORDERED",
-          "references": {
-            "ListType": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] type of the list marker for each element"
-        },
-        "attribute": "list-type",
-        "reflect": true,
-        "defaultValue": "ListType.NONE"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+import { h, Host } from "@stencil/core";
+import { DividerSize, ListSize, ListDividerType, ListType } from "../../../beans";
+export class ZListGroup {
+  constructor() {
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = ListSize.MEDIUM;
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
+    this.dividerType = ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
+    this.dividerSize = DividerSize.SMALL;
+    /**
+     * [optional] Sets the divider color.
+     */
+    this.dividerColor = "gray200";
+    /**
+     * [optional] type of the list marker for each element
+     */
+    this.listType = ListType.NONE;
+  }
+  componentDidLoad() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      if (children.length - 1 > i) {
+        children[i].setAttribute("divider-type", this.dividerType);
+        children[i].setAttribute("divider-size", this.dividerSize);
+        children[i].setAttribute("divider-color", this.dividerColor);
+      }
+      children[i].setAttribute("size", this.size);
+      children[i].setAttribute("list-type", this.listType);
+      children[i].setAttribute("list-element-position", i.toString());
+    }
+  }
+  componentWillLoad() {
+    this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
+  }
+  render() {
+    return (h(Host, { role: "group" }, h("div", { class: {
+        "z-list-group-header-container": true,
+        "has-header": this.hasHeader,
+      } }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
+  }
+  static get is() { return "z-list-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ListSize",
+          "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
+          "references": {
+            "ListSize": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets size of inside elements."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "ListSize.MEDIUM"
+      },
+      "dividerType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ListDividerType",
+          "resolved": "ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE",
+          "references": {
+            "ListDividerType": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the position where to insert the divider."
+        },
+        "attribute": "divider-type",
+        "reflect": true,
+        "defaultValue": "ListDividerType.NONE"
+      },
+      "dividerSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DividerSize",
+          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
+          "references": {
+            "DividerSize": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the divider size."
+        },
+        "attribute": "divider-size",
+        "reflect": true,
+        "defaultValue": "DividerSize.SMALL"
+      },
+      "dividerColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the divider color."
+        },
+        "attribute": "divider-color",
+        "reflect": true,
+        "defaultValue": "\"gray200\""
+      },
+      "listType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ListType",
+          "resolved": "ListType.NONE | ListType.ORDERED | ListType.UNORDERED",
+          "references": {
+            "ListType": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] type of the list marker for each element"
+        },
+        "attribute": "list-type",
+        "reflect": true,
+        "defaultValue": "ListType.NONE"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/list/z-list-group/styles.css

@@ -1,21 +1,21 @@
-:host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host > .z-list-group-header-container {
-  color: var(--gray700);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-sb) !important;
-  letter-spacing: 0.16px;
-  line-height: 1.4;
-}
-
-:host > .z-list-group-header-container.has-header {
-  padding-top: var(--space-unit);
-  padding-bottom: var(--space-unit);
-}
-
-:host > .z-list-group-header-container.has-header > z-divider {
-  margin-top: var(--space-unit);
-}
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > .z-list-group-header-container {
+  color: var(--gray700);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-sb) !important;
+  letter-spacing: 0.16px;
+  line-height: 1.4;
+}
+
+:host > .z-list-group-header-container.has-header {
+  padding-top: var(--space-unit);
+  padding-bottom: var(--space-unit);
+}
+
+:host > .z-list-group-header-container.has-header > z-divider {
+  margin-top: var(--space-unit);
+}