@zanichelli/albe-web-components 7.1.1 → 7.2.0

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

@@ -10,18 +10,16 @@ export class ZMenu {
      * Flag to set the display mode of the list.
      * If true, the list will be absolutely positioned under the menu label,
      * stacked beneath it otherwise.
+     * @default false
      */
     this.floating = false;
-    /** The opening state of the menu. */
-    this.open = false;
     /**
-     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
-     * A small border is placed under it as a separator from other elements.
+     * The opening state of the menu.
+     * @default false
      */
-    this.verticalContext = false;
+    this.open = false;
     this.toggle = this.toggle.bind(this);
     this.checkContent = this.checkContent.bind(this);
-    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
     this.onItemsChange = this.onItemsChange.bind(this);
   }
   toggle() {
@@ -51,14 +49,6 @@ export class ZMenu {
   componentWillLoad() {
     this.checkContent();
   }
-  /**
-   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
-   * @param ev Slotchange event
-   */
-  onLabelSlotChange(ev) {
-    const labelElement = ev.target.assignedElements()[0];
-    labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
-  }
   /**
    * Correctly set position of the floating menu in order to prevent overflow.
    * @param live Should run the method on every refresh frame.
@@ -80,29 +70,27 @@ export class ZMenu {
    * Check if some content slot is set.
    */
   checkContent() {
-    this.hasHeader = !!this.hostElement.querySelectorAll("[slot=header]").length;
-    this.hasContent = !!this.hostElement.querySelectorAll("[slot=item]").length || this.hasHeader;
+    this.hasHeader = !!this.hostElement.querySelectorAll('[slot="header"]').length;
+    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length || this.hasHeader;
   }
   /**
    * Set `menuitem` role to all menu items.
-   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
    */
   onItemsChange() {
     this.checkContent();
-    const items = this.hostElement.querySelectorAll("[slot=item]");
-    items.forEach((item) => {
-      item.setAttribute("role", "menuitem");
-      item.dataset.text = item.textContent;
-    });
+    const items = this.hostElement.querySelectorAll('[slot="item"]');
+    items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute("role", "menuitem"));
   }
   renderMenuLabel() {
     if (this.hasContent) {
-      return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+      return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
     }
-    return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
+    return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null))));
   }
   render() {
-    return (h(Host, null, this.renderMenuLabel(), this.hasContent && (h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange }))))));
+    return (h(Host, null, this.renderMenuLabel(), h("div", { class: "content", ref: (el) => {
+        this.content = el;
+      }, hidden: !this.open }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
   }
   static get is() { return "z-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -146,7 +134,10 @@ export class ZMenu {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
           "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
         },
         "attribute": "floating",
@@ -164,30 +155,15 @@ export class ZMenu {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
           "text": "The opening state of the menu."
         },
         "attribute": "open",
         "reflect": true,
         "defaultValue": "false"
-      },
-      "verticalContext": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\nA small border is placed under it as a separator from other elements."
-        },
-        "attribute": "vertical-context",
-        "reflect": true,
-        "defaultValue": "false"
       }
     };
   }

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

@@ -11,17 +11,13 @@
 }
 
 ::slotted(a) {
+  color: var(--color-text01);
   text-decoration: none;
 }
 
 ::slotted(*) {
-  color: var(--color-text01);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-
-  /* increasing the letter spacing of the regular text helps reduce
-  the size difference between regular and bold text */
-  letter-spacing: 0.36px;
 }
 
 .menu-label {
@@ -49,101 +45,38 @@ button.menu-label {
 }
 
 .menu-label .menu-label-content {
-  position: relative;
   display: flex;
   align-items: center;
+  padding: var(--space-unit) 0;
+  border-bottom: var(--border-size-large) solid var(--color-surface05);
 }
 
-:host(:is([active], [open])) .menu-label-content,
-.menu-label .menu-label-content:hover,
+:host([active]) .menu-label-content,
+:host([open]) .menu-label-content,
+.menu-label:hover .menu-label-content,
 .menu-label:focus-within .menu-label-content {
-  font-weight: var(--font-bd);
-}
-
-:host(:is([active], [open])) .menu-label-content ::slotted(*),
-.menu-label .menu-label-content:hover ::slotted(*),
-.menu-label:focus-within .menu-label-content ::slotted(*) {
-  letter-spacing: normal;
-}
-
-/* border */
-:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,
-.menu-label .menu-label-content:hover::after,
-.menu-label:focus-within .menu-label-content::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  content: "";
-  pointer-events: none;
-}
-
-:host([vertical-context]) .menu-label-content::after {
-  height: var(--border-size-small);
-  background-color: var(--color-surface03);
-}
-
-:host(:is([active], [open])) .menu-label .menu-label-content::after,
-.menu-label .menu-label-content:hover::after,
-.menu-label:focus-within .menu-label-content::after {
-  height: var(--border-size-large);
-  background-color: var(--color-secondary01);
-}
-
-/* Prevents layout shifts on font-weight changes.
-The trick is to put an hidden copy of the text already set to bold,
-so the needed space is correctly calculated before any hover/active state changes the
-font-weight of the real text.
-The hidden text has an height of 0px so it can expand the width without changing the height
-when placed below the real text using `flex-direction: column`. */
-::slotted([data-text])::after {
-  height: 0;
-  content: attr(data-text);
-  content: attr(data-text) / "";
-  font-weight: var(--font-bd);
-  letter-spacing: normal;
-  pointer-events: none;
-  user-select: none;
-  visibility: hidden;
-}
-
-@media speech {
-  ::slotted([data-text])::after {
-    display: none;
-  }
-}
-
-::slotted([data-text]) {
-  display: inline-flex;
-  flex-direction: column;
+  border-color: var(--color-secondary01);
 }
 
-.menu-label .menu-label-content ::slotted(*) {
-  display: inline-flex;
+.menu-label ::slotted(*) {
   width: 100%;
   margin: 0;
   appearance: none;
   font-size: var(--font-size-5);
-  font-weight: inherit;
   line-height: 1.2;
   outline: none;
 }
 
-.menu-label .menu-label-content ::slotted(*),
-.menu-label .menu-label-content z-icon {
-  padding: var(--space-unit) 0;
-}
-
-.menu-label .menu-label-content z-icon {
-  margin-left: calc(var(--space-unit) * 1.5);
-  fill: var(--color-icon02);
+.menu-label z-icon {
+  margin-left: calc(var(--space-unit) * 4);
+  fill: currentcolor;
 }
 
 .content {
   background: var(--color-surface01);
 }
 
-:host(:not([open])) .content {
+.content[hidden] {
   display: none;
 }
 
@@ -190,6 +123,7 @@ when placed below the real text using `flex-direction: column`. */
 }
 
 .items > ::slotted([slot="item"]) {
+  display: inline-flex;
   width: 100%;
   margin: 0;
   font-size: var(--font-size-3);
@@ -209,5 +143,4 @@ when placed below the real text using `flex-direction: column`. */
 .items > ::slotted([slot="item"]:hover),
 .items > ::slotted([slot="item"]:active) {
   border-color: var(--color-secondary01);
-  font-weight: var(--font-bd);
 }

package/dist/collection/components/navigation/z-menu-section/index.js

@@ -1,8 +1,7 @@
 import { h, Host } from "@stencil/core";
 /**
- * A component to create submenus inside the ZMenu.
- * @slot - Label of the menu section.
- * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.
+ * @slot - Menu section label
+ * @slot item - Single entry of the section. Can be slotted multiple times to insert items.
  */
 export class ZMenuSection {
   toggle() {
@@ -24,21 +23,13 @@ export class ZMenuSection {
    * Check if some content slot is set.
    */
   checkContent() {
-    this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
-  }
-  /**
-   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
-   * @param ev Slotchange event
-   */
-  onLabelSlotChange(ev) {
-    const labelElement = ev.target.assignedElements()[0];
-    labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length;
   }
   componentWillLoad() {
     this.checkContent();
   }
   render() {
-    return (h(Host, { role: "menu", open: this.open }, h("button", { class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })))));
+    return (h(Host, { role: "menu", open: this.open }, h("button", { class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", null), this.hasContent && h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })))));
   }
   static get is() { return "z-menu-section"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation/z-menu-section/styles.css

@@ -23,15 +23,12 @@
   font-weight: var(--font-rg);
 }
 
-:host(:is([active], [open])) .label,
+:host([active]) .label,
+:host([open]) .label,
 .label:hover {
   border-color: var(--color-secondary01);
 }
 
-:is(:host(:is([active], [open])) .label, .label:hover) ::slotted(*) {
-  font-weight: var(--font-bd);
-}
-
 .label {
   display: flex;
   width: 100%;
@@ -46,34 +43,6 @@
   text-align: left;
 }
 
-::slotted([data-text]) {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-/* Trick to prevent layout shifts on font-weight changes.
-The trick is to put an hidden copy of the text already set to bold,
-so the needed space is correctly calculated before any hover/active state changes the
-font-weight of the real text.
-The hidden text has an height of 0px so it can expand the width without changing the height
-when placed below the real text using `flex-direction: column`. */
-::slotted([data-text])::after {
-  overflow: hidden;
-  height: 0;
-  content: attr(data-text);
-  content: attr(data-text) / "";
-  font-weight: var(--font-bd);
-  pointer-events: none;
-  user-select: none;
-  visibility: hidden;
-}
-
-@media speech {
-  ::slotted([data-text])::after {
-    display: none;
-  }
-}
-
 .label ::slotted(*) {
   width: 100%;
   margin: 0;
@@ -88,7 +57,7 @@ when placed below the real text using `flex-direction: column`. */
 
 .label z-icon {
   margin-left: calc(var(--space-unit) * 4);
-  fill: var(--color-icon02);
+  fill: currentcolor;
 }
 
 .items {
@@ -117,8 +86,6 @@ when placed below the real text using `flex-direction: column`. */
   color: var(--color-secondary01);
 }
 
-.items > ::slotted([slot="item"]:hover),
-.items > ::slotted([slot="item"][active]) {
+.items > ::slotted([slot="item"]:hover) {
   color: var(--color-secondary01);
-  font-weight: var(--font-bd);
 }

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

@@ -15,44 +15,26 @@ export class ZOffcanvas {
     this.open = false;
     /** open content transitioning in a specified direction left | right. Default: left */
     this.transitiondirection = TransitionDirection.LEFT;
-  }
-  componentWillLoad() {
-    this.handleOpenStatus();
+    /** allows you to skip the entry animation on page load, to be used with the open prop at true */
+    this.skipanimationonload = false;
   }
   onOpenChanged() {
-    this.handleOpenStatus();
-    this.canvasOpenStatusChanged.emit(this.open);
-  }
-  handleOpenStatus() {
-    if (this.open) {
-      this.hostElement.style.opacity = "0";
-      this.hostElement.style.display = "flex";
-      if (this.variant === OffCanvasVariant.OVERLAY) {
-        document.body.style.overflowY = "hidden";
-      }
-    }
-    else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
-      this.hostElement.style.display = "none";
-      document.body.style.overflowX = "hidden";
+    if (!this.open && this.hostElement.hasAttribute("skipanimationonload")) {
+      this.hostElement.removeAttribute("skipanimationonload");
     }
+    if (this.open)
+      this.handleOverflowProperty();
+    this.canvasOpenStatusChanged.emit(this.open);
   }
-  handleAnimationEnd() {
-    if (this.hostElement.hasAttribute("open")) {
-      this.hostElement.querySelector(`.canvas-content`).focus();
-    }
-    else if (this.variant === OffCanvasVariant.OVERLAY) {
-      this.hostElement.style.display = "none";
-      document.body.style.overflowX = "initial";
-      document.body.style.overflowY = "initial";
-    }
+  handleOverflowProperty() {
+    const overflow = this.variant === OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
+    document.body.style[overflow] = this.open ? "hidden" : "";
   }
-  handleAnimationStart() {
-    if (this.hostElement.hasAttribute("open")) {
-      this.hostElement.style.opacity = "1";
-    }
+  handledTransitionEnd() {
+    this.handleOverflowProperty();
   }
   render() {
-    return (h(Host, null, h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd(), onAnimationStart: () => this.handleAnimationStart() }, 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", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handledTransitionEnd() }, h("div", { role: "presentation", class: "canvas-content" }, h("slot", { name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
   }
   static get is() { return "z-offcanvas"; }
   static get encapsulation() { return "scoped"; }
@@ -131,6 +113,24 @@ export class ZOffcanvas {
         "attribute": "transitiondirection",
         "reflect": true,
         "defaultValue": "TransitionDirection.LEFT"
+      },
+      "skipanimationonload": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "allows you to skip the entry animation on page load, to be used with the open prop at true"
+        },
+        "attribute": "skipanimationonload",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -2,12 +2,11 @@
   --z-offcanvas--container-width: 375px;
   --z-offcanvas--top-space: 0;
 
-  display: none;
   min-width: 100%;
   height: 100%;
-  justify-content: end;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  visibility: hidden;
 }
 
 .canvas-container {
@@ -18,41 +17,15 @@
   height: 100%;
   flex-direction: column;
   background: var(--color-surface01);
-  transform: translateX(100%);
-}
-
-@keyframes enter-right {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
 }
 
-:host([open]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: enter-right;
-  animation-timing-function: ease-out;
-  transform: translateX(0);
-}
-
-@keyframes exit-right {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
+:host([variant="pushcontent"]) {
+  display: none;
 }
 
-:host(:not([open])[variant="overlay"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-right;
-  animation-timing-function: ease-out;
-  transform: translateX(100%);
+:host([open]) {
+  display: flex;
+  visibility: visible;
 }
 
 :host([variant="overlay"]) {
@@ -62,9 +35,14 @@
   right: 0;
   bottom: 0;
   left: 0;
+  display: flex;
   height: calc(100% - var(--z-offcanvas--top-space));
 }
 
+:host([variant="overlay"][transitiondirection="left"]) {
+  justify-content: end;
+}
+
 :host([variant="overlay"]) > .canvas-container {
   z-index: 1010;
 }
@@ -78,48 +56,6 @@
   opacity: 0.7;
 }
 
-:host([transitiondirection="right"]) {
-  justify-content: start;
-}
-
-:host([transitiondirection="right"]) > .canvas-container {
-  transform: translateX(-100%);
-}
-
-@keyframes enter-left {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-:host([transitiondirection="right"][open]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: enter-left;
-  animation-timing-function: ease-out;
-  transform: translateX(0);
-}
-
-@keyframes exit-left {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-left;
-  animation-timing-function: ease-out;
-  transform: translateX(-100%);
-}
-
 .canvas-container > .canvas-content {
   overflow: auto;
   flex: 1 auto;
@@ -133,6 +69,7 @@
   margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;
 }
 
+/* Webkit Scrollbar */
 .canvas-container .canvas-content::-webkit-scrollbar {
   width: 10px;
   background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
@@ -158,6 +95,17 @@
   scrollbar-color: var(--color-primary01) transparent;
 }
 
+/* Mobile */
+@media only screen and (max-width: 768px) {
+  :host([open][transitiondirection="left"]:not([skipAnimationOnLoad])) > .canvas-container {
+    animation: enter-right 0.4s ease-out;
+  }
+
+  :host([open][transitiondirection="right"]:not([skipAnimationOnLoad])) > .canvas-container {
+    animation: enter-left 0.4s ease-out;
+  }
+}
+
 /* Tablet / Desktop */
 @media only screen and (min-width: 768px) {
   :host {
@@ -172,20 +120,63 @@
     min-height: calc(var(--space-unit) * 40);
   }
 
-  @keyframes grow {
-    from {
-      width: 0;
-    }
+  :host(:not([variant="overlay"])[open]:not([skipAnimationOnLoad])) {
+    width: auto;
+    animation: grow 0.4s ease-out;
+  }
+}
+
+/* ANIMATION */
 
-    to {
-      width: max(var(--z-offcanvas--container-width), 375px);
-    }
+@keyframes grow {
+  from {
+    width: 0;
   }
 
-  :host(:not([variant="overlay"])[open]) {
-    width: auto;
-    animation-duration: 0.4s;
-    animation-name: grow;
-    animation-timing-function: ease-out;
+  to {
+    width: max(var(--z-offcanvas--container-width), 375px);
+  }
+}
+
+@keyframes enter-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes enter-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
   }
 }
+
+:host([open][variant="overlay"][transitiondirection="left"]:not([skipAnimationOnLoad])) > .canvas-container {
+  animation: enter-right 0.4s ease-out;
+}
+
+:host([open][transitiondirection="right"]:not([skipAnimationOnLoad])) > .canvas-container {
+  animation: enter-left 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
+  transform: translateX(-100%);
+  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="left"]) > .canvas-container {
+  transform: translateX(100%);
+  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"]) .canvas-background {
+  transition: visibility 0.4s ease-out;
+  visibility: hidden;
+}