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

package/dist/types/components/z-button-sort/index.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class ZButtonSort {
+    /** id, should be unique */
+    buttonid: string;
+    /** label content (ascending) */
+    label: string;
+    /** label content (descending) */
+    desclabel?: string;
+    /** occurrences counter (optional) */
+    counter?: number;
+    /** sort label content (ascending) (optional) */
+    sortlabelasc?: string;
+    /** sort label content (descending) (optional) */
+    sortlabeldesc?: string;
+    /** selected flag (optional) */
+    isselected?: boolean;
+    /** sortable flag (optional) */
+    sortasc?: boolean;
+    allowTooltip: boolean;
+    private ellipsis?;
+    /** sorting direction click event, returns `buttonid` and `sortAsc` */
+    buttonSortClick: EventEmitter;
+    private emitButtonSortClick;
+    componentDidLoad(): void;
+    private setButtonTitle;
+    private elementHasEllipsis;
+    render(): HTMLButtonElement;
+}

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

@@ -0,0 +1,22 @@
+import type { ZButtonSort } from ".";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    args: {
+        label: string;
+        counter: number;
+        desclabel: string;
+        sortlabelasc: string;
+        sortlabeldesc: string;
+        isselected: true;
+        sortasc: true;
+    };
+    render: (args: ZButtonSort) => import("lit-html").TemplateResult<1>;
+};
+export default StoryMeta;
+export declare const Default: {};
+export declare const Ellipsis: {
+    args: {
+        label: string;
+    };
+};

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

@@ -0,0 +1,70 @@
+import { ZCard } from ".";
+import { CardVariant } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "../z-icon/index";
+import "./index";
+import "./index.stories.css";
+type ZCardStoriesArgs = ZCard & CSSVarsArguments<"z-card--color-cover-background" | "z-card--color-cover-background" | "z-card--text-border" | "z-card--text-border-radius" | "z-card--text-padding">;
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        variant: {
+            control: {
+                type: "inline-radio";
+                labels: {
+                    null: string;
+                };
+            };
+            options: CardVariant[];
+        };
+    };
+    args: {
+        variant: any;
+        showShadow: false;
+        clickable: false;
+    };
+};
+export default StoryMeta;
+export declare const WithImage: {
+    render: (args: ZCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithImageAndIcon: {
+    args: {
+        coverIcon: string;
+    };
+    render: (args: ZCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const ColorCover: {
+    args: {
+        "--z-card--color-cover-background": string;
+    };
+    render: (args: ZCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const TextVariantPrimaryBackground: {
+    args: {
+        "--z-card--text-border-radius": string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const TextVariantWhiteBackgroundAndBordered: {
+    args: {
+        "--z-card--text-border": string;
+        "--z-card--text-border-radius": string;
+        "--z-card--text-padding": string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithImageAndClick: {
+    render: (args: ZCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,100 @@
+import { type ZCarousel } from ".";
+import { CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "../z-ghost-loading/index";
+import "./index";
+import "./index.stories.css";
+type ZCarouselStoriesArgs = ZCarousel & {
+    itemsCount: number;
+} & CSSVarsArguments<"z-carousel-gutter">;
+/**
+ * This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).
+ * Pass any number of elements inside its main `slot`.
+ * @example```html
+ * <z-carousel>
+ *  <li>element</li>
+ *  <li>element</li>
+ *  <li>element</li>
+ * </z-carousel>
+ * ```
+ * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.
+ * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.
+ * @example```css
+ * z-carousel {
+ *  --z-carousel-gutter: calc(var(--space-unit) * 2);
+ * }```
+ */
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZCarouselStoriesArgs>) => import("lit-html").TemplateResult<1>)[];
+};
+export default StoryMeta;
+export declare const SlideshowWithArrowsOver: {
+    args: {
+        label: string;
+        "--z-carousel-gutter": string;
+        infinite: false;
+        fixedArrows: true;
+        itemsCount: number;
+    };
+    render: (args: ZCarouselStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const SingleMode: {
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        arrowsPosition: {
+            control: {
+                type: "inline-radio";
+            };
+            options: CarouselArrowsPosition[];
+        };
+        progressMode: {
+            control: {
+                type: "inline-radio";
+            };
+            options: CarouselProgressMode[];
+        };
+    };
+    args: {
+        label: string;
+        progressMode: CarouselProgressMode.DOTS;
+        arrowsPosition: CarouselArrowsPosition.BOTTOM;
+        infinite: false;
+        fixedArrows: true;
+        itemsCount: number;
+    };
+    render: (args: ZCarouselStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+/**
+ * You can handle ghost loading for the whole z-carousel by setting two properties:
+ * - `isLoading` (boolean): to show a `z-ghost-loading` component instead of the carousel content.
+ * - `ghostLoadingHeight` (number): to set the height of the `z-ghost-loading` component.
+ * You can also manually handle ghost loading by putting <z-ghost-loading> elements as items.
+ */
+export declare const GhostLoading: {
+    args: {
+        label: string;
+        ghostLoadingHeight: number;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZCarouselStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const LoadingItems: {
+    args: {
+        label: string;
+        "--z-carousel-gutter": string;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZCarouselStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,18 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ZChipType } from "../../beans";
+export declare class ZChip {
+    el: HTMLZChipElement;
+    /** Non interactive icon */
+    icon?: string;
+    /** z-chip size type, can be default, medium or small */
+    type?: ZChipType;
+    /** z-chip interactive icon */
+    interactiveIcon?: string;
+    /** set z-chip as disabled */
+    disabled?: boolean;
+    /** z-chip aria-label string */
+    ariaLabel: string;
+    /** click on interactive icon */
+    interactiveIconClick: EventEmitter;
+    render(): HTMLDivElement;
+}

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

@@ -0,0 +1,46 @@
+import { type ZChip } from ".";
+import { ZChipType } from "../../beans";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    argTypes: {
+        type: {
+            options: ZChipType[];
+            control: {
+                type: "radio";
+            };
+        };
+    };
+    args: {
+        type: ZChipType.DEFAULT;
+        icon: string;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZChip) => import("lit-html").TemplateResult<1>;
+};
+export declare const DifferentFontWeight: {
+    render: (args: ZChip) => import("lit-html").TemplateResult<1>;
+};
+export declare const InteractiveIcon: {
+    argTypes: {
+        icon: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        interactiveIcon: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+    };
+    args: {
+        interactiveIcon: string;
+        disabled: false;
+    };
+    render: (args: ZChip) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,84 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ComboItem, ControlSize } from "../../beans";
+export declare class ZCombobox {
+    element: HTMLZComboboxElement;
+    /** input unique id */
+    inputid: string;
+    /** list items array */
+    items: ComboItem[] | string;
+    /** label text */
+    label: string;
+    /** the combobox is disabled */
+    disabled?: boolean;
+    /** show search input flag (optional) */
+    hassearch?: boolean;
+    /** search input label text (optional) */
+    searchlabel?: string;
+    /** search input placeholder text (optional) */
+    searchplaceholder?: string;
+    /** search input title text (optional) */
+    searchtitle?: string;
+    /** no result text message */
+    noresultslabel?: string;
+    /** toggle combo list opening flag */
+    isopen: boolean;
+    /** fixed style flag */
+    isfixed: boolean;
+    /** close combobox list text */
+    closesearchtext?: string;
+    /** show "check all" checkbox (optional) */
+    hascheckall?: boolean;
+    /** check all label (optional) */
+    checkalltext?: string;
+    /** uncheck all label (optional) */
+    uncheckalltext?: string;
+    /** max number of checkable items (0 = unlimited) */
+    maxcheckableitems: number;
+    /** group items by category */
+    hasgroupitems?: boolean;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    size?: ControlSize;
+    searchValue: string;
+    selectedCounter: number;
+    renderItemsList: ComboItem[];
+    focusedItemId: string;
+    checkboxes: HTMLInputElement[];
+    private itemsList;
+    private inputType;
+    watchItems(): void;
+    watchSearchValue(): void;
+    watchCheckboxes(): void;
+    /** Emitted when value is checked/unchecked. Returns id, items. */
+    comboboxChange: EventEmitter;
+    private emitComboboxChange;
+    constructor();
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    private getItemId;
+    private getCheckboxClass;
+    private getAllCheckboxes;
+    private getControlToListSize;
+    private handleSelectArrowsNavigation;
+    private handleHeaderKeyboardEvent;
+    private handleCheckboxFocus;
+    private focusComboboxItem;
+    private updateRenderItemsList;
+    private resetRenderItemsList;
+    private filterItems;
+    private checkAll;
+    private closeFilterItems;
+    private toggleComboBox;
+    private getComboboxA11yAttributes;
+    private renderHeader;
+    private renderContent;
+    private renderItems;
+    private renderItem;
+    private renderList;
+    private renderGroups;
+    private renderNoSearchResults;
+    private renderCloseButton;
+    private renderSearchInput;
+    private renderCheckAll;
+    render(): HTMLDivElement;
+}

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

@@ -0,0 +1,58 @@
+import { ZCombobox } from ".";
+import { ControlSize } from "../../beans";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        items: {
+            control: {
+                type: "object";
+            };
+        };
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ControlSize[];
+        };
+    };
+    args: {
+        items: {
+            id: string;
+            name: string;
+            checked: false;
+            category: string;
+        }[];
+        checkalltext: string;
+        closesearchtext: string;
+        disabled: false;
+        hascheckall: true;
+        hassearch: true;
+        inputid: string;
+        isfixed: true;
+        isopen: true;
+        label: string;
+        maxcheckableitems: number;
+        hasgroupitems: false;
+        noresultslabel: string;
+        searchlabel: string;
+        searchplaceholder: string;
+        searchtitle: string;
+        uncheckalltext: string;
+        size: ControlSize.BIG;
+    };
+    render: (args: ZCombobox) => import("lit-html").TemplateResult<1>;
+};
+export default StoryMeta;
+export declare const Default: {};
+export declare const Groups: {
+    args: {
+        hasgroupitems: true;
+    };
+};
+export declare const Disabled: {
+    args: {
+        disabled: true;
+    };
+};

package/dist/types/components/z-cover-hero/index.d.ts

@@ -1,4 +1,4 @@
-import { CoverHeroVariant, CoverHeroContentPosition } from "../../beans";
+import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
 /**
  * Cover hero component.
  * Component to display a hero image with content.

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

@@ -0,0 +1,113 @@
+import { type ZCoverHero } from ".";
+import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "../z-button/index";
+import "../z-info-reveal/index";
+import "./index";
+import "./index.stories.css";
+type ZCoverHeroStoriesArgs = ZCoverHero & CSSVarsArguments<"cover-hero-text-color" | "cover-hero-overlay" | "cover-hero-aspect-ratio">;
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        variant: {
+            control: {
+                type: "inline-radio";
+            };
+            options: CoverHeroVariant[];
+        };
+        contentPosition: {
+            if: {
+                arg: string;
+                eq: CoverHeroVariant;
+            };
+            control: {
+                type: "inline-radio";
+            };
+            options: CoverHeroContentPosition[];
+        };
+        "--cover-hero-text-color": import("@storybook/types").Args;
+        "--cover-hero-overlay": {
+            if: {
+                arg: string;
+                eq: CoverHeroVariant;
+            };
+        };
+        "--cover-hero-aspect-ratio": {
+            if: {
+                arg: string;
+            };
+            control: {
+                type: "text";
+            };
+        };
+    };
+    args: {
+        variant: CoverHeroVariant.OVERLAY;
+        contentPosition: CoverHeroContentPosition.TOP;
+        preserveAspectRatio: true;
+        "--cover-hero-aspect-ratio": any;
+        "--cover-hero-overlay": string;
+        "--cover-hero-text-color": string;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZCoverHeroStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const CustomAspectRatio: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    args: {
+        "--cover-hero-aspect-ratio": string;
+    };
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};
+export declare const AutoAspectRatio: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    args: {
+        "--cover-hero-aspect-ratio": string;
+    };
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithoutPreservingAspectRatio: {
+    argTypes: {
+        variant: {
+            table: {
+                disable: boolean;
+            };
+        };
+        preserveAspectRatio: {
+            table: {
+                disable: boolean;
+            };
+        };
+        "--cover-hero-aspect-ratio": {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+    args: {
+        textContent: string;
+    };
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};
+export declare const StackedVariant: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    args: {
+        variant: CoverHeroVariant;
+    };
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};

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

@@ -1,4 +1,4 @@
-import { DividerSize, DividerOrientation } from "../../beans";
+import { DividerOrientation, DividerSize } from "../../beans";
 export declare class ZDivider {
     /** [optional] Divider size */
     size?: DividerSize;

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

@@ -0,0 +1,37 @@
+import { ZDivider } from ".";
+import { DividerOrientation, DividerSize } from "../../beans";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: DividerSize[];
+        };
+        orientation: {
+            control: {
+                type: "select";
+            };
+            options: DividerOrientation[];
+        };
+        color: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+    args: {
+        size: DividerSize.SMALL;
+        color: string;
+        orientation: DividerOrientation.HORIZONTAL;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZDivider) => import("lit-html").TemplateResult<1>;
+    name: string;
+};

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

@@ -0,0 +1,9 @@
+import "./index";
+declare const _default: {
+    title: string;
+    component: string;
+};
+export default _default;
+export declare const ZGhostLoading: {
+    render: () => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,23 @@
+import "./index";
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        fill: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+    };
+    args: {
+        name: string;
+        height: number;
+        width: number;
+        fill: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/z-info-box/index.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * @slot content - set the info box content
+ */
+export declare class ZInfoBox {
+    /** info box unique id */
+    boxid: string;
+    /** render close icon flag */
+    isclosable: boolean;
+    /** emitted on close icon click */
+    infoBoxClose: EventEmitter;
+    private emitInfoBoxClose;
+    render(): HTMLDivElement;
+}

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

@@ -0,0 +1,12 @@
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        isclosable: true;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};