@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -1,6 +1,5 @@
 :host {
   --app-header-height: auto;
-
   --app-header-typography-1-size: 24px;
   --app-header-typography-2-size: 28px;
   --app-header-typography-3-size: 32px;
@@ -13,7 +12,6 @@
   --app-header-typography-10-size: 76px;
   --app-header-typography-11-size: 84px;
   --app-header-typography-12-size: 92px;
-
   --app-header-typography-1-lineheight: 1.33;
   --app-header-typography-2-lineheight: 1.29;
   --app-header-typography-3-lineheight: 1.25;
@@ -26,7 +24,6 @@
   --app-header-typography-10-lineheight: 1.26;
   --app-header-typography-11-lineheight: 1.2;
   --app-header-typography-12-lineheight: 1.2;
-
   --app-header-typography-1-tracking: calc(-0.2 / 1em);
   --app-header-typography-2-tracking: calc(-0.4 / 1em);
   --app-header-typography-3-tracking: calc(-0.6 / 1em);
@@ -44,7 +41,6 @@
    * Variable to set stucked header and drawer's top offset. Useful when something is absolutely positioned above the header.
    */
   --app-header-top-offset: 48px;
-
   --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
 
   /* Variable to customize header background color. */
@@ -71,13 +67,13 @@
 .heading-panel {
   position: relative;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: baseline;
-  flex-shrink: 0;
-  flex-grow: 0;
   width: 100%;
   height: var(--app-header-height);
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: baseline;
+  justify-content: flex-start;
   padding: calc(var(--space-unit) * 2) var(--grid-mobile-margin);
   background: var(--app-header-bg);
 }
@@ -88,61 +84,61 @@
 
 .heading-title {
   display: flex;
+  max-width: 100%;
   flex-direction: row;
   align-items: center;
-  max-width: 100%;
 }
 
-:host(:not([menu-length='0'])) .heading-subtitle {
+:host(:not([menu-length="0"])) .heading-subtitle {
   padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5));
 }
 
 .heading-stucked {
   position: fixed;
+  z-index: 20;
   top: var(--app-header-top-offset);
   left: 0;
-  z-index: 20;
   display: flex;
-  flex-direction: row;
   width: 100%;
   max-width: 100%;
-  color: var(--app-header-stucked-text-color);
+  flex-direction: row;
   padding: var(--space-unit) var(--grid-mobile-margin);
+  animation: slide-stucked-heading-in 250ms ease-out;
   background: var(--app-header-stucked-bg);
   box-shadow: var(--shadow-2);
-  animation: slideStuckedHeadingIn 250ms ease-out;
+  color: var(--app-header-stucked-text-color);
 }
 
 .heading-stucked .heading-title,
 .heading-stucked .heading-title > *,
-.heading-stucked .heading-title ::slotted([slot='stucked-title']) {
+.heading-stucked .heading-title ::slotted([slot="stucked-title"]) {
   display: block;
   overflow: hidden;
+  line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 1.2;
 }
 
 .heading-stucked .heading-title > *,
-::slotted([slot='title']),
-::slotted([slot='stucked-title']) {
+::slotted([slot="title"]),
+::slotted([slot="stucked-title"]) {
   margin: 0;
-  font-weight: 700;
-  font-family: 'IBM Plex Serif', serif;
+  font-family: "IBM Plex Serif", serif;
   font-size: var(--app-header-typography-3-size);
+  font-weight: 700;
   letter-spacing: var(--app-header-typography-3-tracking);
 }
 
-::slotted([slot='title']) {
+::slotted([slot="title"]) {
   line-height: 1;
 }
 
-::slotted([slot='subtitle']) {
+::slotted([slot="subtitle"]) {
   margin: var(--space-unit) 0 0;
   font-family: var(--font-family-sans);
+  font-size: 20px;
   font-style: italic;
   font-weight: 500;
-  font-size: 20px;
   line-height: 1.2;
 }
 
@@ -150,17 +146,16 @@
   position: relative;
   z-index: 1;
   display: flex;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: flex-start;
-  max-width: 100%;
+  justify-content: flex-start;
   margin-right: auto;
 }
 
 .menu-container {
   display: none;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: baseline;
 }
 
@@ -174,82 +169,78 @@
 }
 
 .drawer-trigger {
-  margin: 0 calc(var(--space-unit) * 1.5) 0 0;
   padding: 0;
-  background: none;
   border: 0;
+  margin: 0 calc(var(--space-unit) * 1.5) 0 0;
+  appearance: none;
+  background: none;
   border-radius: 0;
   color: inherit;
-  appearance: none;
   cursor: pointer;
 }
 
 .drawer-trigger z-icon {
   --z-icon-width: var(--app-header-drawer-trigger-size);
   --z-icon-height: var(--app-header-drawer-trigger-size);
-  fill: currentColor;
+
+  fill: currentcolor;
 }
 
 .drawer-container {
   position: fixed;
+  z-index: 100;
   top: var(--app-header-top-offset);
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 100;
   pointer-events: none;
 }
 
 .drawer-container .drawer-overlay {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
+  display: block;
   width: 100%;
   height: 100%;
-  z-index: 1;
-  display: block;
   background: var(--gray900);
   opacity: 0;
-  transition: opacity 400ms ease-out;
   pointer-events: none;
+  transition: opacity 400ms ease-out;
 }
 
 .drawer-panel {
   position: absolute;
+  z-index: 2;
   top: 0;
   left: 0;
-  z-index: 2;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   width: 375px;
   max-width: 100%;
   height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
   padding: calc(var(--space-unit) * 2) var(--space-unit);
   background: var(--color-white);
   color: var(--gray800);
+  pointer-events: none;
   transform: translate3d(-100%, 0, 0);
   transition: transform 400ms ease-out;
-  pointer-events: none;
 }
 
 .drawer-content {
   display: flex;
-  flex-direction: column;
-  flex: 1 auto;
+  overflow: auto;
   width: 100%;
+  flex: 1 auto;
+  flex-direction: column;
   padding: calc(var(--space-unit) * 0.5) var(--space-unit);
-  overflow: auto;
 }
 
 .drawer-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);
 }
 
@@ -279,16 +270,16 @@
   --z-icon-width: var(--app-header-drawer-trigger-size);
   --z-icon-height: var(--app-header-drawer-trigger-size);
 
-  margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
   padding: 0;
-  font-size: inherit;
-  background: transparent;
-  color: inherit;
-  fill: currentColor;
   border: 0;
-  border-radius: 0;
+  margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
   appearance: none;
+  background: transparent;
+  border-radius: 0;
+  color: inherit;
   cursor: pointer;
+  fill: currentcolor;
+  font-size: inherit;
   outline: none;
 }
 
@@ -302,15 +293,15 @@
 }
 
 :host([drawer-open]) .drawer-container .drawer-panel {
-  transform: none;
   pointer-events: all;
+  transform: none;
 }
 
 .hero-container {
   position: absolute;
+  z-index: 0;
   top: 0;
   left: 0;
-  z-index: 0;
   width: 100%;
   height: 100%;
 }
@@ -327,14 +318,14 @@
 }
 
 :host([overlay]) .hero-container::after {
-  content: '';
   position: absolute;
+  z-index: 0;
   top: 0;
   left: 0;
-  z-index: 0;
   width: 100%;
   height: 100%;
   background: var(--color-black);
+  content: "";
   opacity: 0.5;
 }
 
@@ -357,32 +348,32 @@
   }
 
   .heading-stucked {
-    padding-left: var(--grid-tablet-margin);
     padding-right: var(--grid-tablet-margin);
+    padding-left: var(--grid-tablet-margin);
   }
 
-  :host(:not([flow='offcanvas'])) .heading-subtitle {
+  :host(:not([flow="offcanvas"])) .heading-subtitle {
     padding-left: 0;
   }
 
-  :host(:not([flow='offcanvas'])) .menu-container {
+  :host(:not([flow="offcanvas"])) .menu-container {
     display: flex;
   }
 
-  :host(:not([flow='offcanvas'])) .heading-container .drawer-trigger {
+  :host(:not([flow="offcanvas"])) .heading-container .drawer-trigger {
     display: none;
   }
 
-  :host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child) {
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
     margin-bottom: calc(var(--space-unit) * 3);
   }
 
-  ::slotted([slot='title']) {
+  ::slotted([slot="title"]) {
     font-size: var(--app-header-typography-6-size);
     letter-spacing: var(--app-header-typography-6-tracking);
   }
 
-  ::slotted([slot='subtitle']) {
+  ::slotted([slot="subtitle"]) {
     margin-top: calc(var(--space-unit) * 1.5);
   }
 }
@@ -391,22 +382,21 @@
 @media only screen and (min-width: 1152px) {
   .heading-panel,
   .heading-stucked {
-    padding-left: var(--grid-desktop-margin);
     padding-right: var(--grid-desktop-margin);
+    padding-left: var(--grid-desktop-margin);
   }
 
-  :host(:not([flow='stack'])) .heading-panel {
-    flex-direction: row;
-    flex-wrap: wrap;
+  :host(:not([flow="stack"])) .heading-panel {
+    flex-flow: row wrap;
   }
 
-  ::slotted([slot='title']) {
+  ::slotted([slot="title"]) {
+    margin-right: var(--grid-desktop-gutter);
     font-size: var(--app-header-typography-7-size);
     letter-spacing: var(--app-header-typography-7-tracking);
-    margin-right: var(--grid-desktop-gutter);
   }
 
-  :host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child) {
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
     margin-bottom: calc(var(--space-unit) * 2);
   }
 
@@ -419,22 +409,22 @@
 @media only screen and (min-width: 1366px) {
   .heading-panel,
   .heading-stucked {
-    padding-left: var(--grid-wide-margin);
     padding-right: var(--grid-wide-margin);
+    padding-left: var(--grid-wide-margin);
   }
 
-  ::slotted([slot='title']) {
+  ::slotted([slot="title"]) {
+    margin-right: var(--grid-wide-gutter);
     font-size: var(--app-header-typography-9-size);
     letter-spacing: var(--app-header-typography-9-tracking);
-    margin-right: var(--grid-wide-gutter);
   }
 
-  :host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child) {
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
     margin-bottom: 0;
   }
 }
 
-@keyframes slideStuckedHeadingIn {
+@keyframes slide-stucked-heading-in {
   0% {
     transform: translate3d(0, -100%, 0);
   }

package/dist/collection/components/navigation/z-app-switcher/index.js

@@ -3,7 +3,7 @@ import { ThemeVariant } from "../../../beans";
 export class ZAppSwitcher {
   constructor() {
     /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.dark;
+    this.theme = ThemeVariant.DARK;
     this.isopen = false;
     this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
   }
@@ -32,10 +32,10 @@ export class ZAppSwitcher {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ThemeVariantBean",
-          "resolved": "\"dark\" | \"light\"",
+          "original": "ThemeVariant",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
           "references": {
-            "ThemeVariantBean": {
+            "ThemeVariant": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -49,7 +49,7 @@ export class ZAppSwitcher {
         },
         "attribute": "theme",
         "reflect": false,
-        "defaultValue": "ThemeVariant.dark"
+        "defaultValue": "ThemeVariant.DARK"
       }
     };
   }

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

@@ -5,31 +5,19 @@
 
 button {
   display: flex;
-  justify-content: center;
   align-content: center;
-  background-color: transparent;
-  border: none;
+  justify-content: center;
   padding: 0;
+  border: none;
+  background-color: transparent;
 }
 
 button > z-icon {
   color: var(--bg-white);
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 button > z-icon.light {
   color: var(--bg-grey-900);
-  fill: currentColor;
-} 
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
+  fill: currentcolor;
 }

package/dist/collection/components/navigation/z-app-topbar/index.js

@@ -4,7 +4,7 @@ import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZAppTopbar {
   constructor() {
     /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.dark;
+    this.theme = ThemeVariant.DARK;
     this.topbarLinks = [];
   }
   handleResize() {
@@ -19,13 +19,13 @@ export class ZAppTopbar {
     }
   }
   renderTopbarLinks() {
-    return this.topbarLinks.map((link) => h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.light ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label));
+    return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
   }
   render() {
     return (h(Host, { class: {
         [this.theme]: true,
-        "limited-width": !!this.contentMaxWidth
-      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.vertical, color: this.theme === ThemeVariant.light ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
+        "limited-width": !!this.contentMaxWidth,
+      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.VERTICAL, color: this.theme === ThemeVariant.LIGHT ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
   }
   static get is() { return "z-app-topbar"; }
   static get encapsulation() { return "shadow"; }
@@ -46,7 +46,7 @@ export class ZAppTopbar {
         "mutable": false,
         "complexType": {
           "original": "ThemeVariant",
-          "resolved": "ThemeVariant.dark | ThemeVariant.light",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
           "references": {
             "ThemeVariant": {
               "location": "import",
@@ -62,7 +62,7 @@ export class ZAppTopbar {
         },
         "attribute": "theme",
         "reflect": false,
-        "defaultValue": "ThemeVariant.dark"
+        "defaultValue": "ThemeVariant.DARK"
       },
       "contentMaxWidth": {
         "type": "number",

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

@@ -1,13 +1,13 @@
 :host {
-  display: block;
   position: sticky;
-  box-sizing: border-box;
+  z-index: 99;
   top: 0;
+  display: block;
   height: calc(var(--space-unit) * 6);
+  box-sizing: border-box;
   padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);
-  border-radius: var(--border-no-radius);
   background-color: var(--gray900);
-  z-index: 99;
+  border-radius: var(--border-no-radius);
 }
 
 :host(.light) {
@@ -16,18 +16,20 @@
 
 :host > div {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 :host(.limited-width) #content-container {
-  margin: auto;
+  --mw: none;
+
   max-width: var(--mw);
+  margin: auto;
 }
 
 .content-panel {
   display: flex;
-  align-items: center
+  align-items: center;
 }
 
 .content-panel > :not(:last-child) {
@@ -40,10 +42,10 @@
 
 z-link {
   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;
 }
 
 /* Tablet breakpoint */
@@ -61,11 +63,3 @@ z-link {
     height: calc(var(--space-unit) * 3);
   }
 }
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}

package/dist/collection/components/navigation/z-link/index.js

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { Host } from "@stencil/core/internal";
 /**
  * @slot - link content
  */
@@ -27,7 +26,7 @@ export class ZLink {
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
     this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
   }
-  componentWillRender() {
+  componentWillLoad() {
     if (this.iswhite) {
       console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
     }
@@ -41,9 +40,9 @@ export class ZLink {
   emitZLinkInteraction(e, linkId) {
     this.zLinkClick.emit({ e, linkId });
   }
-  componentDidRender() {
+  componentDidLoad() {
     if (this.icon) {
-      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
+      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue("font-size"));
       const currentSize = this.big ? 18 : Math.round(height * 1.125);
       if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
         this.iconSize = currentSize;
@@ -51,13 +50,16 @@ export class ZLink {
     }
   }
   render() {
-    const style = this.big ? { "--font-size-link": "16px", "--font-weight-link": "600" } : {};
-    return (h(Host, { style: style }, h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled ? "disabled" : ""}
-            ${this.isactive ? "active" : ""}
-            ${this.textcolor}
-            ${this.iswhite ? "white" : ""}
-            ${this.underline ? "underline" : ""}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && h("slot", null), this.icon &&
-      h("z-icon", { style: { "--z-icon-width": this.iconSize.toString(), "--z-icon-height": this.iconSize.toString() }, name: this.icon, height: this.iconSize, width: this.iconSize }), this.iconposition === "left" && h("slot", null))));
+    return (h("a", { id: this.htmlid, href: this.href ? this.href : null, class: {
+        disabled: this.isdisabled,
+        active: this.isactive,
+        white: this.iswhite,
+        [this.textcolor || ""]: true,
+        underline: this.underline,
+      }, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && h("slot", null), this.icon && (h("z-icon", { style: {
+        "--z-icon-width": `${this.iconSize}px`,
+        "--z-icon-height": `${this.iconSize}px`,
+      }, name: this.icon })), this.iconposition === "left" && h("slot", null)));
   }
   static get is() { return "z-link"; }
   static get encapsulation() { return "shadow"; }
@@ -201,7 +203,7 @@ export class ZLink {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary\"| \"inverse\" | \"white\" | \"black\"",
+          "original": "\"primary\" | \"inverse\" | \"white\" | \"black\"",
           "resolved": "\"black\" | \"inverse\" | \"primary\" | \"white\"",
           "references": {}
         },
@@ -247,7 +249,7 @@ export class ZLink {
           "text": "big link version"
         },
         "attribute": "big",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "iconposition": {