@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

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

@@ -0,0 +1,19 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+import { MenuItem } from '../menubar';
+/**
+ * Menu of items that can be grouped.
+ * @member {string} controlledBy - The HTML id of the element that controls the menu.
+ * @member {MenuItem[]} items - The items to show in the menu.
+ * @member {string} current - The id of the current active item.
+ * @member {function} onItemKeyDown - The function to call when a key is pressed from a menuitem.
+ */
+export interface MenuProps {
+    controlledBy?: string;
+    items?: MenuItem[];
+    current?: string;
+    onItemKeyDown?: (event: KeyboardEvent) => void;
+}
+/**
+ * Floating menu component. It shows a list of items that can be grouped.
+ */
+export declare const Menu: FunctionalComponent<MenuProps>;

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

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type MenuItem = {
+    label: string;
+    href?: string;
+    highlight?: boolean;
+    id?: string;
+    group?: {
+        id: string;
+        label: string;
+    };
+};
+export type MenubarItem = Omit<MenuItem, 'group'> & {
+    navbarItems?: MenubarItem[];
+    menuItems?: MenuItem[];
+};
+/**
+ * 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.
+ * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.
+ */
+export declare class ZanitMenubar {
+    private formElement;
+    host: HTMLZanitMenubarElement;
+    /** Menubar items extracted from `data`. */
+    items: MenubarItem[];
+    /** ID of the currently open menu. */
+    openMenu: string | undefined;
+    /** ID of the item to show the subitems navbar for. */
+    openNavbar: string | undefined;
+    /** Indicates whether the searchbar is visible and usable. */
+    showSearchbar: boolean;
+    /** Search query to apply. */
+    _searchQuery: string | undefined;
+    isMobile: boolean;
+    /** The data to build the menu (as an array of `MenuItem` or a JSON array) or the url to fetch to retrieve it. */
+    data: Promise<MenubarItem[]> | MenubarItem[] | URL | string;
+    /** ID of the current active item. */
+    current: string | undefined;
+    /** Initial search query. */
+    searchQuery: string | undefined;
+    /** Setup the list of items. */
+    parseData(data: typeof this.data): Promise<void>;
+    onItemsChange(): void;
+    /** Focus searchbar input when it becomes visible. */
+    onShowSearchbar(): void;
+    /** Emitted on search form submission. */
+    search: EventEmitter<{
+        query: string;
+    }>;
+    connectedCallback(): Promise<void>;
+    /** Close open searchbar or any open menu when clicking outside. */
+    handleOutsideClick(event: MouseEvent): void;
+    /** Close any open menu when pressing Escape or Tab. */
+    handleKeydown(event: KeyboardEvent): void;
+    /** Close the menu when it loses focus. */
+    handleFocusout(event: FocusEvent): void;
+    /** Fetch data from passed URL. */
+    private fetchData;
+    /** Initialize tabindex on menuitems of menubars, setting -1 to all but the first one. */
+    private initTabindex;
+    /** Indicates whether the element has to be highlighted by checking whether it is set as current or one of its descendants is. */
+    private isActive;
+    /** Opens the menu associated with the menubar `item`, if any. */
+    private showMenu;
+    /** Get all elements with `menuitem` role inside parent's `menubar`. * */
+    private getParentMenubarElements;
+    /** Move the focus to the previous menubar item, or the last one. Then open its menu if any other menu was open. */
+    private focusPreviousItem;
+    /** Move the focus to the next menubar item, or the first one. Then open its menu if any other menu was open. */
+    private focusNextItem;
+    /** Handles keyboard navigation on menubar items. */
+    private handleItemKeydown;
+    /** Get the previous element with `role=group`. */
+    private getPreviousGroup;
+    /** Get the next element with `role=group`. */
+    private getNextGroup;
+    /** Handles keyboard navigation events from `Menu` component. */
+    private handleMenuKeydown;
+    private handleInputChange;
+    private onSearchSubmit;
+    render(): any;
+}

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

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { MenubarItem, MenuItem } from '../menubar';
+/** Mobile menubar component. */
+export declare class ZanitMobileMenubar {
+    private formElement;
+    host: HTMLZanitMobileMenubarElement;
+    /** ID of the current active item. */
+    current: string | undefined;
+    /** Menubar items. */
+    items: MenubarItem[];
+    /** Initial search query. */
+    searchQuery: string | undefined;
+    parentItem: MenubarItem | undefined;
+    menuItems: MenubarItem[] | MenuItem[] | undefined;
+    /** Whether the items to render come from a menubar or a menu. */
+    menuType: 'menubar' | 'menu' | undefined;
+    open: boolean;
+    /** Search query to apply. */
+    _searchQuery: string | undefined;
+    onItemsChange(): void;
+    /**
+     * Find the current item and take its parent, `menuItems` or the `navbarItems`.
+     * @returns True if an item matches the `current` prop, false otherwise.
+     */
+    private setupData;
+    private get menuItemsElement();
+    /** Initialize tabindex on menuitems, setting -1 to all but the first one. */
+    private initTabindex;
+    private toggleMenu;
+    /** Handles keyboard navigation on mobile menu. */
+    private handleItemKeydown;
+    private handleInputChange;
+    private onSearchSubmit;
+    /** Emitted on search form submission. */
+    search: EventEmitter<{
+        query: string;
+    }>;
+    connectedCallback(): void;
+    /** Close the menu when clicking outside. */
+    handleOutsideClick(event: MouseEvent): void;
+    /** Close the menu when pressing Escape or Tab. */
+    handleKeydown(event: KeyboardEvent): void;
+    /** Close the menu when it loses focus. */
+    handleFocusout(event: FocusEvent): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,172 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { MenubarItem } from "./components/menubar/menubar";
+import { MenubarItem as MenubarItem1 } from "./components/menubar/menubar";
+export { MenubarItem } from "./components/menubar/menubar";
+export { MenubarItem as MenubarItem1 } from "./components/menubar/menubar";
+export namespace Components {
+    /**
+     * 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.
+     * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.
+     */
+    interface ZanitMenubar {
+        /**
+          * ID of the current active item.
+         */
+        "current": string | undefined;
+        /**
+          * The data to build the menu (as an array of `MenuItem` or a JSON array) or the url to fetch to retrieve it.
+         */
+        "data": Promise<MenubarItem[]> | MenubarItem[] | URL | string;
+        /**
+          * Initial search query.
+         */
+        "searchQuery": string | undefined;
+    }
+    /**
+     * Mobile menubar component.
+     */
+    interface ZanitMobileMenubar {
+        /**
+          * ID of the current active item.
+         */
+        "current": string | undefined;
+        /**
+          * Menubar items.
+         */
+        "items": MenubarItem1[];
+        /**
+          * Initial search query.
+         */
+        "searchQuery": string | undefined;
+    }
+}
+export interface ZanitMenubarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZanitMenubarElement;
+}
+export interface ZanitMobileMenubarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZanitMobileMenubarElement;
+}
+declare global {
+    interface HTMLZanitMenubarElementEventMap {
+        "search": { query: string };
+    }
+    /**
+     * 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.
+     * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.
+     */
+    interface HTMLZanitMenubarElement extends Components.ZanitMenubar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZanitMenubarElementEventMap>(type: K, listener: (this: HTMLZanitMenubarElement, ev: ZanitMenubarCustomEvent<HTMLZanitMenubarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZanitMenubarElementEventMap>(type: K, listener: (this: HTMLZanitMenubarElement, ev: ZanitMenubarCustomEvent<HTMLZanitMenubarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLZanitMenubarElement: {
+        prototype: HTMLZanitMenubarElement;
+        new (): HTMLZanitMenubarElement;
+    };
+    interface HTMLZanitMobileMenubarElementEventMap {
+        "search": { query: string };
+    }
+    /**
+     * Mobile menubar component.
+     */
+    interface HTMLZanitMobileMenubarElement extends Components.ZanitMobileMenubar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZanitMobileMenubarElementEventMap>(type: K, listener: (this: HTMLZanitMobileMenubarElement, ev: ZanitMobileMenubarCustomEvent<HTMLZanitMobileMenubarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZanitMobileMenubarElementEventMap>(type: K, listener: (this: HTMLZanitMobileMenubarElement, ev: ZanitMobileMenubarCustomEvent<HTMLZanitMobileMenubarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLZanitMobileMenubarElement: {
+        prototype: HTMLZanitMobileMenubarElement;
+        new (): HTMLZanitMobileMenubarElement;
+    };
+    interface HTMLElementTagNameMap {
+        "zanit-menubar": HTMLZanitMenubarElement;
+        "zanit-mobile-menubar": HTMLZanitMobileMenubarElement;
+    }
+}
+declare namespace LocalJSX {
+    /**
+     * 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.
+     * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.
+     */
+    interface ZanitMenubar {
+        /**
+          * ID of the current active item.
+         */
+        "current"?: string | undefined;
+        /**
+          * The data to build the menu (as an array of `MenuItem` or a JSON array) or the url to fetch to retrieve it.
+         */
+        "data"?: Promise<MenubarItem[]> | MenubarItem[] | URL | string;
+        /**
+          * Emitted on search form submission.
+         */
+        "onSearch"?: (event: ZanitMenubarCustomEvent<{ query: string }>) => void;
+        /**
+          * Initial search query.
+         */
+        "searchQuery"?: string | undefined;
+    }
+    /**
+     * Mobile menubar component.
+     */
+    interface ZanitMobileMenubar {
+        /**
+          * ID of the current active item.
+         */
+        "current"?: string | undefined;
+        /**
+          * Menubar items.
+         */
+        "items"?: MenubarItem1[];
+        /**
+          * Emitted on search form submission.
+         */
+        "onSearch"?: (event: ZanitMobileMenubarCustomEvent<{ query: string }>) => void;
+        /**
+          * Initial search query.
+         */
+        "searchQuery"?: string | undefined;
+    }
+    interface IntrinsicElements {
+        "zanit-menubar": ZanitMenubar;
+        "zanit-mobile-menubar": ZanitMobileMenubar;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * 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.
+             * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.
+             */
+            "zanit-menubar": LocalJSX.ZanitMenubar & JSXBase.HTMLAttributes<HTMLZanitMenubarElement>;
+            /**
+             * Mobile menubar component.
+             */
+            "zanit-mobile-menubar": LocalJSX.ZanitMobileMenubar & JSXBase.HTMLAttributes<HTMLZanitMobileMenubarElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export type * from './components.d.ts';
+import '@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js';