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

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

@@ -0,0 +1,46 @@
+import "../../z-icon/index";
+import "./index.stories.css";
+declare const _default: {
+    title: string;
+    argTypes: {
+        colorVariant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        icon: {
+            options: string[];
+            control: {
+                type: string;
+                labels: {
+                    null: string;
+                };
+            };
+        };
+        "z-link-icon": {
+            if: {
+                arg: string;
+                truthy: boolean;
+            };
+        };
+    };
+    args: {
+        colorVariant: string;
+        text: string;
+        icon: any;
+        "z-link-active": boolean;
+        "z-link-inverse": boolean;
+        "z-link-disabled": boolean;
+        "z-link-underline": boolean;
+        "z-link-icon": boolean;
+        "z-link-sb": boolean;
+    };
+};
+export default _default;
+export declare const ZLink: {
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};
+export declare const ZLinkButton: {
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,33 @@
+import { StoryObj } from "@storybook/web-components";
+import { type ZDatePicker } from ".";
+import { ZDatePickerMode } from "../../../beans";
+import "../../z-button/index";
+import "../index.stories.css";
+import "./index";
+/**
+ * In order to avoid conflits between datepickers, pass a unique id as `datePickerId` prop.
+ * This component emits an event called `dateSelect` with the value of the selected date.
+ */
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        mode: {
+            options: ZDatePickerMode[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+    };
+    args: {
+        ariaLabel: string;
+        mode: ZDatePickerMode.DATE;
+    };
+    render: (args: ZDatePicker) => import("lit-html").TemplateResult<1>;
+};
+export default StoryMeta;
+type Story = StoryObj<ZDatePicker>;
+export declare const Date: Story;
+export declare const DateAndTime: Story;
+export declare const MonthsOnly: Story;
+export declare const CustomToggle: Story;

package/dist/types/components/date-picker/z-range-picker/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
-import { ZRangePickerMode, ZDatePickerPosition } from "../../../beans";
+import { ZDatePickerPosition, ZRangePickerMode } from "../../../beans";
 export declare class ZRangePicker {
     element: HTMLZRangePickerElement;
     /** unique id */

package/dist/types/components/date-picker/z-range-picker/index.stories.d.ts

@@ -0,0 +1,51 @@
+import { ZRangePicker } from ".";
+import { ZRangePickerMode } from "../../../beans";
+import "../index.stories.css";
+import "./index";
+/**
+ * In order to avoid conflits between datepickers, pass a unique id as `rangePickerId` prop.
+ * This component has a callback function `dateSelect` that returns the selected date.
+ */
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        mode: {
+            options: ZRangePickerMode[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+    };
+};
+export default StoryMeta;
+export declare const Date: {
+    args: {
+        mode: ZRangePickerMode.DATE;
+        rangePickerId: string;
+        firstLabel: string;
+        firstAriaLabel: string;
+        secondLabel: string;
+        secondAriaLabel: string;
+        firstPickerPlaceholder: string;
+        lastPickerPlaceholder: string;
+        firstPickerReadOnly: false;
+        lastPickerReadOnly: false;
+    };
+    render: (args: ZRangePicker) => import("lit-html").TemplateResult<1>;
+};
+export declare const DateAndTime: {
+    args: {
+        mode: ZRangePickerMode.DATE_TIME;
+        rangePickerId: string;
+        firstLabel: string;
+        firstAriaLabel: string;
+        secondLabel: string;
+        secondAriaLabel: string;
+        firstPickerPlaceholder: string;
+        lastPickerPlaceholder: string;
+        firstPickerReadOnly: false;
+        lastPickerReadOnly: false;
+    };
+    render: (args: ZRangePicker) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,14 @@
+import { type ZFile } from ".";
+import "./index";
+declare const _default: {
+    title: string;
+    component: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        fileNumber: number;
+        fileName: string;
+    };
+    render: (args: ZFile) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,42 @@
+import { type ZFileUpload } from ".";
+import { ButtonVariant, ZFileUploadType } from "../../../beans";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        type: {
+            options: ZFileUploadType[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+        buttonVariant: {
+            options: ButtonVariant[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+    };
+    args: {
+        fileMaxSize: number;
+        acceptedFormat: string;
+        mainTitle: string;
+        description: string;
+        uploadBtnLabel: string;
+        hasFileSection: true;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    args: {
+        buttonVariant: ButtonVariant.PRIMARY;
+    };
+    render: (args: ZFileUpload) => import("lit-html").TemplateResult<1>;
+};
+export declare const Dragdrop: {
+    args: {
+        dragAndDropLabel: string;
+    };
+    render: (args: ZFileUpload) => import("lit-html").TemplateResult<1>;
+};

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

@@ -10,9 +10,9 @@ export declare class ZList {
      */
     listType?: ListType;
     /**
-     * [optional] Sets role of the element.
+     * Sets role of the element.
      */
-    role?: string;
+    role: string;
     private setChildrenSizeType;
     componentDidLoad(): void;
     render(): HTMLZListElement;

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

@@ -0,0 +1,62 @@
+import { ZList } from ".";
+import { ListSize, ListType } from "../../../beans";
+import "../z-list-element/index";
+import "../z-list-group/index";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: ListSize[];
+        };
+        listType: {
+            control: {
+                type: "select";
+            };
+            options: ListType[];
+        };
+    };
+    args: {
+        size: ListSize.MEDIUM;
+        listType: ListType.NONE;
+    };
+    render: (args: ZList) => import("lit-html").TemplateResult<1>;
+};
+export default StoryMeta;
+export declare const Default: {};
+export declare const HeaderDivider: {
+    render: (args: ZList) => import("lit-html").TemplateResult<1>;
+};
+export declare const ElementDivider: {
+    render: (args: ZList) => import("lit-html").TemplateResult<1>;
+};
+export declare const ClickableElements: {
+    render: () => import("lit-html").TemplateResult<1>;
+};
+export declare const ExpandableElements: {
+    render: () => import("lit-html").TemplateResult<1>;
+};
+export declare const UnorderedIndex: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    args: {
+        listType: ListType.UNORDERED;
+    };
+};
+export declare const OrderedIndex: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    args: {
+        listType: ListType.ORDERED;
+    };
+};

package/dist/types/components/list/z-list-element/index.d.ts

@@ -62,9 +62,9 @@ export declare class ZListElement {
      */
     listType?: ListType;
     /**
-     * [optional] Sets element role.
+     * Sets element role.
      */
-    role?: string;
+    role: string;
     /** set tabindex to Host tag (optional). Defaults to 0. */
     htmlTabindex?: number | null;
     showInnerContent: boolean;

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

@@ -0,0 +1,77 @@
+import { ZListElement } from ".";
+import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, ListDividerType, ListSize, ListType } from "../../../beans";
+import "../z-list/index";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        alignButton: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ExpandableListButtonAlign[];
+        };
+        dividerColor: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        dividerType: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ListDividerType[];
+        };
+        dividerSize: {
+            control: {
+                type: "inline-radio";
+            };
+            options: DividerSize[];
+        };
+        expandableStyle: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ExpandableListStyle[];
+        };
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ListSize[];
+        };
+        color: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        listType: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ListType[];
+        };
+    };
+    args: {
+        alignButton: ExpandableListButtonAlign.LEFT;
+        clickable: false;
+        dividerColor: string;
+        dividerType: ListDividerType.NONE;
+        dividerSize: DividerSize.SMALL;
+        expandable: false;
+        expandableStyle: ExpandableListStyle.ACCORDION;
+        listElementId: number;
+        size: ListSize.MEDIUM;
+        color: string;
+        disabled: true;
+        listElementPosition: string;
+        listType: ListType.NONE;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZListElement) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/list/z-list-group/index.d.ts

@@ -1,4 +1,4 @@
-import { DividerSize, ListSize, ListDividerType, ListType } from "../../../beans";
+import { DividerSize, ListDividerType, ListSize, ListType } from "../../../beans";
 export declare class ZListGroup {
     host: HTMLZListGroupElement;
     /**

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

@@ -0,0 +1,46 @@
+import { DividerSize, ListDividerType, ListSize, ListType } from "../../../beans";
+import "../z-list-element/index";
+import "../z-list/index";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ListSize[];
+        };
+        dividerType: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ListDividerType[];
+        };
+        dividerSize: {
+            control: {
+                type: "inline-radio";
+            };
+            options: DividerSize[];
+        };
+        dividerColor: import("@storybook/types").Args;
+        listType: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ListType[];
+        };
+    };
+    args: {
+        size: ListSize.SMALL;
+        dividerType: ListDividerType.HEADER;
+        dividerSize: DividerSize.SMALL;
+        dividerColor: string;
+        listType: ListType.NONE;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};

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

@@ -1,7 +1,7 @@
-import "../z-thead/index";
 import "../z-tbody/index";
-import "../z-tr/index";
 import "../z-tfoot/index";
+import "../z-thead/index";
+import "../z-tr/index";
 /**
  * ZTable component.
  * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).

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

@@ -0,0 +1,82 @@
+import { type TemplateResult } from "lit";
+import { PopoverPosition, VisibilityCondition } from "../../../beans";
+import "../../z-button/index";
+import "./index";
+import "./index.stories.css";
+/**
+ * ## Accessibility
+ *
+ * The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.
+ * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.
+ * The ARIA attributes used are the following:
+ * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled
+ * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
+ * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.
+ * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.
+ */
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        bordered: true;
+        "--z-table--cells-padding": string;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: any) => TemplateResult<1>;
+};
+/**
+ * Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.
+ * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a "prevent-expand" class on that item, in order to prevent unwanted row expansions.
+ */
+export declare const ExpandableRows: {
+    render: (args: any) => TemplateResult<1>;
+};
+/**
+ * To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.
+ * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.
+ */
+export declare const Sticky: {
+    args: {
+        stickyHeader: boolean;
+        stickyFooter: boolean;
+        stickFirstColumn: boolean;
+    };
+    render: (args: any) => TemplateResult<1>;
+};
+/**
+ * Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.
+ * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.
+ */
+export declare const CellsWithContextualMenu: {
+    argTypes: {
+        showMenu: {
+            control: {
+                type: string;
+                labels: {
+                    null: string;
+                };
+            };
+            popoverPosition: {
+                options: PopoverPosition[];
+                control: {
+                    type: string;
+                };
+            };
+            options: VisibilityCondition[];
+        };
+    };
+    args: {
+        showMenu: VisibilityCondition;
+        popoverPosition: PopoverPosition;
+    };
+    render: (args: any) => TemplateResult<1>;
+};
+/**
+ * Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.
+ * Clicking the button will fire the `sort` event with the `sortDirection` as detail.
+ */
+export declare const SortAction: {
+    render: (args: any) => TemplateResult<1>;
+};

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { ControlSize, AccordionVariant } from "../../beans";
+import { AccordionVariant, ControlSize } from "../../beans";
 /**
  * Accordion component.
  *

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

@@ -0,0 +1,142 @@
+import { Args } from "@storybook/web-components";
+import { type TemplateResult } from "lit";
+import { type ZAccordion } from ".";
+import { AccordionVariant, ControlSize } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "../z-tag/index";
+import "./index";
+declare const cssPropsArgs: {
+    readonly "--z-accordion-bg": Args;
+    readonly "--z-accordion-label-color": Args;
+    readonly "--z-accordion-disabled-label-color": {
+        readonly if: {
+            readonly arg: "isDisabled";
+            readonly truthy: true;
+        };
+    };
+    readonly "--z-accordion-content-bg": Args;
+    readonly "--z-accordion-content-fg": Args;
+    readonly "--z-accordion-hover-color": Args;
+    readonly "--z-accordion-highlight-color": {
+        readonly if: {
+            readonly arg: "highlight";
+            readonly truthy: true;
+        };
+    };
+};
+type ZAccordionStoriesArgs = ZAccordion & CSSVarsArguments<keyof typeof cssPropsArgs | `z-accordion-${"left" | "right"}-padding` | "z-accordion-label-font-weight" | `z-accordion-highlight-color${number | undefined}`>;
+/**
+ * To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.
+ */
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        icon: {
+            options: string[];
+            control: {
+                type: "select";
+                labels: {
+                    null: string;
+                };
+            };
+        };
+        shadow: {
+            if: {
+                arg: string;
+                eq: AccordionVariant;
+            };
+        };
+        size: {
+            options: ControlSize[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+        variant: {
+            options: AccordionVariant[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+        "--z-accordion-bg": Args;
+        "--z-accordion-label-color": Args;
+        "--z-accordion-disabled-label-color": {
+            readonly if: {
+                readonly arg: "isDisabled";
+                readonly truthy: true;
+            };
+        };
+        "--z-accordion-content-bg": Args;
+        "--z-accordion-content-fg": Args;
+        "--z-accordion-hover-color": Args;
+        "--z-accordion-highlight-color": {
+            readonly if: {
+                readonly arg: "highlight";
+                readonly truthy: true;
+            };
+        };
+    };
+    args: {
+        "--z-accordion-bg": any;
+        "--z-accordion-label-color": any;
+        "--z-accordion-disabled-label-color": any;
+        "--z-accordion-content-bg": any;
+        "--z-accordion-content-fg": any;
+        "--z-accordion-hover-color": any;
+        "--z-accordion-highlight-color": any;
+        "--z-accordion-right-padding": string;
+        "--z-accordion-left-padding": string;
+        "--z-accordion-label-font-weight": string;
+        highlight: false;
+        icon: any;
+        isDisabled: false;
+        label: string;
+        open: false;
+        shadow: true;
+        size: ControlSize.BIG;
+        variant: AccordionVariant.DEFAULT;
+    };
+    render: (args: Args) => TemplateResult;
+};
+export default StoryMeta;
+export declare const Default: {};
+/**
+ * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.
+ */
+export declare const Stack: {
+    argTypes: {
+        "--z-accordion-highlight-color2": {
+            readonly if: {
+                readonly arg: "highlight";
+                readonly truthy: true;
+            };
+        };
+        "--z-accordion-highlight-color3": {
+            readonly if: {
+                readonly arg: "highlight";
+                readonly truthy: true;
+            };
+        };
+        "--z-accordion-highlight-color4": {
+            readonly if: {
+                readonly arg: "highlight";
+                readonly truthy: true;
+            };
+        };
+    };
+    args: {
+        "--z-accordion-highlight-color2": any;
+        "--z-accordion-highlight-color3": any;
+        "--z-accordion-highlight-color4": any;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAccordionStoriesArgs) => TemplateResult<1>;
+};
+export declare const WithTags: {
+    render: (args: ZAccordionStoriesArgs) => TemplateResult<1>;
+};