@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

package/dist/types/components/z-navigation-tabs/index.stories.d.ts

@@ -0,0 +1,78 @@
+import { type TemplateResult } from "lit";
+import { type ZNavigationTabs } from ".";
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans/index";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "../z-icon/index";
+import "./index";
+import "./index.stories.css";
+type ZNavigationTabsStoriesArgs = ZNavigationTabs & CSSVarsArguments<"z-navigation-tabs-nav-buttons-bg" | "z-navigation-tabs-nav-buttons-fg">;
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        orientation: {
+            options: NavigationTabsOrientation[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+        "--z-navigation-tabs-nav-buttons-bg": import("@storybook/types").Args;
+        "--z-navigation-tabs-nav-buttons-fg": import("@storybook/types").Args;
+    };
+    args: {
+        "--z-navigation-tabs-nav-buttons-bg": any;
+        "--z-navigation-tabs-nav-buttons-fg": any;
+    };
+};
+export default StoryMeta;
+export declare const Horizontal: {
+    argTypes: {
+        size: {
+            options: NavigationTabsSize[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+    };
+    args: {
+        orientation: NavigationTabsOrientation.HORIZONTAL;
+        size: NavigationTabsSize.BIG;
+        ariaLabel: string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZNavigationTabsStoriesArgs) => TemplateResult<1>;
+};
+/**
+ * When orientation is set to `VERTICAL`, the text of slotted tabs is hidden by default.
+ * Be sure to put an icon inside the tab to have something visible and don't forget to put an `aria-label` to provide a description for screen readers.
+ */
+export declare const Vertical: {
+    args: {
+        orientation: NavigationTabsOrientation.VERTICAL;
+        ariaLabel: string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZNavigationTabsStoriesArgs) => TemplateResult<1>;
+};
+/**
+ * This story provides an example of how to handle a `ZNavigationTabs` with switchable `tabpanel`s, which is the most common use for the navigation tabs.
+ * Each panel must have the `tabpanel` role and the `aria-labelledby` attribute, referencing the tab that controls it (unless a different label is provided using `aria-label`).
+ * Similarly, the `aria-controls` attribute must be set on the tabs with the `id` of the controlled panel.
+ *
+ * For more details check the documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab\_role
+ */
+export declare const Tabpanels: {
+    args: {
+        ariaLabel: string;
+        orientation: NavigationTabsOrientation.HORIZONTAL;
+    };
+    render: (args: ZNavigationTabsStoriesArgs) => TemplateResult<1>;
+};

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { NotificationType } from "../../beans";
+/**
+ * Notification bar component.
+ * @slot - The text of the notification.
+ * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+ */
+export declare class ZNotification {
+    /** Name of the icon on the left of the content */
+    contenticonname?: string;
+    /** Action button text */
+    actiontext?: string;
+    /** Alert variant type */
+    type: NotificationType;
+    /** Enable close icon */
+    showclose?: boolean;
+    /**
+     * Enable shadow.
+     * @deprecated shadow is available only for the `sticky` version of the notification.
+     */
+    showshadow?: boolean;
+    /** Enable sticky notification bar. */
+    sticky?: boolean;
+    /** Call to action clicked */
+    notificationAction: EventEmitter;
+    private handleActionButtonClick;
+    /** Close button clicked */
+    notificationClose: EventEmitter;
+    private handleCloseButtonClick;
+    constructor();
+    render(): HTMLZNotificationElement;
+}

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

@@ -0,0 +1,61 @@
+import { type ZNotification } from ".";
+import { NotificationType } from "../../beans";
+import "./index";
+import "./index.stories.css";
+type ZNotificationStoriesArgs = ZNotification & {
+    notificationText: string;
+};
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        type: {
+            control: {
+                type: "inline-radio";
+            };
+            options: NotificationType[];
+        };
+    };
+    args: {
+        contenticonname: string;
+        actiontext: string;
+        showclose: false;
+        sticky: false;
+        type: NotificationType.SUCCESS;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const LongText: {
+    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+/**
+ * To use the banner variant set the `sticky` property to `true`.
+ */
+export declare const BannerVariant: {
+    args: {
+        notificationText: string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+/**
+ * To use the inline variant set the `sticky` property to `false`.
+ */
+export declare const InlineVariant: {
+    args: {
+        notificationText: string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,49 @@
+import { ZOffcanvas } from ".";
+import { OffCanvasVariant, TransitionDirection } from "../../beans";
+import "./index";
+import "./index.stories.css";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        variant: {
+            control: {
+                type: "inline-radio";
+            };
+            options: OffCanvasVariant[];
+        };
+        transitiondirection: {
+            control: {
+                type: "inline-radio";
+            };
+            options: TransitionDirection[];
+        };
+    };
+    args: {
+        variant: OffCanvasVariant.PUSHCONTENT;
+        open: true;
+    };
+};
+export default StoryMeta;
+export declare const EnterRight: {
+    args: {
+        transitiondirection: TransitionDirection.RIGHT;
+    };
+    render: (args: ZOffcanvas) => import("lit-html").TemplateResult<1>;
+};
+export declare const EnterLeft: {
+    args: {
+        transitiondirection: TransitionDirection.LEFT;
+    };
+    render: (args: ZOffcanvas) => import("lit-html").TemplateResult<1>;
+};
+export declare const SkipLoadAnimation: {
+    args: {
+        transitiondirection: TransitionDirection.LEFT;
+        skipLoadAnimation: true;
+    };
+    render: (args: ZOffcanvas) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,40 @@
+import { Meta } from "@storybook/web-components";
+import { type ZPagination } from ".";
+import "./index";
+declare const StoryMeta: Meta<ZPagination>;
+export default StoryMeta;
+export declare const VisiblePages: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+/**
+ * > Note that enabling `split` will shut off `visiblePages` and `edges`.
+ */
+export declare const Split: {
+    args: {
+        split: number;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export declare const Edges: {
+    args: {
+        edges: true;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export declare const Skip: {
+    args: {
+        skip: number;
+    };
+};

package/dist/types/components/z-panel-elem/index.stories.d.ts

@@ -0,0 +1,18 @@
+import { type ZPanelElem } from ".";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        imgurl: string;
+        linkicon: string;
+        linklabel: string;
+        url: string;
+        elemid: string;
+        isdisabled: false;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZPanelElem) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,40 @@
+import { type ZPopover } from ".";
+import { PopoverPosition } from "../../beans";
+import "../z-button/index";
+import "../z-icon/index";
+import "./index";
+import "./index.stories.css";
+/**
+ * To be sure the AUTO algorithm finds the right container when calculating the position, set its container's position to `position: relative;`
+ */
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        position: {
+            options: PopoverPosition[];
+            control: {
+                type: "select";
+            };
+        };
+        "--z-popover-theme--surface": import("@storybook/types").Args;
+        "--z-popover-theme--text": import("@storybook/types").Args;
+    };
+    args: {
+        "--z-popover-theme--surface": string;
+        "--z-popover-theme--text": string;
+    };
+};
+export default StoryMeta;
+export declare const ContextualMenuLike: {
+    args: {
+        position: PopoverPosition.RIGHT_BOTTOM;
+    };
+    render: (args: ZPopover) => import("lit-html").TemplateResult<1>;
+};
+export declare const TooltipLike: {
+    args: {
+        position: PopoverPosition.RIGHT;
+    };
+    render: (args: ZPopover) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,80 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ButtonVariant, ControlSize, SearchbarItem } from "../../beans";
+/**
+ * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
+ * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);
+ * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
+ */
+export declare class ZSearchbar {
+    /** the id of the searchbar element */
+    htmlid: string;
+    /** Prevent submit action */
+    preventSubmit?: boolean;
+    /** Input search string */
+    value?: string;
+    /** Search input placeholder */
+    placeholder?: string;
+    /** Show autocomplete results */
+    autocomplete?: boolean;
+    /** Minimun number of characters to dispatch typing event */
+    autocompleteMinChars?: number;
+    /** Number of results shown - default all */
+    resultsCount?: number;
+    /** Truncate results to single row */
+    resultsEllipsis?: boolean;
+    /** Search helper text */
+    searchHelperLabel?: string;
+    /** Autocomplete results items */
+    resultsItems?: SearchbarItem[] | string;
+    /** Sort autocomplete results items */
+    sortResultsItems?: boolean;
+    /** Show submit button */
+    showSearchButton?: boolean;
+    /** Set button icon without label*/
+    searchButtonIconOnly?: boolean;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    size?: ControlSize;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
+    variant?: ButtonVariant;
+    searchString: string;
+    currResultsCount: number;
+    showResults: boolean;
+    isMobile: boolean;
+    element: HTMLZSearchbarElement;
+    private resultsItemsList;
+    private inputRef;
+    private resizeObserver;
+    /** Emitted on search submit, return search string */
+    searchSubmit: EventEmitter<string>;
+    private emitSearchSubmit;
+    /** Emitted on search typing, return search string */
+    searchTyping: EventEmitter<string>;
+    private emitSearchTyping;
+    /** Emitted on search result click, return item */
+    searchItemClick: EventEmitter<SearchbarItem>;
+    private emitSearchItemClick;
+    watchItems(): void;
+    watchResultsCount(): void;
+    watchValue(): void;
+    watchSearchString(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    private getResultsItemsList;
+    private getGroupedItems;
+    private checkResultsCount;
+    private handleStopTyping;
+    private handleSubmit;
+    private handleOutsideClick;
+    private renderInput;
+    private renderButton;
+    private renderResults;
+    private renderResultsList;
+    private renderItems;
+    private renderItem;
+    private renderItemLabel;
+    private renderItemCategory;
+    private renderSearchHelper;
+    private renderShowAllResults;
+    render(): HTMLZSearchbarElement;
+}

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

@@ -0,0 +1,94 @@
+import { type ZSearchbar } from ".";
+import { ButtonVariant, ControlSize } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "./index";
+type ZSearchbarStoriesArgs = ZSearchbar & CSSVarsArguments<"--z-searchbar-results-height" | "--z-searchbar-tag-text-color" | "--z-searchbar-tag-bg">;
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ControlSize[];
+        };
+        variant: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ButtonVariant[];
+        };
+    };
+    args: {
+        preventSubmit: false;
+        showSearchButton: false;
+        searchButtonIconOnly: false;
+        autocomplete: false;
+        autocompleteMinChars: number;
+        resultsCount: any;
+        resultsEllipsis: true;
+        searchHelperLabel: string;
+        resultsItems: {
+            label: string;
+        }[];
+        sortResultsItems: false;
+        htmlid: string;
+        placeholder: string;
+        value: string;
+        "--z-searchbar-results-height": string;
+        "--z-searchbar-tag-text-color": string;
+        "--z-searchbar-tag-bg": string;
+        size: ControlSize.BIG;
+        variant: ButtonVariant.PRIMARY;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZSearchbarStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const SimpleSearch: {
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    args: {
+        htmlid: string;
+    };
+    render: (args: ZSearchbarStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const Autocomplete: {
+    args: {
+        autocomplete: true;
+        htmlid: string;
+        showSearchButton: false;
+        searchButtonIconOnly: false;
+    };
+    render: (args: ZSearchbarStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const AutocompleteWithComplexItems: {
+    args: {
+        autocomplete: true;
+        htmlid: string;
+        showSearchButton: false;
+        searchButtonIconOnly: false;
+        resultsItems: ({
+            label: string;
+            icon: string;
+            tag: {
+                text: string;
+                icon: string;
+            };
+            category: string;
+            subcategory: string;
+        } | {
+            label: string;
+            icon: string;
+            category: string;
+            subcategory: string;
+            tag?: undefined;
+        })[];
+    };
+    render: (args: ZSearchbarStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,37 @@
+import { ZSectionTitle } from ".";
+import { ZSectionTitleDividerPosition } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "./index";
+type ZSectionTitleStoriesArgs = ZSectionTitle & CSSVarsArguments<"z-section-title--divider-color">;
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        dividerPosition: {
+            options: ZSectionTitleDividerPosition[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+        "--z-section-title--divider-color": import("@storybook/types").Args;
+    };
+    args: {
+        uppercase: true;
+        "--z-section-title--divider-color": string;
+    };
+};
+export default StoryMeta;
+export declare const PrimaryTitleOnly: {
+    args: {
+        dividerPosition: ZSectionTitleDividerPosition.BEFORE;
+    };
+    render: (args: ZSectionTitleStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const SecondaryTitle: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZSectionTitleStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,84 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ControlSize, InputStatus, SelectItem } from "../../beans";
+export declare class ZSelect {
+    element: HTMLZSelectElement;
+    /** the id of the input element */
+    htmlid: string;
+    /** the input select options */
+    items: SelectItem[] | string;
+    /** the input name */
+    name?: string;
+    /** the input label */
+    label?: string;
+    /** the input aria-label */
+    ariaLabel: string;
+    /** the input is disabled */
+    disabled?: boolean;
+    /** the input is readonly */
+    readonly?: boolean;
+    /** the input placeholder (optional) */
+    placeholder?: string;
+    /** the input html title (optional) */
+    htmltitle?: string;
+    /** the input status (optional) */
+    status?: InputStatus;
+    /** input helper message (optional) - if set to `false` message won't be displayed */
+    message?: string | boolean;
+    /** the input has autocomplete option */
+    autocomplete?: boolean;
+    /** no result text message */
+    noresultslabel?: string;
+    /** */
+    hasGroupItems?: boolean;
+    /** When fixed, it occupies space and pushes down next elements. */
+    isfixed?: boolean;
+    /** */
+    resetItem?: string;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    size?: ControlSize;
+    isOpen: boolean;
+    selectedItem: null | SelectItem;
+    focusedItemId: string;
+    searchString: null | string;
+    private itemsList;
+    constructor();
+    watchItems(): void;
+    getFocusedItemHandler(e: CustomEvent): void;
+    /** get the input selected options */
+    getSelectedItem(): Promise<SelectItem>;
+    /** get the input value */
+    getValue(): Promise<string>;
+    /** set the input value */
+    setValue(value: string | string[]): Promise<void>;
+    /** Emitted on select option selection, returns select id, selected item id */
+    optionSelect: EventEmitter;
+    private emitOptionSelect;
+    /** Emitted on reset selected item, returns select id, selected item id */
+    resetSelect: EventEmitter;
+    private emitResetSelect;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    private getInitialItemsArray;
+    private mapSelectedItemToItemsArray;
+    private getSelectedValue;
+    private filterItems;
+    private hasAutocomplete;
+    private handleInputChange;
+    private selectItem;
+    private arrowsSelectNav;
+    private focusSelectItem;
+    private toggleSelectUl;
+    private handleInputClick;
+    private handleSelectFocus;
+    private scrollToLetter;
+    private renderInput;
+    private renderSelectUl;
+    private renderResetItem;
+    private renderItem;
+    private listSizeType;
+    private renderSelectUlItems;
+    private renderSelectGroupItems;
+    private renderNoSearchResults;
+    private renderMessage;
+    render(): HTMLDivElement;
+}

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

@@ -0,0 +1,60 @@
+import { type ZSelect } from ".";
+import { ControlSize, InputStatus, SelectItem } from "../../beans";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        status: {
+            control: {
+                type: "select";
+                labels: {
+                    null: string;
+                };
+            };
+            options: InputStatus[];
+        };
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ControlSize[];
+        };
+    };
+    args: {
+        items: SelectItem[];
+        label: string;
+        ariaLabel: string;
+        placeholder: string;
+        status: any;
+        message: string;
+        size: ControlSize.BIG;
+        disabled: false;
+        readonly: false;
+        htmlid: string;
+        htmltitle: string;
+        autocomplete: false;
+        noresultslabel: string;
+        hasGroupItems: false;
+        resetItem: string;
+        isfixed: false;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZSelect) => import("lit-html").TemplateResult<1>;
+};
+export declare const Groups: {
+    args: {
+        hasGroupItems: true;
+        items: SelectItem[];
+    };
+    render: (args: ZSelect) => import("lit-html").TemplateResult<1>;
+};
+export declare const ZSelectWithIcons: {
+    args: {
+        hasGroupItems: true;
+        items: SelectItem[];
+    };
+    render: (args: ZSelect) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/z-skip-to-content/index.d.ts

@@ -1,4 +1,4 @@
-import { ThemeVariant, SkipToContentLink } from "../../beans";
+import { SkipToContentLink, ThemeVariant } from "../../beans";
 /**
  * Component short description.
  */