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

package/www/build/zanit-search-form.entry.js

@@ -0,0 +1,307 @@
+import { r as registerInstance, e as createEvent, a as getElement, h, d as Host } from './index-DPw_TAEB.js';
+import { S as SearchEnv, g as getSubjectsByArea, c as containsTarget, i as isEscKey, a as isTabKey, b as isArrowDownKey, d as isArrowUpKey } from './subjects.api-BRhngFD0.js';
+
+var AREA_LABELS;
+(function (AREA_LABELS) {
+    AREA_LABELS["SCUOLA"] = "Scuola";
+    AREA_LABELS["UNIVERSIT\u00C0"] = "Universit\u00E0";
+    AREA_LABELS["GIURIDICO"] = "Giuridico";
+    AREA_LABELS["DIZIONARI"] = "Dizionari";
+    AREA_LABELS["SAGGISTICA"] = "Saggistica";
+})(AREA_LABELS || (AREA_LABELS = {}));
+const AREA_ORDER = Object.keys(AREA_LABELS);
+function buildSuggestions(query, subjectsByArea, selectedArea) {
+    const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);
+    const hasSubject = matchingSubjectAreas.length > 0;
+    const subject = hasSubject ? query.toUpperCase() : undefined;
+    const suggestions = [];
+    if (selectedArea)
+        suggestions.push(buildWordSuggestion(query, selectedArea));
+    suggestions.push(buildWordSuggestion(query));
+    if (hasSubject) {
+        if (selectedArea) {
+            const orderedSubjectAreas = [
+                ...matchingSubjectAreas.filter((area) => area === selectedArea),
+                ...matchingSubjectAreas
+                    .filter((area) => area !== selectedArea)
+                    .sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),
+            ];
+            orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));
+        }
+        else {
+            matchingSubjectAreas
+                .sort((a, b) => getAreaOrder(a) - getAreaOrder(b))
+                .forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));
+        }
+    }
+    return suggestions;
+}
+const buildWordSuggestion = (user_query, area) => {
+    return {
+        id: buildId(`word-${user_query}-${area}`),
+        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),
+    };
+};
+const buildSubjectSuggestion = (user_query, area, subject) => {
+    return {
+        id: buildId(`subj-${user_query}-${area}-${subject}`),
+        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),
+    };
+};
+const buildId = (string) => string
+    .split('')
+    .map((c) => c.charCodeAt(0).toString(16))
+    .join('');
+const buildUrl = (params) => {
+    return `ricerca?${new URLSearchParams(params).toString()}`;
+};
+const buildDetail = (user_query, query, area, subject) => ({
+    user_query,
+    ...(query ? { query } : {}),
+    ...(area ? { area } : {}),
+    ...(subject ? { subject } : {}),
+});
+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);
+    return Object.entries(subjectsByArea)
+        .filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))
+        .map(([area]) => area);
+}
+/** Clear search string: lowercase, remove multiple spaces */
+const cleanSearch = (s) => s.toLowerCase().replace(/\s+/g, ' ');
+const getAreaOrder = (area) => {
+    const index = AREA_ORDER.indexOf(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-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) {
+        registerInstance(this, hostRef);
+        this.search = createEvent(this, "search", 7);
+        this.resetSearch = createEvent(this, "resetSearch", 7);
+    }
+    formElement;
+    subjectsByArea = {};
+    timer;
+    get host() { return getElement(this); }
+    /** Indicates whether the searchbar is visible and usable. */
+    showSearchbar = false;
+    /** Search query to apply. */
+    _searchQuery = undefined;
+    /** Search suggestions to show in the autocomplete dropdown. */
+    suggestions = [];
+    /** Active suggestion - used for keyboard navigation */
+    activeSuggestion = '';
+    /** Show suggestions list */
+    showSuggestions = false;
+    /** Initial search query */
+    searchQuery = undefined;
+    /** Environment for search suggestions */
+    searchEnv = SearchEnv.PROD;
+    /** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").  */
+    searchArea;
+    onSearchQueryChange() {
+        this._searchQuery = this.searchQuery;
+        if (this.searchQuery) {
+            this.openSearchbar();
+        }
+        this.resetSuggestions();
+    }
+    onSearchAreaChange() {
+        this.resetSuggestions();
+    }
+    onShowSearchbarChange() {
+        if (!this.showSearchbar) {
+            this.showSuggestions = false;
+        }
+    }
+    onShowSuggestionsChange() {
+        this.activeSuggestion = '';
+    }
+    /** Emitted on search form submission. */
+    search;
+    resetSearch;
+    async connectedCallback() {
+        this.subjectsByArea = await getSubjectsByArea(this.searchEnv);
+        this.showSearchbar = !!this.searchQuery;
+        this._searchQuery = this.searchQuery;
+    }
+    /** Close open searchbar when clicking outside. */
+    handleOutsideClick(event) {
+        if (this.showSearchbar && this.host && !containsTarget(this.host, event)) {
+            this.showSearchbar = false;
+        }
+    }
+    /** Close the searchbar/suggestions when pressing Escape. */
+    handleEsc(event) {
+        if (!isEscKey(event)) {
+            return;
+        }
+        if (this.showSuggestions) {
+            this.showSuggestions = false;
+        }
+        else {
+            this.showSearchbar = false;
+        }
+    }
+    /** Close the searchbar/suggestions when pressing Tab. */
+    handleTab(event) {
+        if (!isTabKey(event)) {
+            return;
+        }
+        this.showSuggestions = false;
+        if (!containsTarget(this.host, event)) {
+            this.showSearchbar = false;
+        }
+    }
+    openSearchbar() {
+        this.showSearchbar = true;
+        setTimeout(() => {
+            const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
+            searchbarInput.focus({ preventScroll: true });
+        }, 500);
+    }
+    resetSearchQuery() {
+        this.searchQuery = undefined;
+        this.resetSearch.emit();
+    }
+    resetSuggestions() {
+        this.suggestions = [];
+        this.showSuggestions = false;
+    }
+    handleInputChange(event) {
+        this._searchQuery = event.target.value;
+        if (!this._searchQuery) {
+            this.searchQuery = undefined;
+        }
+        this.updateSuggestions();
+    }
+    updateSuggestions() {
+        clearTimeout(this.timer);
+        const query = (this._searchQuery || '').trim();
+        if (query.length < 3) {
+            this.resetSuggestions();
+            return;
+        }
+        this.timer = setTimeout(() => {
+            this.resetSuggestions();
+            this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());
+            this.showSuggestions = true;
+        }, 300);
+    }
+    onSearchSubmit(event) {
+        event.preventDefault();
+        if (!this._searchQuery) {
+            return;
+        }
+        if (this.activeSuggestion) {
+            const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);
+            if (suggestion) {
+                this.submitSuggestionSearch(suggestion);
+                this.showSuggestions = false;
+                return;
+            }
+        }
+        this.showSearchbar = false;
+        const searchEv = this.search.emit({ query: this._searchQuery, area: this.searchArea });
+        // do not submit the form if the event default behavior was prevented
+        if (searchEv.defaultPrevented) {
+            return;
+        }
+        this.formElement.submit();
+    }
+    submitSuggestionSearch(suggestion) {
+        const ev = this.search.emit({
+            user_query: suggestion.user_query,
+            query: suggestion.query,
+            area: suggestion.area,
+            subject: suggestion.subject,
+        });
+        if (!ev.defaultPrevented) {
+            window.location.href = suggestion.url;
+        }
+    }
+    handleSuggestionsNav(event) {
+        if (!isArrowDownKey(event) && !isArrowUpKey(event)) {
+            return;
+        }
+        if (!this.suggestions.length) {
+            return;
+        }
+        const options = this.suggestions.map((o) => o.id);
+        if (!options.length) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.showSuggestions) {
+            this.showSuggestions = true;
+        }
+        let nextId = null;
+        const firstId = options[0];
+        const lastId = options[options.length - 1];
+        const currOption = options.indexOf(this.activeSuggestion);
+        if (currOption < 0) {
+            nextId = isArrowDownKey(event) ? firstId : lastId;
+        }
+        else {
+            if (isArrowDownKey(event)) {
+                nextId = options[currOption + 1] || lastId;
+            }
+            else {
+                nextId = options[currOption - 1] || firstId;
+            }
+        }
+        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) => {
+            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: '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: '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"],
+        "searchArea": ["onSearchAreaChange"],
+        "showSearchbar": ["onShowSearchbarChange"],
+        "showSuggestions": ["onShowSuggestionsChange"]
+    }; }
+};
+ZanitSearchForm.style = searchFormCss;
+
+export { ZanitSearchForm as zanit_search_form };
+//# sourceMappingURL=zanit-search-form.entry.esm.js.map
+
+//# sourceMappingURL=zanit-search-form.entry.js.map

package/www/build/zanit-search-form.entry.js.map

@@ -0,0 +1 @@
+{"file":"zanit-search-form.entry.esm.js","mappings":"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","names":[],"sources":["src/components/menubar/search-form/suggestions.ts","src/components/menubar/search-form/search-form.css?tag=zanit-search-form&encapsulation=shadow","src/components/menubar/search-form/search-form.tsx"],"sourcesContent":["enum AREA_LABELS {\n  SCUOLA = 'Scuola',\n  UNIVERSITÀ = 'Università',\n  GIURIDICO = 'Giuridico',\n  DIZIONARI = 'Dizionari',\n  SAGGISTICA = 'Saggistica',\n}\n\nconst AREA_ORDER = Object.keys(AREA_LABELS);\n\nexport type SearchSuggestion = {\n  id: string;\n  label: string;\n  aria_label: string;\n  url: string;\n  user_query: string;\n  query?: string;\n  area?: string;\n  subject?: string;\n};\n\nexport function buildSuggestions(\n  query: string,\n  subjectsByArea: Record<string, string[]>,\n  selectedArea?: string\n): SearchSuggestion[] {\n  const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);\n  const hasSubject = matchingSubjectAreas.length > 0;\n  const subject = hasSubject ? query.toUpperCase() : undefined;\n\n  const suggestions: SearchSuggestion[] = [];\n\n  if (selectedArea) suggestions.push(buildWordSuggestion(query, selectedArea));\n\n  suggestions.push(buildWordSuggestion(query));\n\n  if (hasSubject) {\n    if (selectedArea) {\n      const orderedSubjectAreas = [\n        ...matchingSubjectAreas.filter((area) => area === selectedArea),\n        ...matchingSubjectAreas\n          .filter((area) => area !== selectedArea)\n          .sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),\n      ];\n      orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));\n    } else {\n      matchingSubjectAreas\n        .sort((a, b) => getAreaOrder(a) - getAreaOrder(b))\n        .forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));\n    }\n  }\n\n  return suggestions;\n}\n\nconst buildWordSuggestion = (user_query: string, area?: string): SearchSuggestion => {\n  return {\n    id: buildId(`word-${user_query}-${area}`),\n    label: buildLabel(user_query, area),\n    aria_label: buildAriaLabel(user_query, area, false),\n    url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),\n    ...buildDetail(user_query, user_query, area),\n  };\n};\n\nconst buildSubjectSuggestion = (user_query: string, area: string, subject: string): SearchSuggestion => {\n  return {\n    id: buildId(`subj-${user_query}-${area}-${subject}`),\n    label: buildLabel(user_query, area),\n    aria_label: buildAriaLabel(user_query, area, true),\n    url: buildUrl({ area, materia: subject, user_query }),\n    ...buildDetail(user_query, undefined, area, subject),\n  };\n};\n\nconst buildId = (string: string) =>\n  string\n    .split('')\n    .map((c) => c.charCodeAt(0).toString(16))\n    .join('');\n\nconst buildUrl = (params: Record<string, string>): string => {\n  return `ricerca?${new URLSearchParams(params).toString()}`;\n};\n\nconst buildDetail = (user_query: string, query?: string, area?: string, subject?: string) => ({\n  user_query,\n  ...(query ? { query } : {}),\n  ...(area ? { area } : {}),\n  ...(subject ? { subject } : {}),\n});\n\nconst buildLabel = (user_query: string, area?: string) => {\n  return `<mark>${user_query}</mark> in <strong>${area ? `${AREA_LABELS[area] ?? area}` : `tutto il sito`}</strong>`;\n};\n\nconst buildAriaLabel = (user_query: string, area?: string, isSubject: boolean = false) => {\n  return `Cerca la ${isSubject ? `materia` : `parola`} ${user_query} ${area ? `nel catalogo ${AREA_LABELS[area] ?? area}` : `in tutto il sito`}`;\n};\n\nfunction findSubjectAreas(query: string, subjectsByArea: Record<string, string[]>): string[] {\n  const cleanedQuery = cleanSearch(query);\n  return Object.entries(subjectsByArea)\n    .filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))\n    .map(([area]) => area);\n}\n\n/** Clear search string: lowercase, remove multiple spaces */\nconst cleanSearch = (s: string) => s.toLowerCase().replace(/\\s+/g, ' ');\n\nconst getAreaOrder = (area: string) => {\n  const index = AREA_ORDER.indexOf(area);\n  return index >= 0 ? index : 100;\n};\n",":host,\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nbutton {\n  all: unset;\n  cursor: pointer;\n}\n\n.searchbar {\n  --searchbar-button-x-padding: 14px;\n  --searchbar-button-icon-width: 1.75rem;\n\n  /* button horizontal padding + icon size + left border */\n  --closed-searchbar-width: calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);\n\n  position: absolute;\n  z-index: 5;\n  top: 0;\n  right: 0;\n  display: flex;\n  width: var(--closed-searchbar-width);\n  height: 3rem;\n  justify-content: flex-end;\n  transition: width 0.4s ease-in-out;\n}\n\n.searchbar.searchbar-open {\n  width: 100%;\n}\n\n.searchbar .input-wrapper {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  align-items: center;\n  padding: 8px;\n  padding-left: var(--grid-margin);\n  background-color: #fff;\n  gap: 8px;\n  transition-duration: 0.4s;\n  transition-property: padding-right, padding-left, width;\n  transition-timing-function: ease-in-out;\n}\n\n.searchbar:not(.searchbar-open) .input-wrapper {\n  overflow: hidden;\n  width: 0;\n  padding: 0;\n}\n\n.searchbar button[type='reset'] {\n  --z-icon-width: 1rem;\n  --z-icon-height: 1rem;\n\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.searchbar input {\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: none;\n  background-color: #fff;\n  font-family: var(--font-family-sans);\n  font-size: 1rem;\n}\n\n.searchbar.searchbar-open input:first-child {\n  padding-left: 4px;\n  margin-left: -4px; /* per evitare che la focus shadow vada fuori dallo schermo */\n}\n\n.searchbar input[type='search']::-webkit-search-cancel-button,\n.searchbar input[type='search']::-webkit-search-decoration {\n  appearance: none;\n}\n\n.searchbar input::placeholder {\n  color: var(--gray500);\n}\n\n.searchbar .searchbar-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px var(--searchbar-button-x-padding);\n  border-left: 1px solid #000;\n  background: var(--zanit-accent-color);\n  font-family: inherit;\n  font-size: inherit;\n  gap: 64px;\n  line-height: 1;\n}\n\n.searchbar .searchbar-button:focus-visible {\n  z-index: 1;\n}\n\n.searchbar-button z-icon {\n  --z-icon-width: var(--searchbar-button-icon-width);\n  --z-icon-height: var(--searchbar-button-icon-width);\n}\n\n.suggestions-wrapper {\n  position: absolute;\n  z-index: 4;\n  top: 3rem;\n  left: 50%;\n  width: 100vw;\n  border-top: 1px solid var(--gray200);\n  margin-left: -50vw;\n  background: #fff;\n  box-shadow: var(--shadow-1);\n}\n\n.suggestions-wrapper.hidden {\n  display: none;\n}\n\n.suggestions {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  padding: var(--space-unit);\n  margin: 0 auto;\n}\n\n.suggestion-head {\n  padding: calc(var(--space-unit) * 0.75) var(--space-unit);\n  color: var(--gray700);\n  font-size: 0.875rem;\n  font-weight: var(--font-md);\n  line-height: 1.125rem;\n}\n\n.suggestion {\n  display: flex;\n  padding: calc(var(--space-unit) * 0.75) var(--space-unit);\n  color: var(--gray900);\n  cursor: pointer;\n  font-size: 1rem;\n  gap: var(--space-unit);\n  line-height: 1.5rem;\n}\n\n.suggestion:hover,\n.suggestion[aria-selected='true'] {\n  background: var(--gray100);\n}\n\n.suggestion strong {\n  font-weight: var(--font-bd);\n}\n\n.suggestion mark {\n  background-color: var(--red50);\n}\n\n.suggestion z-icon {\n  --z-icon-height: 1.125rem;\n\n  margin-top: 0.125rem;\n}\n\n.suggestions z-divider {\n  margin: var(--space-unit) 0;\n}\n\n@media (width < 1152px) {\n  .searchbar .searchbar-button > .searchbar-button-label {\n    display: none;\n  }\n}\n\n@media (width >= 768px) {\n  .searchbar {\n    --searchbar-button-x-padding: 16px;\n    --searchbar-button-icon-width: 2rem;\n  }\n\n  .searchbar .input-wrapper {\n    gap: 14px;\n  }\n\n  .searchbar button[type='reset'] {\n    --z-icon-width: 1.5rem;\n    --z-icon-height: 1.5rem;\n  }\n\n  .searchbar input,\n  .searchbar .searchbar-button {\n    font-size: 1.5rem;\n  }\n\n  .searchbar .searchbar-button {\n    padding: 8px var(--searchbar-button-x-padding);\n  }\n\n  .suggestions {\n    padding: var(--space-unit) calc(var(--space-unit) * 2);\n  }\n}\n\n@media (width >= 1152px) {\n  .searchbar {\n    --closed-searchbar-width: 190px;\n  }\n}\n\n@media (width >= 1366px) {\n  .searchbar .searchbar-button {\n    border-right: 1px solid #000;\n  }\n\n  .suggestions {\n    max-width: 1366px;\n    padding: var(--space-unit) calc(var(--space-unit) * 3);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget, isArrowDownKey, isArrowUpKey, isEscKey, isTabKey, SearchEvent } from '../../../utils';\nimport { getSubjectsByArea, SearchEnv } from '../../../utils/subjects.api';\nimport { buildSuggestions, SearchSuggestion } from './suggestions';\n\n@Component({\n  tag: 'zanit-search-form',\n  styleUrl: 'search-form.css',\n  shadow: true,\n})\nexport class ZanitSearchForm {\n  private formElement: HTMLFormElement;\n  private subjectsByArea: Record<string, string[]> = {};\n  private timer: NodeJS.Timeout;\n\n  @Element() host: HTMLZanitSearchFormElement;\n\n  /** Indicates whether the searchbar is visible and usable. */\n  @State()\n  showSearchbar: boolean = false;\n\n  /** Search query to apply. */\n  @State()\n  _searchQuery: string | undefined = undefined;\n\n  /** Search suggestions to show in the autocomplete dropdown. */\n  @State() suggestions: SearchSuggestion[] = [];\n\n  /** Active suggestion - used for keyboard navigation */\n  @State() activeSuggestion: string = '';\n\n  /** Show suggestions list */\n  @State() showSuggestions: boolean = false;\n\n  /** Initial search query */\n  @Prop({ mutable: true })\n  searchQuery: string | undefined = undefined;\n\n  /** Environment for search suggestions */\n  @Prop() searchEnv: SearchEnv = SearchEnv.PROD;\n\n  /** Search area (e.g. \"SCUOLA\", \"UNIVERSITÀ\", \"DIZIONARI\").  */\n  @Prop() searchArea?: string | undefined;\n\n  @Watch('searchQuery')\n  onSearchQueryChange() {\n    this._searchQuery = this.searchQuery;\n    if (this.searchQuery) {\n      this.openSearchbar();\n    }\n    this.resetSuggestions();\n  }\n\n  @Watch('searchArea')\n  onSearchAreaChange() {\n    this.resetSuggestions();\n  }\n\n  @Watch('showSearchbar')\n  onShowSearchbarChange() {\n    if (!this.showSearchbar) {\n      this.showSuggestions = false;\n    }\n  }\n\n  @Watch('showSuggestions')\n  onShowSuggestionsChange() {\n    this.activeSuggestion = '';\n  }\n\n  /** Emitted on search form submission. */\n  @Event({ cancelable: true }) search: EventEmitter<SearchEvent>;\n\n  @Event() resetSearch: EventEmitter<void>;\n\n  async connectedCallback() {\n    this.subjectsByArea = await getSubjectsByArea(this.searchEnv);\n    this.showSearchbar = !!this.searchQuery;\n    this._searchQuery = this.searchQuery;\n  }\n\n  /** Close open searchbar when clicking outside. */\n  @Listen('click', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (this.showSearchbar && this.host && !containsTarget(this.host, event)) {\n      this.showSearchbar = false;\n    }\n  }\n\n  /** Close the searchbar/suggestions when pressing Escape. */\n  @Listen('keydown', { passive: true })\n  handleEsc(event: KeyboardEvent) {\n    if (!isEscKey(event)) {\n      return;\n    }\n\n    if (this.showSuggestions) {\n      this.showSuggestions = false;\n    } else {\n      this.showSearchbar = false;\n    }\n  }\n\n  /** Close the searchbar/suggestions when pressing Tab. */\n  @Listen('keyup', { target: 'document', passive: true })\n  handleTab(event: KeyboardEvent) {\n    if (!isTabKey(event)) {\n      return;\n    }\n\n    this.showSuggestions = false;\n\n    if (!containsTarget(this.host, event)) {\n      this.showSearchbar = false;\n    }\n  }\n\n  private openSearchbar() {\n    this.showSearchbar = true;\n    setTimeout(() => {\n      const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n      searchbarInput.focus({ preventScroll: true });\n    }, 500);\n  }\n\n  private resetSearchQuery() {\n    this.searchQuery = undefined;\n    this.resetSearch.emit();\n  }\n\n  private resetSuggestions() {\n    this.suggestions = [];\n    this.showSuggestions = false;\n  }\n\n  private handleInputChange(event: InputEvent) {\n    this._searchQuery = (event.target as HTMLInputElement).value;\n    if (!this._searchQuery) {\n      this.searchQuery = undefined;\n    }\n\n    this.updateSuggestions();\n  }\n\n  private updateSuggestions() {\n    clearTimeout(this.timer);\n\n    const query = (this._searchQuery || '').trim();\n\n    if (query.length < 3) {\n      this.resetSuggestions();\n      return;\n    }\n\n    this.timer = setTimeout(() => {\n      this.resetSuggestions();\n      this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());\n      this.showSuggestions = true;\n    }, 300);\n  }\n\n  private onSearchSubmit(event: Event) {\n    event.preventDefault();\n    if (!this._searchQuery) {\n      return;\n    }\n\n    if (this.activeSuggestion) {\n      const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);\n      if (suggestion) {\n        this.submitSuggestionSearch(suggestion);\n        this.showSuggestions = false;\n        return;\n      }\n    }\n\n    this.showSearchbar = false;\n\n    const searchEv = this.search.emit({ query: this._searchQuery, area: this.searchArea });\n    // do not submit the form if the event default behavior was prevented\n    if (searchEv.defaultPrevented) {\n      return;\n    }\n\n    this.formElement.submit();\n  }\n\n  private submitSuggestionSearch(suggestion: SearchSuggestion) {\n    const ev = this.search.emit({\n      user_query: suggestion.user_query,\n      query: suggestion.query,\n      area: suggestion.area,\n      subject: suggestion.subject,\n    });\n    if (!ev.defaultPrevented) {\n      window.location.href = suggestion.url;\n    }\n  }\n\n  private handleSuggestionsNav(event: KeyboardEvent) {\n    if (!isArrowDownKey(event) && !isArrowUpKey(event)) {\n      return;\n    }\n\n    if (!this.suggestions.length) {\n      return;\n    }\n\n    const options = this.suggestions.map((o) => o.id);\n\n    if (!options.length) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!this.showSuggestions) {\n      this.showSuggestions = true;\n    }\n\n    let nextId = null;\n    const firstId = options[0];\n    const lastId = options[options.length - 1];\n    const currOption = options.indexOf(this.activeSuggestion);\n    if (currOption < 0) {\n      nextId = isArrowDownKey(event) ? firstId : lastId;\n    } else {\n      if (isArrowDownKey(event)) {\n        nextId = options[currOption + 1] || lastId;\n      } else {\n        nextId = options[currOption - 1] || firstId;\n      }\n    }\n    this.activeSuggestion = nextId;\n  }\n\n  private renderSuggestions() {\n    const renderHeading = (label: string, key: string) => (\n      <span\n        key={key}\n        class=\"suggestion-head\"\n        aria-hidden=\"true\"\n      >\n        {label}\n      </span>\n    );\n\n    return (\n      <div\n        class={{ 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }}\n        onPointerOver={(e) => e.preventDefault()}\n      >\n        <div\n          id=\"search-suggestions\"\n          class=\"suggestions\"\n          role=\"listbox\"\n          aria-label=\"Seleziona tra i suggerimenti\"\n        >\n          {this.suggestions.map((suggestion, k) => {\n            const items = [];\n\n            if (k === 0) {\n              items.push(renderHeading('Cerca la parola', 'word-head'));\n            } else if (suggestion.subject && !this.suggestions[k - 1].subject) {\n              items.push(<z-divider aria-hidden=\"true\" />);\n              items.push(renderHeading('Cerca la materia', 'subj-head'));\n            }\n\n            items.push(\n              <span\n                key={k}\n                id={suggestion.id}\n                class=\"suggestion\"\n                role=\"option\"\n                aria-label={suggestion.aria_label}\n                aria-selected={this.activeSuggestion === suggestion.id ? 'true' : undefined}\n                onClick={() => this.submitSuggestionSearch(suggestion)}\n              >\n                <z-icon name=\"left-magnifying-glass\" />\n                <span\n                  aria-hidden=\"true\"\n                  innerHTML={suggestion.label}\n                />\n              </span>\n            );\n\n            return items;\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <form\n          class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n          ref={(el) => (this.formElement = el)}\n          role=\"search\"\n          aria-label=\"Cerca nel sito\"\n          method=\"get\"\n          action=\"/ricerca\"\n          onSubmit={(event) => this.onSearchSubmit(event)}\n          onReset={() => this.resetSearchQuery()}\n        >\n          {!!this.searchArea && (\n            <input\n              type=\"hidden\"\n              name=\"area\"\n              value={this.searchArea}\n            />\n          )}\n\n          <div\n            class=\"input-wrapper\"\n            role=\"none\"\n          >\n            {this.searchQuery && (\n              <button\n                type=\"reset\"\n                aria-label=\"Svuota campo di ricerca\"\n                disabled={!this.showSearchbar}\n                aria-hidden={!this.showSearchbar ? 'true' : undefined}\n                tabIndex={!this.showSearchbar ? -1 : 0}\n              >\n                <z-icon name=\"multiply-circled\" />\n              </button>\n            )}\n            <input\n              id=\"searchbar-input\"\n              name=\"q\"\n              type=\"search\"\n              disabled={!this.showSearchbar}\n              placeholder=\"Cerca per parola chiave o ISBN\"\n              value={this.searchQuery}\n              required\n              autocomplete=\"off\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={this.showSuggestions ? 'true' : 'false'}\n              aria-controls=\"search-suggestions\"\n              aria-activedescendant={this.activeSuggestion}\n              aria-label=\"Cerca per parola chiave o ISBN\"\n              aria-hidden={!this.showSearchbar ? 'true' : undefined}\n              tabIndex={!this.showSearchbar ? -1 : 0}\n              onInput={(event) => this.handleInputChange(event)}\n              onKeyDown={(e) => {\n                // INFO: prevent ESC from clearing input\n                if (isEscKey(e)) {\n                  e.preventDefault();\n                }\n\n                this.handleSuggestionsNav(e);\n              }}\n            />\n          </div>\n\n          <button\n            class=\"searchbar-button\"\n            aria-label={this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca'}\n            aria-controls=\"searchbar-input\"\n            type={this.showSearchbar ? 'submit' : 'button'}\n            onClick={() => this.openSearchbar()}\n          >\n            {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n            <z-icon name=\"search\"></z-icon>\n          </button>\n        </form>\n\n        {this.renderSuggestions()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/www/index.html

@@ -1,4 +1,4 @@
-<!doctype html><html dir="ltr" lang="it"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Zanichelli.it frontend kit</title> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css"> <link rel="stylesheet" type="text/css" href="/build/p-43c395dc.css"> <link rel="modulepreload" href="/build/p-f274d1db.js"><link rel="modulepreload" href="/build/p-DSdvvVFj.js"><script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script> <script type="module" src="/build/p-f274d1db.js" data-stencil data-resources-url="/build/" data-stencil-namespace="zanichelli-it-frontend-kit"></script> <script nomodule="" src="/build/zanichelli-it-frontend-kit.js" data-stencil></script> </head> <body> <header> <zanit-menubar current="home" search-env="dev" search-area="SCUOLA"></zanit-menubar> <script>
+<!doctype html><html dir="ltr" lang="it"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Zanichelli.it frontend kit</title> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css"> <link rel="stylesheet" type="text/css" href="/build/zanichelli-it-frontend-kit.css"> <script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script> <script type="module" src="/build/zanichelli-it-frontend-kit.esm.js" data-stencil></script> <script nomodule="" src="/build/zanichelli-it-frontend-kit.js" data-stencil></script> </head> <body> <header> <zanit-menubar current="home" search-env="dev" search-area="SCUOLA"></zanit-menubar> <script>
         document.addEventListener('DOMContentLoaded', function () {
           const menubar = document.querySelector('zanit-menubar');
           if (!menubar) {
@@ -341,4 +341,13 @@
     .inverse-link-container {
       background-color: var(--gray950);
       padding: 1rem 0.5rem;
-    }</style> </body></html>
+    }</style> <script>
+if ('serviceWorker' in navigator && location.protocol !== 'file:') {
+  // auto-unregister service worker during dev mode
+  navigator.serviceWorker.getRegistration().then(function(registration) {
+    if (registration) {
+      registration.unregister().then(function() { location.reload(true) });
+    }
+  });
+}
+</script></body></html>