@zanichelli/zanichelli-it-frontend-kit 1.4.0-RC1 → 1.4.0-RC3

package/dist/esm/zanit-back-to-top_4.entry.js

@@ -7,6 +7,7 @@ const ZanitBackTop = class {
         registerInstance(this, hostRef);
     }
     resizeObserver;
+    mutationObserver;
     get host() { return getElement(this); }
     /** Indicates whether the back-to-top button is visible and usable. */
     showFab = false;
@@ -22,14 +23,18 @@ const ZanitBackTop = class {
         this.updateFabVisibility();
     }
     handleResize = () => {
-        const newHeight = document.documentElement.scrollHeight;
-        if (newHeight !== this.currentPageHeight)
+        const newHeight = document.body.scrollHeight;
+        if (newHeight !== this.currentPageHeight) {
             this.currentPageHeight = newHeight;
+            this.updateFabVisibility();
+        }
     };
     connectedCallback() {
         this.currentPageHeight = document.body.scrollHeight;
         this.resizeObserver = new ResizeObserver(this.handleResize);
-        this.resizeObserver.observe(document.documentElement);
+        this.resizeObserver.observe(document.body);
+        this.mutationObserver = new MutationObserver(this.handleResize);
+        this.mutationObserver.observe(document.body, { childList: true, subtree: true });
         this.updateFabVisibility();
         const mobileMediaQuery = window.matchMedia('(width < 768px)');
         this.isMobile = mobileMediaQuery.matches;
@@ -39,6 +44,7 @@ const ZanitBackTop = class {
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
+        this.mutationObserver.disconnect();
     }
     updateFabVisibility() {
         this.showFab = this.currentPageHeight > this.pageMinHeight && window.scrollY > this.scrollMinHeight;
@@ -47,7 +53,7 @@ const ZanitBackTop = class {
         window.scrollTo({ top: 0, behavior: 'smooth' });
     }
     render() {
-        return (h(Host, { key: 'e2585492b2d991aed8c99c02b68fbc5b68c800da', class: { hidden: !this.showFab }, "aria-hidden": this.showFab ? 'false' : 'true' }, h("button", { key: '15ae24d829c4e88e7eefce2f5e9c9a8bee255124', class: { 'z-fab': true, 'z-fab-extended': !this.isMobile }, onClick: () => this.scroll() }, h("z-icon", { key: 'a5f937a661696ea0a68c558f0232f77de70d156e', name: "back-top" }), h("span", { key: '628786873ddc4db46d6fa73211b0c1e1d576a794' }, "Torna su"))));
+        return (h(Host, { key: '3abd8ab70075d8042285d8ed6fab0729c4b5ec42', class: { hidden: !this.showFab }, "aria-hidden": this.showFab ? 'false' : 'true' }, h("button", { key: '11b149d5f1d75720d4bdd329e9897da782092ed1', class: { 'z-fab': true, 'z-fab-extended': !this.isMobile }, onClick: () => this.scroll() }, h("z-icon", { key: 'fbdff1419da6d20ab594ffd11c58d7bf25fb7aa6', name: "back-top" }), h("span", { key: '0292f761b5459c372f003ed514abbd3403570c75' }, "Torna su"))));
     }
 };
 ZanitBackTop.style = backToTopCss;
@@ -745,8 +751,8 @@ function buildSuggestions(query, subjectsByArea, selectedArea) {
 const buildWordSuggestion = (user_query, area) => {
     return {
         id: buildId(`word-${user_query}-${area}`),
-        label: buildLabel(user_query, area, false, false),
-        html_label: buildLabel(user_query, area, false, true),
+        label: buildLabel(user_query, area),
+        aria_label: buildAriaLabel(user_query, area, false),
         url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),
         ...buildDetail(user_query, user_query, area),
     };
@@ -754,8 +760,8 @@ const buildWordSuggestion = (user_query, area) => {
 const buildSubjectSuggestion = (user_query, area, subject) => {
     return {
         id: buildId(`subj-${user_query}-${area}-${subject}`),
-        label: buildLabel(user_query, area, true, false),
-        html_label: buildLabel(user_query, area, true, true),
+        label: buildLabel(user_query, area),
+        aria_label: buildAriaLabel(user_query, area, true),
         url: buildUrl({ area, materia: subject, user_query }),
         ...buildDetail(user_query, undefined, area, subject),
     };
@@ -773,10 +779,11 @@ const buildDetail = (user_query, query, area, subject) => ({
     ...(area ? { area } : {}),
     ...(subject ? { subject } : {}),
 });
-const buildLabel = (user_query, area, isSubject = false, isHtml = false) => {
-    const openStrong = isHtml ? `<strong>` : ``;
-    const closeStrong = isHtml ? `</strong>` : ``;
-    return `Cerca la ${isSubject ? `materia` : `parola`} ${openStrong}${user_query}${closeStrong} ${area ? `nel catalogo ${openStrong}${AREA_LABELS[area] ?? area}${closeStrong}` : `in tutto il sito`}`;
+const buildLabel = (user_query, area) => {
+    return `<mark>${user_query}</mark> in <strong>${area ? `${AREA_LABELS[area] ?? area}` : `tutto il sito`}</strong>`;
+};
+const buildAriaLabel = (user_query, area, isSubject = false) => {
+    return `Cerca la ${isSubject ? `materia` : `parola`} ${user_query} ${area ? `nel catalogo ${AREA_LABELS[area] ?? area}` : `in tutto il sito`}`;
 };
 function findSubjectAreas(query, subjectsByArea) {
     const cleanedQuery = cleanSearch(query);
@@ -791,7 +798,7 @@ const getAreaOrder = (area) => {
     return index >= 0 ? index : 100;
 };
 
-const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}.searchbar{--searchbar-button-x-padding:14px;--searchbar-button-icon-width:1.75rem;--closed-searchbar-width:calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);position:absolute;z-index:5;top:0;right:0;display:flex;width:var(--closed-searchbar-width);height:3rem;justify-content:flex-end;transition:width 0.4s ease-in-out}.searchbar.searchbar-open{width:100%}.searchbar .input-wrapper{display:flex;overflow:hidden;width:100%;align-items:center;padding:8px;padding-left:var(--grid-margin);background-color:#fff;gap:8px;transition-duration:0.4s;transition-property:padding-right, padding-left, width;transition-timing-function:ease-in-out}.searchbar:not(.searchbar-open) .input-wrapper{overflow:hidden;width:0;padding:0}.searchbar button[type='reset']{--z-icon-width:1rem;--z-icon-height:1rem;display:flex;align-items:center;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar.searchbar-open input:first-child{padding-left:4px;margin-left:-4px;}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;justify-content:center;padding:10px var(--searchbar-button-x-padding);border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar .searchbar-button:focus-visible{z-index:1}.searchbar-button z-icon{--z-icon-width:var(--searchbar-button-icon-width);--z-icon-height:var(--searchbar-button-icon-width)}.suggestions-wrapper{position:absolute;z-index:4;top:3rem;left:50%;width:100vw;border-top:1px solid var(--gray200);margin-left:-50vw;background:#fff;box-shadow:var(--shadow-1)}.suggestions-wrapper.hidden{display:none}.suggestions{display:flex;width:100%;flex-direction:column;align-items:stretch;padding:var(--space-unit);margin:0 auto}.suggestion{padding:calc(var(--space-unit) * 0.75) var(--space-unit);cursor:pointer;font-size:1rem;line-height:1.5rem}.suggestion strong{font-size:1.125rem}.suggestion:hover,.suggestion[aria-selected='true']{background:var(--gray100)}@media (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}@media (width >= 768px){.searchbar{--searchbar-button-x-padding:16px;--searchbar-button-icon-width:2rem}.searchbar .input-wrapper{gap:14px}.searchbar button[type='reset']{--z-icon-width:1.5rem;--z-icon-height:1.5rem}.searchbar input,.searchbar .searchbar-button{font-size:1.5rem}.searchbar .searchbar-button{padding:8px var(--searchbar-button-x-padding)}.suggestions{padding:var(--space-unit) calc(var(--space-unit) * 2)}}@media (width >= 1152px){.searchbar{--closed-searchbar-width:190px}}@media (width >= 1366px){.searchbar .searchbar-button{border-right:1px solid #000}.suggestions{max-width:1366px;padding:var(--space-unit) calc(var(--space-unit) * 3)}}";
+const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}.searchbar{--searchbar-button-x-padding:14px;--searchbar-button-icon-width:1.75rem;--closed-searchbar-width:calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);position:absolute;z-index:5;top:0;right:0;display:flex;width:var(--closed-searchbar-width);height:3rem;justify-content:flex-end;transition:width 0.4s ease-in-out}.searchbar.searchbar-open{width:100%}.searchbar .input-wrapper{display:flex;overflow:hidden;width:100%;align-items:center;padding:8px;padding-left:var(--grid-margin);background-color:#fff;gap:8px;transition-duration:0.4s;transition-property:padding-right, padding-left, width;transition-timing-function:ease-in-out}.searchbar:not(.searchbar-open) .input-wrapper{overflow:hidden;width:0;padding:0}.searchbar button[type='reset']{--z-icon-width:1rem;--z-icon-height:1rem;display:flex;align-items:center;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar.searchbar-open input:first-child{padding-left:4px;margin-left:-4px;}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;justify-content:center;padding:10px var(--searchbar-button-x-padding);border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar .searchbar-button:focus-visible{z-index:1}.searchbar-button z-icon{--z-icon-width:var(--searchbar-button-icon-width);--z-icon-height:var(--searchbar-button-icon-width)}.suggestions-wrapper{position:absolute;z-index:4;top:3rem;left:50%;width:100vw;border-top:1px solid var(--gray200);margin-left:-50vw;background:#fff;box-shadow:var(--shadow-1)}.suggestions-wrapper.hidden{display:none}.suggestions{display:flex;width:100%;flex-direction:column;align-items:stretch;padding:var(--space-unit);margin:0 auto}.suggestion-head{padding:calc(var(--space-unit) * 0.75) var(--space-unit);color:var(--gray700);font-size:0.875rem;font-weight:var(--font-md);line-height:1.125rem}.suggestion{display:flex;padding:calc(var(--space-unit) * 0.75) var(--space-unit);color:var(--gray900);cursor:pointer;font-size:1rem;gap:var(--space-unit);line-height:1.5rem}.suggestion:hover,.suggestion[aria-selected='true']{background:var(--gray100)}.suggestion strong{font-weight:var(--font-bd)}.suggestion mark{background-color:var(--red50)}.suggestion z-icon{--z-icon-height:1.125rem;margin-top:0.125rem}.suggestions z-divider{margin:var(--space-unit) 0}@media (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}@media (width >= 768px){.searchbar{--searchbar-button-x-padding:16px;--searchbar-button-icon-width:2rem}.searchbar .input-wrapper{gap:14px}.searchbar button[type='reset']{--z-icon-width:1.5rem;--z-icon-height:1.5rem}.searchbar input,.searchbar .searchbar-button{font-size:1.5rem}.searchbar .searchbar-button{padding:8px var(--searchbar-button-x-padding)}.suggestions{padding:var(--space-unit) calc(var(--space-unit) * 2)}}@media (width >= 1152px){.searchbar{--closed-searchbar-width:190px}}@media (width >= 1366px){.searchbar .searchbar-button{border-right:1px solid #000}.suggestions{max-width:1366px;padding:var(--space-unit) calc(var(--space-unit) * 3)}}";
 
 const ZanitSearchForm = class {
     constructor(hostRef) {
@@ -974,18 +981,28 @@ const ZanitSearchForm = class {
         this.activeSuggestion = nextId;
     }
     renderSuggestions() {
+        const renderHeading = (label, key) => (h("span", { key: key, class: "suggestion-head", "aria-hidden": "true" }, label));
         return (h("div", { class: { 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }, onPointerOver: (e) => e.preventDefault() }, h("div", { id: "search-suggestions", class: "suggestions", role: "listbox", "aria-label": "Seleziona tra i suggerimenti" }, this.suggestions.map((suggestion, k) => {
-            return (h("span", { key: k, innerHTML: suggestion.html_label, id: suggestion.id, class: "suggestion", role: "option", "aria-label": suggestion.label, "aria-selected": this.activeSuggestion === suggestion.id ? 'true' : undefined, onClick: () => this.submitSuggestionSearch(suggestion) }));
+            const items = [];
+            if (k === 0) {
+                items.push(renderHeading('Cerca la parola', 'word-head'));
+            }
+            else if (suggestion.subject && !this.suggestions[k - 1].subject) {
+                items.push(h("z-divider", { "aria-hidden": "true" }));
+                items.push(renderHeading('Cerca la materia', 'subj-head'));
+            }
+            items.push(h("span", { key: k, id: suggestion.id, class: "suggestion", role: "option", "aria-label": suggestion.aria_label, "aria-selected": this.activeSuggestion === suggestion.id ? 'true' : undefined, onClick: () => this.submitSuggestionSearch(suggestion) }, h("z-icon", { name: "left-magnifying-glass" }), h("span", { "aria-hidden": "true", innerHTML: suggestion.label })));
+            return items;
         }))));
     }
     render() {
-        return (h(Host, { key: '5d4462489f2dd40636fd2bb025cb468bc4c5616e' }, h("form", { key: '21b2841bb46a3a839a4e4b4443635d48f70b4ae4', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, !!this.searchArea && (h("input", { key: '67a60d9d8995e2e06ce1c27e3946158e55a142b0', type: "hidden", name: "area", value: this.searchArea })), h("div", { key: '09cecaba254019023f8206fa777bda6273cbeb15', class: "input-wrapper", role: "none" }, this.searchQuery && (h("button", { key: 'b50b141eba8ced81b4c97ffb9ed4547eada6494f', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, h("z-icon", { key: 'b9a46579d4ae8e7850f38758b12eb0ec1aba731f', name: "multiply-circled" }))), h("input", { key: '3fbae3a688e7c775a5c96df4d1390f89da032f5b', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", value: this.searchQuery, required: true, autocomplete: "off", role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.showSuggestions ? 'true' : 'false', "aria-controls": "search-suggestions", "aria-activedescendant": this.activeSuggestion, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0, onInput: (event) => this.handleInputChange(event), onKeyDown: (e) => {
+        return (h(Host, { key: '9535c68b8cd3e76a55785cb993bed5026f84a589' }, h("form", { key: '26271b8f9034b3ea64bbea6ff413e75d0e857612', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, !!this.searchArea && (h("input", { key: '90e9dc4252a02a00db5160d374bd4ea42c4dce17', type: "hidden", name: "area", value: this.searchArea })), h("div", { key: '6189f91f8cbf9086c1dcddac5a1b649065d4319c', class: "input-wrapper", role: "none" }, this.searchQuery && (h("button", { key: '6292dc5e90576b49993ed15d908c675b501568d9', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, h("z-icon", { key: '67f07f13b459afad718d2687f5feea4271d6ec6a', name: "multiply-circled" }))), h("input", { key: 'ee4f88993f3bf1ba768eaf1b6ff63cd346bd552e', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", value: this.searchQuery, required: true, autocomplete: "off", role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.showSuggestions ? 'true' : 'false', "aria-controls": "search-suggestions", "aria-activedescendant": this.activeSuggestion, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0, onInput: (event) => this.handleInputChange(event), onKeyDown: (e) => {
                 // INFO: prevent ESC from clearing input
                 if (isEscKey(e)) {
                     e.preventDefault();
                 }
                 this.handleSuggestionsNav(e);
-            } })), h("button", { key: '996e557aef2f19dedc0d4dc76df392336ce85af3', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { key: '85eac62f283fd347316f7bcdd45220e5f8c32040', name: "search" }))), this.renderSuggestions()));
+            } })), h("button", { key: '4e0feaeaff7bcecaf6a29409a6accac895810fdf', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { key: '49eec7e6f04c34df57fcf99f405d1c3ada1fcdfb', name: "search" }))), this.renderSuggestions()));
     }
     static get watchers() { return {
         "searchQuery": ["onSearchQueryChange"],