@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -7,14 +7,14 @@
 }
 
 button {
-  cursor: pointer;
   display: flex;
-  flex-direction: column;
   width: 100%;
+  flex-direction: column;
+  padding: 0;
+  border: none;
   margin: 0;
   background-color: var(--gray900);
-  border: none;
-  padding: 0;
+  cursor: pointer;
   letter-spacing: 0.16px;
   white-space: nowrap;
 }
@@ -25,9 +25,9 @@ button.inverse {
 
 button div.firstline {
   display: flex;
-  justify-content: flex-end;
-  align-items: center;
   max-width: 200px;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 button.open div.firstline {
@@ -44,18 +44,18 @@ z-icon.inverse {
 }
 
 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%;
+  box-sizing: border-box;
+  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
   margin: calc(var(--space-unit) * 1.5) 0 0 0;
   background-color: var(--gray900);
   font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
   font-size: 14px;
-  line-height: 20px;
+  font-weight: var(--font-sb);
   letter-spacing: 0.3px;
+  line-height: 20px;
 }
 
 ul.inverse {
@@ -65,10 +65,10 @@ ul.inverse {
 ul > li {
   display: flex;
   justify-content: flex-end;
-  white-space: nowrap;
   padding: calc(var(--space-unit) * 1.5 - 1px) 0;
-  margin: 0;
   border-bottom: var(--border-base) solid var(--gray700);
+  margin: 0;
+  white-space: nowrap;
 }
 
 ul > li.inverse {
@@ -76,11 +76,11 @@ 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;
+  padding-top: 0;
+  padding-bottom: calc(var(--space-unit) + 6px);
+  border-top: none;
 }
 
 ul > li:last-child {
@@ -89,53 +89,53 @@ ul > li:last-child {
 }
 
 #guestbutton {
-  box-sizing: border-box;
   display: inline-flex;
+  width: 100%;
+  min-width: 32px;
+  height: 32px;
+  box-sizing: border-box;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
-  font-size: 14px;
-  line-height: 1;
-  letter-spacing: 0.3px;
+  padding: 0 calc(var(--space-unit) * 2);
   border-width: var(--border-size-medium);
   border-style: solid;
+  border-color: var(--color-white);
+  background-color: var(--color-white);
   border-radius: var(--border-radius);
-  vertical-align: middle;
-  text-transform: uppercase;
-  text-decoration: none;
+  color: var(--gray800);
   cursor: pointer;
+  fill: currentcolor;
+  font-family: var(--font-family-sans);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  letter-spacing: 0.3px;
+  line-height: 1;
   outline: none;
-  fill: currentColor;
-  height: 32px;
-  min-width: 32px;
-  padding: 0 calc(var(--space-unit) * 2);
-  background-color: var(--color-white);
-  border-color: var(--color-white);
-  color: var(--gray800);
+  text-decoration: none;
+  text-transform: uppercase;
+  vertical-align: middle;
 }
 
 #guestbutton.inverse {
-  background-color: var(--gray800);
   border-color: var(--gray800);
+  background-color: var(--gray800);
   color: var(--color-white);
 }
 
 .userfullname {
-  padding: 0;
   overflow: hidden;
-  max-width: 250px;
-  text-overflow: ellipsis;
   width: 100%;
+  max-width: 250px;
+  padding: 0;
   color: var(--color-white);
   font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
   font-size: 16px;
-  line-height: 24px;
+  font-weight: var(--font-sb);
   letter-spacing: 0;
+  line-height: 24px;
   text-align: right;
+  text-overflow: ellipsis;
 }
 
 .userfullname.inverse {
@@ -143,16 +143,16 @@ ul > li:last-child {
 }
 
 .useremail {
+  overflow: hidden;
+  width: 100%;
   color: var(--color-white);
   font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
   font-size: 12px;
-  line-height: 16px;
+  font-weight: var(--font-rg);
   letter-spacing: 0.32px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
+  line-height: 16px;
   text-align: right;
+  text-overflow: ellipsis;
 }
 
 .useremail.inverse {
@@ -188,10 +188,10 @@ ul > li:last-child {
   :host > div > div.open {
     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(--color-white);
-    margin-top: calc(var(--space-unit) / 2);
     padding: calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);
+    margin-top: calc(var(--space-unit) / 2);
+    background-color: var(--color-white);
+    box-shadow: 0 2px calc(var(--space-unit) * 0.5) 0 rgb(0 0 0 / 50%);
     transform: translate(0, -4px);
   }
 
@@ -201,21 +201,20 @@ ul > li:last-child {
 
   button {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: end;
+    flex-flow: row nowrap;
     align-content: center;
+    align-items: end;
+    justify-content: flex-end;
   }
 
   button.open {
-    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);
+    border-top: var(--border-size-small) solid var(--color-white);
+    margin-left: var(--space-unit);
+    background-color: var(--color-white);
+    border-top-left-radius: calc(var(--space-unit) * 0.5);
+    border-top-right-radius: calc(var(--space-unit) * 0.5);
   }
 
   button.open.inverse {
@@ -240,13 +239,13 @@ ul > li:last-child {
   }
 
   .userfullname {
+    width: auto;
+    padding: 0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);
     font-family: var(--font-family-sans);
-    font-weight: var(--font-sb);
     font-size: 14px;
-    line-height: 20px;
+    font-weight: var(--font-sb);
     letter-spacing: 0.16px;
-    padding: 0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);
-    width: auto;
+    line-height: 20px;
   }
 
   .userfullname.inverse {
@@ -254,8 +253,8 @@ ul > li:last-child {
   }
 
   button.open div.userfullname {
-    color: var(--gray800);
     max-width: none;
+    color: var(--gray800);
     text-overflow: clip;
   }
 
@@ -264,8 +263,8 @@ ul > li:last-child {
   }
 
   .useremail {
-    padding-right: calc(var(--space-unit) * 3 - 2px);
     box-sizing: border-box;
+    padding-right: calc(var(--space-unit) * 3 - 2px);
   }
 
   button.open div.useremail {
@@ -279,8 +278,8 @@ ul > li:last-child {
   ul {
     position: initial;
     left: initial;
-    padding: 0;
     width: 100%;
+    padding: 0;
     background-color: var(--color-white);
   }
 
@@ -290,9 +289,9 @@ ul > li:last-child {
   }
 
   ul > li {
-    color: var(--gray800);
     border-bottom: var(--border-base) solid var(--gray400);
     margin: 0 var(--space-unit);
+    color: var(--gray800);
   }
 
   ul > li.inverse {
@@ -300,16 +299,8 @@ ul > li:last-child {
   }
 
   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);
+    border-top: var(--border-base) solid var(--gray400);
   }
 }
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}

package/dist/collection/components/notification/z-candybar/styles.css

@@ -1,51 +1,49 @@
 :host {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  justify-content: center;
   font-family: var(--dashboard-font);
   font-weight: var(--font-rg);
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: center;
-  align-content: center;
 }
 
 :host > div {
   position: fixed;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
+  z-index: 1000;
   top: 30vh;
+  display: flex;
+  overflow: auto;
+  overflow: -moz-scrollbars-none;
   max-width: 297px;
   height: fit-content;
   min-height: 232px;
-  z-index: 1000;
+  flex-flow: row wrap;
+  justify-content: center;
   margin: auto;
-  overflow: auto;
-  overflow: -moz-scrollbars-none;
-  -ms-overflow-style: none;
   background: var(--myz-blue-lighter);
-  border-radius: calc(var(--space-unit) * .5);
-  box-shadow: 0px -2px 4px 0px rgba(66, 69, 72, 0.4);
+  border-radius: calc(var(--space-unit) * 0.5);
+  box-shadow: 0 -2px 4px 0 rgb(66 69 72 / 40%);
+  -ms-overflow-style: none;
 }
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   :host > div {
     position: initial;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-    align-content: stretch;
     position: fixed;
     top: auto;
+    right: 0;
     bottom: 0;
-    margin: 0 auto;
     left: 0;
-    right: 0;
+    max-width: 100%;
     height: auto;
     min-height: 138px;
-    max-width: 100%;
-    border-radius: 0px;
+    flex-wrap: nowrap;
+    align-content: stretch;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    border-radius: 0;
   }
 }
 
@@ -55,7 +53,3 @@
     min-height: 122px;
   }
 }
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}

package/dist/collection/components/notification/z-cookiebar/index.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ButtonVariantEnum } from "../../../beans";
+import { ButtonVariant } from "../../../beans";
 export class ZCookiebar {
   emitAccept(ev) {
     this.accept.emit({ ev });
@@ -13,17 +13,16 @@ export class ZCookiebar {
   handleOkButtonKeyUp(ev) {
     this.emitAccept(ev);
     if (ev.code === "Enter") {
-      if (typeof this.callback !== "undefined" &&
-        typeof this.callback === "function") {
+      if (typeof this.callback !== "undefined" && typeof this.callback === "function") {
         this.callback();
       }
     }
   }
   renderContentSlot() {
-    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: ButtonVariant.PRIMARY, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
-    return (h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot()));
+    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
   }
   static get is() { return "z-cookiebar"; }
   static get encapsulation() { return "shadow"; }
@@ -77,8 +76,8 @@ export class ZCookiebar {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "() => any",
-          "resolved": "() => any",
+          "original": "() => unknown",
+          "resolved": "() => unknown",
           "references": {}
         },
         "required": false,

package/dist/collection/components/notification/z-cookiebar/styles.css

@@ -9,27 +9,26 @@ z-candybar.hidden {
 
 .content {
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: stretch;
+  flex-flow: column nowrap;
   align-content: space-between;
-  color: var(--text-grey-800);
+  align-items: stretch;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
   border-radius: calc(var(--space-unit) * 0.5);
+  color: var(--text-grey-800);
   font-size: 16px;
-  letter-spacing: 0px;
+  letter-spacing: 0;
   line-height: 24px;
-  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
 }
 
 .content > div > h2 {
-  margin: 0;
   padding: 0;
+  margin: 0;
+  border-radius: 0;
   color: var(--text-grey-800);
-  border-radius: 0px;
   font-size: 18px;
   font-weight: var(--font-sb);
-  letter-spacing: 0px;
+  letter-spacing: 0;
 }
 
 .content > div > div {
@@ -44,23 +43,23 @@ z-candybar.hidden {
 }
 
 .content > div > div > p > a {
+  display: inline-flex;
+  height: 14px;
+  color: var(--text-grey-800);
   cursor: pointer;
   font-weight: var(--font-sb);
-  color: var(--text-grey-800);
   text-decoration: underline;
-  height: 14px;
-  display: inline-flex;
 }
 
 .content > div > div > p > a:visited {
+  z-index: 1000;
   color: var(--text-grey-800);
   cursor: pointer;
-  z-index: 1000;
 }
 
 .content > z-button {
-  margin: 0;
   width: 100%;
+  margin: 0;
 }
 
 /* Tablet breakpoint */
@@ -69,10 +68,10 @@ z-candybar.hidden {
     width: 100%;
     flex-direction: row;
     align-items: center;
+    padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 3);
     font-size: 16px;
-    letter-spacing: 0px;
+    letter-spacing: 0;
     line-height: 24px;
-    padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 3);
   }
 
   .content > div {
@@ -88,8 +87,8 @@ z-candybar.hidden {
   }
 
   .content > z-button {
-    margin: 0;
     width: initial;
+    margin: 0;
   }
 }
 
@@ -103,7 +102,7 @@ z-candybar.hidden {
 /* Wide breakpoint */
 @media only screen and (min-width: 1366px) {
   .content {
-    padding-left: calc(var(--space-unit) * 4);
     padding-right: calc(var(--space-unit) * 4);
+    padding-left: calc(var(--space-unit) * 4);
   }
 }

package/dist/collection/components/notification/z-info-box/index.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @slot content - set the info box content
  */
@@ -11,7 +11,7 @@ export class ZInfoBox {
     this.infoBoxClose.emit({ boxid: this.boxid });
   }
   render() {
-    return (h("div", { id: this.boxid }, h("slot", { name: "content" }), this.isclosable && h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() })));
+    return (h("div", { id: this.boxid }, h("slot", { name: "content" }), this.isclosable && (h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
   }
   static get is() { return "z-info-box"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification/z-info-box/styles.css

@@ -3,21 +3,21 @@
   font-weight: var(--font-rg);
 }
 
-:host>div {
-  background: var(--accent-lighter);
-  padding: calc(var(--space-unit) * 2);
-  border-radius: var(--border-radius);
+:host > div {
   display: flex;
   width: inherit;
+  padding: calc(var(--space-unit) * 2);
+  background: var(--accent-lighter);
+  border-radius: var(--border-radius);
 }
 
-:host>div>slot {
+:host > div > slot {
   color: var(--text-grey-800);
   font-size: 14px;
 }
 
-:host>div>z-icon {
-  fill: var(--myz-blue);
-  cursor: pointer;
+:host > div > z-icon {
   margin-left: calc(var(--space-unit) * 2);
+  cursor: pointer;
+  fill: var(--myz-blue);
 }

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * Notification bar component.
  * @slot - The text of the notification.
@@ -28,12 +28,7 @@ export class ZNotification {
   }
   render() {
     var _a;
-    return [
-      this.contenticonname && h("z-icon", { class: "status-icon", name: this.contenticonname, width: 16, height: 16 }),
-      h("div", { class: "content-container" }, h("div", { class: "content-text" }, h("slot", null)), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) &&
-        h("button", { class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext)),
-      this.showclose && h("button", { class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { name: "multiply-circle", width: 16, height: 16 }))
-    ];
+    return (h(Host, null, this.contenticonname && (h("z-icon", { class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { class: "content-container" }, h("div", { class: "content-text" }, h("slot", null)), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { name: "multiply-circle", width: 16, height: 16 })))));
   }
   static get is() { return "z-notification"; }
   static get encapsulation() { return "shadow"; }
@@ -88,7 +83,7 @@ export class ZNotification {
         "mutable": false,
         "complexType": {
           "original": "NotificationType",
-          "resolved": "NotificationType.error | NotificationType.success | NotificationType.warning",
+          "resolved": "NotificationType.ERROR | NotificationType.SUCCESS | NotificationType.WARNING",
           "references": {
             "NotificationType": {
               "location": "import",

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

@@ -2,13 +2,13 @@
   --z-notification--top-offset: 0;
 
   display: flex;
-  align-items: flex-start;
   width: 100%;
+  box-sizing: border-box;
+  align-items: flex-start;
   padding: calc(var(--space-unit) * 2);
-  font-family: var(--font-family-sans);
   border-bottom: var(--border-size-medium) solid var(--color-surface03);
+  font-family: var(--font-family-sans);
   outline: none;
-  box-sizing: border-box;
 }
 
 :host[sticky] {
@@ -38,8 +38,8 @@
   /* simulate the line-height of the text
   to make the icon look correctly aligned with it. */
   display: flex;
-  align-items: center;
   height: 20px;
+  align-items: center;
 }
 
 :host([type="success"]) .status-icon {
@@ -56,12 +56,12 @@
 
 :host > button,
 .content-container > button {
-  margin: 0;
   padding: 0;
-  background: transparent;
   border: none;
-  font-family: inherit;
+  margin: 0;
+  background: transparent;
   cursor: pointer;
+  font-family: inherit;
 }
 
 .status-icon + .content-container {
@@ -70,11 +70,11 @@
 
 .content-container {
   display: flex;
+  flex: 1 auto;
+  flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   row-gap: calc(var(--space-unit) * 2);
-  flex-wrap: wrap;
-  flex: 1 auto;
 }
 
 .content-text {
@@ -82,16 +82,16 @@
   color: var(--color-text01);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
-  line-height: 20px;
   letter-spacing: 0.16px;
+  line-height: 20px;
 }
 
 .action-button {
   color: var(--color-primary01);
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
-  line-height: 16px;
   letter-spacing: 0.32px;
+  line-height: 16px;
 }
 
 .content-container + .close-button {