@zanichelli/albe-web-components 6.3.2-rc1 → 6.3.2

package/dist/collection/deprecated/z-popover-deprecated/styles.css

@@ -0,0 +1,235 @@
+:host {
+  position: relative;
+  display: inline-block;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+
+  --shadow-arrow-color: rgb(66 69 72 / 20%);
+  --shadow-arrow-below-color: rgb(66 69 72 / 10%);
+}
+
+.popover-content-container {
+  position: absolute;
+  z-index: 999;
+  min-width: 64px;
+  min-height: 32px;
+  box-sizing: border-box;
+  visibility: hidden;
+}
+
+.popover-content-container.visible {
+  visibility: visible;
+}
+
+/** Border-radius */
+
+.popover-content-container.border-radius-none {
+  border-radius: 0;
+}
+
+.popover-content-container.border-radius-small {
+  border-radius: var(--border-radius-small);
+}
+
+.popover-content-container.border-radius-medium {
+  border-radius: var(--border-radius);
+}
+
+/*
+Box-shadow
+*/
+
+.popover-content-container.shadow-1 {
+  box-shadow: var(--shadow-1);
+}
+
+.popover-content-container.shadow-2 {
+  box-shadow: var(--shadow-2);
+}
+
+.popover-content-container.shadow-3 {
+  box-shadow: var(--shadow-3);
+}
+
+.popover-content-container.shadow-4 {
+  box-shadow: var(--shadow-4);
+}
+
+.popover-content-container.shadow-6 {
+  box-shadow: var(--shadow-6);
+}
+
+.popover-content-container.shadow-8 {
+  box-shadow: var(--shadow-8);
+}
+
+.popover-content-container.shadow-12 {
+  box-shadow: var(--shadow-12);
+}
+
+.popover-content-container.shadow-16 {
+  box-shadow: var(--shadow-16);
+}
+
+.popover-content-container.shadow-24 {
+  box-shadow: var(--shadow-24);
+}
+
+/*
+Popover-positions
+*/
+
+.popover-content-container.after-down {
+  top: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.after-center {
+  top: 50%;
+  left: calc(100% + var(--space-unit));
+  transform: translateY(-50%);
+}
+
+.popover-content-container.after-up {
+  bottom: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.below-right {
+  top: calc(100% + var(--space-unit));
+  left: 0;
+}
+
+.popover-content-container.below-center {
+  top: calc(100% + var(--space-unit));
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.popover-content-container.below-left {
+  top: calc(100% + var(--space-unit));
+  right: 0;
+}
+
+.popover-content-container.before-down {
+  top: 0;
+  right: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.before-center {
+  top: 50%;
+  right: calc(100% + var(--space-unit));
+  transform: translateY(-50%);
+}
+
+.popover-content-container.before-up {
+  right: calc(100% + var(--space-unit));
+  bottom: 0;
+}
+
+.popover-content-container.above-right {
+  bottom: calc(100% + var(--space-unit));
+  left: 0;
+}
+
+.popover-content-container.above-center {
+  bottom: calc(100% + var(--space-unit));
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.popover-content-container.above-left {
+  right: 0;
+  bottom: calc(100% + var(--space-unit));
+}
+
+/*
+Arrows
+*/
+.popover-content-container::before {
+  position: absolute;
+  z-index: -1;
+  display: none;
+  width: 8px;
+  height: 8px;
+  background-color: inherit;
+  content: "";
+  transform: rotate(45deg);
+}
+
+.popover-content-container.after-down::before {
+  top: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.after-center::before {
+  top: calc(50% - 4px);
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.after-up::before {
+  bottom: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.below-right::before {
+  top: -4px;
+  left: 12px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.below-center::before {
+  top: -4px;
+  left: calc(50% - 4px);
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.below-left::before {
+  top: -4px;
+  right: 12px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.before-down::before {
+  top: 12px;
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.before-center::before {
+  top: calc(50% - 4px);
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.before-up::before {
+  right: -4px;
+  bottom: 12px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-right::before {
+  bottom: -4px;
+  left: 12px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-center::before {
+  bottom: -4px;
+  left: calc(50% - 4px);
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-left::before {
+  right: 12px;
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+/** Show/Hide arrow */
+.popover-content-container.show-arrow::before {
+  display: block;
+}

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

@@ -0,0 +1,133 @@
+import { h, Host } from "@stencil/core";
+import { StatusTagStatus } from "../../beans";
+export class ZStatusTag {
+  constructor() {
+    this.icon = undefined;
+    this.text = undefined;
+    this.expandable = undefined;
+    this.status = StatusTagStatus.DEFAULT;
+    this.variant = undefined;
+    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: {
+        "body-5-sb": true,
+        [this.variant || ""]: true,
+        "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/deprecated/z-status-tag/styles.css

@@ -0,0 +1,131 @@
+:host {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+
+  display: inline-flex;
+  height: 22px;
+  align-items: center;
+  padding-right: 4px;
+  padding-left: 4px;
+  border-radius: var(--border-radius);
+  font-family: var(--font-family-sans);
+  text-transform: uppercase;
+}
+
+: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 {
+  overflow: hidden;
+  max-width: 0;
+  transition: max-width 0.3s ease-out 0.2s;
+  white-space: nowrap;
+}
+
+: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);
+}