@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

package/dist/types/components/table/cells/z-td/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../../../stencil-public-runtime";
-import { PopoverPosition, VisibilityCondition } from "../../../../beans";
+import { VisibilityCondition } from "../../../../beans";
 /**
  * ZTd component.
  * @slot - ZTd content.
@@ -20,10 +20,6 @@ export declare class ZTd {
      * Set a nullish value to hide the menu button.
      */
     showMenu: VisibilityCondition;
-    /**
-     * Set a the popover default position.
-     */
-    defaultPopoverPosition?: PopoverPosition;
     /**
      * Store the open state of the menu.
      */

package/dist/types/components/z-app-header/index.d.ts

@@ -1,61 +1,14 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot title - Slot for the main title
- * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
- * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
- * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
- * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
- * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
- * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
- * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
- * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
- * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
- * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
- * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
- * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
- * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
- * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
- * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
- * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
- * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
- * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
- * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
- * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
- * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
- * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
- * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
- * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
- * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
- * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
- * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
+ * @slot product-logo - To insert the product logo, it should be used with an img tag.
  * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-height - Defaults to `auto`.
  * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
  * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
  * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
  * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
- * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
- * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
- * Defaults to `--app-header-typography-3-size`.
- * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
- * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
- * Defaults to `--app-header-typography-3-lineheight`.
- * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
- * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
- * Defaults to `--app-header-typography-3-tracking`.
  * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export declare class ZAppHeader {
@@ -66,26 +19,9 @@ export declare class ZAppHeader {
      */
     stuck: boolean;
     /**
-     * Set the hero image source for the header.
-     * You can also use a [slot="hero"] node for advanced customization.
+     * the menu bar is not displayed and a burger icon appears to open the offcanvas menu
      */
-    hero: string;
-    /**
-     * Should place an overlay over the hero image.
-     * Useful for legibility purpose.
-     */
-    overlay: boolean;
-    /**
-     * Control menu bar position in the header.
-     * - auto: the menu bar is positioned near the title
-     * - stack: the menu bar is positioned below the title
-     * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
-     */
-    flow: "auto" | "stack" | "offcanvas";
-    /**
-     * The opening state of the drawer.
-     */
-    drawerOpen: boolean;
+    enableOffcanvas: boolean;
     /**
      * Enable the search bar.
      */
@@ -104,6 +40,10 @@ export declare class ZAppHeader {
      * The link will also appear on the sticky header.
      */
     searchPageUrl: string;
+    /**
+     * Enable laZ logo.
+     */
+    enableZLogo: boolean;
     /**
      * The stuck state of the bar.
      */
@@ -121,29 +61,46 @@ export declare class ZAppHeader {
      * Emitted when the `stuck` state of the header changes
      */
     sticking: EventEmitter;
+    /**
+     * The opening state of the drawer.
+     */
+    private drawerOpen;
     private container?;
     private menuElements?;
+    private closeMenuButton;
+    private burgerButton;
+    private searchbar;
+    /** Observer when the size of the element container changes */
+    private resizeObserver;
+    private currentIndex;
     private observer?;
     constructor();
     evaluateViewport(): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    private handleArrowsNav;
+    private getNextItem;
     onStuck(): void;
     setMenuFloatingMode(): void;
+    onStuckMode(): void;
+    private enableStuckObserver;
+    private disableStuckMode;
     private get title();
     private get scrollParent();
     private get canShowMenu();
-    private get canShowSearchbar();
-    /**
-     * Whether the header has a hero image, either as a prop or as a slot.
-     */
-    private get hasHero();
     private openDrawer;
     private closeDrawer;
     private collectMenuElements;
-    private enableStuckObserver;
-    private disableStuckMode;
-    onStuckMode(): void;
-    private renderSearchLinkButton;
+    private isSlotPresent;
     private renderSeachbar;
+    private renderProductLogos;
+    private renderMenuButton;
+    private renderOffcanvas;
+    private renderStuck;
+    private getWidthMenu;
+    private focusToFirstItemMenu;
+    private handleFocusItem;
+    componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): HTMLZAppHeaderElement;
 }

package/dist/types/components/z-app-header/index.stories.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from "lit";
+import { TemplateResult } from "lit";
 import { ZAppHeader } from ".";
 import { CSSVarsArguments } from "../../utils/storybook-utils";
 import "../z-menu-section/index";
@@ -12,19 +12,16 @@ declare const StoryMeta: {
     parameters: {
         layout: string;
     };
-    argTypes: {
-        flow: {
-            control: {
-                type: "inline-radio";
-            };
-            options: string[];
-        };
+    subcomponents: {
+        ZMenu: string;
+        ZMenuSection: string;
     };
     args: {
         "--app-header-content-max-width": string;
         enableSearch: false;
         searchPageUrl: string;
-        flow: "auto";
+        enableZLogo: false;
+        enableOffcanvas: false;
     };
 };
 export default StoryMeta;
@@ -36,7 +33,7 @@ export declare const Title: {
     };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
-export declare const Subtitle: {
+export declare const ProductLogo: {
     parameters: {
         controls: {
             exclude: string[];
@@ -44,7 +41,7 @@ export declare const Subtitle: {
     };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
-export declare const TopSubtitle: {
+export declare const TopTitle: {
     parameters: {
         controls: {
             exclude: string[];
@@ -52,55 +49,38 @@ export declare const TopSubtitle: {
     };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
-export declare const Menu: {
-    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
-};
-export declare const LongTitle: {
-    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
-};
-export declare const VeryLongMenu: {
-    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
-};
-export declare const OffcanvasMenu: {
+export declare const MenuWithTopTitle: {
     parameters: {
         controls: {
             exclude: string[];
         };
     };
+    args: {
+        enableOffcanvas: true;
+    };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
-export declare const Stuck: {
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderStoriesArgs>) => TemplateResult<1>)[];
+export declare const LongTitle: {
     parameters: {
-        docs: {
-            inlineStories: boolean;
-            iframeHeight: string;
+        controls: {
+            exclude: string[];
         };
     };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
-export declare const MaxWidth: {
+export declare const OffcanvasMenu: {
     args: {
-        "--app-header-content-max-width": string;
+        enableOffcanvas: true;
     };
+    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
+};
+export declare const Stuck: {
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderStoriesArgs>) => TemplateResult<1>)[];
     parameters: {
         docs: {
             inlineStories: boolean;
             iframeHeight: string;
         };
-    };
-    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
-};
-export declare const CoverHeroWithSlottedImage: {
-    args: {
-        overlay: true;
-        hero: string;
-    };
-    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
-};
-export declare const Searchbar: {
-    parameters: {
         controls: {
             exclude: string[];
         };

package/dist/types/components/z-menu/index.d.ts

@@ -31,9 +31,19 @@ export declare class ZMenu {
     opened: EventEmitter;
     /** The menu has been closed. */
     closed: EventEmitter;
+    private currentIndex;
+    private currentCanvasOpenStatus;
+    private firstElMenu;
+    private lastElMenu;
     private toggle;
     /** Close the floating list when a click is performed outside of this Element. */
     handleClick(ev: MouseEvent): void;
+    canvasOpenStatusChanged(e: CustomEvent): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    private handleNavigationSideArrow;
+    private handleArrowsNav;
+    private getNextItem;
+    private focusToParentAndCloseMenu;
     onOpenChanged(): void;
     constructor();
     componentWillLoad(): void;
@@ -56,6 +66,7 @@ export declare class ZMenu {
      * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
      */
     private onItemsChange;
+    private focusFirstItemOnKeyUp;
     private renderMenuLabel;
     render(): HTMLZMenuElement;
 }

package/dist/types/components/z-menu-section/index.d.ts

@@ -14,6 +14,14 @@ export declare class ZMenuSection {
     opened: EventEmitter;
     /** The section has been closed. */
     closed: EventEmitter;
+    private currentIndex;
+    private currentCanvasOpenStatus;
+    canvasOpenStatusChanged(e: CustomEvent): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    private handleNavigationSideArrow;
+    private handleArrowsNav;
+    private getNextItem;
+    private focusToParentAndCloseMenu;
     private toggle;
     /** Close the list when a click is performed outside of this Element. */
     handleClick(ev: MouseEvent): void;
@@ -26,6 +34,7 @@ export declare class ZMenuSection {
      * @param ev Slotchange event
      */
     private onLabelSlotChange;
+    private focusFirstSectionItemOnKeyUp;
     componentWillLoad(): void;
     render(): HTMLZMenuSectionElement;
 }