@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -1,18 +1,19 @@
 import { 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;
+    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)));
+    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"; }
@@ -84,7 +85,7 @@ export class ZStatusTag {
         "mutable": false,
         "complexType": {
           "original": "StatusTagStatus",
-          "resolved": "StatusTagStatus.default | StatusTagStatus.error | StatusTagStatus.neutral | StatusTagStatus.success | StatusTagStatus.warning",
+          "resolved": "StatusTagStatus.DEFAULT | StatusTagStatus.ERROR | StatusTagStatus.NEUTRAL | StatusTagStatus.SUCCESS | StatusTagStatus.WARNING",
           "references": {
             "StatusTagStatus": {
               "location": "import",
@@ -100,14 +101,14 @@ export class ZStatusTag {
         },
         "attribute": "status",
         "reflect": true,
-        "defaultValue": "StatusTagStatus.default"
+        "defaultValue": "StatusTagStatus.DEFAULT"
       },
       "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "ThemeVariant",
-          "resolved": "ThemeVariant.dark | ThemeVariant.light",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
           "references": {
             "ThemeVariant": {
               "location": "import",

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

@@ -2,16 +2,14 @@
   --z-icon-width: 14px;
   --z-icon-height: 14px;
 
-  font-family: var(--font-family-sans);
-
+  display: inline-flex;
   height: 22px;
-  border-radius: var(--border-radius);
+  align-items: center;
   padding-right: 4px;
   padding-left: 4px;
+  border-radius: var(--border-radius);
+  font-family: var(--font-family-sans);
   text-transform: uppercase;
-
-  display: inline-flex;
-  align-items: center;
 }
 
 :host(.expandable) > z-icon {
@@ -26,10 +24,10 @@
 }
 
 :host(.expandable) > span {
+  overflow: hidden;
   max-width: 0;
   transition: max-width 0.3s ease-out 0.2s;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 :host(.expandable:hover) > span {
@@ -37,7 +35,7 @@
   transition: max-width 0.3s ease-out 0s;
 }
 
-/*Warning status-tag styles*/
+/* Warning status-tag styles */
 :host([status="warning"]) {
   background-color: var(--status-warning-yellow-lighter);
   color: var(--status-warning-yellow-dark);
@@ -56,7 +54,7 @@
   fill: var(--status-warning-yellow-lighter);
 }
 
-/*Error status-tag styles*/
+/* Error status-tag styles */
 :host([status="error"]) {
   background-color: var(--status-error-red-lighter);
   color: var(--status-error-red-dark);
@@ -75,7 +73,7 @@
   fill: var(--status-error-red-lighter);
 }
 
-/*Success status-tag styles*/
+/* Success status-tag styles */
 :host([status="success"]) {
   background-color: var(--status-success-green-lighter);
   color: var(--status-success-green-dark);
@@ -94,7 +92,7 @@
   fill: var(--status-success-green-lighter);
 }
 
-/*Default status-tag styles*/
+/* Default status-tag styles */
 :host([status="default"]) {
   background-color: var(--myz-blue-lighter);
   color: var(--myz-blue-dark);
@@ -113,7 +111,7 @@
   fill: var(--myz-blue-lighter);
 }
 
-/*Neutral status-tag styles*/
+/* Neutral status-tag styles */
 :host([status="neutral"]) {
   background-color: var(--bg-grey-050);
   color: var(--text-grey-800);

package/dist/collection/deprecated/z-tooltip-deprecated/index.js

@@ -1,6 +1,6 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { PopoverPositions } from "../../beans/index";
-const documentElement = document.documentElement;
+const DOCUMENT_ELEMENT = document.documentElement;
 /**
  * Find the closest scrollable parent of a node.
  *
@@ -8,20 +8,18 @@ const documentElement = document.documentElement;
  */
 function findScrollableParent(element) {
   let parent = element.parentNode;
-  while (parent && parent !== documentElement) {
+  while (parent && parent !== DOCUMENT_ELEMENT) {
     const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
-    if (overflow === 'hidden' ||
-      overflowY === 'hidden' ||
-      overflowX === 'hidden') {
+    if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
       return parent;
     }
-    if ((parent.scrollHeight > parent.clientHeight && overflow !== 'visible' && overflowY !== 'visible') ||
-      (parent.scrollWidth > parent.clientWidth && overflow !== 'visible' && overflowX !== 'visible')) {
+    if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
+      (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
       return parent;
     }
     parent = parent.parentNode;
   }
-  return documentElement;
+  return DOCUMENT_ELEMENT;
 }
 /**
  * Calculate computed offset.
@@ -80,18 +78,15 @@ function computeOffset(element, targetParentOffset) {
 export class ZTooltipDeprecated {
   constructor() {
     /** Tooltip position. */
-    this.type = PopoverPositions.auto;
+    this.type = PopoverPositions.AUTO;
     /**
      * The open state of the tooltip.
      */
     this.open = false;
   }
   validateType(newValue) {
-    if (newValue &&
-      Object
-        .values(PopoverPositions)
-        .every((position) => newValue !== position)) {
-      this.type = PopoverPositions.auto;
+    if (newValue && Object.values(PopoverPositions).every((position) => newValue !== position)) {
+      this.type = PopoverPositions.AUTO;
     }
   }
   onPositionChange() {
@@ -145,7 +140,9 @@ export class ZTooltipDeprecated {
     const scrollContainer = findScrollableParent(element);
     const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
     const offsetContainer = this.host.offsetParent;
-    const relativeBoundingRect = offsetContainer ? computeOffset(offsetContainer, scrollContainer) : { top: 0, right: 0, bottom: 0, left: 0 };
+    const relativeBoundingRect = offsetContainer
+      ? computeOffset(offsetContainer, scrollContainer)
+      : { top: 0, right: 0, bottom: 0, left: 0 };
     const boundingRect = computeOffset(element, scrollContainer);
     const top = boundingRect.top - scrollContainer.scrollTop;
     const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
@@ -160,29 +157,29 @@ export class ZTooltipDeprecated {
     const availableHeight = availableTop + availableBottom + boundingRect.height;
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.type;
-    if (position === PopoverPositions.auto) {
+    if (position === PopoverPositions.AUTO) {
       /**
        * The `AUTO` position tries to place the tooltip in the "safest" area,
        * where there's more space available.
        */
       const positions = [];
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift(PopoverPositions.top);
+        positions.unshift(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push(PopoverPositions.top);
+        positions.push(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift(PopoverPositions.bottom);
+        positions.unshift(PopoverPositions.BOTTOM);
       }
       else {
-        positions.push(PopoverPositions.bottom);
+        positions.push(PopoverPositions.BOTTOM);
       }
       if (availableLeft / availableWidth > 0.6) {
-        positions.push(PopoverPositions.left);
+        positions.push(PopoverPositions.LEFT);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push(PopoverPositions.right);
+        positions.push(PopoverPositions.RIGHT);
       }
       position = positions.join("_");
     }
@@ -194,46 +191,38 @@ export class ZTooltipDeprecated {
     const offsetRight = boundingRect.right - relativeBoundingRect.right;
     const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
-    if (position === PopoverPositions.top ||
-      position === PopoverPositions.top_right ||
-      position === PopoverPositions.top_left) {
+    if (position === PopoverPositions.TOP ||
+      position === PopoverPositions.TOP_RIGHT ||
+      position === PopoverPositions.TOP_LEFT) {
       style.top = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
     }
-    if (position === PopoverPositions.bottom ||
-      position === PopoverPositions.bottom_right ||
-      position === PopoverPositions.bottom_left) {
+    if (position === PopoverPositions.BOTTOM ||
+      position === PopoverPositions.BOTTOM_RIGHT ||
+      position === PopoverPositions.BOTTOM_LEFT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.bottom = "auto";
     }
-    if (position === PopoverPositions.top ||
-      position === PopoverPositions.bottom) {
-      style.left = `${offsetLeft +
-        (boundingRect.width / 2) -
-        (this.host.clientWidth / 2)}px`;
+    if (position === PopoverPositions.TOP || position === PopoverPositions.BOTTOM) {
+      style.left = `${offsetLeft + boundingRect.width / 2 - this.host.clientWidth / 2}px`;
     }
-    if (position === PopoverPositions.top_right ||
-      position === PopoverPositions.bottom_right) {
+    if (position === PopoverPositions.TOP_RIGHT || position === PopoverPositions.BOTTOM_RIGHT) {
       style.right = "auto";
       style.left = `${offsetLeft + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.top_left ||
-      position === PopoverPositions.bottom_left) {
+    if (position === PopoverPositions.TOP_LEFT || position === PopoverPositions.BOTTOM_LEFT) {
       style.left = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.right ||
-      position === PopoverPositions.left) {
-      style.top = `${offsetTop +
-        (boundingRect.height / 2) -
-        (this.host.clientHeight / 2)}px`;
+    if (position === PopoverPositions.RIGHT || position === PopoverPositions.LEFT) {
+      style.top = `${offsetTop + boundingRect.height / 2 - this.host.clientHeight / 2}px`;
       style.bottom = "auto";
     }
-    if (position === PopoverPositions.right) {
+    if (position === PopoverPositions.RIGHT) {
       style.right = "auto";
       style.left = `${offsetLeft + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.left) {
+    if (position === PopoverPositions.LEFT) {
       style.left = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
     }
@@ -292,7 +281,7 @@ export class ZTooltipDeprecated {
         "mutable": true,
         "complexType": {
           "original": "PopoverPositions",
-          "resolved": "PopoverPositions.auto | PopoverPositions.bottom | PopoverPositions.bottom_left | PopoverPositions.bottom_right | PopoverPositions.left | PopoverPositions.left_bottom | PopoverPositions.left_top | PopoverPositions.right | PopoverPositions.right_bottom | PopoverPositions.right_top | PopoverPositions.top | PopoverPositions.top_left | PopoverPositions.top_right",
+          "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
           "references": {
             "PopoverPositions": {
               "location": "import",
@@ -308,7 +297,7 @@ export class ZTooltipDeprecated {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "PopoverPositions.auto"
+        "defaultValue": "PopoverPositions.AUTO"
       },
       "open": {
         "type": "boolean",

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

@@ -6,34 +6,34 @@
 
   position: relative;
   display: none;
+  min-width: calc(var(--space-unit) * 8);
+  min-height: calc(var(--space-unit) * 4);
   align-items: center;
   justify-content: center;
   padding: var(--space-unit);
-  min-width: calc(var(--space-unit) * 8);
-  min-height: calc(var(--space-unit) * 4);
+  background: var(--z-tooltip-theme--surface);
+  border-radius: var(--border-radius-small);
   color: var(--z-tooltip-theme--text);
-  fill: currentColor;
+  fill: currentcolor;
+  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
   font-family: var(--font-family-sans);
   text-align: center;
-  border-radius: var(--border-radius-small);
-  background: var(--z-tooltip-theme--surface);
-  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
   will-change: filter;
 }
 
 :host(.legacy) {
   display: inline-flex;
-  padding: calc(var(--space-unit) * 2);
   min-width: auto;
-  min-height: auto;
   max-width: 200px;
-  font-style: italic;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  font-size: 12px;
+  min-height: auto;
+  padding: calc(var(--space-unit) * 2);
   border: var(--border-size-small) solid var(--gray200);
   border-radius: var(--border-radius);
-  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08));
+  filter: drop-shadow(0 0 2px rgb(0 0 0 / 8%));
+  font-size: 12px;
+  font-style: italic;
+  letter-spacing: 0.32px;
+  line-height: 16px;
 }
 
 :host(.legacy)::before {
@@ -45,84 +45,84 @@
   --arrow-center-x-offset: calc(50% - calc(var(--arrow-size) / 2));
   --arrow-center-y-offset: calc(100% - calc(var(--arrow-size) / 2));
 
-  content: '';
   position: absolute;
   width: var(--arrow-size);
   height: var(--arrow-size);
   background: inherit;
+  content: "";
   transform: rotate(45deg);
 }
 
-:host([open][style*='top:']),
-:host([open][style*='inset:']) {
+:host([open][style*="top:"]),
+:host([open][style*="inset:"]) {
   display: inline-flex;
 }
 
-:host([position^='top']) {
+:host([position^="top"]) {
   margin-bottom: var(--space-unit);
 }
 
-:host([position='right']) {
+:host([position="right"]) {
   margin-left: var(--space-unit);
 }
 
-:host([position='top_right']),
-:host([position='bottom_right']) {
+:host([position="top_right"]),
+:host([position="bottom_right"]) {
   margin-left: var(--edge-offset);
 }
 
-:host([position^='bottom']) {
+:host([position^="bottom"]) {
   margin-top: var(--space-unit);
 }
 
-:host([position='left']) {
+:host([position="left"]) {
   margin-right: var(--space-unit);
 }
 
-:host([position='top_left']),
-:host([position='bottom_left']) {
+:host([position="top_left"]),
+:host([position="bottom_left"]) {
   margin-right: var(--edge-offset);
 }
 
 /* Arrow style */
 
-:host([position^='top'])::before {
+:host([position^="top"])::before {
   top: var(--arrow-center-y-offset);
 }
 
-:host([position^='bottom'])::before {
+:host([position^="bottom"])::before {
   bottom: var(--arrow-center-y-offset);
 }
 
-:host([position='top'])::before,
-:host([position='bottom'])::before {
+:host([position="top"])::before,
+:host([position="bottom"])::before {
   left: var(--arrow-center-x-offset);
 }
 
-:host([position='right'])::before,
-:host([position='left'])::before {
+:host([position="right"])::before,
+:host([position="left"])::before {
   top: var(--arrow-center-x-offset);
 }
 
-:host([position='right'])::before {
+:host([position="right"])::before {
   right: var(--arrow-center-y-offset);
 }
 
-:host([position='top_right'])::before,
-:host([position='bottom_right'])::before {
+:host([position="top_right"])::before,
+:host([position="bottom_right"])::before {
   right: var(--arrow-edge-offset);
 }
 
-:host([position='left'])::before {
+:host([position="left"])::before {
   left: var(--arrow-center-y-offset);
 }
 
-:host([position='top_left'])::before,
-:host([position='bottom_left'])::before {
+:host([position="top_left"])::before,
+:host([position="bottom_left"])::before {
   left: var(--arrow-edge-offset);
 }
 
 ::slotted(*) {
-  flex: 1 auto;
   overflow: auto;
+  flex: 1 auto;
 }

package/dist/collection/index.js

@@ -1,6 +1,7 @@
 import { colorFromId } from "./utils/utils";
+const UTILS = {
+  colorFromId,
+};
+export { UTILS as Utils };
 export * from "./components";
 export * from "./beans";
-export const Utils = {
-  colorFromId
-};

package/dist/collection/snowflakes/myz/card/z-myz-card/index.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { LicenseTypeEnum } from "../../../../beans/index";
+import { LicenseType } from "../../../../beans/index";
 /**
  * @slot  - generic card slot
  */
@@ -12,12 +12,15 @@ export class ZMyzCardComponent {
   }
   retrieveClass() {
     let elemClasses = "";
-    if (this.cardtype === LicenseTypeEnum.real)
+    if (this.cardtype === LicenseType.REAL) {
       elemClasses += "real";
-    else if (this.cardtype === LicenseTypeEnum.trial)
+    }
+    else if (this.cardtype === LicenseType.TRIAL) {
       elemClasses += "trial";
-    else if (this.cardtype === LicenseTypeEnum.temp)
+    }
+    else if (this.cardtype === LicenseType.TEMP) {
       elemClasses += "temp";
+    }
     if (this.faded) {
       elemClasses += " faded";
     }
@@ -67,10 +70,10 @@ export class ZMyzCardComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "LicenseTypeEnum",
-          "resolved": "LicenseTypeEnum.real | LicenseTypeEnum.temp | LicenseTypeEnum.trial | LicenseTypeEnum.virtual",
+          "original": "LicenseType",
+          "resolved": "LicenseType.REAL | LicenseType.TEMP | LicenseType.TRIAL | LicenseType.VIRTUAL",
           "references": {
-            "LicenseTypeEnum": {
+            "LicenseType": {
               "location": "import",
               "path": "../../../../beans/index"
             }

package/dist/collection/snowflakes/myz/card/z-myz-card/styles.css

@@ -3,16 +3,16 @@
 }
 
 div {
-  background-color: var(--color-surface01);
   display: flex;
-  flex-direction: column;
+  overflow: var(--card-overflow);
   width: auto;
-  box-sizing: border-box;
   width: 256px; /* TODO: width must be 100% - must be handled in dashboard */
   height: 522px;
+  box-sizing: border-box;
+  flex-direction: column;
   border: var(--border-size-medium) solid var(--color-surface03);
+  background-color: var(--color-surface01);
   border-radius: var(--border-radius);
-  overflow: var(--card-overflow);
 }
 
 div.real,

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { AlertTypesEnum } from "../../../../beans";
+import { AlertType } from "../../../../beans";
 export class ZMyzCardAlert {
   emitUndoAction() {
     this.undoAction.emit({ actionType: this.type });
@@ -18,10 +18,10 @@ export class ZMyzCardAlert {
     let className = "";
     switch (this.type) {
       case "add":
-        className = "addAlert";
+        className = "add-alert";
         break;
       case "remove":
-        className = "removeAlert";
+        className = "remove-alert";
         break;
       default:
         className = "";
@@ -32,15 +32,15 @@ export class ZMyzCardAlert {
   getAlertType() {
     switch (this.type) {
       case "add":
-        return AlertTypesEnum.success;
+        return AlertType.SUCCESS;
       case "remove":
-        return AlertTypesEnum.warning;
+        return AlertType.WARNING;
       default:
         return null;
     }
   }
   render() {
-    return (h("div", { class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { type: this.getAlertType() }, h("div", { class: "relativeContainer" }, h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { class: "contentText" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "contentAction", onClick: (e) => {
+    return (h("div", { class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { type: this.getAlertType() }, h("div", { class: "relative-container" }, h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
         this.handleActionButtonClick(e);
       }, onKeyPress: (e) => {
         this.handleSpaceKeyPress(e);

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/styles.css

@@ -1,60 +1,60 @@
 :host {
   position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-  width: 100%;
-  top: 0px;
-  left: 0px;
-  z-index: 2;
 }
 
 :host > z-alert {
   height: calc(var(--space-unit) * 6);
 }
 
-.relativeContainer {
+.relative-container {
   position: relative;
   display: grid;
-  grid-template-columns: 18px auto 46px;
-  grid-template-rows: 1fr;
-  grid-column-gap: var(--space-unit);
   align-items: center;
   padding: 0;
+  grid-column-gap: var(--space-unit);
+  grid-template-columns: 18px auto 46px;
+  grid-template-rows: 1fr;
   outline: none;
 }
 
-.relativeContainer::-moz-focus-inner {
+.relative-container::-moz-focus-inner {
   border: 0;
 }
 
-.alert-external-wrapper.removeAlert {
+.alert-external-wrapper.remove-alert {
   border: var(--border-size-medium) solid var(--color-surface02);
   border-top: none;
 }
 
-:host div.addAlert {
+:host div.add-alert {
   background: var(--color-success-inverse);
 }
 
-:host div.removeAlert {
+:host div.remove-alert {
   background: var(--color-warning-inverse);
 }
 
-:host div > .contentText {
+:host div > .content-text {
   color: var(--color-surface05);
   font-size: 14px;
   letter-spacing: 0.16px;
   line-height: 20px;
 }
 
-:host div > .contentAction {
+:host div > .content-action {
+  height: 20px;
   color: var(--color-primary01);
+  cursor: pointer;
   font-size: 12px;
   font-weight: var(--font-sb);
-  height: 20px;
   letter-spacing: 0.32px;
   line-height: 20px;
-  cursor: pointer;
 }
 
 :host div > z-icon {