@zanichelli/albe-web-components 2.31.0 → 2.31.1

package/dist/collection/components/z-status-tag/index.js

@@ -1,125 +1,125 @@
-import { Component, Prop, h, Host } from "@stencil/core";
-import { StatusTagStatus } from "../../beans";
-import classNames from "classnames";
-export class ZStatusTag {
-  constructor() {
-    /** [optional] Status tag color */
-    this.status = StatusTagStatus.default;
-    if (!this.icon && !this.text) {
-      console.warn("z-status-tag must contain at least one prop between icon and text");
-    }
-  }
-  render() {
-    return (h(Host, { class: classNames(this.variant, "body-5-sb", {
-        expandable: this.expandable && this.icon && this.text,
-      }) },
-      this.icon && h("z-icon", { name: this.icon }),
-      this.text && h("span", null, this.text)));
-  }
-  static get is() { return "z-status-tag"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Status tag icon"
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Status tag text"
-      },
-      "attribute": "text",
-      "reflect": false
-    },
-    "expandable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Hide the text and show it on hover"
-      },
-      "attribute": "expandable",
-      "reflect": false
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "StatusTagStatus",
-        "resolved": "StatusTagStatus.default | StatusTagStatus.error | StatusTagStatus.neutral | StatusTagStatus.success | StatusTagStatus.warning",
-        "references": {
-          "StatusTagStatus": {
-            "location": "import",
-            "path": "../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Status tag color"
-      },
-      "attribute": "status",
-      "reflect": true,
-      "defaultValue": "StatusTagStatus.default"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ThemeVariant",
-        "resolved": "ThemeVariant.dark | ThemeVariant.light",
-        "references": {
-          "ThemeVariant": {
-            "location": "import",
-            "path": "../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Status tag style"
-      },
-      "attribute": "variant",
-      "reflect": false
-    }
-  }; }
-}
+import { Component, Prop, h, Host } from "@stencil/core";
+import { StatusTagStatus } from "../../beans";
+import classNames from "classnames";
+export class ZStatusTag {
+  constructor() {
+    /** [optional] Status tag color */
+    this.status = StatusTagStatus.default;
+    if (!this.icon && !this.text) {
+      console.warn("z-status-tag must contain at least one prop between icon and text");
+    }
+  }
+  render() {
+    return (h(Host, { class: classNames(this.variant, "body-5-sb", {
+        expandable: this.expandable && this.icon && this.text,
+      }) },
+      this.icon && h("z-icon", { name: this.icon }),
+      this.text && h("span", null, this.text)));
+  }
+  static get is() { return "z-status-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Status tag icon"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Status tag text"
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "expandable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Hide the text and show it on hover"
+      },
+      "attribute": "expandable",
+      "reflect": false
+    },
+    "status": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "StatusTagStatus",
+        "resolved": "StatusTagStatus.default | StatusTagStatus.error | StatusTagStatus.neutral | StatusTagStatus.success | StatusTagStatus.warning",
+        "references": {
+          "StatusTagStatus": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Status tag color"
+      },
+      "attribute": "status",
+      "reflect": true,
+      "defaultValue": "StatusTagStatus.default"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ThemeVariant",
+        "resolved": "ThemeVariant.dark | ThemeVariant.light",
+        "references": {
+          "ThemeVariant": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Status tag style"
+      },
+      "attribute": "variant",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/z-status-tag/styles.css

@@ -1,133 +1,133 @@
-:host {
-  --z-icon-width: 14px;
-  --z-icon-height: 14px;
-
-  font-family: var(--font-family-sans);
-
-  height: 22px;
-  border-radius: var(--border-radius);
-  padding-right: 4px;
-  padding-left: 4px;
-  text-transform: uppercase;
-
-  display: inline-flex;
-  align-items: center;
-}
-
-:host(.expandable) > z-icon {
-  margin-right: 0;
-  transition: margin-right 0.3s ease-out 0.2s;
-}
-
-:host(:not(.expandable)) > z-icon:not(:last-child),
-:host(.expandable:hover) > z-icon:not(:last-child) {
-  margin-right: var(--space-unit);
-  transition: margin-right 0.3s ease-out 0s;
-}
-
-:host(.expandable) > span {
-  max-width: 0;
-  transition: max-width 0.3s ease-out 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-:host(.expandable:hover) > span {
-  max-width: 20rem;
-  transition: max-width 0.3s ease-out 0s;
-}
-
-/*Warning status-tag styles*/
-:host([status="warning"]) {
-  background-color: var(--status-warning-yellow-lighter);
-  color: var(--status-warning-yellow-dark);
-  fill: var(--status-warning-yellow-dark);
-}
-
-:host([status="warning"].light) {
-  background-color: transparent;
-  color: var(--status-warning-yellow-dark);
-  fill: var(--status-warning-yellow-dark);
-}
-
-:host([status="warning"].dark) {
-  background-color: var(--status-warning-yellow-dark);
-  color: var(--status-warning-yellow-lighter);
-  fill: var(--status-warning-yellow-lighter);
-}
-
-/*Error status-tag styles*/
-:host([status="error"]) {
-  background-color: var(--status-error-red-lighter);
-  color: var(--status-error-red-dark);
-  fill: var(--status-error-red-dark);
-}
-
-:host([status="error"].light) {
-  background-color: transparent;
-  color: var(--status-error-red-dark);
-  fill: var(--status-error-red-dark);
-}
-
-:host([status="error"].dark) {
-  background-color: var(--status-error-red-dark);
-  color: var(--status-error-red-lighter);
-  fill: var(--status-error-red-lighter);
-}
-
-/*Success status-tag styles*/
-:host([status="success"]) {
-  background-color: var(--status-success-green-lighter);
-  color: var(--status-success-green-dark);
-  fill: var(--status-success-green-dark);
-}
-
-:host([status="success"].light) {
-  background-color: transparent;
-  color: var(--status-success-green-dark);
-  fill: var(--status-success-green-dark);
-}
-
-:host([status="success"].dark) {
-  background-color: var(--status-success-green-dark);
-  color: var(--status-success-green-lighter);
-  fill: var(--status-success-green-lighter);
-}
-
-/*Default status-tag styles*/
-:host([status="default"]) {
-  background-color: var(--myz-blue-lighter);
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
-}
-
-:host([status="default"].light) {
-  background-color: transparent;
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
-}
-
-:host([status="default"].dark) {
-  background-color: var(--myz-blue-dark);
-  color: var(--myz-blue-lighter);
-  fill: var(--myz-blue-lighter);
-}
-
-/*Neutral status-tag styles*/
-:host([status="neutral"]) {
-  background-color: var(--bg-grey-050);
-  color: var(--text-grey-800);
-  fill: var(--text-grey-800);
-}
-
-:host([status="neutral"].light) {
-  background-color: transparent;
-  color: var(--text-grey-800);
-  fill: var(--text-grey-800);
-}
-
-:host([status="neutral"].dark) {
-  background-color: var(--bg-grey-800);
-  color: var(--text-white);
-  fill: var(--text-white);
-}
+:host {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+
+  font-family: var(--font-family-sans);
+
+  height: 22px;
+  border-radius: var(--border-radius);
+  padding-right: 4px;
+  padding-left: 4px;
+  text-transform: uppercase;
+
+  display: inline-flex;
+  align-items: center;
+}
+
+:host(.expandable) > z-icon {
+  margin-right: 0;
+  transition: margin-right 0.3s ease-out 0.2s;
+}
+
+:host(:not(.expandable)) > z-icon:not(:last-child),
+:host(.expandable:hover) > z-icon:not(:last-child) {
+  margin-right: var(--space-unit);
+  transition: margin-right 0.3s ease-out 0s;
+}
+
+:host(.expandable) > span {
+  max-width: 0;
+  transition: max-width 0.3s ease-out 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.expandable:hover) > span {
+  max-width: 20rem;
+  transition: max-width 0.3s ease-out 0s;
+}
+
+/*Warning status-tag styles*/
+:host([status="warning"]) {
+  background-color: var(--status-warning-yellow-lighter);
+  color: var(--status-warning-yellow-dark);
+  fill: var(--status-warning-yellow-dark);
+}
+
+:host([status="warning"].light) {
+  background-color: transparent;
+  color: var(--status-warning-yellow-dark);
+  fill: var(--status-warning-yellow-dark);
+}
+
+:host([status="warning"].dark) {
+  background-color: var(--status-warning-yellow-dark);
+  color: var(--status-warning-yellow-lighter);
+  fill: var(--status-warning-yellow-lighter);
+}
+
+/*Error status-tag styles*/
+:host([status="error"]) {
+  background-color: var(--status-error-red-lighter);
+  color: var(--status-error-red-dark);
+  fill: var(--status-error-red-dark);
+}
+
+:host([status="error"].light) {
+  background-color: transparent;
+  color: var(--status-error-red-dark);
+  fill: var(--status-error-red-dark);
+}
+
+:host([status="error"].dark) {
+  background-color: var(--status-error-red-dark);
+  color: var(--status-error-red-lighter);
+  fill: var(--status-error-red-lighter);
+}
+
+/*Success status-tag styles*/
+:host([status="success"]) {
+  background-color: var(--status-success-green-lighter);
+  color: var(--status-success-green-dark);
+  fill: var(--status-success-green-dark);
+}
+
+:host([status="success"].light) {
+  background-color: transparent;
+  color: var(--status-success-green-dark);
+  fill: var(--status-success-green-dark);
+}
+
+:host([status="success"].dark) {
+  background-color: var(--status-success-green-dark);
+  color: var(--status-success-green-lighter);
+  fill: var(--status-success-green-lighter);
+}
+
+/*Default status-tag styles*/
+:host([status="default"]) {
+  background-color: var(--myz-blue-lighter);
+  color: var(--myz-blue-dark);
+  fill: var(--myz-blue-dark);
+}
+
+:host([status="default"].light) {
+  background-color: transparent;
+  color: var(--myz-blue-dark);
+  fill: var(--myz-blue-dark);
+}
+
+:host([status="default"].dark) {
+  background-color: var(--myz-blue-dark);
+  color: var(--myz-blue-lighter);
+  fill: var(--myz-blue-lighter);
+}
+
+/*Neutral status-tag styles*/
+:host([status="neutral"]) {
+  background-color: var(--bg-grey-050);
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+}
+
+:host([status="neutral"].light) {
+  background-color: transparent;
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+}
+
+:host([status="neutral"].dark) {
+  background-color: var(--bg-grey-800);
+  color: var(--text-white);
+  fill: var(--text-white);
+}

package/dist/collection/constants/breakpoints.js

@@ -1,3 +1,3 @@
-const mobileBreakpoint = 767;
-const tabletBreakpoint = 1023;
-export { mobileBreakpoint, tabletBreakpoint };
+const mobileBreakpoint = 767;
+const tabletBreakpoint = 1023;
+export { mobileBreakpoint, tabletBreakpoint };

package/dist/collection/constants/icons.js

@@ -1,6 +1,6 @@
-const icons = {
-  iconuserlogo: "user.png",
-  iconarrowup: "arrowUp.png",
-  iconarrowdown: "arrowDown.png"
-};
-export default icons;
+const icons = {
+  iconuserlogo: "user.png",
+  iconarrowup: "arrowUp.png",
+  iconarrowdown: "arrowDown.png"
+};
+export default icons;

package/dist/collection/index.js

@@ -1,5 +1,5 @@
-import { colorFromId } from "./utils/utils";
-export * from "./components";
-export const Utils = {
-  colorFromId
-};
+import { colorFromId } from "./utils/utils";
+export * from "./components";
+export const Utils = {
+  colorFromId
+};