@zeedhi/common 1.112.0 → 3.0.0

package/dist/types/components/zd-alert/alert.d.ts

@@ -0,0 +1,94 @@
+import { IButton } from '../zd-button/interfaces';
+import { Component } from '../zd-component/component';
+import { IAlert } from './interfaces';
+/**
+ * Base class for Alert component.
+ */
+export declare class Alert extends Component implements IAlert {
+    /**
+     * Align the component towards the bottom
+     */
+    bottom: boolean;
+    /**
+     * Slot to display flat buttons
+     */
+    buttonsSlot: IButton[];
+    /**
+     * Applies specified color to the control.
+     * It can be the name of material color or an hexadecimal color
+     */
+    color: string;
+    /**
+     * Applies specified color to the dismiss button.
+     * It can be the name of material color or an hexadecimal color
+     */
+    dismissColor: string;
+    /**
+     * Align the component towards the left
+     */
+    left: boolean;
+    /**
+     * Creates a better spacing for multiple content lines
+     */
+    multiLine: boolean;
+    /**
+     * Align the component towards the right
+     */
+    right: boolean;
+    /**
+     * Controls dismiss button visibility
+     */
+    showDismiss: boolean;
+    /**
+     * Time (in milliseconds) to wait until alert is automatically hidden.
+     * Use 0 to keep open indefinitely.
+     */
+    timeout: number;
+    /**
+     * Text displayed on alert
+     */
+    text: string;
+    /**
+     * Align the content towards the top
+     */
+    top: boolean;
+    /**
+     * Stacks alert content and actions vertically
+     */
+    vertical: boolean;
+    id: number;
+    protected defaultValues: {
+        name: string;
+        color: string;
+        text: string;
+        timeout: number;
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        left: boolean;
+        vertical: boolean;
+        multiLine: boolean;
+        showDismiss: boolean;
+        dismissColor: string;
+        buttonsSlot: IButton[];
+        id: number;
+    };
+    /**
+     * Creates a new Alert
+     * @param props Alert structure
+     */
+    constructor(props: IAlert);
+    /**
+     * Assign all alert properties
+     * @param alert Alert structure
+     */
+    assignAlertProperties(alert: IAlert): void;
+    /**
+     * Displays alert
+     */
+    show(): void;
+    /**
+     * Hides alert
+     */
+    hide(): void;
+}

package/dist/types/components/zd-alert/interfaces.d.ts

@@ -0,0 +1,18 @@
+import { IButton } from '../zd-button/interfaces';
+import { IComponent } from '../zd-component/interfaces';
+export interface IAlert extends IComponent {
+    id?: number;
+    color?: string;
+    text?: string;
+    timeout?: number;
+    type?: string;
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    vertical?: boolean;
+    multiLine?: boolean;
+    showDismiss?: boolean;
+    dismissColor?: string;
+    buttonsSlot?: IButton[];
+}

package/dist/types/components/zd-badge/badge.d.ts

@@ -0,0 +1,28 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IBadge, IBadgeEvents } from './interfaces';
+/**
+ * Base class for Badge component.
+ */
+export declare class Badge extends ComponentRender implements IBadge {
+    /**
+     * Wrap a number to badge
+     */
+    badge: number;
+    /**
+     * Events registered to the badge
+     */
+    events: IBadgeEvents;
+    /**
+     * Highlight information to a user or to just draw attention
+     */
+    showBadgeCounter: boolean;
+    /**
+     * Create a new Badge
+     * @param props Badge definition
+     */
+    constructor(props: IBadge);
+    /**
+     * Returns a string with the badge counter
+     */
+    getBadgeText(): string;
+}

package/dist/types/components/zd-badge/interfaces.d.ts

@@ -0,0 +1,10 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Badge } from './badge';
+export type IBadgeEvent = IEventParam<Badge>;
+export type IBadgeEvents = IComponentEvents<IBadgeEvent>;
+export interface IBadge extends IComponentRender {
+    badge?: number;
+    events?: IBadgeEvents;
+    showBadgeCounter?: boolean;
+}

package/dist/types/components/zd-breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,32 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IBreadcrumbs, IBreadcrumbsItem } from './interfaces';
+/**
+ * Base class for Breadcrumbs component.
+ */
+export declare class Breadcrumbs extends ComponentRender implements IBreadcrumbs {
+    /**
+     * Specifies the dividing string between items.
+     */
+    divider: string;
+    /**
+     * Array of objects for each breadcrumb.
+     */
+    items: IBreadcrumbsItem[];
+    /**
+     * Defines the divider icon name.
+     */
+    iconName: string;
+    /**
+     * Increase the font-size of the breadcrumb item text to 16px.
+     */
+    large: boolean;
+    /**
+     * Decrease the font-size of the breadcrumb item text to 12px.
+     */
+    small: boolean;
+    /**
+     * Create a new Breadcrumbs
+     * @param props Breadcrumbs definition
+     */
+    constructor(props: IBreadcrumbs);
+}

package/dist/types/components/zd-breadcrumbs/interfaces.d.ts

@@ -0,0 +1,24 @@
+import { IComponentRender } from '../zd-component/interfaces';
+export interface IBreadcrumbs extends IComponentRender {
+    dark?: boolean;
+    divider?: string;
+    iconName?: string;
+    items?: IBreadcrumbsItem[];
+    large?: boolean;
+    light?: boolean;
+    small?: boolean;
+}
+export interface IBreadcrumbsItem {
+    activeClass?: string;
+    append?: boolean;
+    disabled?: boolean;
+    exact?: boolean;
+    exactActiveClass?: string;
+    href?: string | object;
+    link?: boolean;
+    replace?: boolean;
+    ripple?: boolean | object;
+    text?: string | number;
+    to?: string | object;
+    title?: string;
+}

package/dist/types/components/zd-button/button.d.ts

@@ -0,0 +1,89 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IButton, IButtonEvents } from './interfaces';
+/**
+ * Base class for Button component.
+ */
+export declare class Button extends ComponentRender implements IButton {
+    absolute: boolean;
+    block: boolean;
+    /**
+     * Aligns the button towards the bottom.
+     * This should be used with the absolute or fixed props
+     */
+    bottom: boolean;
+    /**
+     * Applies specified color to the control.
+     * It can be the name of material or css color in hexa
+     */
+    color: string;
+    disabled: boolean;
+    events: IButtonEvents;
+    fab: boolean;
+    fixed: boolean;
+    flat: boolean;
+    href: string;
+    icon: boolean;
+    iconName: string;
+    label: string;
+    large: boolean;
+    /**
+     * Aligns the button towards the left.
+     * This should be used with the absolute or fixed props
+     */
+    left: boolean;
+    outline: boolean;
+    reverse: boolean;
+    /**
+     * Aligns the button towards the right.
+     * This should be used with the absolute or fixed props
+     */
+    right: boolean;
+    round: string | number | boolean;
+    small: boolean;
+    target: string;
+    tile: boolean;
+    to: string;
+    /**
+     * Aligns the content towards the top.
+     * This should be used with the absolute or fixed props
+     */
+    top: boolean;
+    type: string;
+    /**
+     * Sets the width for the card.
+     * Possible values for width can be 'auto', '100%', '400px' or 400
+     */
+    width: number | string;
+    active?: boolean;
+    appendIcon?: string;
+    border: string | number | boolean;
+    /**
+     * Adjusts the vertical height of the component
+     * Possible values: 'default', 'comfortable' and 'compact'
+     */
+    density: 'default' | 'comfortable' | 'compact';
+    elevation?: string | number;
+    loading: string | boolean;
+    /**
+     * Defines the position of the component.
+     * Possible values: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'
+     */
+    position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+    prependIcon?: string;
+    replace: boolean;
+    ripple: boolean;
+    selectedClass?: string;
+    /**
+     * Defines the height and width of the component
+     * Possible values: x-small, small, default, large, and x-large
+     */
+    size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
+    stacked: boolean;
+    tag?: string;
+    variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+    /**
+     * Create a new Button
+     * @param props Button definition
+     */
+    constructor(props: IButton);
+}

package/dist/types/components/zd-button/interfaces.d.ts

@@ -0,0 +1,48 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Button } from './button';
+export type IButtonEvent = IEventParam<Button>;
+export type IButtonEvents = IComponentEvents<IButtonEvent>;
+export interface IButton extends IComponentRender {
+    absolute?: boolean;
+    block?: boolean;
+    bottom?: boolean;
+    color?: string;
+    disabled?: boolean;
+    events?: IButtonEvents;
+    fab?: boolean;
+    fixed?: boolean;
+    flat?: boolean;
+    href?: string;
+    icon?: boolean;
+    iconName?: string;
+    label?: string;
+    large?: boolean;
+    left?: boolean;
+    outline?: boolean;
+    reverse?: boolean;
+    right?: boolean;
+    round?: string | number | boolean;
+    small?: boolean;
+    target?: string;
+    tile?: boolean;
+    to?: string;
+    top?: boolean;
+    type?: string;
+    width?: number | string;
+    active?: boolean;
+    appendIcon?: string;
+    border?: string | number | boolean;
+    density?: 'default' | 'comfortable' | 'compact';
+    elevation?: string | number;
+    loading?: boolean | string;
+    position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+    prependIcon?: string;
+    replace?: boolean;
+    ripple?: boolean;
+    selectedClass?: string;
+    size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
+    stacked?: boolean;
+    tag?: string;
+    variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+}

package/dist/types/components/zd-button-group/button-group.d.ts

@@ -0,0 +1,67 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IButtonGroup } from './interfaces';
+/**
+ * Base class for Button Group component.
+ */
+export declare class ButtonGroup extends ComponentRender implements IButtonGroup {
+    /**
+     * Changes the background-color for the component.
+     */
+    backgroundColor: string;
+    /**
+     * Removes the group's border.
+     */
+    borderless: boolean;
+    /**
+     * Applies specified color to the control.
+     * It can be the name of material or css color in hexa
+     */
+    color: string;
+    /**
+     * Reduces the button size and padding.
+     */
+    dense: boolean;
+    /**
+     * Applies mandatory selected button
+     */
+    mandatory: boolean;
+    /**
+     * The multiple prop will allow a user to select multiple
+     * return values as an array.
+     */
+    multiple: boolean;
+    /**
+     * Round edge buttons
+     */
+    rounded: boolean;
+    /**
+     * Applies a large border radius on the top left and
+     * bottom right of the card.
+     */
+    shaped: boolean;
+    /**
+     * Specify a custom tag used on the root element.
+     */
+    tag: string;
+    /**
+     * Removes the component's border-radius.
+     */
+    tile: boolean;
+    /**
+     * Buttons selected.
+     */
+    selectedButtons: number | string | number[] | null;
+    large: boolean;
+    small: boolean;
+    /**
+     * Create a new ButtonGroup
+     * @param props ButtonGroup definition
+     */
+    constructor(props: IButtonGroup);
+    /**
+     * Triggered when the input value changes.
+     * @param event DOM event
+     * @param element Element clicked
+     */
+    change(event?: Event, element?: any): void;
+}

package/dist/types/components/zd-button-group/interfaces.d.ts

@@ -0,0 +1,25 @@
+import { IEventParam } from '@zeedhi/core';
+import { IButton } from '../zd-button/interfaces';
+import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { ButtonGroup } from './button-group';
+export type IButtonGroupEvent = IEventParam<ButtonGroup>;
+export interface IButtonGroupEvents<T = IEventParam<any>> extends IComponentEvents<T> {
+    change?: EventDef<T>;
+}
+export interface IButtonGroup extends IComponentRender {
+    children?: IButton[];
+    backgroundColor?: string;
+    borderless?: boolean;
+    color?: string;
+    dense?: boolean;
+    events?: IButtonGroupEvents;
+    mandatory?: boolean;
+    multiple?: boolean;
+    rounded?: boolean;
+    shaped?: boolean;
+    large?: boolean;
+    small?: boolean;
+    tag?: string;
+    tile?: boolean;
+    selectedButtons?: number | string | number[] | null;
+}

package/dist/types/components/zd-card/card.d.ts

@@ -0,0 +1,152 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { ICard, ICardEvents } from './interfaces';
+/**
+ * Base class for Card component.
+ */
+export declare class Card extends ComponentRender implements ICard {
+    /**
+     * Configure the active CSS class applied when the link is active
+     */
+    activeClass: string;
+    /**
+     * Setting append prop always appends the relative path to the current path
+     */
+    append: boolean;
+    /**
+     * Applies specified color to the control. It can be the name of material color
+     */
+    color: string;
+    /**
+     * Removes the ability to click or target the component
+     */
+    disabled: boolean;
+    /**
+     * Designates an elevation applied to the card between 0 and 24
+     */
+    elevation?: number | string;
+    /**
+     * Events registered to the card
+     */
+    events: ICardEvents;
+    /**
+     * Removes the card's elevation
+     */
+    flat: boolean;
+    /**
+     * Sets the height for the card.
+     * Possible values for height can be 'auto', '100%', '400px' or 400
+     */
+    height?: number | string;
+    /**
+     * Will apply an elevation of 6dp when hovered
+     */
+    hover: boolean;
+    /**
+     * Designates the component as anchor and applies the href attribute
+     */
+    href?: string;
+    /**
+     * Specifies an image background for the card
+     */
+    img: string;
+    /**
+     * Designates that the card is a link
+     */
+    link: boolean;
+    /**
+     * Sets the maximum height for the card.
+     * Possible values for width can be 'auto', '100%', '400px' or 400
+     */
+    maxHeight: number | string;
+    /**
+     * Sets the maximum width for the card.
+     * Possible values for width can be 'auto', '100%', '400px' or 400
+     */
+    maxWidth: number | string;
+    /**
+     * Sets the minimum height for the card.
+     * Possible values for width can be 'auto', '100%', '400px' or 400
+     */
+    minHeight: number | string;
+    /**
+     * Sets the minimum width for the card.
+     * Possible values for width can be 'auto', '100%', '400px' or 400
+     */
+    minWidth: number | string;
+    /**
+     * Removes card elevation shadow and adds a thin border
+     */
+    outlined: boolean;
+    /**
+     * Specifies a higher default elevation (16dp)
+     */
+    raised: boolean;
+    /**
+     * Apply the ripple effect to show action from a user
+     */
+    ripple: boolean;
+    /**
+     * Removes the component's border-radius
+     */
+    tile: boolean;
+    /**
+     * Designates the component as anchor and applies the router.to attribute
+     */
+    to?: string;
+    /**
+     * Sets the width for the card.
+     * Possible values for width can be 'auto', '100%', '400px' or 400
+     */
+    width?: number | string;
+    /**
+     * Applies border style to component
+     */
+    border: string | number | boolean;
+    /**
+     * Adjusts the vertical height of the component
+     * Possible values: 'default', 'comfortable' and 'compact'
+     */
+    density: 'default' | 'comfortable' | 'compact';
+    /**
+     * Displays the loading progress bar
+     */
+    loading: string | boolean;
+    /**
+     * Defines the position of the component.
+     * Possible values: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'
+     */
+    position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+    /**
+     * Defines if the component will call router.replace() or router.push()
+     */
+    replace: boolean;
+    /**
+     * Applies a large border radius on the button
+     */
+    round: string | number | boolean;
+    /**
+     * Defines card subtitle
+     */
+    subtitle?: string;
+    /**
+     * Root element tag
+     */
+    tag?: string;
+    /**
+     * Defines card text
+     */
+    text?: string;
+    /**
+     * Defines card title
+     */
+    title?: string;
+    /**
+     * Applies style to component
+     */
+    variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+    /**
+     * Creates a new Card.
+     * @param props Card properties
+     */
+    constructor(props: ICard);
+}

package/dist/types/components/zd-card/interfaces.d.ts

@@ -0,0 +1,40 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Card } from './card';
+export type ICardEvent = IEventParam<Card>;
+export type ICardEvents = IComponentEvents<ICardEvent>;
+export interface ICard extends IComponentRender {
+    activeClass?: string;
+    append?: boolean;
+    color?: string;
+    elevation?: number | string;
+    events?: ICardEvents;
+    disabled?: boolean;
+    flat?: boolean;
+    hover?: boolean;
+    href?: string;
+    img?: string;
+    link?: boolean;
+    outlined?: boolean;
+    raised?: boolean;
+    ripple?: boolean;
+    tile?: boolean;
+    to?: string;
+    height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
+    width?: number | string;
+    maxWidth?: number | string;
+    minWidth?: number | string;
+    border?: string | number | boolean;
+    density?: 'default' | 'comfortable' | 'compact';
+    loading?: boolean | string;
+    position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+    replace?: boolean;
+    round?: string | number | boolean;
+    subtitle?: string;
+    tag?: string;
+    text?: string;
+    title?: string;
+    variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+}