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

package/dist/types/components/menubar/menubar.d.ts

@@ -1,4 +1,5 @@
 import { MenubarItem } from '../../utils';
+import { SearchEnv } from '../../utils/subjects.api';
 /**
  * Main menubar component. Each item can have a menu with subitems
  * When a main menubar item is the current active one, a sub-menubar is shown and each subitem can have a menu with subitems.
@@ -22,6 +23,10 @@ export declare class ZanitMenubar {
     current: string | undefined;
     /** Initial search query. */
     searchQuery: string | undefined;
+    /** Environment for search suggestions */
+    searchEnv: SearchEnv;
+    /** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").  */
+    searchArea?: string | undefined;
     private timerId;
     /** Setup the list of items. */
     parseData(data: typeof this.data): Promise<void>;

package/dist/types/components/menubar/mobile-menubar/mobile-menubar.d.ts

@@ -1,4 +1,5 @@
 import { MenubarItem, MenuItem } from '../../../utils';
+import { SearchEnv } from '../../../utils/subjects.api';
 /** Mobile menubar component. */
 export declare class ZanitMobileMenubar {
     host: HTMLZanitMobileMenubarElement;
@@ -10,6 +11,10 @@ export declare class ZanitMobileMenubar {
     searchQuery: string | undefined;
     /** Whether the menubar is loading the data. */
     loading: boolean;
+    /** Environment for search suggestions */
+    searchEnv: SearchEnv;
+    /** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").  */
+    searchArea?: string | undefined;
     /** Last active item ID. */
     lastCurrent: string | undefined;
     parentItem: MenubarItem | undefined;

package/dist/types/components/menubar/search-form/search-form.d.ts

@@ -1,27 +1,50 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { SearchEvent } from '../../../utils';
+import { SearchEnv } from '../../../utils/subjects.api';
+import { SearchSuggestion } from './suggestions';
 export declare class ZanitSearchForm {
     private formElement;
+    private subjectsByArea;
+    private timer;
     host: HTMLZanitSearchFormElement;
     /** Indicates whether the searchbar is visible and usable. */
     showSearchbar: boolean;
     /** Search query to apply. */
     _searchQuery: string | undefined;
+    /** Search suggestions to show in the autocomplete dropdown. */
+    suggestions: SearchSuggestion[];
+    /** Active suggestion - used for keyboard navigation */
+    activeSuggestion: string;
+    /** Show suggestions list */
+    showSuggestions: boolean;
     /** Initial search query */
     searchQuery: string | undefined;
+    /** Environment for search suggestions */
+    searchEnv: SearchEnv;
+    /** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").  */
+    searchArea?: string | undefined;
     onSearchQueryChange(): void;
+    onSearchAreaChange(): void;
+    onShowSearchbarChange(): void;
+    onShowSuggestionsChange(): void;
     /** Emitted on search form submission. */
-    search: EventEmitter<{
-        query: string;
-    }>;
+    search: EventEmitter<SearchEvent>;
     resetSearch: EventEmitter<void>;
     connectedCallback(): Promise<void>;
     /** Close open searchbar when clicking outside. */
     handleOutsideClick(event: MouseEvent): void;
-    /** Close the menu when pressing Escape or Tab. */
-    handleKeydown(event: KeyboardEvent): void;
+    /** Close the searchbar/suggestions when pressing Escape. */
+    handleEsc(event: KeyboardEvent): void;
+    /** Close the searchbar/suggestions when pressing Tab. */
+    handleTab(event: KeyboardEvent): void;
     private openSearchbar;
     private resetSearchQuery;
+    private resetSuggestions;
     private handleInputChange;
+    private updateSuggestions;
     private onSearchSubmit;
+    private submitSuggestionSearch;
+    private handleSuggestionsNav;
+    private renderSuggestions;
     render(): any;
 }

package/dist/types/components/menubar/search-form/suggestions.d.ts

@@ -0,0 +1,11 @@
+export type SearchSuggestion = {
+    id: string;
+    label: string;
+    aria_label: string;
+    url: string;
+    user_query: string;
+    query?: string;
+    area?: string;
+    subject?: string;
+};
+export declare function buildSuggestions(query: string, subjectsByArea: Record<string, string[]>, selectedArea?: string): SearchSuggestion[];

package/dist/types/components.d.ts

@@ -5,8 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { MenubarItem } from "./utils";
-export { MenubarItem } from "./utils";
+import { MenubarItem, SearchEvent } from "./utils";
+import { SearchEnv } from "./utils/subjects.api";
+export { MenubarItem, SearchEvent } from "./utils";
+export { SearchEnv } from "./utils/subjects.api";
 export namespace Components {
     /**
      * Back to top floating action button component.
@@ -39,6 +41,15 @@ export namespace Components {
           * The data to build the menu (as an array of `MenubarItem` or a JSON array) or the url to fetch to retrieve it.
          */
         "data": Promise<MenubarItem[]> | MenubarItem[] | URL | string;
+        /**
+          * Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").
+         */
+        "searchArea"?: string | undefined;
+        /**
+          * Environment for search suggestions
+          * @default SearchEnv.PROD
+         */
+        "searchEnv": SearchEnv;
         /**
           * Initial search query.
           * @default undefined
@@ -64,6 +75,15 @@ export namespace Components {
           * @default false
          */
         "loading": boolean;
+        /**
+          * Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").
+         */
+        "searchArea"?: string | undefined;
+        /**
+          * Environment for search suggestions
+          * @default SearchEnv.PROD
+         */
+        "searchEnv": SearchEnv;
         /**
           * Initial search query.
           * @default undefined
@@ -71,6 +91,15 @@ export namespace Components {
         "searchQuery": string | undefined;
     }
     interface ZanitSearchForm {
+        /**
+          * Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").
+         */
+        "searchArea"?: string | undefined;
+        /**
+          * Environment for search suggestions
+          * @default SearchEnv.PROD
+         */
+        "searchEnv": SearchEnv;
         /**
           * Initial search query
           * @default undefined
@@ -114,7 +143,7 @@ declare global {
         new (): HTMLZanitMobileMenubarElement;
     };
     interface HTMLZanitSearchFormElementEventMap {
-        "search": { query: string };
+        "search": SearchEvent;
         "resetSearch": void;
     }
     interface HTMLZanitSearchFormElement extends Components.ZanitSearchForm, HTMLStencilElement {
@@ -170,6 +199,15 @@ declare namespace LocalJSX {
           * The data to build the menu (as an array of `MenubarItem` or a JSON array) or the url to fetch to retrieve it.
          */
         "data"?: Promise<MenubarItem[]> | MenubarItem[] | URL | string;
+        /**
+          * Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").
+         */
+        "searchArea"?: string | undefined;
+        /**
+          * Environment for search suggestions
+          * @default SearchEnv.PROD
+         */
+        "searchEnv"?: SearchEnv;
         /**
           * Initial search query.
           * @default undefined
@@ -195,6 +233,15 @@ declare namespace LocalJSX {
           * @default false
          */
         "loading"?: boolean;
+        /**
+          * Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").
+         */
+        "searchArea"?: string | undefined;
+        /**
+          * Environment for search suggestions
+          * @default SearchEnv.PROD
+         */
+        "searchEnv"?: SearchEnv;
         /**
           * Initial search query.
           * @default undefined
@@ -206,7 +253,16 @@ declare namespace LocalJSX {
         /**
           * Emitted on search form submission.
          */
-        "onSearch"?: (event: ZanitSearchFormCustomEvent<{ query: string }>) => void;
+        "onSearch"?: (event: ZanitSearchFormCustomEvent<SearchEvent>) => void;
+        /**
+          * Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").
+         */
+        "searchArea"?: string | undefined;
+        /**
+          * Environment for search suggestions
+          * @default SearchEnv.PROD
+         */
+        "searchEnv"?: SearchEnv;
         /**
           * Initial search query
           * @default undefined

package/dist/types/utils/subjects.api.d.ts

@@ -0,0 +1,6 @@
+export declare enum SearchEnv {
+    DEV = "dev",
+    TEST = "test",
+    PROD = "prod"
+}
+export declare function getSubjectsByArea(searchEnv: SearchEnv): Promise<Record<string, string[]>>;

package/dist/types/utils/types.d.ts

@@ -11,3 +11,10 @@ export type MenubarItem = Omit<MenuItem, 'group' | 'highlight'> & {
   navbarItems?: MenubarItem[];
   menuItems?: MenuItem[];
 };
+
+export type SearchEvent = {
+  query?: string;
+  area?: string;
+  subject?: string;
+  user_query?: string;
+}

package/dist/types/utils/utils.d.ts

@@ -5,3 +5,11 @@
 export declare const containsTarget: (ancestor: HTMLElement, event: Event) => boolean;
 /** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */
 export declare const moveFocus: (current: HTMLElement, next: HTMLElement) => void;
+/** Check if event key is ArrowUp */
+export declare const isArrowUpKey: (event: KeyboardEvent) => boolean;
+/** Check if event key is ArrowDown */
+export declare const isArrowDownKey: (event: KeyboardEvent) => boolean;
+/** Check if event key is Tab */
+export declare const isTabKey: (event: KeyboardEvent) => boolean;
+/** Check if event key is Escape */
+export declare const isEscKey: (event: KeyboardEvent) => boolean;