@zanichelli/albe-web-components 7.3.2 → 7.3.3

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

@@ -1,11 +1,10 @@
 import { h, Host } from "@stencil/core";
+import { ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection } from "../../../beans";
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 /**
  * @slot title - Slot for the main title
  * @slot subtitle - Slot for the subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-height - Defaults to `auto`.
  * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
  * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
  * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
@@ -42,25 +41,34 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
  * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
  * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
+ * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+ * @cssprop --app-header-height - Defaults to `auto`.
  * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
  * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-white`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-white`.
- * @cssprop --app-header-text-color - Text color. Defaults to `--gray800`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--gray800`.
+ * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.
+ * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
+ * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
+ * Defaults to `--app-header-typography-3-size`.
+ * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
+ * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
+ * Defaults to `--app-header-typography-3-lineheight`.
+ * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
+ * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
+ * Defaults to `--app-header-typography-3-tracking`.
+ * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.
  */
 export class ZAppHeader {
   constructor() {
     /**
      * Stuck mode for the header.
      * You can programmatically set it using an IntersectionObserver.
-     * **Optional**
      */
     this.stuck = false;
     /**
      * Should place an overlay over the hero image.
      * Useful for legibility purpose.
-     * **Optional**
      */
     this.overlay = false;
     /**
@@ -74,10 +82,23 @@ export class ZAppHeader {
      * The opening state of the drawer.
      */
     this.drawerOpen = false;
+    /**
+     * Enable the search bar.
+     */
+    this.enableSearch = false;
+    /**
+     * Placeholder text for the search bar.
+     */
+    this.searchPlaceholder = "Cerca";
     /**
      * The stuck state of the bar.
      */
     this._stuck = false;
+    /**
+     * Current viewport.
+     * Used to change the aspect of the search button (icon only) on mobile and tablet.
+     */
+    this.currentViewport = "mobile";
     this.observer = SUPPORT_INTERSECTION_OBSERVER &&
       new IntersectionObserver(([entry]) => {
         this._stuck = !entry.isIntersecting;
@@ -88,18 +109,34 @@ export class ZAppHeader {
     this.closeDrawer = this.closeDrawer.bind(this);
     this.collectMenuElements = this.collectMenuElements.bind(this);
   }
-  emitStickingEvent() {
-    this.sticking.emit(this._stuck);
-  }
-  openDrawer() {
-    this.drawerOpen = true;
+  evaluateViewport() {
+    if (window.innerWidth < 768) {
+      this.currentViewport = "mobile";
+    }
+    else if (window.innerWidth >= 768 && window.innerWidth < 1152) {
+      this.currentViewport = "tablet";
+    }
+    else {
+      this.currentViewport = "desktop";
+    }
   }
-  closeDrawer() {
-    this.drawerOpen = false;
+  onStuck() {
+    const scrollParent = this.scrollParent;
+    if (!scrollParent) {
+      return;
+    }
+    this.sticking.emit(this._stuck);
   }
-  componentDidLoad() {
-    this.collectMenuElements();
-    this.onStuckMode();
+  setMenuFloatingMode() {
+    if (this.menuElements.length === 0) {
+      return;
+    }
+    const elements = this.menuElements;
+    elements.forEach((element) => {
+      element.open = false;
+      element.floating = !this.drawerOpen;
+      element.verticalContext = this.drawerOpen;
+    });
   }
   get title() {
     const titleElement = this.hostElement.querySelector('[slot="title"]');
@@ -115,19 +152,36 @@ export class ZAppHeader {
     }
     return parent;
   }
+  get canShowMenu() {
+    return this.menuLength > 0 && this.flow !== "offcanvas" && this.currentViewport !== "mobile" && !this.drawerOpen;
+  }
+  get canShowSearchbar() {
+    if (!this.enableSearch) {
+      return false;
+    }
+    // Always show the searchbar on desktop, even if a searchPageUrl is set
+    if (this.searchPageUrl) {
+      return this.currentViewport === "desktop";
+    }
+    return true;
+  }
+  /**
+   * Whether the header has a hero image, either as a prop or as a slot.
+   */
+  get hasHero() {
+    return this.hero !== undefined || this.hostElement.querySelector("[slot=hero]") !== null;
+  }
+  openDrawer() {
+    this.drawerOpen = true;
+  }
+  closeDrawer() {
+    this.drawerOpen = false;
+  }
   collectMenuElements() {
     const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
     this.menuLength = menuElements.length;
     this.setMenuFloatingMode();
   }
-  onStuckMode() {
-    if (this.stuck) {
-      this.enableStuckObserver();
-    }
-    else {
-      this.disableStuckMode();
-    }
-  }
   enableStuckObserver() {
     if (this.observer) {
       this.observer.observe(this.container);
@@ -139,26 +193,33 @@ export class ZAppHeader {
       this.observer.unobserve(this.container);
     }
   }
-  onStuck() {
-    const scrollParent = this.scrollParent;
-    if (!scrollParent) {
-      return;
+  onStuckMode() {
+    if (this.stuck) {
+      this.enableStuckObserver();
+    }
+    else {
+      this.disableStuckMode();
     }
-    this.emitStickingEvent();
   }
-  setMenuFloatingMode() {
-    if (this.menuElements.length === 0) {
-      return;
+  renderSearchLinkButton() {
+    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === "desktop") {
+      return null;
     }
-    const elements = this.menuElements;
-    elements.forEach((element) => {
-      element.open = false;
-      element.floating = !this.drawerOpen;
-      element.verticalContext = this.drawerOpen;
-    });
+    return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
+  }
+  componentDidLoad() {
+    this.collectMenuElements();
+    this.onStuckMode();
+    this.evaluateViewport();
   }
   render() {
-    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements }))))), this._stuck && (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title)))))));
+    return (h(Host, { "menu-length": this.menuLength }, this.hasHero && (h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero }))))), h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" }), this.renderSearchLinkButton()), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { class: "menu-container" }, this.canShowMenu && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && (h("z-searchbar", { placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.currentViewport !== "desktop", size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: true, onSearchTyping: (e) => {
+        var _a;
+        e.target.preventSubmit = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.length) < 3;
+      } }))))), h("z-offcanvas", { variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent" }, h("z-icon", { name: "close" })), this.drawerOpen && (h("div", { class: "drawer-content", slot: "canvasContent" }, h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))), this._stuck && (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && (h("z-searchbar", { placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: false, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: true, onSearchTyping: (e) => {
+        var _a;
+        e.target.preventSubmit = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.length) < 3;
+      } })))))));
   }
   static get is() { return "z-app-header"; }
   static get encapsulation() { return "shadow"; }
@@ -186,7 +247,7 @@ export class ZAppHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Stuck mode for the header.\nYou can programmatically set it using an IntersectionObserver.\n**Optional**"
+          "text": "Stuck mode for the header.\nYou can programmatically set it using an IntersectionObserver."
         },
         "attribute": "stuck",
         "reflect": true,
@@ -204,7 +265,7 @@ export class ZAppHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the hero image source for the header.\nYou can also use a slot=\"hero\" node for advanced customisation.\n**Optional**"
+          "text": "Set the hero image source for the header.\nYou can also use a [slot=\"hero\"] node for advanced customization."
         },
         "attribute": "hero",
         "reflect": false
@@ -221,7 +282,7 @@ export class ZAppHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Should place an overlay over the hero image.\nUseful for legibility purpose.\n**Optional**"
+          "text": "Should place an overlay over the hero image.\nUseful for legibility purpose."
         },
         "attribute": "overlay",
         "reflect": true,
@@ -262,12 +323,66 @@ export class ZAppHeader {
         "attribute": "drawer-open",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "enableSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable the search bar."
+        },
+        "attribute": "enable-search",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "searchPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text for the search bar."
+        },
+        "attribute": "search-placeholder",
+        "reflect": false,
+        "defaultValue": "\"Cerca\""
+      },
+      "searchPageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Url to the search page.\nSet this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\nThe link will also appear on the sticky header."
+        },
+        "attribute": "search-page-url",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
       "_stuck": {},
+      "currentViewport": {},
       "menuLength": {}
     };
   }
@@ -292,14 +407,23 @@ export class ZAppHeader {
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{
-        "propName": "stuck",
-        "methodName": "onStuckMode"
-      }, {
         "propName": "_stuck",
         "methodName": "onStuck"
       }, {
         "propName": "drawerOpen",
         "methodName": "setMenuFloatingMode"
+      }, {
+        "propName": "stuck",
+        "methodName": "onStuckMode"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "evaluateViewport",
+        "target": "window",
+        "capture": false,
+        "passive": true
       }];
   }
 }