@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/collection/components/z-contextual-menu/styles.css

@@ -1,8 +1,8 @@
 :host {
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
@@ -10,10 +10,10 @@
 button {
   width: 100%;
   height: 100%;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
-  padding: 0;
 }
 
 z-popover {
@@ -24,9 +24,9 @@ z-popover {
   position: relative;
   min-width: 112px;
   max-width: 280px;
-  white-space: nowrap;
   background-color: var(--color-surface02);
   box-shadow: var(--shadow-2);
+  white-space: nowrap;
 }
 
 .element-container:hover {
@@ -36,19 +36,19 @@ z-popover {
 
 .element-text {
   overflow: hidden;
-  text-overflow: ellipsis;
   font-size: 14px;
+  text-overflow: ellipsis;
 }
 
 .element-container,
 .disabled-element-container {
   display: flex;
-  align-items: center;
-  gap: var(--space-unit);
-  fill: var(--color-disabled03);
-  padding: calc(var(--space-unit) / 2) var(--space-unit);
   min-height: calc(var(--space-unit) * 4);
   box-sizing: border-box;
+  align-items: center;
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  fill: var(--color-disabled03);
+  gap: var(--space-unit);
 }
 
 .element-container {

package/dist/collection/components/z-cover-hero/index.js

@@ -32,8 +32,9 @@ export class ZCoverHero {
   render() {
     return (h(Host, null, this.variant === CoverHeroVariant.STACKED &&
       this.contentPosition === CoverHeroContentPosition.TOP &&
-      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), (this.variant === CoverHeroVariant.STACKED && this.contentPosition ===
-      CoverHeroContentPosition.BOTTOM) && this.renderContent()));
+      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.BOTTOM &&
+      this.renderContent()));
   }
   static get is() { return "z-cover-hero"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-cover-hero/styles.css

@@ -13,10 +13,10 @@
 
 :host .content-hero {
   position: relative;
-  align-items: baseline;
   width: 100%;
   height: var(--cover-hero-height);
   min-height: calc(var(--space-unit) * 30);
+  align-items: baseline;
   background-color: var(--gray600);
 }
 
@@ -45,20 +45,20 @@
 
 ::slotted(z-info-reveal) {
   position: absolute;
-  bottom: var(--grid-margin);
-  right: var(--grid-margin);
   z-index: 1;
+  right: var(--grid-margin);
+  bottom: var(--grid-margin);
 }
 
 /* Variant overlay */
 :host([variant="overlay"]) .content-hero .cover::after {
-  content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--cover-hero-overlay);
+  content: "";
 }
 
 :host([variant="overlay"]) .content-hero .content-container {

package/dist/collection/components/z-divider/index.js

@@ -3,11 +3,11 @@ import { DividerSize, DividerOrientation } from "../../beans";
 export class ZDivider {
   constructor() {
     /** [optional] Divider size */
-    this.size = DividerSize.small;
+    this.size = DividerSize.SMALL;
     /** [optional] Divider color */
     this.color = "gray200";
     /** [optional] Divider orintation */
-    this.orientation = DividerOrientation.horizontal;
+    this.orientation = DividerOrientation.HORIZONTAL;
   }
   render() {
     return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
@@ -31,7 +31,7 @@ export class ZDivider {
         "mutable": false,
         "complexType": {
           "original": "DividerSize",
-          "resolved": "DividerSize.large | DividerSize.medium | DividerSize.small",
+          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
           "references": {
             "DividerSize": {
               "location": "import",
@@ -47,7 +47,7 @@ export class ZDivider {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "DividerSize.small"
+        "defaultValue": "DividerSize.SMALL"
       },
       "color": {
         "type": "string",
@@ -72,7 +72,7 @@ export class ZDivider {
         "mutable": false,
         "complexType": {
           "original": "DividerOrientation",
-          "resolved": "DividerOrientation.horizontal | DividerOrientation.vertical",
+          "resolved": "DividerOrientation.HORIZONTAL | DividerOrientation.VERTICAL",
           "references": {
             "DividerOrientation": {
               "location": "import",
@@ -88,7 +88,7 @@ export class ZDivider {
         },
         "attribute": "orientation",
         "reflect": false,
-        "defaultValue": "DividerOrientation.horizontal"
+        "defaultValue": "DividerOrientation.HORIZONTAL"
       }
     };
   }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
   render() {
-    return (h(Host, null));
+    return h(Host, null);
   }
   static get is() { return "z-ghost-loading"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-ghost-loading/styles.css

@@ -1,33 +1,33 @@
 :host {
   display: inline-block;
+  overflow: hidden;
   width: 100%;
   height: 100%;
   background: var(--bg-neutral-100);
-  overflow: hidden;
   border-radius: 4px;
   transform: translate3d(0, 0, 0);
 }
 
 :host::after {
-    content: ' ';
-    display: block;
-    width: 100%;
-    height: 100%;
-    box-shadow: #e8ebee20 0px 0px 1px;
-
-    background-image: linear-gradient(
-        90deg,
-        var(--bg-neutral-100) 0%,
-        var(--bg-neutral-150) 95%,
-        var(--bg-neutral-100) 100%
-    );
-    animation: progress 1.6s ease-in-out infinite;
+  display: block;
+  width: 100%;
+  height: 100%;
+  animation: progress 1.6s ease-in-out infinite;
+  background-image: linear-gradient(
+    90deg,
+    var(--bg-neutral-100) 0%,
+    var(--bg-neutral-150) 95%,
+    var(--bg-neutral-100) 100%
+  );
+  box-shadow: #e8ebee20 0 0 1px;
+  content: " ";
 }
 
 @keyframes progress {
   0% {
     transform: translateX(-100%);
   }
+
   100% {
     transform: translateX(100%);
   }

package/dist/collection/components/z-info-reveal/index.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 import { InfoRevealPosition } from "../../beans";
 /**
  * Info reveal component.
@@ -13,8 +13,9 @@ import { InfoRevealPosition } from "../../beans";
 export class ZInfoReveal {
   constructor() {
     /** Name of the icon for the open button */
-    this.icon = 'informationsource';
-    this.position = InfoRevealPosition.bottom_right;
+    this.icon = "informationsource";
+    /** Info reveal's position */
+    this.position = InfoRevealPosition.BOTTOM_RIGHT;
     /** Whether the info panel is open. */
     this.open = false;
     /** Current index for the info queue. */
@@ -23,10 +24,10 @@ export class ZInfoReveal {
   watchItems() {
     Array.from(this.el.children).forEach((child, index) => {
       if (this.currentIndex === index) {
-        child.setAttribute('data-current', '');
+        child.setAttribute("data-current", "");
       }
       else {
-        child.removeAttribute('data-current');
+        child.removeAttribute("data-current");
       }
     });
   }
@@ -54,7 +55,7 @@ export class ZInfoReveal {
     }
   }
   render() {
-    return h(Host, { open: this.open }, h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { name: this.icon })), this.open && h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))));
+    return (h(Host, { open: this.open }, h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
   }
   static get is() { return "z-info-reveal"; }
   static get encapsulation() { return "shadow"; }
@@ -86,16 +87,16 @@ export class ZInfoReveal {
         },
         "attribute": "icon",
         "reflect": false,
-        "defaultValue": "'informationsource'"
+        "defaultValue": "\"informationsource\""
       },
       "position": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InfoRevealPositionBean",
-          "resolved": "\"bottom_left\" | \"bottom_right\" | \"top_left\" | \"top_right\"",
+          "original": "InfoRevealPosition",
+          "resolved": "InfoRevealPosition.BOTTOM_LEFT | InfoRevealPosition.BOTTOM_RIGHT | InfoRevealPosition.TOP_LEFT | InfoRevealPosition.TOP_RIGHT",
           "references": {
-            "InfoRevealPositionBean": {
+            "InfoRevealPosition": {
               "location": "import",
               "path": "../../beans"
             }
@@ -105,11 +106,11 @@ export class ZInfoReveal {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Info reveal's position"
         },
         "attribute": "position",
         "reflect": true,
-        "defaultValue": "InfoRevealPosition.bottom_right"
+        "defaultValue": "InfoRevealPosition.BOTTOM_RIGHT"
       },
       "label": {
         "type": "string",

package/dist/collection/components/z-info-reveal/styles.css

@@ -11,39 +11,40 @@
   color: var(--z-info-reveal-theme--text);
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
-  line-height: 1.5;
   letter-spacing: 0;
+  line-height: 1.5;
 }
 
 button {
   padding: 0;
-  background-color: transparent;
-  cursor: pointer;
   border: none;
+  background-color: transparent;
   border-radius: 0;
   color: inherit;
-  fill: currentColor;
+  cursor: pointer;
+  fill: currentcolor;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  line-height: inherit;
   letter-spacing: inherit;
+  line-height: inherit;
 }
 
 z-icon {
   --z-icon-width: calc(var(--space-unit) * 3);
   --z-icon-height: calc(var(--space-unit) * 3);
+
   display: flex;
 }
 
 .z-info-reveal-trigger {
   display: flex;
-  align-items: center;
   width: fit-content;
   height: 100%;
-  column-gap: calc(var(--space-unit) / 2);
+  align-items: center;
   padding: calc(var(--space-unit) / 2);
   box-shadow: var(--z-info-reveal-shadow);
+  column-gap: calc(var(--space-unit) / 2);
 }
 
 :host([position="top_left"]) .z-info-reveal-trigger,
@@ -59,10 +60,10 @@ z-icon {
   position: absolute;
   display: flex;
   max-width: var(--z-info-reveal-max-width);
-  column-gap: calc(var(--space-unit) / 2);
   padding: calc(var(--space-unit) / 2);
   background-color: var(--z-info-reveal-theme--surface);
   box-shadow: var(--z-info-reveal-shadow);
+  column-gap: calc(var(--space-unit) / 2);
   cursor: pointer;
 }
 

package/dist/collection/components/z-offcanvas/index.js

@@ -1,20 +1,20 @@
-import { h } from "@stencil/core";
-import { OffCanvasVariantsEnum, TransitionDirectionEnum } from "../../beans";
+import { h, Host } from "@stencil/core";
+import { OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - set the content of the canvas
  */
 export class ZOffcanvas {
   constructor() {
     /**
-    * Offcanvas variant.
-    * Can be one of "overlay", "pushcontent"
-    * Default variant: pushcontent
-    */
-    this.variant = OffCanvasVariantsEnum.pushcontent;
+     * Offcanvas variant.
+     * Can be one of "overlay", "pushcontent"
+     * Default variant: pushcontent
+     */
+    this.variant = OffCanvasVariant.PUSHCONTENT;
     /** open component. Default: false */
     this.open = false;
     /** open content transitioning in a specified direction left | right. Default: left */
-    this.transitiondirection = TransitionDirectionEnum.left;
+    this.transitiondirection = TransitionDirection.LEFT;
   }
   componentWillLoad() {
     this.handleOpenStatus();
@@ -27,7 +27,7 @@ export class ZOffcanvas {
     if (this.open) {
       this.hostElement.style.display = "flex";
     }
-    else if (this.variant === OffCanvasVariantsEnum.pushcontent) {
+    else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "hidden";
     }
@@ -36,16 +36,13 @@ export class ZOffcanvas {
     if (this.hostElement.hasAttribute("open")) {
       this.hostElement.querySelector(`.canvas-content`).focus();
     }
-    else if (this.variant === OffCanvasVariantsEnum.overlay) {
+    else if (this.variant === OffCanvasVariant.OVERLAY) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "initial";
     }
   }
   render() {
-    return [
-      h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { class: "canvas-content" }, h("slot", { name: "canvasContent" }))),
-      h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => this.open = false })
-    ];
+    return (h(Host, null, h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { class: "canvas-content" }, h("slot", { name: "canvasContent" }))), h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) })));
   }
   static get is() { return "z-offcanvas"; }
   static get encapsulation() { return "scoped"; }
@@ -65,10 +62,10 @@ export class ZOffcanvas {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "OffCanvasVariantsEnum",
-          "resolved": "OffCanvasVariantsEnum.overlay | OffCanvasVariantsEnum.pushcontent",
+          "original": "OffCanvasVariant",
+          "resolved": "OffCanvasVariant.OVERLAY | OffCanvasVariant.PUSHCONTENT",
           "references": {
-            "OffCanvasVariantsEnum": {
+            "OffCanvasVariant": {
               "location": "import",
               "path": "../../beans"
             }
@@ -82,7 +79,7 @@ export class ZOffcanvas {
         },
         "attribute": "variant",
         "reflect": true,
-        "defaultValue": "OffCanvasVariantsEnum.pushcontent"
+        "defaultValue": "OffCanvasVariant.PUSHCONTENT"
       },
       "open": {
         "type": "boolean",
@@ -106,10 +103,10 @@ export class ZOffcanvas {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "TransitionDirectionEnum",
-          "resolved": "TransitionDirectionEnum.left | TransitionDirectionEnum.right",
+          "original": "TransitionDirection",
+          "resolved": "TransitionDirection.LEFT | TransitionDirection.RIGHT",
           "references": {
-            "TransitionDirectionEnum": {
+            "TransitionDirection": {
               "location": "import",
               "path": "../../beans"
             }
@@ -123,7 +120,7 @@ export class ZOffcanvas {
         },
         "attribute": "transitiondirection",
         "reflect": true,
-        "defaultValue": "TransitionDirectionEnum.left"
+        "defaultValue": "TransitionDirection.LEFT"
       }
     };
   }

package/dist/collection/components/z-offcanvas/styles.css

@@ -1,59 +1,69 @@
 :host {
   --z-offcanvas--container-width: 375px;
-  --z-offcanvas--top-space: 0px;
+  --z-offcanvas--top-space: 0;
 
   z-index: 1000;
   display: none;
-  justify-content: end;
-  height: 100%;
   min-width: 100%;
+  height: 100%;
+  justify-content: end;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
 .canvas-container {
-  display: flex;
-  flex-direction: column;
   z-index: 1010;
-  min-width: 100%;
-  height: 100%;
+  display: flex;
   overflow: -moz-scrollbars-none;
   overflow: hidden;
+  min-width: 100%;
+  height: 100%;
+  flex-direction: column;
   background: var(--color-surface01);
   transform: translateX(100%);
 }
 
-@keyframes enterRight {
-  from {transform: translateX(100%);}
-  to {transform: translateX(0);}
+@keyframes enter-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
 }
 
 :host([open]) > .canvas-container {
-  animation-name: enterRight;
-  animation-duration:0.4s;
+  animation-duration: 0.4s;
+  animation-name: enter-right;
   animation-timing-function: ease-out;
   transform: translateX(0);
 }
 
-@keyframes exitRight {
-  from {transform: translateX(0);}
-  to {transform: translateX(100%);}
+@keyframes exit-right {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
 }
 
 :host(:not([open])[variant="overlay"]) > .canvas-container {
-  animation-name: exitRight;
-  animation-duration:0.4s;
+  animation-duration: 0.4s;
+  animation-name: exit-right;
   animation-timing-function: ease-out;
   transform: translateX(100%);
 }
 
 :host([variant="overlay"]) {
   position: fixed;
-  height: calc(100% - var(--z-offcanvas--top-space));
   top: var(--z-offcanvas--top-space);
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
+  height: calc(100% - var(--z-offcanvas--top-space));
 }
 
 :host([variant="overlay"]) .canvas-background {
@@ -73,46 +83,51 @@
   transform: translateX(-100%);
 }
 
-@keyframes enterLeft {
-  from {transform: translateX(-100%);}
-  to {transform: translateX(0);}
+@keyframes enter-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
 }
 
 :host([transitiondirection="right"][open]) > .canvas-container {
-  animation-name: enterLeft;
   animation-duration: 0.4s;
+  animation-name: enter-left;
   animation-timing-function: ease-out;
   transform: translateX(0);
 }
 
-@keyframes exitLeft {
-  from {transform: translateX(0);}
-  to {transform: translateX(-100%);}
+@keyframes exit-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
 }
 
 :host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  animation-name: exitLeft;
-  animation-duration:0.4s;
+  animation-duration: 0.4s;
+  animation-name: exit-left;
   animation-timing-function: ease-out;
   transform: translateX(-100%);
 }
 
 .canvas-container > .canvas-content {
-  flex: 1 auto;
   overflow: auto;
-  overflow-x: hidden;
-  padding: 0 calc(var(--space-unit) * 2) ;
+  flex: 1 auto;
+  padding: 0 calc(var(--space-unit) * 2);
   margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
+  overflow-x: hidden;
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar {
-  background: linear-gradient(
-    to right,
-    transparent 0 3px,
-    var(--gray200) 3px 7px,
-    transparent 7px 10px
-  );
   width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
@@ -121,9 +136,9 @@
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar-thumb {
+  width: 10px;
   background-color: var(--color-primary01);
   border-radius: var(--border-radius);
-  width: 10px;
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {
@@ -140,24 +155,29 @@
   :host {
     min-width: auto;
   }
+
   .canvas-container {
     width: auto;
-    height: auto;
     min-width: max(var(--z-offcanvas--container-width), 375px);
-    min-height: calc(var(--space-unit) * 40);
     max-width: max(var(--z-offcanvas--container-width), 375px);
+    height: auto;
+    min-height: calc(var(--space-unit) * 40);
   }
 
   @keyframes grow {
-    from {width: 0;}
-    to {width: max(var(--z-offcanvas--container-width), 375px)}
+    from {
+      width: 0;
+    }
+
+    to {
+      width: max(var(--z-offcanvas--container-width), 375px);
+    }
   }
 
   :host(:not([variant="overlay"])[open]) {
-    animation-name: grow;
+    width: auto;
     animation-duration: 0.4s;
+    animation-name: grow;
     animation-timing-function: ease-out;
-    width: auto;
   }
 }
-