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

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

@@ -0,0 +1,42 @@
+import { type ZInfoReveal } from ".";
+import { ControlSize, InfoRevealPosition } from "../../beans";
+import "../z-button/index";
+import "./index";
+import "./index.stories.css";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        icon: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ControlSize[];
+        };
+        position: {
+            options: InfoRevealPosition[];
+            control: {
+                type: "inline-radio";
+            };
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    args: {
+        label: string;
+        icon: string;
+        size: ControlSize.BIG;
+        position: InfoRevealPosition.TOP_RIGHT;
+    };
+    render: (args: ZInfoReveal) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,110 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
+export declare class ZInput {
+    hostElement: HTMLZInputElement;
+    /** the id of the input element */
+    htmlid: string;
+    /** input types */
+    type: InputType;
+    /** the input name */
+    name?: string;
+    /** the input label */
+    label?: string;
+    /** the input aria-label */
+    ariaLabel: string;
+    /** the input aria-expaded: available for text, password, number, email */
+    ariaExpanded: string;
+    /** the input aria-controls (optional): available for text, password, number, email */
+    ariaControls?: string;
+    /** the input aria-autocomplete (optional): available for text, password, number, email */
+    ariaAutocomplete?: string;
+    /** the input aria-activedescendant (optional): available for text, password, number, email */
+    ariaActivedescendant?: string;
+    /** the input value */
+    value?: string;
+    /** the input is disabled */
+    disabled?: boolean;
+    /** the input is readonly */
+    readonly?: boolean;
+    /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
+    required?: boolean;
+    /** checked: available for checkbox, radio */
+    checked?: boolean;
+    /** the input placeholder (optional) */
+    placeholder?: string;
+    /** the input html title (optional) */
+    htmltitle?: string;
+    /** the input status (optional): available for text, password, number, email, textarea */
+    status?: InputStatus;
+    /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
+    message?: string | boolean;
+    /** the input label position: available for checkbox, radio */
+    labelPosition?: LabelPosition;
+    /** the input has autocomplete option (optional): available for text, password, number, email */
+    autocomplete?: string;
+    /** the input role */
+    role: string;
+    /** render clear icon when typing (optional): available for text */
+    hasclearicon?: boolean;
+    /** render icon (optional): available for text */
+    icon?: string;
+    /** min number value (optional): available for number */
+    min?: number;
+    /** Min length value (optional): available for text */
+    minlength?: number;
+    /** max number value (optional): available for number */
+    max?: number;
+    /** Max length value (optional): available for text */
+    maxlength?: number;
+    /** step number value (optional): available for number */
+    step?: number;
+    /** pattern value (optional): available for tel, text, search, url, email, password*/
+    pattern?: string;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    size?: ControlSize;
+    isTyping: boolean;
+    passwordHidden: boolean;
+    private timer;
+    private typingtimeout;
+    private inputRef;
+    inputCheckListener(e: CustomEvent): void;
+    /** get checked status */
+    isChecked(): Promise<boolean>;
+    /** Emitted on input value change, returns value, validity */
+    inputChange: EventEmitter;
+    private emitInputChange;
+    /** Emitted when user starts typing */
+    startTyping: EventEmitter;
+    private emitStartTyping;
+    /** Emitted when user stops typing, returns value, validity */
+    stopTyping: EventEmitter;
+    private emitStopTyping;
+    /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */
+    inputCheck: EventEmitter;
+    private emitInputCheck;
+    /** Emitted on input focus */
+    inputFocus: EventEmitter;
+    private emitInputFocus;
+    /** Emitted on input blur */
+    inputBlur: EventEmitter;
+    private emitInputBlur;
+    private getValidity;
+    private getTextAttributes;
+    private getNumberAttributes;
+    private getPatternAttribute;
+    private getRoleAttribute;
+    private getAriaAttrubutes;
+    private getFocusBlurAttributes;
+    private renderInputText;
+    private renderLabel;
+    private renderIcons;
+    private renderIcon;
+    private renderResetIcon;
+    private renderShowHidePassword;
+    private renderMessage;
+    private renderTextarea;
+    private handleCheck;
+    private renderCheckbox;
+    private renderRadio;
+    render(): HTMLInputElement | HTMLDivElement;
+}

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

@@ -0,0 +1,126 @@
+import { ZInput } from ".";
+import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        type: {
+            control: {
+                type: "inline-radio";
+            };
+            options: InputType[];
+        };
+        labelPosition: {
+            control: {
+                type: "inline-radio";
+            };
+            options: LabelPosition[];
+        };
+        size: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ControlSize[];
+        };
+        status: {
+            control: {
+                type: "inline-radio";
+                labels: {
+                    null: string;
+                };
+            };
+            options: InputStatus[];
+        };
+    };
+    args: {
+        type: InputType.TEXT;
+        label: string;
+        ariaLabel: string;
+        labelPosition: LabelPosition.RIGHT;
+        placeholder: string;
+        value: string;
+        size: ControlSize.BIG;
+        name: string;
+        status: any;
+        message: string;
+        icon: string;
+        disabled: false;
+        readonly: false;
+        required: false;
+        checked: false;
+        hasclearicon: true;
+        htmlid: string;
+        htmltitle: string;
+        autocomplete: string;
+        min: number;
+        minlength: number;
+        max: number;
+        maxlength: number;
+        step: number;
+        pattern: string;
+    };
+};
+export default StoryMeta;
+export declare const AllProps: {
+    render: (args: ZInput) => import("lit-html").TemplateResult<1>;
+};
+export declare const ZInputText: {
+    render: (args: ZInput) => import("lit-html").TemplateResult<1>;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    argTypes: {
+        type: {
+            options: InputType[];
+        };
+    };
+};
+export declare const ZInputTextarea: {
+    render: (args: ZInput) => import("lit-html").TemplateResult<1>;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    args: {
+        type: InputType.TEXTAREA;
+    };
+};
+export declare const ZInputCheckbox: {
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    args: {
+        type: InputType.CHECKBOX;
+    };
+    render: (args: ZInput) => import("lit-html").TemplateResult<1>;
+};
+export declare const ZInputRadio: {
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    args: {
+        type: InputType.RADIO;
+    };
+    render: (args: ZInput) => import("lit-html").TemplateResult<1>;
+};
+export declare const ZInputNumber: {
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    args: {
+        type: InputType.NUMBER;
+        value: string;
+        hasclearicon: false;
+    };
+    render: (args: ZInput) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/z-input-message/index.d.ts

@@ -0,0 +1,12 @@
+import { InputStatus } from "../../beans";
+export declare class ZInputMessage {
+    /** input helper message */
+    message: string;
+    /** input status (optional) */
+    status?: InputStatus;
+    private statusIcons;
+    statusRole: {};
+    onMessageChange(): void;
+    componentWillLoad(): void;
+    render(): HTMLZInputMessageElement;
+}

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

@@ -0,0 +1,33 @@
+import { ZInputMessage } from ".";
+import { ControlSize, InputStatus } from "../../beans";
+import "./index";
+type ZInputMessageStoriesArgs = ZInputMessage & {
+    class: ControlSize;
+};
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        status: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+        class: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ControlSize[];
+        };
+    };
+    args: {
+        message: string;
+        status: InputStatus.ERROR;
+        class: ControlSize.BIG;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZInputMessageStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,18 @@
+import { ZLogo } from ".";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        imageAlt: string;
+        height: number;
+        width: number;
+        link: string;
+        targetBlank: false;
+        mobileLogo: false;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZLogo) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,61 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * @slot - Menu label
+ * @slot header - Header to display as the first entry of the open menu.
+ * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
+ * @cssprop --z-menu-label-color - Color of the label's text.
+ */
+export declare class ZMenu {
+    hostElement: HTMLZMenuElement;
+    /** Flag to set the active status of the menu. */
+    active?: boolean;
+    /**
+     * Flag to set the display mode of the list.
+     * If true, the list will be absolutely positioned under the menu label,
+     * stacked beneath it otherwise.
+     */
+    floating?: boolean;
+    /** The opening state of the menu. */
+    open: boolean;
+    /**
+     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
+     * A small border is placed under it as a separator from other elements.
+     */
+    verticalContext: boolean;
+    hasHeader: boolean;
+    hasContent: boolean;
+    private content;
+    /** Animation frame request id. */
+    private raf;
+    /** The menu has been opened. */
+    opened: EventEmitter;
+    /** The menu has been closed. */
+    closed: EventEmitter;
+    private toggle;
+    /** Close the floating list when a click is performed outside of this Element. */
+    handleClick(ev: MouseEvent): void;
+    onOpenChanged(): void;
+    constructor();
+    componentWillLoad(): void;
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    private onLabelSlotChange;
+    /**
+     * Correctly set position of the floating menu in order to prevent overflow.
+     * @param live Should run the method on every refresh frame.
+     */
+    private reflow;
+    /**
+     * Check if some content slot is set.
+     */
+    private checkContent;
+    /**
+     * Set `menuitem` role to all menu items.
+     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+     */
+    private onItemsChange;
+    private renderMenuLabel;
+    render(): HTMLZMenuElement;
+}

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

@@ -0,0 +1,27 @@
+import { type ZMenu } from ".";
+import "../z-menu-section/index";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        active: false;
+        floating: true;
+        verticalContext: false;
+    };
+};
+export default StoryMeta;
+export declare const FloatingContentLayout: {
+    render: (args: ZMenu) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithHeader: {
+    render: (args: ZMenu) => import("lit-html").TemplateResult<1>;
+};
+export declare const ActiveWithoutItems: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZMenu) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * A component to create submenus inside the ZMenu.
+ * @slot - Label of the menu section.
+ * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.
+ */
+export declare class ZMenuSection {
+    hostElement: HTMLZMenuSectionElement;
+    /** Active state */
+    active?: boolean;
+    open: boolean;
+    hasContent: boolean;
+    /** The section has been opened. */
+    opened: EventEmitter;
+    /** The section has been closed. */
+    closed: EventEmitter;
+    private toggle;
+    /** Close the list when a click is performed outside of this Element. */
+    handleClick(ev: MouseEvent): void;
+    /**
+     * Check if some content slot is set.
+     */
+    private checkContent;
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    private onLabelSlotChange;
+    componentWillLoad(): void;
+    render(): HTMLZMenuSectionElement;
+}

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

@@ -0,0 +1,16 @@
+import { type ZMenuSection } from ".";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        active: false;
+    };
+};
+export default StoryMeta;
+export declare const WithItems: {
+    render: (args: ZMenuSection) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithoutItems: {
+    render: (args: ZMenuSection) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * @slot modalCloseButton - accept custom close button
+ * @slot modalContent - set the content of the modal
+ */
+export declare class ZModal {
+    /** unique id */
+    modalid: string;
+    /** title text (optional) */
+    modaltitle?: string;
+    /** subtitle (optional) */
+    modalsubtitle?: string;
+    /** aria-label for close button (optional) */
+    closeButtonLabel: string;
+    /** add role "alertdialog" to dialog (optional, default is false) */
+    alertdialog?: boolean;
+    /** if true, the modal is closable (optional, default is true) */
+    closable?: boolean;
+    /** if true, the modal can scroll inside, if false the viewport can scroll */
+    scrollInside?: boolean;
+    private dialog;
+    host: HTMLZModalElement;
+    /** emitted on close button click, returns modalid */
+    modalClose: EventEmitter;
+    private emitModalClose;
+    /** emitted on modal header click, returns modalid */
+    modalHeaderActive: EventEmitter;
+    private emitModalHeaderActive;
+    /** emitted on background click, returns modalid */
+    modalBackgroundClick: EventEmitter;
+    private emitBackgroundClick;
+    componentDidLoad(): void;
+    /** open modal */
+    open(): Promise<void>;
+    /** close modal */
+    close(): Promise<void>;
+    /**
+     * Get a list of focusable elements in the dialog.
+     * Remove elements with `display: none` from the list, because they're not focusable.
+     *
+     * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.
+     * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.
+     */
+    private get focusableElements();
+    handleKeyDown(e: KeyboardEvent): void;
+    private closeButtonSlot;
+    private handleEscape;
+    render(): HTMLZModalElement;
+}

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

@@ -0,0 +1,39 @@
+import { type ZModal } from ".";
+import "../date-picker/z-date-picker/index";
+import "../z-button/index";
+import "../z-select/index";
+import "./index";
+import "./index.stories.css";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        modalid: string;
+        modaltitle: string;
+        modalsubtitle: string;
+        closeButtonLabel: string;
+        alertdialog: false;
+        closable: true;
+        scrollInside: true;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZModal>) => import("lit-html").TemplateResult<1>)[];
+};
+export default StoryMeta;
+export declare const ShortText: {
+    args: {
+        modalid: string;
+    };
+    render: (args: ZModal) => import("lit-html").TemplateResult<1>;
+};
+export declare const LongText: {
+    args: {
+        modalid: string;
+    };
+    render: (args: ZModal) => import("lit-html").TemplateResult<1>;
+};
+export declare const SlottedCloseButton: {
+    args: {
+        modalid: string;
+    };
+    render: (args: ZModal) => import("lit-html").TemplateResult<1>;
+};

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

@@ -0,0 +1,114 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
+/**
+ * Navigation tabs component.
+ * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
+ * @slot - Main slot. Use `<button>` or `<a>` tags as children.
+ * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
+ * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
+ */
+export declare class ZNavigationTabs {
+    /**
+     * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
+     */
+    ariaLabel: string;
+    /**
+     * Navigation tabs orientation.
+     */
+    orientation?: NavigationTabsOrientation;
+    /**
+     * Navigation tabs size.
+     */
+    size?: NavigationTabsSize;
+    /**
+     * Index of the selected tab.
+     * Useful to programmatically select a tab.
+     * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.
+     */
+    selectedTab: number;
+    /**
+     * Emitted when the selected tab changes.
+     * Contains the index of the new selected tab in the `detail` of the event.
+     */
+    selected: EventEmitter<number>;
+    /**
+     * Whether to show navigation buttons.
+     */
+    canNavigate: boolean;
+    /**
+     * Whether backwards navigation is allowed.
+     */
+    canNavigatePrev: boolean;
+    /**
+     * Whether forward navigation is allowed.
+     */
+    canNavigateNext: boolean;
+    host: HTMLZNavigationTabsElement;
+    /**
+     * Index of the last tab that held focus.
+     */
+    private focusedTab;
+    /**
+     * Reference to the `<nav>` element
+     */
+    private nav;
+    /**
+     * Getter for the direction to check based on current orientation.
+     */
+    get direction(): string;
+    /**
+     * Getter for the dimension to check based on current orientation.
+     */
+    get dimension(): string;
+    get tabs(): HTMLElement[];
+    private resizeObserver;
+    /**
+     * Scroll into view to center the tab.
+     */
+    private scrollToTab;
+    /**
+     * Scroll the navigation bar half of its size backward.
+     */
+    private navigateBackwards;
+    /**
+     * Scroll the navigation bar half of its size forward.
+     */
+    private navigateForward;
+    /**
+     * Check if a keyboard event was triggered by an arrow key.
+     */
+    private isArrowNavigation;
+    /**
+     * Check if the navigation buttons are needed.
+     */
+    private checkScrollVisible;
+    /**
+     * Check if navigation buttons can be enabled for each direction.
+     */
+    checkScrollEnabled(): void;
+    /**
+     * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
+     */
+    onTabSelected(): void;
+    /**
+     * Handle click on the tabs.
+     * @param event `click` event triggered by a child tab
+     */
+    handleTabClick(event: MouseEvent): void;
+    /**
+     * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.
+     */
+    onTabFocusIn(event: FocusEvent): void;
+    /**
+     * Handle keyboard navigation through tabs with arrow keys.
+     */
+    navigateThroughTabs(event: KeyboardEvent): void | boolean;
+    /**
+     * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.
+     */
+    onTabFocusOut(event: FocusEvent): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): HTMLZNavigationTabsElement;
+}