@zanichelli/albe-web-components 6.3.2 → 6.3.4

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

@@ -1,235 +0,0 @@
-: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

@@ -1,133 +0,0 @@
-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

@@ -1,131 +0,0 @@
-: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);
-}