@zanichelli/albe-web-components 2.30.0-rc4 → 2.30.0-rc8

package/dist/collection/components/navigation/z-app-topbar/styles.css

@@ -5,13 +5,13 @@
   top: 0;
   height: calc(var(--space-unit) * 6);
   padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);
-  border-radius: var(--border-radius-min);
-  background-color: var(--bg-grey-900);
+  border-radius: var(--border-no-radius);
+  background-color: var(--gray900);
   z-index: 99;
 }
 
 :host(.light) {
-  background-color: var(--bg-white);
+  background-color: var(--color-white);
 }
 
 :host > div {
@@ -20,16 +20,18 @@
   align-items: center;
 }
 
-#left-panel {
+:host(.limited-width) #content-container {
+  margin: auto;
+  max-width: var(--mw);
+}
+
+.content-panel {
   display: flex;
-  gap: calc(var(--space-unit) + 2px);
   align-items: center
 }
 
-#right-panel {
-  display: flex;
-  gap: calc(var(--space-unit) * 2);
-  align-items: center;
+.content-panel > :not(:last-child) {
+  margin-right: calc(var(--space-unit) * 2);
 }
 
 #divider-container {
@@ -37,26 +39,26 @@
 }
 
 z-link {
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
 }
 
-z-logo {
-  margin-right: calc(var(--space-unit) - 2px);
-}
-
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   :host {
     padding: var(--space-unit) calc(var(--space-unit) * 2) var(--space-unit) var(--space-unit);
   }
 
+  :host(.limited-width) {
+    padding: var(--space-unit);
+  }
+
   #divider-container {
     display: block;
-    height: 24px;
+    height: calc(var(--space-unit) * 3);
   }
 }
 
@@ -66,13 +68,4 @@ z-logo {
 
 /* Wide breakpoint */
 @media only screen and (min-width: 1366px) {
-  :host(.limited-width) {
-    padding: var(--space-unit);
-  }
-
-  #content-container.limited-width {
-    margin: auto;
-    max-width: var(--mw);
-  }
-  
 }

package/dist/collection/components/navigation/z-user-dropdown/index.js

@@ -3,8 +3,8 @@ import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZUserDropdown {
   constructor() {
     /** if inner components colors are inverted, or not, default false */
-    this.useinversecolors = false;
-    this.ismenuopen = false;
+    this.useInverseColors = false;
+    this.isMenuOpen = false;
     this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
     this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
   }
@@ -15,81 +15,81 @@ export class ZUserDropdown {
     this.setMobileAndDivToResizeWidth();
   }
   componentWillRender() {
-    if (this.menucontent) {
-      this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
+    if (this.menuContent) {
+      this.linkArray = typeof this.menuContent === "string" ? JSON.parse(this.menuContent) : this.menuContent;
     }
   }
   setMobileAndDivToResizeWidth() {
     var _a;
-    if (this.divtoresize) {
-      this.ismobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
-      if (this.logged && !this.ismobile && this.ismenuopen) {
-        this.divtoresize.style.width = `${(_a = this.userbutton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
+    if (this.divToResize) {
+      this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
+      if (this.logged && !this.isMobile && this.isMenuOpen) {
+        this.divToResize.style.width = `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
       }
       else {
-        this.divtoresize.removeAttribute('style');
+        this.divToResize.removeAttribute('style');
       }
     }
   }
   emitUserButtonClick() {
-    this.userButtonClick.emit(this.ismenuopen);
+    this.userButtonClick.emit(this.isMenuOpen);
   }
   emitDropdownMenuLinkClick(e) {
-    this.ismenuopen = false;
+    this.isMenuOpen = false;
     this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
   }
   handleResize() {
-    this.ismobile = window.innerWidth <= mobileBreakpoint;
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
   }
   handleOrientationChange() {
-    this.ismobile = screen.width <= mobileBreakpoint;
+    this.isMobile = screen.width <= mobileBreakpoint;
   }
   handleClickOutside(e) {
     if (e.target.nodeName !== "Z-USER-DROPDOWN") {
-      this.ismenuopen = false;
+      this.isMenuOpen = false;
     }
   }
   handleLoggedButtonClick() {
-    this.ismenuopen = !this.ismenuopen;
+    this.isMenuOpen = !this.isMenuOpen;
     this.emitUserButtonClick();
   }
   renderGuestButton() {
-    return (h("button", { id: "guestbutton", class: this.useinversecolors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
+    return (h("button", { id: "guestbutton", class: this.useInverseColors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
   }
   renderLoggedButton() {
-    const direction = this.ismenuopen ? "up" : "down";
-    const colorClass = this.useinversecolors ? "inverse" : "";
-    return (h("button", { ref: (el) => (this.userbutton = el), title: this.userfullname, class: `${colorClass} ${this.ismenuopen ? "open" : ""}`, onClick: this.handleLoggedButtonClick },
+    const direction = this.isMenuOpen ? "up" : "down";
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (h("button", { ref: (el) => (this.userButton = el), title: this.userFullName, class: `${colorClass} ${this.isMenuOpen ? "open" : ""}`, onClick: this.handleLoggedButtonClick },
       h("div", null,
         h("div", { class: "firstline" },
           h("z-icon", { class: colorClass, name: "user-avatar-filled", height: 16, width: 16 }),
-          !this.ismobile && h("div", { class: `userfullname ${colorClass}` }, this.userfullname),
+          !this.isMobile && h("div", { class: `userfullname ${colorClass}` }, this.userFullName),
           h("z-icon", { class: colorClass, name: `caret-${direction}-filled`, height: 16, width: 16 })),
-        !this.ismobile && this.ismenuopen && h("div", { class: `useremail ${colorClass}` }, this.useremail))));
+        !this.isMobile && this.isMenuOpen && h("div", { class: `useremail ${colorClass}` }, this.userEmail))));
   }
   getZLinkTextcolor() {
-    if (this.ismobile) {
-      return this.useinversecolors ? "black" : "white";
+    if (this.isMobile) {
+      return this.useInverseColors ? "black" : "white";
     }
     else {
-      return this.useinversecolors ? "white" : "black";
+      return this.useInverseColors ? "white" : "black";
     }
   }
   renderDropdownMenu() {
-    const colorClass = this.useinversecolors ? "inverse" : "";
-    return (this.ismenuopen && (h("ul", { class: colorClass },
-      this.ismobile &&
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (this.isMenuOpen && (h("ul", { class: colorClass },
+      this.isMobile &&
         h("li", { class: colorClass },
-          h("div", { class: `userfullname ${colorClass}` }, this.userfullname),
-          h("div", { class: `useremail ${colorClass}` }, this.useremail)),
-      this.linkarray && this.linkarray.map((link) => h("li", { id: link.id, class: colorClass },
+          h("div", { class: `userfullname ${colorClass}` }, this.userFullName),
+          h("div", { class: `useremail ${colorClass}` }, this.userEmail)),
+      this.linkArray && this.linkArray.map((link) => h("li", { id: link.id, class: colorClass },
         h("z-link", { textcolor: this.getZLinkTextcolor(), href: link.link, htmlid: link.id, target: link.target, icon: link.icon, onZLinkClick: this.emitDropdownMenuLinkClick }, link.label))))));
   }
   render() {
-    const openClass = `${this.logged && this.ismenuopen ? "open" : ""}`;
-    const colorClass = this.useinversecolors ? "inverse" : "";
+    const openClass = `${this.logged && this.isMenuOpen ? "open" : ""}`;
+    const colorClass = this.useInverseColors ? "inverse" : "";
     return (h(Host, { class: colorClass },
-      h("div", { ref: (el) => (this.divtoresize = el), class: openClass, onClick: (e) => e.stopPropagation() },
+      h("div", { ref: (el) => (this.divToResize = el), class: openClass },
         h("div", { class: `${colorClass} ${openClass}` },
           this.logged ? this.renderLoggedButton() : this.renderGuestButton(),
           this.logged && this.renderDropdownMenu()))));
@@ -120,7 +120,7 @@ export class ZUserDropdown {
       "attribute": "logged",
       "reflect": false
     },
-    "userfullname": {
+    "userFullName": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -134,10 +134,10 @@ export class ZUserDropdown {
         "tags": [],
         "text": "user full name"
       },
-      "attribute": "userfullname",
+      "attribute": "user-full-name",
       "reflect": false
     },
-    "useremail": {
+    "userEmail": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -151,10 +151,10 @@ export class ZUserDropdown {
         "tags": [],
         "text": "user email"
       },
-      "attribute": "useremail",
+      "attribute": "user-email",
       "reflect": false
     },
-    "menucontent": {
+    "menuContent": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -173,10 +173,10 @@ export class ZUserDropdown {
         "tags": [],
         "text": "Json stringified or array to fill menu dropdown"
       },
-      "attribute": "menucontent",
+      "attribute": "menu-content",
       "reflect": false
     },
-    "useinversecolors": {
+    "useInverseColors": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -190,14 +190,14 @@ export class ZUserDropdown {
         "tags": [],
         "text": "if inner components colors are inverted, or not, default false"
       },
-      "attribute": "useinversecolors",
+      "attribute": "use-inverse-colors",
       "reflect": false,
       "defaultValue": "false"
     }
   }; }
   static get states() { return {
-    "ismenuopen": {},
-    "ismobile": {}
+    "isMenuOpen": {},
+    "isMobile": {}
   }; }
   static get events() { return [{
       "method": "userButtonClick",
@@ -207,7 +207,7 @@ export class ZUserDropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted on enter or user Button click, returns ismenuopen (bool)"
+        "text": "Emitted on enter or user Button click, returns isMenuOpen (bool)"
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/navigation/z-user-dropdown/styles.css

@@ -1,9 +1,9 @@
 :host {
-  background-color: var(--bg-grey-900);
+  background-color: var(--gray900);
 }
 
 :host(.inverse) {
-  background-color: var(--bg-white);
+  background-color: var(--color-white);
 }
 
 button {
@@ -12,7 +12,7 @@ button {
   flex-direction: column;
   width: 100%;
   margin: 0;
-  background-color: var(--bg-grey-900);
+  background-color: var(--gray900);
   border: none;
   padding: 0;
   letter-spacing: 0.16px;
@@ -20,7 +20,7 @@ button {
 }
 
 button.inverse {
-  background-color: var(--bg-white);
+  background-color: var(--color-white);
 }
 
 button div.firstline {
@@ -36,21 +36,22 @@ button.open div.firstline {
 
 z-icon {
   padding: 0 2px;
-  fill: var(--text-white);
+  fill: var(--color-white);
 }
 
 z-icon.inverse {
-  fill: var(--bg-grey-900);
+  fill: var(--gray900);
 }
 
 ul {
+  box-sizing: border-box;
   position: absolute;
   left: 0;
   padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
   width: 100%;
   margin: calc(var(--space-unit) * 1.5) 0 0 0;
-  background-color: var(--bg-grey-900);
-  font-family: var(--dashboard-font);
+  background-color: var(--gray900);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
   font-size: 14px;
   line-height: 20px;
@@ -58,15 +59,16 @@ ul {
 }
 
 ul.inverse {
-  background-color: var(--bg-white);
+  background-color: var(--color-white);
 }
 
 ul > li {
   display: flex;
   justify-content: flex-end;
+  white-space: nowrap;
   padding: calc(var(--space-unit) * 1.5 - 1px) 0;
-  margin: 0 calc(var(--space-unit) * 4) 0 0;
-  border-bottom: var(--border-base) solid var(--bg-grey-700);
+  margin: 0;
+  border-bottom: var(--border-base) solid var(--gray700);
 }
 
 ul > li.inverse {
@@ -76,6 +78,7 @@ ul > li.inverse {
 ul > li:first-child {
   border-top: none;
   padding-top: 0;
+  padding-bottom: calc(var(--space-unit) + 6px);
   flex-direction: column;
   align-items: end;
 }
@@ -92,7 +95,7 @@ ul > li:last-child {
   align-items: center;
   justify-content: center;
   width: 100%;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
   font-size: 14px;
   line-height: 1;
@@ -109,15 +112,15 @@ ul > li:last-child {
   height: 32px;
   min-width: 32px;
   padding: 0 calc(var(--space-unit) * 2);
-  background-color: var(--bg-white);
-  border-color: var(--bg-white);
-  color: var(--text-grey-800);
+  background-color: var(--color-white);
+  border-color: var(--color-white);
+  color: var(--gray800);
 }
 
 #guestbutton.inverse {
-  background-color: var(--bg-grey-800);
-  border-color: var(--bg-grey-800);
-  color: var(--text-white);
+  background-color: var(--gray800);
+  border-color: var(--gray800);
+  color: var(--color-white);
 }
 
 .userfullname {
@@ -125,40 +128,46 @@ ul > li:last-child {
   overflow: hidden;
   max-width: 250px;
   text-overflow: ellipsis;
-  color: var(--text-white);
-  font-family: var(--dashboard-font);
+  width: 100%;
+  color: var(--color-white);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0;
+  text-align: right;
 }
 
 .userfullname.inverse {
-  color: var(--text-grey-800);
+  color: var(--gray800);
 }
 
 .useremail {
-  color: var(--text-white);
-  font-family: var(--dashboard-font);
+  color: var(--color-white);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
   font-size: 12px;
   line-height: 16px;
   letter-spacing: 0.32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  text-align: right;
 }
 
 .useremail.inverse {
-  color: var(--text-grey-800);
+  color: var(--gray800);
 }
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   :host {
     height: calc(var(--space-unit) * 4);
-    background-color: var(--bg-grey-900);
+    background-color: var(--gray900);
   }
 
   :host(.inverse) {
-    background-color: var(--bg-white);
+    background-color: var(--color-white);
   }
 
   :host > div {
@@ -180,14 +189,14 @@ ul > li:last-child {
     position: absolute;
     right: calc(var(--space-unit) * -1);
     box-shadow: 0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);
-    background-color: var(--bg-white);
+    background-color: var(--color-white);
     margin-top: calc(var(--space-unit) / 2);
     padding: calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);
     transform: translate(0, -4px);
   }
 
   :host > div > div.inverse.open {
-    background-color: var(--bg-grey-800);
+    background-color: var(--gray800);
   }
 
   button {
@@ -200,105 +209,101 @@ ul > li:last-child {
   }
 
   button.open {
-    background-color: var(--bg-white);
-    border-top: var(--border-size-small) solid var(--bg-white);
+    background-color: var(--color-white);
+    border-top: var(--border-size-small) solid var(--color-white);
     border-top-left-radius: calc(var(--space-unit) * .5);
     border-top-right-radius: calc(var(--space-unit) * .5);
     max-width: initial;
     margin-left: var(--space-unit);
     padding-right: var(--space-unit);
-    padding-bottom: calc(var(--space-unit) * 2);
   }
 
   button.open.inverse {
-    border-top-color: var(--bg-grey-800);
-    background-color: var(--bg-grey-800);
+    border-top-color: var(--gray800);
+    background-color: var(--gray800);
   }
 
   button:not(.open) z-icon {
-    fill: var(--text-white);
+    fill: var(--color-white);
   }
 
   button:not(.open) z-icon.inverse {
-    fill: var(--text-grey-800);
+    fill: var(--gray800);
   }
 
   button.open z-icon {
-    fill: var(--text-grey-800);
+    fill: var(--gray800);
   }
-  
+
   button.open z-icon.inverse {
-    fill: var(--text-white);
+    fill: var(--color-white);
   }
 
   .userfullname {
-    font-family: var(--dashboard-font);
+    font-family: var(--font-family-sans);
     font-weight: var(--font-sb);
     font-size: 14px;
     line-height: 20px;
     letter-spacing: 0.16px;
-    padding: 0 calc(var(--space-unit) - 2px);
+    padding: 0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);
+    width: auto;
   }
 
   .userfullname.inverse {
-    color: var(--text-grey-800);
+    color: var(--gray800);
   }
 
   button.open div.userfullname {
-    color: var(--text-grey-800);
+    color: var(--gray800);
     max-width: none;
     text-overflow: clip;
   }
 
   button.open div.userfullname.inverse {
-    color: var(--text-white);
+    color: var(--color-white);
   }
 
   .useremail {
-    margin-right: calc(var(--space-unit) * 3 + 2px);
-    text-align: end;
+    padding-right: calc(var(--space-unit) * 3 - 2px);
+    box-sizing: border-box;
   }
 
   button.open div.useremail {
-    color: var(--text-grey-800);
+    color: var(--gray800);
   }
 
   button.open div.useremail.inverse {
-    color: var(--text-white);
+    color: var(--color-white);
   }
 
   ul {
     position: initial;
     left: initial;
     padding: 0;
-    margin-top: 0;
     width: 100%;
-    background-color: var(--bg-white);
-    border-bottom: var(--border-size-small) solid var(--bg-white);
-    border-bottom-left-radius: var(--border-radius-base);
-    border-bottom-right-radius: var(--border-radius-base);
+    background-color: var(--color-white);
   }
 
   ul.inverse {
-    border-bottom-color: var(--bg-grey-800);
-    background-color: var(--bg-grey-800);
+    border-bottom-color: var(--gray800);
+    background-color: var(--gray800);
   }
 
   ul > li {
-    color: var(--text-grey-800);
+    color: var(--gray800);
     border-bottom: var(--border-base) solid var(--gray400);
     margin: 0 var(--space-unit);
   }
 
-   ul > li.inverse {
-    color: var(--text-white);
-   }
+  ul > li.inverse {
+    color: var(--color-white);
+  }
 
   ul > li:first-child {
     border-top: var(--border-base) solid var(--gray400);
     padding-top: calc(var(--space-unit) + 3px);
+    padding-bottom: calc(var(--space-unit) + 5px);
   }
-
 }
 
 /* Desktop breakpoint */

package/dist/collection/snowflakes/registro-table/z-registro-table/index.js

@@ -31,8 +31,13 @@ export class ZRegistroTable {
     this.isMobile = screen.width <= mobileBreakpoint;
   }
   componentWillLoad() {
+    var _a;
     this.isMobile = window.innerWidth <= mobileBreakpoint;
-    this.hasTableBody = !!this.host.querySelector('[slot="table-body"]');
+    const tableBody = this.host.querySelector('[slot="table-body"]');
+    this.hasTableBody = !!((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.children) === null || _a === void 0 ? void 0 : _a.length);
+    if (!!tableBody && !this.hasTableBody) {
+      tableBody.remove();
+    }
   }
   componentWillRender() {
     this.host.setAttribute("role", "table");

package/dist/collection/snowflakes/registro-table/z-registro-table/styles.css

@@ -4,7 +4,6 @@ z-registro-table {
   width: 100%;
   font-family: var(--dashboard-font);
   font-weight: var(--font-rg);
-  min-height: 288px;
   background-color: var(--color-white);
 }
 
@@ -110,13 +109,8 @@ z-registro-table
   z-index: 5;
 }
 
-z-registro-table-empty-box.bordered {
-  border-left: var(--border-size-small) solid var(--bg-grey-200);
-}
-
 z-registro-table-body {
   width: auto;
-  min-height: 288px;
   background-color: var(--color-white);
 }
 
@@ -124,6 +118,11 @@ z-registro-table-empty-box {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  border-bottom: var(--border-size-small) solid var(--bg-grey-200);
+}
+
+z-registro-table-empty-box.bordered {
+  border-left: var(--border-size-small) solid var(--bg-grey-200);
 }
 
 .error-message {

package/dist/collection/snowflakes/registro-table/z-registro-table-empty-box/index.js

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop } from "@stencil/core";
+import { Component, Element, h, Host, Prop } from "@stencil/core";
 export class ZRegistroTableEmptyBox {
   constructor() {
     /** Sets main title message*/
@@ -6,14 +6,18 @@ export class ZRegistroTableEmptyBox {
     /** Sets message */
     this.subtitle = "";
   }
+  componentWillLoad() {
+    this.hasCta1Slot = !!this.hostElement.querySelector('[slot="cta1"]');
+    this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
+  }
   render() {
     return (h(Host, null,
       h("z-body", { level: 3, variant: "semibold" }, this.message),
       h("br", null),
-      h("z-body", { level: 4, variant: "regular" }, this.subtitle),
-      h("div", { class: "cta" },
+      !!this.subtitle && (h("z-body", { level: 4, variant: "regular" }, this.subtitle)),
+      (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: "cta" },
         h("slot", { name: "cta1" }),
-        h("slot", { name: "cta2" }))));
+        h("slot", { name: "cta2" })))));
   }
   static get is() { return "z-registro-table-empty-box"; }
   static get encapsulation() { return "scoped"; }
@@ -61,4 +65,5 @@ export class ZRegistroTableEmptyBox {
       "defaultValue": "\"\""
     }
   }; }
+  static get elementRef() { return "hostElement"; }
 }