@zanichelli/albe-web-components 21.0.0-RC3 → 21.0.0-RC5

package/dist/cjs/z-app-header_12.cjs.entry.js

@@ -192,7 +192,10 @@ const ZAppHeader = class {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (index$1.h("z-button", { class: "search-page-button", variant: index.ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: index.ControlSize.X_SMALL }));
         }
-        return (index$1.h("z-searchbar", { class: { "has-label": !!this.searchLabel }, value: this.searchString, placeholder: this.searchPlaceholder, label: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (index$1.h("z-searchbar", { class: { "has-label": !!this.searchLabel }, value: this.searchString, placeholder: this.searchPlaceholder, label: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => {
+                this.searchString = e.detail;
+                this.searchTyping.emit(e.detail);
+            }, onSearchSubmit: (e) => this.searchSubmit.emit(e.detail) }));
     }
     renderProductLogos() {
         return (index$1.h(index$1.Fragment, null, this.enableZLogo && (index$1.h("span", { class: "z-logo" }, index$1.h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (index$1.h("span", { class: "product-logo" }, index$1.h("slot", { name: "product-logo" })))));
@@ -210,6 +213,8 @@ const ZAppHeader = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
         this.sticking = index$1.createEvent(this, "sticking", 7);
+        this.searchSubmit = index$1.createEvent(this, "searchSubmit", 7);
+        this.searchTyping = index$1.createEvent(this, "searchTyping", 7);
         /**
          * Stuck mode for the header.
          * You can programmatically set it using an IntersectionObserver.
@@ -276,7 +281,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (index$1.h(index$1.Host, { key: 'a464234ec0ce538282727aa83c43d30b5ea23ffa', "menu-length": this.menuLength }, index$1.h("div", { key: '0f41b7571c5e1acf4298910ab415ca986616a40e', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '9b9d45789be83c2db23e035a72b60cd4910b68b2', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: 'bd1196659bc19936603de3994011b82ea7649147', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: '5d50957c5b91c138ad21efb849fdd371e93057ae', name: "top-subtitle" }))), index$1.h("div", { key: '47a21fe5a5b508fe23cf4e185813743e8dce0fab', class: "heading-title" }, index$1.h("slot", { key: '1c027312231d68cb2ebc625b6aeed177d2e22cf4', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '6917fa59229dc3d80b5c3ca472bd14b671be9e27', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: 'e3ac84ff0933a8955fa7433f8ea0ae94e5eec080', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '1f3461f8b2b99d8515774265c07ddcb850ed7757', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'eda425c16602287225554fcca0c65661b46e0366', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (index$1.h(index$1.Host, { key: '1da213ad3c3bde9d41d2fb801c485a43c069a7ab', "menu-length": this.menuLength }, index$1.h("div", { key: 'f795c08d7dba5cb9c0a94f133a016ddf7fec274c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '54664f024e256d94deb660345b34b358dfd3eb38', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: '084c42062cef0ae417ba2bc6d1ee38a4eaacaa63', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: '5909e3ddf15e1ce73f0dfce136ab56d6d3a96398', name: "top-subtitle" }))), index$1.h("div", { key: '85db84ddc7d98c3345b12406e11249901b15f83a', class: "heading-title" }, index$1.h("slot", { key: 'f7f2da007d18ef08985d21643a0ba84b6cc00535', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '23d40c33c07fac7800eaebeffab0425e7a0f64c2', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: '7a1a6d02bc21d66101d7eeb2ca8404d9cea785d5', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: 'd4a8165445f738370309bc7e9319454fef2ce02d', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: '4e8557fa5ff1a35e0613ef3dd498c511e20a9316', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {