// Generated by dts-bundle v0.7.3

declare module 'gd-bs' {
    import * as Components from "gd-bs/components/components";
    
    export {
        Components
    }
}

declare module 'gd-bs/components/components' {
    export * from "gd-bs/components/accordion/types";
    export * from "gd-bs/components/alert/types";
    export * from "gd-bs/components/badge/types";
    export * from "gd-bs/components/breadcrumb/types";
    export * from "gd-bs/components/button/types";
    export * from "gd-bs/components/buttonGroup/types";
    export * from "gd-bs/components/card/types";
    export * from "gd-bs/components/cardGroup/types";
    export * from "gd-bs/components/carousel/types";
    export * from "gd-bs/components/checkboxGroup/types";
    export * from "gd-bs/components/collapse/types";
    export * from "gd-bs/components/dropdown/types";
    export * from "gd-bs/components/form/controlTypes";
    export * from "gd-bs/components/form/formTypes";
    export * from "gd-bs/components/inputGroup/types";
    export * from "gd-bs/components/jumbotron/types";
    export * from "gd-bs/components/listBox/types";
    export * from "gd-bs/components/listGroup/types";
    export * from "gd-bs/components/modal/types";
    export * from "gd-bs/components/nav/types";
    export * from "gd-bs/components/navbar/types";
    export * from "gd-bs/components/offcanvas/types";
    export * from "gd-bs/components/pagination/types";
    export * from "gd-bs/components/popover/types";
    export * from "gd-bs/components/progress/types";
    export * from "gd-bs/components/progressGroup/types";
    export * from "gd-bs/components/spinner/types";
    export * from "gd-bs/components/table/types";
    export * from "gd-bs/components/toast/types";
    export * from "gd-bs/components/toolbar/types";
    export * from "gd-bs/components/tooltip/types";
    export * from "gd-bs/components/tooltipGroup/types";
}

declare module 'gd-bs/components/accordion/types' {
    
    /**
        * ### Accordion
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the accordion
        * let el = document.querySelector("#accordion");
        * let accordion = Components.Accordion({
        *     autoCollapse: true,
        *     el: el,
        *     id: "demoAccordion",
        *     items: [
        *         {
        *             header: "Item 1",
        *             content: "This is the content for item 1.",
        *             showFl: true
        *         },
        *         {
        *             header: "Item 2",
        *             content: "This is the content for item 2."
        *         },
        *         {
        *             header: "Item 3",
        *             content: "This is the content for item 3."
        *         }
        *     ]
        * });
        * ```
        */
    export const Accordion: (props: IAccordionProps, template?: string, itemTemplate?: string) => IAccordion;
    
    import { IBase, IBaseProps } from "gd-bs/components/types";
    
    /**
        * Accordion
        */
    export interface IAccordion extends IBase<IAccordionProps> { }
    
    /**
        * Accordion Item
        */
    export interface IAccordionItem<T = HTMLElement> {
            data?: any;
            className?: string;
            content?: string | T;
            header?: string;
            onClick?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
            onRender?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
            onRenderBody?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
            onRenderHeader?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
            showFl?: boolean;
    }
    
    /**
        * Accordion Properties
        */
    export interface IAccordionProps<T = HTMLElement> extends IBaseProps<IAccordion> {
            autoCollapse?: boolean;
            id?: string;
            items?: Array<IAccordionItem<T>>;
    }
}

declare module 'gd-bs/components/alert/types' {
    
    /**
        * ### Alert
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the alert
        * let el = document.querySelector("#alert");
        * let alert = Components.Alert({
        *     el: el,
        *     header: "Demo",
        *     content: "This is an alert.",
        *     isDismissible: true,
        *     type: Components.AlertTypes.Success
        * });
        * ```
        */
    export const Alert: (props: IAlertProps, template?: string) => IAlert;
    
    /**
        * Alert Types
        */
    export const AlertTypes: IAlertTypes;
    
    import { IBase, IBaseProps } from "gd-bs/components/types";
    
    /**
        * Alert
        */
    export interface IAlert extends IBase<IAlertProps> {
            /** Closes an alert by removing it from the DOM. */
            close: () => void;
    
            /** Updates the alert text. */
            setText: (alertText?: string) => void;
    
            /** Updates the alert type. */
            setType: (alertType: number) => void;
    }
    
    /**
        * Alert Properties
        */
    export interface IAlertProps<T = HTMLElement> extends IBaseProps<IAlert> {
            content?: string | T;
            data?: any;
            header?: string;
            isDismissible?: boolean;
            onClose?: (props?: IAlertProps) => void;
            type?: number;
    }
    
    /**
        * Alert Types
        */
    export type IAlertTypes = {
            Danger: number;
            Dark: number;
            Info: number;
            Light: number;
            Primary: number;
            Secondary: number;
            Success: number;
            Warning: number;
    }
}

declare module 'gd-bs/components/badge/types' {
    
    /**
        * ### Badge
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the badge
        * let el = document.querySelector("#badge");
        * let badge = Components.Badge({
        *     el: el,
        *     content: "Badge",
        *     isPill: true,
        *     type: Components.BadgeTypes.Success
        * });
        * ```
        */
    export const Badge: (props: IBadgeProps, template?: string) => IBadge;
    
    /**
        * Badge Types
        */
    export const BadgeTypes: IBadgeTypes;
    
    import { IBase, IBaseProps } from 'gd-bs/components/types';
    
    /**
        * Badge
        */
    export interface IBadge extends IBase<IBadgeProps> {
            /** The element. */
            el: HTMLAnchorElement | HTMLSpanElement;
    }
    
    /**
        * Badge Properties
        */
    export interface IBadgeProps<T=Element> extends IBaseProps<IBadge> {
            content?: string | T;
            data?: any;
            href?: string;
            isPill?: boolean;
            onClick?: (badge?: IBadgeProps, ev?: Event) => void;
            type?: number;
    }
    
    /**
        * Badge Types
        */
    export type IBadgeTypes = {
            Danger: number;
            Dark: number;
            Info: number;
            Light: number;
            Primary: number;
            Secondary: number;
            Success: number;
            Warning: number;
    }
}

declare module 'gd-bs/components/breadcrumb/types' {
    
    /**
        * ### Breadcrumb
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the breadcrumb
        * let el = document.querySelector("#breadcrumb");
        * let breadcrumb = Components.Breadcrumb({
        *     el: el,
        *     items: [
        *         { text: "Root", href: "/" },
        *         { text: "Web 1", href: "/web" },
        *         { text: "Web 1-1", href: "/web/1", isActive: true }
        *     ]
        * });
        * ```
        */
    export const Breadcrumb: (props: IBreadcrumbProps, template?: string) => IBreadcrumb;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Breadcrumb
        */
    export interface IBreadcrumb {
            /** Adds a breadcrumb item. */
            add: (item: IBreadcrumbItem) => void;
    
            /** The element. */
            el: HTMLElement;
    
            /** Hides the breadcrumb. */
            hide: () => void;
    
            /** Removes the last breadcrumb item. */
            remove: () => void;
    
            /** Removes a breadcrumb item by it's name property. */
            removeByName: (name: string) => void;
    
            /** Sets the breadcrumb items. */
            setItems: (items: IBreadcrumbItem[]) => void;
    
            /** Shows the breadcrumb. */
            show: () => void;
    }
    
    /**
        * Breadcrumb Item
        */
    export interface IBreadcrumbItem {
            /** Custom class names. */
            className?: string;
    
            /** The breadcrumb link */
            href?: string;
    
            /** Internal flag set by the component */
            isActive?: boolean;
    
            /** A unique name of the  */
            name?: string;
    
            /** Click event for the link */
            onClick?: (item?: IBreadcrumbItem, ev?: Event) => void;
    
            /** The link text */
            text?: string;
    }
    
    /**
        * Breadcrumb Properties
        */
    export interface IBreadcrumbProps extends IBaseProps {
            /** The breadcrumb items */
            items?: Array<IBreadcrumbItem>
    
            /** Click event for the link */
            onClick?: (item?: IBreadcrumbItem, ev?: Event) => void;
    }
}

declare module 'gd-bs/components/button/types' {
    
    /**
        * ### Button
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the button
        * let el = document.querySelector("#btn");
        * let btn = Components.Button({
        *     el: el,
        *     type: Components.ButtonTypes.OutlineSuccess,
        *     isLarge: true,
        *     onClick: function(ev) {
        *          alert("The button was clicked.");
        *     }
        * });
        * ```
        */
    export const Button: (props: IButtonProps, template?: string) => IButton;
    
    /**
        * Button Types
        */
    export const ButtonTypes: IButtonTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IBadgeProps } from "gd-bs/components/badge/types";
    import { ISpinnerProps } from "gd-bs/components/spinner/types";
    
    /**
        * Button
        */
    export interface IButton {
            /** The element. */
            el: HTMLAnchorElement | HTMLButtonElement;
    
            /** Disables the button. */
            disable: () => void;
    
            /** Enables the button. */
            enable: () => void;
    
            /** Hides the button. */
            hide: () => void;
    
            /** Updates the icon. */
            setIcon: (iconType: Function, iconSize: number, iconClassName?: string) => void;
    
            /** Updates the button text. */
            setText: (btnText?: string) => void;
    
            /** Updates the button type. */
            setType: (btnType: number) => void;
    
            /** Shows the button. */
            show: () => void;
    
            /** Toggles push state. Gives the button the appearance that it has been activated. */
            toggle: () => void;
    }
    
    /**
        * Button Properties
        */
    export interface IButtonProps extends IBaseProps<IButton> {
            badge?: IBadgeProps;
            controls?: string | Array<string>;
            data?: any;
            description?: string;
            dismiss?: string;
            href?: string;
            iconClassName?: string;
            iconSize?: number;
            iconType?: SVGImageElement | Function;
            id?: string;
            isBlock?: boolean;
            isDisabled?: boolean;
            isExpanded?: boolean;
            isLarge?: boolean;
            isLink?: boolean;
            isSmall?: boolean;
            label?: string;
            onClick?: (button?: IButtonProps, ev?: Event) => void;
            spinnerProps?: ISpinnerProps;
            tabIndex?: number;
            target?: string;
            text?: string;
            title?: string;
            toggle?: string;
            toggleObj?: any;
            trigger?: string;
            type?: number;
    }
    
    /**
        * Button Types
        */
    export type IButtonTypes = {
            Danger: number;
            Dark: number;
            Info: number;
            Light: number;
            Link: number;
            Primary: number;
            Secondary: number;
            Success: number;
            Warning: number;
            OutlineDanger: number;
            OutlineDark: number;
            OutlineInfo: number;
            OutlineLight: number;
            OutlineLink: number;
            OutlinePrimary: number;
            OutlineSecondary: number;
            OutlineSuccess: number;
            OutlineWarning: number;
    }
}

declare module 'gd-bs/components/buttonGroup/types' {
    
    /**
        * ### Button Group
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the buttonGroup
        * let el = document.querySelector("#buttonGroup");
        * let buttonGroup = Components.ButtonGroup({
        *     el: el,
        *     buttonType: $REST.Components.ButtonTypes.Primary,
        *     buttons: [
        *          { text: "Left", onClick: function() { alert("Left button was clicked."); } },
        *          { text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
        *          { text: "Right", onClick: function() { alert("Right button was clicked."); } }
        *     ]
        * });
        * ```
        */
    export const ButtonGroup: (props: IButtonGroupProps, template?: string, btnTemplate?: string) => IButtonGroup;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IButton, IButtonProps } from "gd-bs/components/button/types";
    
    /**
        * Button Group
        */
    export interface IButtonGroup {
            /** The element. */
            el: HTMLElement;
    
            /** Adds a button to the group. */
            add: (props: IButtonProps, btnTemplate?: string) => void;
    
            /** The buttons. */
            buttons: Array<IButton>;
    
            /** Hides the button group. */
            hide: () => void;
    
            /** Shows the button group. */
            show: () => void;
    }
    
    /**
        * Button Group Properties
        */
    export interface IButtonGroupProps extends IBaseProps<IButtonGroup> {
            buttons?: Array<IButtonProps>;
            buttonType?: number;
            id?: string;
            isLarge?: boolean;
            isSmall?: boolean;
            isVertical?: boolean;
            label?: string;
    }
}

declare module 'gd-bs/components/card/types' {
    
    /**
        * ### Card
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the card
        * let el = document.querySelector("#card");
        * let card = Components.Card({
        *     el: el,
        *     body: [
        *         {
        *             title: "Card Title",
        *             text: "This is the card contents.",
        *             actions: [
        *                 {
        *                     text: "Card Action",
        *                     buttonType: $REST.Components.ButtonTypes.Primary,
        *                     onClick: function(action, card) { alert(card.title + " was clicked."); }
        *                 }
        *             ]
        *         }
        *     ]
        * });
        * ```
        */
    export const Card: (props: ICardProps, template?: string) => ICard;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { INavProps } from "gd-bs/components/nav/types";
    
    /**
        * Card
        */
    export interface ICard {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the card. */
            hide: () => void;
    
            /** Shows the card. */
            show: () => void;
    }
    
    /**
        * Card Action
        */
    export interface ICardAction {
            buttonType?: number;
            data?: any;
            onClick?: (action?: ICardAction, card?: ICardBody, ev?: Event) => void;
            href?: string;
            text?: string;
    }
    
    /**
        * Card Body
        */
    export interface ICardBody<T = Element> {
            actions?: Array<ICardAction>;
            className?: string;
            content?: string | T;
            data?: any;
            onClick?: (card?: ICardProps, ev?: Event) => void;
            onRender?: (el?: HTMLElement, card?: ICardBody) => void;
            onRenderTitle?: (el?: HTMLElement, card?: ICardBody) => void;
            subTitle?: string;
            text?: string;
            title?: string | T;
    }
    
    /**
        * Card Footer
        */
    export interface ICardFooter<T = Element> {
            className?: string;
            content?: string | T;
            data?: any;
            onRender?: (el?: HTMLElement, card?: ICardFooter) => void;
    }
    
    /**
        * Card Header
        */
    export interface ICardHeader<T = Element> {
            className?: string;
            content?: string | T;
            data?: any;
            onRender?: (el?: HTMLElement, card?: ICardHeader) => void;
            nav?: INavProps;
    }
    
    /**
        * Card Properties
        */
    export interface ICardProps<T = Element> extends IBaseProps<ICard> {
            body?: Array<ICardBody<T>>;
            footer?: ICardFooter<T>;
            header?: ICardHeader<T>;
            imgBottom?: {
                    alt?: string;
                    src?: string;
            }
            imgTop?: {
                    alt?: string;
                    src?: string;
            };
            onClick?: (card?: ICardBody, ev?: Event) => void;
            onRender?: (el?: HTMLElement, card?: ICardProps) => void;
    }
}

declare module 'gd-bs/components/cardGroup/types' {
    
    /**
        * ### Card Group
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the cardGroup
        * let el = document.querySelector("#cardGroup");
        * let cardGroup = Components.CardGroup({
        *     el: el,
        *     cards: [
        *         {
        *             body: [
        *                 {
        *                     title: "Card 1",
        *                     subTitle: "SubTitle 1",
        *                     text: "This is the first card."
        *                 }
        *             ]
        *         },
        *         {
        *             body: [
        *                 {
        *                     title: "Card 2",
        *                     subTitle: "SubTitle 2",
        *                     text: "This is the second card."
        *                 }
        *             ]
        *         },
        *         {
        *             body: [
        *                 {
        *                     title: "Card 3",
        *                     subTitle: "SubTitle 3",
        *                     text: "This is the third card."
        *                 }
        *             ]
        *         }
        *     ]
        * });
        * ```
        */
    export const CardGroup: (props: ICardGroupProps, template?: string, cardTemplate?: string) => ICardGroup;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { ICardProps } from "gd-bs/components/card/types";
    
    /**
        * Card Group
        */
    export interface ICardGroup {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the card group. */
            hide: () => void;
    
            /** Shows the card group. */
            show: () => void;
    }
    
    /**
        * Card Group Properties
        */
    export interface ICardGroupProps extends IBaseProps<ICardGroup> {
            cards?: Array<ICardProps>;
            colSize?: number | string;
            onCardRender?: (el?: HTMLElement, props?: ICardProps) => void;
            onColRender?: (el?: HTMLElement, props?: ICardProps) => void;
            onRender?: (el?: HTMLElement, props?: ICardGroupProps) => void;
    }
}

declare module 'gd-bs/components/carousel/types' {
    
    /**
        * ### Carousel
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the carousel
        * let el = document.querySelector("#carousel");
        * let carousel = Components.Carousel({
        *     el: el,
        *     enableControls: true,
        *     enableIndicators: true,
        *     id: "carouselDemo",
        *     items: [
        *         {
        *             captions: "<h5>First Slide</h5>",
        *             imageUrl: "https://via.placeholder.com/400x200",
        *             imageAlt: "First Slide",
        *             isActive: true
        *         },
        *         {
        *             captions: "<h5>Second Slide</h5>",
        *             imageUrl: "https://via.placeholder.com/400x200",
        *             imageAlt: "Second Slide"
        *         },
        *         {
        *             captions: "<h5>Third Slide</h5>",
        *             imageUrl: "https://via.placeholder.com/400x200",
        *             imageAlt: "Third Slide"
        *         }
        *     ]
        * });
        * ```
        */
    export const Carousel: (props: ICarouselProps, template?: string, slideTemplate?: string) => ICarousel;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Carousel
        */
    export interface ICarousel {
            /**
                * Cycles through the carousel items from left to right.
                */
            cycle: () => void;
    
            /** The element. */
            el: HTMLElement;
    
            /** Hides the carousel. */
            hide: () => void;
    
            /**
                * Cycles to the next item.
                */
            next: () => void;
    
            /**
                * Stops the carousel from cycling through items.
                */
            pause: () => void;
    
            /**
                * Cycles to the previous item.
                */
            previous: () => void;
    
            /** Enables/Disables the dark theme. */
            setTheme: (isDark: boolean) => void;
    
            /** Shows the carousel. */
            show: () => void;
    
            /** Unpauses the carousel. */
            unpause: () => void;
    }
    
    /**
        * Carousel Item
        */
    export interface ICarouselItem<T = HTMLElement> {
            captions?: string;
            className?: string;
            content?: string | T;
            imageAlt?: string;
            imageUrl?: string;
            isActive?: boolean;
            onRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
    }
    
    /**
        * Carousel Options
        */
    export interface ICarouselOptions {
            interval?: number;
            keyboard?: boolean;
            pause?: boolean;
            slide?: number;
            wrap?: boolean;
    }
    
    /**
        * Carousel Properties
        */
    export interface ICarouselProps<T = HTMLElement> extends IBaseProps<ICarousel> {
            enableControls?: boolean;
            enableCrossfade?: boolean;
            enableIndicators?: boolean;
            id?: string;
            isDark?: boolean;
            items?: Array<ICarouselItem<T>>;
            onRendered?: (el?: HTMLElement, props?: ICarouselProps) => void;
            onSlideRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
            options?: ICarouselOptions;
    }
}

declare module 'gd-bs/components/checkboxGroup/types' {
    
    /**
        * ### Checkbox Group
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the buttonGroup
        * let el = document.querySelector("#cbGroup");
        * let cbGroup = Components.CheckboxGroup({
        *     el: el,
        *     multi: false,
        *     type: Components.CheckboxGroupTypes.Switch,
        *     items: [
        *         { label: "Option 1" },
        *         { label: "Option 2", isSelected: true },
        *         { label: "Option 3" }
        *     ]
        * });
        * ```
        */
    export const CheckboxGroup: (props: ICheckboxGroupProps, template?: string, cbTemplate?: string) => ICheckboxGroup;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Checkbox Group Types
        */
    export const CheckboxGroupTypes: ICheckboxTypes;
    
    /**
        * Checkbox Group
        */
    export interface ICheckboxGroup {
            /** The checkbox element. */
            el: HTMLElement;
    
            /** Gets the values. */
            getValue: () => ICheckboxGroupValue;
    
            /** Hides the checkbox group. */
            hide: () => void;
    
            /** Sets the checkbox items. */
            setItems: (value: Array<ICheckboxGroupItem>) => void;
    
            /** Sets the checkbox value. */
            setValue: (value: string | Array<string>) => void;
    
            /** Shows the checkbox group. */
            show: () => void;
    }
    
    /**
        * Checkbox Group Item
        */
    export interface ICheckboxGroupItem {
            data?: any;
            isDisabled?: boolean;
            isSelected?: boolean;
            label?: string;
            name?: string;
            onChange?: (selectedItem: ICheckboxGroupItem, ev?: Event) => void;
            title?: string;
            type?: number;
    }
    
    /**
        * Checkbox Group Properties
        */
    export interface ICheckboxGroupProps extends IBaseProps<ICheckboxGroup> {
            colSize?: number;
            hideLabel?: boolean;
            isDisabled?: boolean;
            isInline?: boolean;
            isReadonly?: boolean;
            label?: string;
            items?: Array<ICheckboxGroupItem>;
            multi?: boolean;
            onRender?: (el?: HTMLElement, item?: ICheckboxGroupItem) => void;
            onChange?: (selectedItems: ICheckboxGroupItem | ICheckboxGroupItem[], allItems?: ICheckboxGroupItem[], ev?: Event) => void;
            required?: boolean;
            title?: string;
            type?: number;
            value?: any;
    }
    
    export interface ICheckboxGroupValue {
            selectedItems: ICheckboxGroupItem | Array<ICheckboxGroupItem>;
            allItems: Array<ICheckboxGroupItem>;
    }
    
    /**
        * Checkbox Group Types
        */
    export type ICheckboxTypes = {
            Checkbox: number;
            Radio: number;
            Switch: number;
    }
}

declare module 'gd-bs/components/collapse/types' {
    
    /**
        * ### Collapse
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the collapse
        * let el = document.querySelector("#collapse");
        * let collapse = Components.Collapse({
        *     el: el,
        *     id: "demoCollapse",
        *     content: "This is the content to be collapsed.",
        *     options: { toggle: true }
        * });
        * 
        * // Create the button to toggle the collapse
        * let btn = Components.Button({
        *     el: document.querySelector("#btnCollapse"),
        *     toggleObj: collapse,
        *     text: "Collapse Demo"
        * });
        * ```
        */
    export const Collapse: (props: ICollapseProps, template?: string) => ICollapse;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Collapse
        */
    export interface ICollapse {
            /** The element. */
            el: HTMLElement;
    
            /** Hides a collapsible element. */
            hide: () => void;
    
            /** True if the collapse is visible. */
            isExpanded: boolean;
    
            /** Shows a collapsible element. */
            show: () => void;
    
            /** Toggles the collapsible element on invocation. */
            toggle: () => void;
    }
    
    /**
        * Collapse Options
        */
    export interface ICollapseOptions {
            toggle?: boolean;
    }
    
    /**
        * Collapse Properties
        */
    export interface ICollapseProps<T = HTMLElement> extends IBaseProps<ICollapse> {
            content?: string | T;
            data?: any;
            id?: string;
            isHorizontal?: boolean;
            isMulti?: boolean;
            onRender?: (el?: HTMLElement, props?: ICollapseProps) => void;
            options?: ICollapseOptions;
    }
}

declare module 'gd-bs/components/dropdown/types' {
    
    /**
        * ### Dropdown
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the dropdown
        * let el = document.querySelector("#dropdown");
        * let dropdown = Components.Dropdown({
        *     el: el,
        *     label: "Select a Choice",
        *     items: [
        *         { text: "Choice 1", value: "1" },
        *         { text: "Choice 2", value: "2" },
        *         { text: "Choice 3", value: "3" },
        *         { text: "Choice 4", value: "4" },
        *         { text: "Choice 5", value: "5" }
        *     ],
        *     onChange: (item, ev) => {
        *         console.log("The selected value is: " + item.text);
        *     }
        * });
        * ```
        */
    export const Dropdown: (props: IDropdownProps, template?: string) => IDropdown;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IButtonTypes } from "gd-bs/components/button/types";
    import { IFloatingUI, IFloatingUIProps, IFloatingUIPlacements } from "gd-bs/components/floating-ui/types";
    
    /**
        * Dropdown Placements
        */
    export const DropdownPlacements: IFloatingUIPlacements;
    
    /**
        * Dropdown Types
        */
    export const DropdownTypes: IButtonTypes;
    
    /**
        * Dropdown
        */
    export interface IDropdown {
            /** Disables the dropdown. */
            disable: () => void;
    
            /** Enables the dropdown. */
            enable: () => void;
    
            /** The element. */
            el: HTMLElement;
    
            /** Gets the selected dropdown item(s). */
            getValue: () => IDropdownItem | Array<IDropdownItem>;
    
            /** Hides the dropdown. */
            hide: () => void;
    
            /** True if the dropdown is a multi-select. */
            isMulti: boolean;
    
            /** The popover menu. */
            floatingUI: IFloatingUI;
    
            /** Updates the dropdown items. */
            setItems: (items: Array<IDropdownItem>) => void;
    
            /** Updates the label of the dropdown. */
            setLabel: (value: string) => void;
    
            /** Enables/Disables the dark theme. */
            setTheme: (isDark: boolean) => void;
    
            /** Updates the dropdown type. */
            setType: (ddlType: number) => void;
    
            /** Sets the dropdown value. */
            setValue: (value?: any | Array<any>) => void;
    
            /** Shows the dropdown. */
            show: () => void;
    
            /** Toggles the dropdown menu of a given navbar or tabbed navigation. */
            toggle: () => void;
    }
    
    /**
        * Dropdown Item
        */
    export interface IDropdownItem {
            className?: string;
            data?: any;
            href?: string;
            iconClassName?: string;
            iconSize?: number;
            iconType?: SVGImageElement | Function;
            isDisabled?: boolean;
            isDivider?: boolean;
            isHeader?: boolean;
            isSelected?: boolean;
            onClick?: (item?: IDropdownItem, ev?: Event) => void;
            onRender?: (el: HTMLElement, item?: IDropdownItem) => void;
            target?: string;
            text?: string;
            title?: string;
            toggle?: string;
            value?: string;
    }
    
    /**
        * Dropdown Properties
        */
    export interface IDropdownProps extends IBaseProps<IDropdown> {
            autoSelect?: boolean;
            btnClassName?: string;
            dropLeft?: boolean;
            dropRight?: boolean;
            dropUp?: boolean;
            formFl?: boolean;
            id?: string;
            isCheckbox?: boolean;
            isDark?: boolean;
            isDatalist?: boolean;
            isReadonly?: boolean;
            isSplit?: boolean;
            items?: Array<IDropdownItem>;
            label?: string;
            menuOnly?: boolean;
            multi?: boolean;
            navFl?: boolean;
            onChange?: (item?: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
            onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
            placement?: number;
            required?: boolean;
            search?: boolean;
            title?: string;
            type?: number;
            updateLabel?: boolean;
            value?: any;
    }
}

declare module 'gd-bs/components/form/controlTypes' {
    
    /**
        * ### Form Control
        */
    export const FormControl: (props: IFormControlProps) => IFormControl;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { ICheckboxGroup, ICheckboxGroupItem } from "gd-bs/components/checkboxGroup/types";
    import { IDropdown, IDropdownItem, IDropdownProps } from "gd-bs/components/dropdown/types";
    import { IInputGroup } from "gd-bs/components/inputGroup/types";
    import { IListBox } from "gd-bs/components/listBox/types";
    import { IFloatingUIProps } from "gd-bs/components/floating-ui/types";
    
    /**
        * Custom Controls
        */
    export const CustomControls: {
            // Gets the event by type
            getByType(key: number): (props?: IFormControlProps) => void;
    
            /** Registers a custom form control type. */
            registerType: (key: number, onRender: (props?: IFormControlProps) => void) => void;
    }
    
    /**
        * Form Control Types
        */
    export const FormControlTypes: IFormControlTypes;
    
    /**
        * Form Control
        */
    export interface IFormControl {
            checkbox: ICheckboxGroup;
            control: ICheckboxGroup | IDropdown | IInputGroup | IListBox;
            dropdown: IDropdown;
            el: HTMLElement;
            getValue: () => any;
            hide: () => void;
            isLoaded: () => PromiseLike<void>;
            isRendered: boolean;
            isValid: boolean;
            label?: HTMLElement;
            props: IFormControlProps;
            textbox: IInputGroup;
            setLabel: (value: string) => void;
            setControl: (control: any) => void;
            setValue: (value: any) => void;
            show: () => void;
            updateValidation: (elControl: HTMLElement, validation: IFormControlValidationResult) => void;
    }
    
    /**
        * Form Control Properties
        */
    export interface IFormControlProps extends IBaseProps<IFormControl> {
            controlClassName?: string;
            data?: any;
            description?: string;
            errorMessage?: string;
            id?: string;
            isDisabled?: boolean;
            isReadonly?: boolean;
            isPlainText?: boolean;
            label?: string;
            loadingMessage?: string;
            name?: string;
            onControlRendering?: (control: IFormControlProps) => void | PromiseLike<IFormControlProps>;
            onControlRendered?: (control: IFormControl) => void | PromiseLike<IFormControl>;
            onGetValue?: (control: IFormControlProps) => any;
            onValidate?: (control: IFormControlProps, results: IFormControlValidationResult) => boolean | IFormControlValidationResult;
            required?: boolean;
            title?: string;
            type?: number;
            validationType?: number;
            value?: any;
    }
    
    /**
        * Form Control Properties - Checkbox
        */
    export interface IFormControlPropsCheckbox extends IFormControlProps {
            colSize?: number;
            el?: HTMLInputElement;
            hideLabel?: boolean;
            isInline?: boolean;
            items?: Array<ICheckboxGroupItem>;
            onChange?: (selectedItem: ICheckboxGroupItem, allItems?: Array<ICheckboxGroupItem>, ev?: Event) => void;
            onControlRendering?: (control: IFormControlPropsCheckbox) => void | PromiseLike<IFormControlPropsCheckbox>;
            onGetValue?: (control: IFormControlPropsCheckbox) => any;
            onValidate?: (control: IFormControlPropsCheckbox, results: IFormControlValidationResult<ICheckboxGroupItem>, allItems?: Array<ICheckboxGroupItem>) => boolean | IFormControlValidationResult<ICheckboxGroupItem>;
    }
    
    /**
        * Form Control Properties - Dropdown
        */
    export interface IFormControlPropsDropdown extends IFormControlProps {
            items?: Array<IDropdownItem>;
            onChange?: (item: IDropdownItem, ev?: Event) => void;
            onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
            onGetValue?: (control: IFormControlPropsDropdown) => any;
            onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
            onValidate?: (control: IFormControlPropsDropdown, results: IFormControlValidationResult<IDropdownItem>) => boolean | IFormControlValidationResult<IDropdownItem>;
    }
    
    /**
        * Form Control Properties - Dropdown Button
        */
    export interface IFormControlPropsDropdownButton extends IFormControlPropsDropdown {
            placeholder?: string;
            placement?: number;
    }
    
    /**
        * Form Control Properties - Dropdown Checkbox
        */
    export interface IFormControlPropsDropdownCheckbox extends IFormControlPropsDropdownButton { }
    
    /**
        * Form Control Properties - List Box
        */
    export interface IFormControlPropsListBox extends IFormControlProps {
            items?: Array<IDropdownItem>;
            onChange?: (items: IDropdownItem, ev?: Event) => void;
            onControlRendering?: (control: IFormControlPropsListBox) => void | PromiseLike<IFormControlPropsListBox>;
            onGetValue?: (control: IFormControlPropsListBox) => any;
            onValidate?: (control: IFormControlPropsListBox, results: IFormControlValidationResult<IDropdownItem>) => boolean | IFormControlValidationResult<IDropdownItem>;
            placeholder?: string;
    }
    
    /**
        * Form Control Properties - Multiple Checkbox
        */
    export interface IFormControlPropsMultiCheckbox extends IFormControlProps {
            colSize?: number;
            el?: HTMLInputElement;
            hideLabel?: boolean;
            isInline?: boolean;
            items?: Array<ICheckboxGroupItem>;
            onChange?: (selectedItems: Array<ICheckboxGroupItem>, allItems?: Array<ICheckboxGroupItem>, ev?: Event) => void;
            onControlRendering?: (control: IFormControlPropsCheckbox) => void | PromiseLike<IFormControlPropsCheckbox>;
            onGetValue?: (control: IFormControlPropsCheckbox) => any;
            onValidate?: (control: IFormControlPropsCheckbox, results: IFormControlValidationResult<Array<ICheckboxGroupItem>>, allItems?: Array<ICheckboxGroupItem>) => boolean | IFormControlValidationResult<Array<ICheckboxGroupItem>>;
            renderRow?: boolean;
    }
    
    /**
        * Form Control Properties - Multiple Dropdown
        */
    export interface IFormControlPropsMultiDropdown extends IFormControlProps {
            items?: Array<IDropdownItem>;
            onChange?: (item: Array<IDropdownItem>, ev?: Event) => void;
            onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
            onGetValue?: (control: IFormControlPropsDropdown) => any;
            onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
            onValidate?: (control: IFormControlPropsDropdown, results: IFormControlValidationResult<Array<IDropdownItem>>) => boolean | IFormControlValidationResult<Array<IDropdownItem>>;
    }
    
    /**
        * Form Control Properties - Multiple Dropdown Button
        */
    export interface IFormControlPropsMultiDropdownButton extends IFormControlPropsMultiDropdown {
            placeholder?: string;
            placement?: number;
    }
    
    /**
        * Form Control Properties - Multiple Dropdown Checkbox
        */
    export interface IFormControlPropsMultiDropdownCheckbox extends IFormControlPropsMultiDropdownButton { }
    
    /**
        * Form Control Properties - Multiple List Box
        */
    export interface IFormControlPropsMultiListBox extends IFormControlProps {
            items?: Array<IDropdownItem>;
            onChange?: (items: Array<IDropdownItem>, ev?: Event) => void;
            onControlRendering?: (control: IFormControlPropsListBox) => void | PromiseLike<IFormControlPropsListBox>;
            onGetValue?: (control: IFormControlPropsListBox) => any;
            onValidate?: (control: IFormControlPropsListBox, results: IFormControlValidationResult<Array<IDropdownItem>>) => boolean | IFormControlValidationResult<Array<IDropdownItem>>;
            placeholder?: string;
    }
    
    /**
        * Form Control Properties - Multiple Switch
        */
    export interface IFormControlPropsMultiSwitch extends IFormControlPropsMultiCheckbox { }
    
    /**
        * Form Control Properties - Number Field
        */
    export interface IFormControlPropsNumberField extends IFormControlPropsTextField {
            max?: number;
            min?: number;
            onControlRendering?: (control: IFormControlPropsNumberField) => void | PromiseLike<IFormControlPropsNumberField>;
            onGetValue?: (control: IFormControlPropsNumberField) => any;
            onValidate?: (control: IFormControlPropsNumberField, results: IFormControlValidationResult<string>) => boolean | IFormControlValidationResult<string>;
            step?: number;
    }
    
    /**
        * Form Control Properties - Range
        */
    export interface IFormControlPropsRange extends IFormControlPropsNumberField { }
    
    /**
        * Form Control Properties - Switch
        */
    export interface IFormControlPropsSwitch extends IFormControlPropsCheckbox { }
    
    /**
        * Form Control Properties - TextField
        */
    export interface IFormControlPropsTextField extends IFormControlProps {
            appendedDropdown?: IDropdownProps;
            appendedLabel?: string;
            el?: HTMLInputElement;
            onChange?: (value: string, ev?: Event) => void;
            onControlRendering?: (control: IFormControlPropsTextField) => void | PromiseLike<IFormControlPropsTextField>;
            onGetValue?: (control: IFormControlPropsTextField) => any;
            onValidate?: (control: IFormControlPropsTextField, results: IFormControlValidationResult<string>) => boolean | IFormControlValidationResult<string>;
            placeholder?: string;
            prependedDropdown?: IDropdownProps;
            prependedLabel?: string;
            rows?: number;
    }
    
    /**
        * Form Control Types
        */
    export type IFormControlTypes = {
            Checkbox: number;
            ColorPicker: number;
            Email: number;
            Datalist: number;
            Dropdown: number;
            DropdownButton: number;
            DropdownCheckbox: number;
            File: number;
            ListBox: number;
            MultiCheckbox: number;
            MultiDropdown: number;
            MultiDropdownButton: number;
            MultiDropdownCheckbox: number;
            MultiListBox: number;
            MultiRadio: number;
            MultiSwitch: number;
            Password: number;
            Radio: number;
            Range: number;
            Readonly: number;
            Switch: number;
            TextArea: number;
            TextField: number;
    }
    
    /**
        * Form Control Validation Result
        */
    export interface IFormControlValidationResult<T = any> {
            invalidMessage?: string;
            isValid?: boolean;
            validMessage?: string;
            value?: T;
    }
}

declare module 'gd-bs/components/form/formTypes' {
    
    /**
        * ### Form
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the form
        * let el = document.querySelector("#myForm");
        * let form = Components.Form({
        *     el: el,
        *     rows: [
        *         {
        *             control: {
        *                 label: "First Name:",
        *                 name: "FName",
        *                 type: Components.FormControlTypes.TextField
        *             }
        *         },
        *         {
        *             control: {
        *                 label: "Last Name:",
        *                 name: "LName",
        *                 type: Components.FormControlTypes.TextField
        *             }
        *         },
        *         {
        *             control: {
        *                 label: "Choices:",
        *                 name: "Choice",
        *                 type: Components.FormControlTypes.Dropdown,
        *                 items: [
        *                     { text: "Choice 1", value: "1" },
        *                     { text: "Choice 2", value: "2" },
        *                     { text: "Choice 3", value: "3" },
        *                     { text: "Choice 4", value: "4" },
        *                     { text: "Choice 5", value: "5" }
        *                 ]
        *             }
        *         }
        *     ],
        *     value: {
        *         FName: "Gunjan",
        *         LName: "Datta",
        *         Choice: "3"
        *     }
        * });
        * ```
        */
    export const Form: (props: IFormProps) => IForm;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IFormControl, IFormControlProps } from "gd-bs/components/form/controlTypes";
    
    /**
        * Form Validation Types
        */
    export const FormValidationTypes: IFormValidationTypes;
    
    /**
        * Form
        */
    export interface IForm {
            /** Appends controls to the form */
            appendControls: (controls: Array<IFormControlProps>) => void;
    
            /** Appends rows to the form */
            appendRows: (rows: Array<IFormRow>) => void;
    
            /** The form controls */
            controls: Array<IFormControl>;
    
            /** The form element */
            el: HTMLFormElement;
    
            /** Gets a control by its name */
            getControl: (name: string) => IFormControl;
    
            /** Returns the form values */
            getValues: () => { [key: string]: any };
    
            /** Hides the form. */
            hide: () => void;
    
            /** Inserts a control into the form */
            insertControl: (idx: number, control: IFormControlProps) => void;
    
            /** Validates the form */
            isValid: () => boolean;
    
            /** Shows the form. */
            show: () => void;
    }
    
    /**
        * Form Column
        */
    export interface IFormColumn {
            className?: string;
            control: IFormControlProps;
            isAutoSized?: boolean;
            size?: number;
    }
    
    /**
        * Form Properties
        */
    export interface IFormProps extends IBaseProps<IForm> {
            controls?: Array<IFormControlProps>;
            groupClassName?: string;
            isFloating?: boolean;
            onControlRendering?: (control: IFormControlProps) => void | PromiseLike<IFormControlProps>;
            onControlRendered?: (control: IFormControl) => void | PromiseLike<IFormControl>;
            onRendered?: (controls: Array<IFormControl>) => void;
            rowClassName?: string;
            rows?: Array<IFormRow>;
            validationType?: number;
            value?: any;
    }
    
    /**
        * Form Row
        */
    export interface IFormRow {
            className?: string;
            isAutoSized?: boolean;
            isCentered?: boolean;
            isDisabled?: boolean;
            isReadOnly?: boolean;
            columns?: Array<IFormColumn>;
    }
    
    /**
        * Form Validation Types
        */
    export type IFormValidationTypes = {
            Default: number;
            Tooltip: number;
    }
}

declare module 'gd-bs/components/inputGroup/types' {
    
    /**
        * ### Input Group
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the inputGroup
        * let el = document.querySelector("#inputGroup");
        * let inputGroup = Components.InputGroup({
        *     el: el,
        *     label: "My Name:",
        *     value: "First Last"
        * });
        * ```
        */
    export const InputGroup: (props: IInputGroupProps, template?: string) => IInputGroup;
    
    /**
        * Input Group Types
        */
    export const InputGroupTypes: IInputGroupTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IButtonProps } from "gd-bs/components/button/types";
    import { IDropdown, IDropdownProps } from "gd-bs/components/dropdown/types";
    
    /** Input Group File Value */
    export interface IInputGroupFileValue {
            data: ArrayBuffer;
            name: string;
    }
    
    /**
        * Input Group
        */
    export interface IInputGroup {
            /** Reference to the appended dropdown. */
            appendedDropdown: IDropdown;
    
            /** The input group element. */
            el: HTMLElement;
    
            /** Reference to the textbox input/textarea element. */
            elTextbox: HTMLInputElement | HTMLTextAreaElement;
    
            /** Disables the textbox */
            disable: () => void;
    
            /** Enables the textbox */
            enable: () => void;
    
            /** Method to get the file information. */
            getFileInfo: () => IInputGroupFileValue;
    
            /** Method to get the value. */
            getValue: () => string;
    
            /** Hides the input group. */
            hide: () => void;
    
            /** Reference to the prepended dropdown. */
            prependedDropdown: IDropdown;
    
            /** Method to set the value. */
            setValue: (value: string) => void;
    
            /** Shows the input group. */
            show: () => void;
    }
    
    /**
        * Input Group Properties
        */
    export interface IInputGroupProps extends IBaseProps<IInputGroup> {
            appendedButtons?: Array<IButtonProps>;
            appendedDropdown?: IDropdownProps;
            appendedLabel?: string;
            formFl?: boolean;
            id?: string;
            isDisabled?: boolean;
            isLarge?: boolean;
            isReadonly?: boolean;
            isSmall?: boolean;
            label?: string;
            max?: number;
            min?: number;
            onClear?: () => void;
            onChange?: (value?: string, ev?: Event) => void;
            placeholder?: string;
            prependedButtons?: Array<IButtonProps>;
            prependedDropdown?: IDropdownProps;
            prependedLabel?: string;
            required?: boolean;
            rows?: number;
            step?: number;
            title?: string;
            type?: number;
            value?: string;
    }
    
    /**
        * Input Group Types
        */
    export type IInputGroupTypes = {
            ColorPicker: number;
            Email: number;
            File: number;
            Password: number;
            Range: number;
            Search: number;
            TextArea: number;
            TextField: number;
    }
}

declare module 'gd-bs/components/jumbotron/types' {
    
    /**
        * ### Jumbotron
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the jumbotron
        * let el = document.querySelector("#jumbotron");
        * let jumbotron = Components.Jumbotron({
        *     el: el,
        *     title: "My Jumbotron",
        *     lead: "This is a jumbotron"
        * });
        * ```
        */
    export const Jumbotron: (props: IJumbotronProps, template?: string) => IJumbotron;
    export const JumbotronSize: IJumbotronSize;
    export const JumbotronTypes: IJumbotronTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Jumbotron
        */
    export interface IJumbotron {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the jumbotron. */
            hide: () => void;
    
            /** Shows the jumbotron. */
            show: () => void;
    }
    
    /**
        * Jumbotron Properties
        */
    export interface IJumbotronProps<T = Element> extends IBaseProps<IJumbotron> {
            content?: string | T;
            isFluid?: boolean;
            lead?: string;
            onRenderContent?: (el?: HTMLElement) => void;
            size?: number;
            title?: string;
            type?: number;
    }
    
    /**
        * Jumbotron Size
        */
    export type IJumbotronSize = {
            XSmall: number;
            Small: number;
            Medium: number;
            Large: number;
            XLarge: number;
    }
    /**
        * Jumbotron Types
        */
    export type IJumbotronTypes = {
            Danger: number;
            Dark: number;
            Info: number;
            Light: number;
            Primary: number;
            Secondary: number;
            Success: number;
            Warning: number;
    }
}

declare module 'gd-bs/components/listBox/types' {
    
    /**
        * List Box
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the list box
        * let el = document.querySelector("#list-box");
        * Components.Collapse({
        *     el: el,
        *     label: "Colors",
        *     placeholder: "Search Colors",
        *     items: [
        *          { text: "Red", value: "red" },
        *          { text: "Blue", value: "blue" },
        *          { text: "Green", value: "green" },
        *          { text: "Purple", value: "purple" },
        *          { text: "Brown", value: "brown" },
        *          { text: "Yellow", value: "yellow" },
        *          { text: "Orange", value: "orange" }
        *     ]
        * });
        * ```
        */
    export const ListBox: (props: IListBoxProps, template?: string) => IListBox;
    
    import { IBase, IBaseProps } from "gd-bs/components/types";
    import { IDropdownItem } from "gd-bs/components/dropdown/types";
    
    /**
        * List Box
        */
    export interface IListBox extends IBase<IListBoxProps> {
            /** The element. */
            el: HTMLElement;
    
            /** The selected listbox items. */
            getValue: () => IDropdownItem | Array<IDropdownItem>;
    
            /** Sets the options */
            setOptions: (items: Array<IDropdownItem>) => void;
    
            /** Sets the listbox value. */
            setValue: (value?: string | Array<string> | Array<IDropdownItem>) => void;
    }
    
    /**
        * List Box Properties
        */
    export interface IListBoxProps extends IBaseProps<IListBox> {
            label?: string;
            id?: string;
            isReadonly?: boolean;
            items: Array<IDropdownItem>;
            multi?: boolean;
            onLoadData?: () => Array<IDropdownItem> | PromiseLike<Array<IDropdownItem>>;
            onChange?: (items: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
            placeholder?: string;
            required?: boolean;
            value?: string | Array<string>;
    }
}

declare module 'gd-bs/components/listGroup/types' {
    
    /**
        * ### List Group
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the listGroup
        * let el = document.querySelector("#listGroup");
        * let listGroup = Components.listGroup({
        *     el: el,
        *     colWidth: 4,
        *     isTabs: true,
        *     items: [
        *         { tabName: "Tab 1", content: "This is the content for tab 1.", isActive: true },
        *         { tabName: "Tab 2", content: "This is the content for tab 2.", badge: { content: "10", type: 4 } },
        *         { tabName: "Tab 3", content: "This is the content for tab 3." },
        *         { tabName: "Tab 4", content: "This is the content for tab 4." },
        *         { tabName: "Tab 5", content: "This is the content for tab 5." }
        *     ]
        * });
        * ```
        */
    export const ListGroup: (props: IListGroupProps, template?: string, itemTemplate?: string) => IListGroup;
    
    /**
        * List Group Item Types
        */
    export const ListGroupItemTypes: IListGroupItemTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IBadgeProps } from "gd-bs/components/badge/types";
    
    /**
        * List Group
        */
    export interface IListGroup {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the list group. */
            hide: () => void;
    
            /**
                * Shows the list group, or specified tab content.
                * @prop elId - The tab id.
                */
            show: (tabId?: string) => void;
    }
    
    /**
        * List Group Item
        */
    export interface IListGroupItem<T=Element> {
            badge?: IBadgeProps;
            className?: string;
            content?: string | T;
            data?: any;
            href?: string;
            isActive?: boolean;
            isDisabled?: boolean;
            onClick?: (el?: HTMLElement, item?: IListGroupItem) => void;
            onRender?: (el?: HTMLElement, item?: IListGroupItem) => void;
            onRenderTab?: (el?: HTMLElement, item?: IListGroupItem) => void;
            tabName?: string;
            type?: number;
    }
    
    /**
        * List Group Properties
        */
    export interface IListGroupProps<T=Element> extends IBaseProps<IListGroup> {
            colWidth?: number;
            fadeTabs?: boolean;
            isFlush?: boolean;
            isHorizontal?: boolean;
            isNumbered?: boolean;
            isTabs?: boolean;
            items?: Array<IListGroupItem<T>>;
            tabClassName?: string;
    }
    
    /**
        * List Group Item Types
        */
    export type IListGroupItemTypes = {
            Danger: number;
            Dark: number;
            Info: number;
            Light: number;
            Primary: number;
            Secondary: number;
            Success: number;
            Warning: number;
    }
}

declare module 'gd-bs/components/modal/types' {
    
    /**
        * ### Modal
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Modal elements should be added to the body
        * var elModal = document.querySelector("#modal-demo");
        * if(elModal === null) {
        *      elModal = document.createElement("div");
        *      elModal.id = "modal-demo";
        *      document.body.appendChild(elModal);
        * }
        * 
        * // Create the modal
        * let modal = Components.Modal({
        *     el: el,
        *     id: "modalDemo",
        *     title: "Modal Demo",
        *     type: Components.ModalTypes.Small,
        *     body: "This is the body of the modal."
        * });
        * 
        * // Create the button
        * Components.Button({
        *     el: document.querySelector("#modalDemo"),
        *     text: "Show Modal",
        *     toggleObj: modal,
        *     type: Components.ButtonTypes.OutlinePrimary
        * });
        * ```
        */
    export const Modal: (props: IModalProps, template?: string) => IModal;
    
    /**
        * Modal Types
        */
    export const ModalTypes: IModalTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Modal
        */
    export interface IModal<T = HTMLElement> {
            /** The element. */
            el: HTMLElement;
    
            /** Manually hides a modal. */
            hide: () => void;
    
            /** Returns true if the modal is visible. */
            isVisible: boolean;
    
            /** Updates the auto close flag. */
            setAutoClose: (value: boolean) => void;
    
            /** Updates the backdrop flag. */
            setBackdrop: (value: boolean) => void;
    
            /** Updates the visibility of the close button. */
            setCloseButtonVisibility: (showFl: boolean) => void;
    
            /** Updates the focus flag. */
            setFocus: (value: boolean) => void;
    
            /** Updates the center option. */
            setIsCentered: (value: boolean) => void;
    
            /** Updates the keyboard flag. */
            setKeyboard: (value: boolean) => void;
    
            /** Updates the scrollable option. */
            setScrollable: (value: boolean) => void;
    
            /** Updates the title. */
            setTitle: (title: string | T) => void;
    
            /** Updates the type. */
            setType: (modalType: number) => void;
    
            /** Manually opens a modal. */
            show: () => void;
    
            /** Manually toggles a modal. */
            toggle: () => void;
    }
    
    /**
        * Modal Options
        */
    export interface IModalOptions {
            /** True to automatically close the modal when clicking outside of it. */
            autoClose?: boolean;
    
            /** True to enable the backdrop when the modal is visible. */
            backdrop?: boolean;
    
            /** Sets the centered option */
            centered?: boolean;
    
            /** Puts the focus on the modal when initialized. */
            focus?: boolean;
    
            /** Closes the modal when escape key is pressed. */
            keyboard?: boolean;
    
            /** Makes the body scrollable */
            scrollable?: boolean;
    
            /** True to toggle the modal on creation. */
            visible?: boolean;
    }
    
    /**
        * Modal Properties
        */
    export interface IModalProps<T = HTMLElement> extends IBaseProps<IModal> {
            body?: string | T;
            disableFade?: boolean;
            footer?: string | T;
            header?: string | T;
            hideCloseButton?: boolean;
            id?: string;
            onClose?: (el: HTMLDivElement) => void;
            onRenderBody?: (el: HTMLDivElement) => void;
            onRenderHeader?: (el: HTMLDivElement) => void;
            onRenderFooter?: (el: HTMLDivElement) => void;
            options?: IModalOptions;
            title?: string;
            type?: number;
    }
    
    /**
        * Checkbox Group Types
        */
    export type IModalTypes = {
            Small: number;
            Medium: number;
            Large: number;
            XLarge: number;
            Full: number;
            FullSmall: number;
            FullMedium: number;
            FullLarge: number;
            FullXLarge: number;
    }
}

declare module 'gd-bs/components/nav/types' {
    
    /**
        * ### Navigation
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
    
        * // Create the navigation
        * let el = document.querySelector("#navigation");
        * let nav = Components.Nav({
        *     el: el,
        *     isJustified: true,
        *     isPills: true,
        *     isTabs: true,
        *     items: [
        *         { title: "Nav 1", tabContent: "This is the content for tab 1.", isActive: true },
        *         { title: "Nav 2", tabContent: "This is the content for tab 2." },
        *         { title: "Nav 3", tabContent: "This is the content for tab 3." },
        *         { title: "Nav 4", tabContent: "This is the content for tab 4." },
        *         { title: "Nav 5", onRenderTab: function(el) { el.innerHTML = "This is the content for tab 5."; } }
        *     ]
        * });
        * ```
        */
    export const Nav: (props: INavProps, template?: string, itemTemplate?: string) => INav;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Navigation
        */
    export interface INav {
            /** The active tab. */
            activeTab: INavLink;
    
            /** The element. */
            el: HTMLUListElement;
    
            /** Hides the navigation. */
            hide: () => void;
    
            /**
                * Shows the navigation or selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden.
                * @prop selector - The query selector.
                */
            show: (selector?: string) => void;
    
            /**
                * Shows a tab by it's id or index.
                */
            showTab: (tabId?: string | number) => void;
    }
    
    /**
        * Navigation Properties
        */
    export interface INavProps<T = HTMLElement> extends IBaseProps<INav> {
            data?: any;
            enableFill?: boolean;
            fadeTabs?: boolean;
            id?: string;
            items?: Array<INavLinkProps<T>>;
            isJustified?: boolean;
            isPills?: boolean;
            isTabs?: boolean;
            isUnderline?: boolean;
            isVertical?: boolean;
            menuOnly?: boolean;
            onClick?: (newTab?: INavLink, prevTab?: INavLink) => void;
            onLinkRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;
            onRendered?: (el?: HTMLElement) => void;
            onTabRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;
    }
    
    /**
        * Navigation Link
        */
    export interface INavLink {
            elTab: HTMLAnchorElement;
            elTabContent: HTMLDivElement;
            isActive: boolean;
            tabName: string;
            toggle: (fadeTabs?: boolean) => void;
    }
    
    /**
        * Navigation Link Properties
        */
    export interface INavLinkProps<T = HTMLElement> extends IBaseProps<INavLink> {
            isActive?: boolean;
            isDisabled?: boolean;
            className?: string;
            data?: any;
            href?: string;
            onClick?: (item?: INavLinkProps, ev?: Event) => void;
            onRender?: (el?: HTMLElement, item?: INavLinkProps) => void;
            onRenderTab?: (el?: HTMLDivElement, item?: INavLinkProps) => void;
            tabContent?: string | T;
            title?: string;
    }
}

declare module 'gd-bs/components/navbar/types' {
    
    /**
        * ### Navbar
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the navbar
        * let el = document.querySelector("#navbar");
        * let navbar = Components.Navbar({
        *     el: el,
        *     brand: "Navbar",
        *     searchBox: {
        *         onChange: (value) => {
        *             // Log the value
        *             console.log("The search value is: " + value);
        *         },
        *         onSearch: (value) => {
        *             // Log the value
        *             console.log("The search value is: " + value);
        *         }
        *     },
        *     items: [
        *         {
        *             text: "Home",
        *             isActive: true
        *         },
        *         {
        *             text: "Link"
        *         },
        *         {
        *             text: "Disabled Link",
        *             isDisabled: true
        *         },
        *         {
        *             text: "Dropdown Link",
        *             items: [
        *                 { text: "Link 1" },
        *                 { text: "Link 2" },
        *                 { text: "Link 3" },
        *                 { text: "Link 4" },
        *                 { text: "Link 5" }
        *             ]
        *         }
        *     ]
        * });
        * ```
        */
    export const Navbar: (props: INavbarProps, template?: string, itemTemplate?: string) => INavbar;
    
    /**
        * Navbar Types
        */
    export const NavbarTypes: INavbarTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IDropdownItem } from "gd-bs/components/dropdown/types";
    import { IFloatingUIProps } from "gd-bs/components/floating-ui/types";
    
    /**
        * Navbar
        */
    export interface INavbar {
            /** The element. */
            el: HTMLBaseElement;
    
            /** Method to get the search box value. */
            getSearchValue?: () => string;
    
            /** Hides the nav bar. */
            hide: () => void;
    
            /** Updates the navbar type. */
            setType: (navbarType: number) => void;
    
            /** Shows the nav bar. */
            show: () => void;
    }
    
    /**
        * Navbar Item
        */
    export interface INavbarItem {
            className?: string;
            classNameItem?: string;
            data?: any;
            href?: string;
            iconClassName?: string;
            iconSize?: number;
            iconType?: SVGImageElement | Function;
            isActive?: boolean;
            isButton?: boolean;
            isDisabled?: boolean;
            items?: Array<IDropdownItem>;
            onClick?: (item?: INavbarItem, ev?: Event) => void;
            onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
            onRender?: (el?: HTMLElement, item?: INavbarItem) => void;
            target?: string;
            text?: string;
            toggle?: string;
            toggleObj?: any;
    }
    
    /**
        * Navbar Properties
        */
    export interface INavbarProps<T = HTMLElement> extends IBaseProps<INavbar> {
            brand?: string | T;
            brandUrl?: string;
            enableScrolling?: boolean;
            enableSearch?: boolean;
            id?: string;
            items?: Array<INavbarItem>;
            itemsEnd?: Array<INavbarItem>;
            onClick?: (item?: INavbarItem, ev?: Event) => void;
            onClickBrand?: (el?: HTMLElement, ev?: Event) => void;
            onItemRendered?: (el?: HTMLElement, item?: INavbarItem) => void;
            onRendered?: (el?: HTMLElement) => void;
            searchBox?: INavbarSearchBox;
            type?: number;
    }
    
    /**
        * Navbar Types
        */
    export type INavbarTypes = {
            Dark: number;
            Light: number;
            Primary: number;
    }
    
    /**
        * Navbar Search Box
        */
    export interface INavbarSearchBox {
            btnType?: number;
            btnText?: string;
            hideButton?: boolean;
            onChange?: (value?: string, ev?: Event) => void;
            onSearch?: (value?: string, ev?: Event) => void;
            placeholder?: string;
            value?: string;
    }
}

declare module 'gd-bs/components/offcanvas/types' {
    
    /**
        * Offcanvas
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Offcanvas elements should be added to the body
        * var elOffcanvas = document.querySelector("#offcanvas-demo");
        * if(elOffcanvas === null) {
        *      elOffcanvas = document.createElement("div");
        *      elOffcanvas.id = "offcanvas-demo";
        *      document.body.appendChild(elOffcanvas);
        * }
        * 
        * // Create the offcanvas
        * let el = document.querySelector("#offcanvasDemo");
        * let offcanvas = Components.Offcanvas({
        *     el: el,
        *     id: "offcanvasDemo",
        *     title: "Offcanvas Demo",
        *     body: "This is the body of the offcanvas.",
        *     type: Components.OffcanvasTypes.End
        * });
        * 
        * // Create the button
        * Components.Button({
        *     el: document.querySelector("#offcanvasDemo"),
        *     text: "Show Offcanvas",
        *     toggleObj: offcanvas
        * });
        * ```
        */
    export const Offcanvas: (props: IOffcanvasProps, template?: string) => IOffcanvas;
    
    /**
        * Offcanvas Sizes
        */
    export const OffcanvasSize: IOffcanvasSize;
    
    /**
        * Offcanvas Types
        */
    export const OffcanvasTypes: IOffcanvasTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Offcanvas
        */
    export interface IOffcanvas {
            /** The element. */
            el: HTMLElement;
    
            /** Hides a collapsible element. */
            hide: () => void;
    
            /** Returns true if the modal is visible. */
            isVisible: boolean;
    
            /** Updates the auto close flag. */
            setAutoClose: (value: boolean) => void;
    
            /** Updates the size. */
            setSize: (canvasSize: number) => void;
    
            /** Updates the type. */
            setType: (canvasType: number) => void;
    
            /** Shows a collapsible element. */
            show: () => void;
    
            /** Toggles the collapsible element on invocation. */
            toggle: () => void;
    }
    
    /**
        * Offcanvas Properties
        */
    export interface IOffcanvasProps<T = HTMLElement> extends IBaseProps<IOffcanvas> {
            body?: string | T;
            data?: any;
            id?: string;
            onClose?: (el: HTMLDivElement) => void;
            onRenderBody?: (el?: HTMLDivElement, props?: IOffcanvasProps) => void;
            onRenderHeader?: (el?: HTMLDivElement, props?: IOffcanvasProps) => void;
            options?: IOffcanvasOptions;
            size?: number;
            title?: string | T;
            type?: number;
    }
    
    /**
        * Offcanvas Options
        */
    export interface IOffcanvasOptions {
            /** True to automatically close the offcanvas when clicking outside of it. */
            autoClose?: boolean;
    
            /** True to enable the backdrop when the offcanvas is visible. */
            backdrop?: boolean;
    
            /** Puts the focus on the offcanvas when initialized. */
            focus?: boolean;
    
            /** Closes the offcanvas when escape key is pressed. */
            keyboard?: boolean;
    
            /** True to enable scrolling of the background. */
            scroll?: boolean;
    
            /** True to toggle the offcanvas on creation. */
            visible?: boolean;
    }
    
    /**
        * Offcanvas Size
        */
    export type IOffcanvasSize = {
            Small: number;
            Small1: number;
            Small2: number;
            Small3: number;
            Medium: number;
            Medium1: number;
            Medium2: number;
            Medium3: number;
            Large: number;
            Large1: number;
            Large2: number;
            Large3: number;
            XLarge: number;
            XXLarge: number;
            Full: number;
    }
    
    /**
        * Offcanvas Types
        */
    export type IOffcanvasTypes = {
            Bottom: number;
            End: number;
            Start: number;
            Top: number;
    }
}

declare module 'gd-bs/components/pagination/types' {
    
    /**
        * ### Pagination
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the pagination
        * let el = document.querySelector("#pagination");
        * let pagination = Components.Pagination({
        *     el: el,
        *     numberOfPages: 5,
        *     onClick: (index, ev) => {
        *         // Log the index
        *         console.log("The page number selected is: " + index);
        *     }
        * });
        * ```
        */
    export const Pagination: (props: IPaginationProps, template?: string, itemTemplate?: string) => IPagination;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Pagination Alignment
        */
    export const PaginationAlignment: IPaginationAlignment;
    
    /**
        * Pagination
        */
    export interface IPagination {
            /** The element. */
            el: HTMLBaseElement;
    
            /** Hides the pagination. */
            hide: () => void;
    
            /** Shows the pagination. */
            show: () => void;
    }
    
    /**
        * Pagination Properties
        */
    export interface IPaginationProps extends IBaseProps<IPagination> {
            alignment?: number;
            isLarge?: boolean;
            isSmall?: boolean;
            label?: string;
            numberOfPages?: number;
            onClick?: (pageNumber?: number, ev?: Event) => void;
    }
    
    /**
        * Pagination Alignment
        */
    export type IPaginationAlignment = {
            Centered: number;
            Left: number;
            Right: number;
    }
}

declare module 'gd-bs/components/popover/types' {
    
    /**
        * ### Popover
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the popover
        * let el = document.querySelector("#popover");
        * let popover = Components.Popover({
        *     el: el,
        *     className: "m-2",
        *     text: "My Popover",
        *     btnProps: {
        *         text: "Popover Demo",
        *         type: Components.ButtonTypes.OutlineDark
        *     },
        *     options: {
        *         content: elContent,
        *         trigger: "focus"
        *     }
        * });
        * ```
        */
    export const Popover: (props: IPopoverProps, template?: string) => IPopover;
    
    /**
        * Popover Placements
        */
    export const PopoverPlacements: IFloatingUIPlacements;
    
    /**
        * Popover Types
        */
    export const PopoverTypes: IFloatingUITypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IButtonProps } from "gd-bs/components/button/types";
    import { IFloatingUI, IFloatingUIOptions, IFloatingUIPlacements, IFloatingUITypes } from "gd-bs/components/floating-ui/types";
    
    /**
        * Popover
        */
    export interface IPopover {
            /** The element. */
            el: HTMLElement;
    
            /** The floating ui instance. */
            floatingUI: IFloatingUI;
    
            /** Enables the popover. */
            enable: () => void;
    
            /** Hides an element’s popover. */
            hide: () => void;
    
            /** True if the popover is visible, false otherwise. */
            isVisible: boolean;
    
            /** Toggles an element's popover. */
            toggle: () => void;
    
            /** Sets the body element of the popover. */
            setBody: (content: string | Element) => void;
    
            /** Sets the floating ui content. */
            setContent: (content: string | Element) => void;
    
            /** Sets the header element of the popover. */
            setHeader: (content: string | Element) => void;
    
            /** Reveals an element’s popover. */
            show: () => void;
    }
    
    /**
        * Popover Properties
        */
    export interface IPopoverProps extends IBaseProps<IPopover> {
            btnProps?: IButtonProps;
            classNameBody?: string;
            classNameHeader?: string;
            isDismissible?: boolean;
            options?: IFloatingUIOptions;
            placement?: number;
            show?: boolean;
            target?: HTMLElement,
            title?: string;
            type?: number;
    }
}

declare module 'gd-bs/components/progress/types' {
    
    /**
        * ### Progress
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the progress
        * let el = document.querySelector("#progress");
        * let progress = Components.Progress({
        *     el: el,
        *     size: 25,
        *     label: "25%"
        * });
        * ```
        */
    export const Progress: (props: IProgressProps, template?: string) => IProgress;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Progress
        */
    export interface IProgress {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the progress. */
            hide: () => void;
    
            /** The progress bar element */
            progressBar: HTMLDivElement;
    
            /** Shows the progress. */
            show: () => void;
    }
    
    /**
        * Progress Properties
        */
    export interface IProgressProps extends IBaseProps<IProgress> {
            isAnimated?: boolean;
            isStriped?: boolean;
            label?: string;
            max?: number;
            min?: number;
            size?: number;
            type?: number;
    }
}

declare module 'gd-bs/components/progressGroup/types' {
    
    /**
        * ### Progress Group
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the progress group
        * let el = document.querySelector("#progressGroup");
        * let progressGroup = Components.ProgressGroup({
        *     el: el,
        *     progressbars: [
        *         {
        *             size: 25,
        *             isStriped: true,
        *             label: "25%"
        *         },
        *         {
        *             size: 50,
        *             isAnimated: true,
        *             isStriped: true,
        *             label: "50%"
        *         }
        *     ]
        * });
        * ```
        */
    export const ProgressGroup: (props: IProgressGroupProps, template?: string, progressTemplate?: string) => IProgressGroup;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IProgressProps } from "gd-bs/components/progress/types";
    
    /**
        * Progress Group
        */
    export interface IProgressGroup {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the progress group. */
            hide: () => void;
    
            /** Shows the progress group. */
            show: () => void;
    }
    
    /**
        * Progress Group Properties
        */
    export interface IProgressGroupProps extends IBaseProps<IProgressGroup> {
            isMultiple?: boolean;
            progressbars?: Array<IProgressProps>;
    }
}

declare module 'gd-bs/components/spinner/types' {
    
    /**
        * ### Spinner
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create a spinner
        * let el = document.querySelector("#spinner");
        * Components.Spinner({
        *     el,
        *     text: "Loading...",
        *     type: Components.SpinnerTypes.Danger
        * });
        * ```
        */
    export const Spinner: (props: ISpinnerProps, template?: string) => ISpinner;
    
    /**
        * Spinner Types
        */
    export const SpinnerTypes: ISpinnerTypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Spinner
        */
    export interface ISpinner {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the spinner. */
            hide: () => void;
    
            /** Shows the spinner. */
            show: () => void;
    }
    
    /**
        * Spinner Properties
        */
    export interface ISpinnerProps extends IBaseProps<ISpinner> {
            isGrowing?: boolean;
            isSmall?: boolean;
            text?: string;
            type?: number;
    }
    
    /**
        * Spinner Types
        */
    export type ISpinnerTypes = {
            Danger: number;
            Dark: number;
            Info: number;
            Light: number;
            Primary: number;
            Secondary: number;
            Success: number;
            Warning: number;
    }
}

declare module 'gd-bs/components/table/types' {
    
    /**
        * ### Table
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the table
        * let el = document.querySelector("#table");
        * let table = Components.Table({
        *     el: el,
        *     className: "table-sm is-striped",
        *     columns: [
        *         { name: "a0", title: "Actions", isHidden: true },
        *         { name: "a1", title: "Col 1" },
        *         { name: "a2", title: "Col 2" },
        *         { name: "a3", title: "Col 3" }
        *     ],
        *     rows: [
        *         { a0: "1", a1: "1.1", a2: "1.2", a3: "1.3" },
        *         { a0: "2", a1: "2.1", a2: "2.2", a3: "2.3" },
        *         { a0: "3", a1: "3.1", a2: "3.2", a3: "3.3" },
        *         { a0: "4", a1: "4.1", a2: "4.2", a3: "4.3" },
        *         { a0: "5", a1: "5.1", a2: "5.2", a3: "5.3" },
        *         { a0: "6", a1: "6.1", a2: "6.2", a3: "6.3" },
        *         { a0: "7", a1: "7.1", a2: "7.2", a3: "7.3" },
        *         { a0: "8", a1: "8.1", a2: "8.2", a3: "8.3" },
        *         { a0: "9", a1: "9.1", a2: "9.2", a3: "9.3" }
        *     ]
        * });
        * ```
        */
    export const Table: (props: ITableProps, template?: string) => ITable
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Table
        */
    export interface ITable {
            addRows: (rows: Array<any>) => void;
    
            el: HTMLTableElement;
    
            /** Hides the table. */
            hide: () => void;
    
            /** Shows the table. */
            show: () => void;
    }
    
    /**
        * Table Properties
        */
    export interface ITableProps extends IBaseProps<ITable> {
            columns?: Array<ITableColumn>;
            onClickCell?: (el: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
            onClickFooter?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
            onClickHeader?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
            onRenderCell?: (el?: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
            onRenderFooterCell?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
            onRenderFooterRow?: (el?: HTMLTableRowElement) => void;
            onRenderHeaderCell?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
            onRenderHeaderRow?: (el?: HTMLTableRowElement) => void;
            onRenderRow?: (el?: HTMLTableRowElement, data?: any, rowIdx?: number) => void;
            rows?: Array<any>;
    }
    
    /**
        * Table Column
        */
    export interface ITableColumn {
            className?: string;
            data?: any;
            footer?: string;
            isHidden?: boolean;
            name: string;
            onClickCell?: (el: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
            onClickFooter?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
            onClickHeader?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
            onRenderCell?: (el: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
            onRenderFooter?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
            onRenderHeader?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
            scope?: string;
            title?: string;
    }
}

declare module 'gd-bs/components/toast/types' {
    
    /**
        * ### Toast
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create a toast
        * let el = document.querySelector("#toast");
        * Components.Toast({
        *     el,
        *     headerText: "Header",
        *     body: "This is the body of the toast.",
        *     mutedText: "2 seconds ago",
        *     options: { autohide: false }
        * });
        * ```
        */
    export const Toast: (props: IToastProps, template?: string) => IToast;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    /**
        * Toast
        */
    export interface IToast {
            /** The component element. */
            el: HTMLElement;
    
            /** Hides the toast. */
            hide: () => void;
    
            /** Shows the toast. */
            show: () => void;
    }
    
    /**
        * Toast Properties
        */
    export interface IToastProps<T = HTMLElement> extends IBaseProps<IToast> {
            body?: string | T;
            data?: any;
            headerImgClass?: string;
            headerImgSrc?: string;
            headerText?: string;
            mutedText?: string;
            options?: IToastOptions;
            onClick?: (el?: HTMLElement, data?: any) => void;
            onRenderBody?: (el?: HTMLElement, data?: any) => void;
            onRenderHeader?: (el?: HTMLElement, data?: any) => void;
    }
    
    /**
        * Toast Options
        */
    export interface IToastOptions {
            animation?: boolean;
            autohide?: boolean;
            delay?: number;
    }
}

declare module 'gd-bs/components/toolbar/types' {
    
    /**
        * ### Toolbar
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create a toolbar
        * let el = document.querySelector("#toolbar");
        * Components.Toolbar({
        *     el,
        *     spacing: 3,
        *     items: [
        *         { buttons: [{ text: "Button 1" }] },
        *         { buttons: [{ text: "Button 2" }] },
        *         { buttons: [{ text: "Button 3" }] },
        *         { buttons: [{ text: "Button 4" }] },
        *         { buttons: [{ text: "Button 5" }] }
        *     ]
        * });
        * ```
        */
    export const Toolbar: (props: IToolbarProps, template?: string) => IToolbar;
    
    /**
        * Toolbar
        */
    export interface IToolbar {
            /** The element. */
            el: HTMLElement;
    
            /** Hides the toolbar. */
            hide: () => void;
    
            /** Shows the toolbar. */
            show: () => void;
    }
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IButtonProps } from "gd-bs/components/button/types";
    import { IInputGroupProps } from "gd-bs/components/inputGroup/types";
    
    /**
        * Toolbar Item
        */
    export interface IToolbarItem {
            buttons?: Array<IButtonProps>;
            buttonType?: number;
            inputGroup?: IInputGroupProps;
    }
    
    /**
        * Toolbar Properties
        */
    export interface IToolbarProps extends IBaseProps<IToolbar> {
            items?: Array<IToolbarItem>;
            spacing?: number;
    }
}

declare module 'gd-bs/components/tooltip/types' {
    
    /**
        * ### Tooltip
        * 
        * ```ts
    import { Components } from "gd-sprest-bs";
    
    // Create the tooltip
    let el = document.querySelector("#tooltip");
    let tooltip = Components.Tooltip({
            el: el,
            content: "This is the tooltip content.",
            placement: Components.TooltipPlacements.Top,
            theme: Components.TooltipTypes.LightBorder,
            btnProps: {
                    text: "Tooltip",
                    type: Components.ButtonTypes.OutlineDark
            }
    });
    ```
        */
    export const Tooltip: (props: ITooltipProps, template?: string) => ITooltip;
    
    /**
        * Tooltip Placements
        */
    export const TooltipPlacements: IFloatingUIPlacements;
    
    /**
        * Tooltip Types
        */
    export const TooltipTypes: IFloatingUITypes;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { IButtonProps, IButton } from "gd-bs/components/button/types";
    import { IDropdownProps, IDropdown } from "gd-bs/components/dropdown/types";
    import { IFloatingUI, IFloatingUIOptions, IFloatingUIPlacements, IFloatingUITypes } from "gd-bs/components/floating-ui/types";
    
    /**
        * Tooltip
        */
    export interface ITooltip {
            /** Reference to the button. */
            button?: IButton;
    
            /** The element. */
            el: HTMLButtonElement;
    
            /** Gives an element’s tooltip the ability to be shown. */
            enable: () => void;
    
            /** Hides an element’s tooltip. */
            hide: () => void;
    
            /** Reference to the dropdown. */
            ddl?: IDropdown;
    
            /** The floating ui instance. */
            floatingUI: IFloatingUI;
    
            /** Toggles an element's tooltip. */
            toggle: () => void;
    
            /** Sets the floating ui content. */
            setContent: (content: string | Element) => void;
    
            /** Reveals an element’s tooltip. */
            show: () => void;
    }
    
    /**
        * Tooltip Properties
        */
    export interface ITooltipProps extends IBaseProps<ITooltip> {
            btnProps?: IButtonProps;
            ddlProps?: IDropdownProps;
            content?: string | Element;
            options?: IFloatingUIOptions;
            placement?: number;
            show?: boolean;
            target?: HTMLElement;
            type?: number;
    }
}

declare module 'gd-bs/components/tooltipGroup/types' {
    
    /**
        * ### Tooltip Group
        * 
        * ```ts
        * import { Components } from "gd-sprest-bs";
        * 
        * // Create the group
        * let el = document.querySelector("#buttonGroup");
        * let tooltipGroup = Components.TooltipGroup({
        *     el: el,
        *     buttonType: $REST.Components.ButtonTypes.Primary,
        *     buttons: [
        *          { text: "Left", onClick: function() { alert("Left button was clicked."); } },
        *          { text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
        *          { text: "Right", onClick: function() { alert("Right button was clicked."); } }
        *     ]
        * });
        * ```
        */
    export const TooltipGroup: (props: ITooltipGroupProps, template?: string, btnTemplate?: string) => ITooltipGroup;
    
    import { IBaseProps } from "gd-bs/components/types";
    import { ITooltip, ITooltipProps } from "gd-bs/components/tooltip/types";
    import { IFloatingUIOptions } from "gd-bs/components/floating-ui/types";
    
    /**
        * Tooltip Group
        */
    export interface ITooltipGroup {
            /** Adds a button to the group. */
            add: (props: ITooltipProps, btnTemplate?: string) => void;
    
            /** The element. */
            el: HTMLElement;
    
            /** The tooltips. */
            tooltips: Array<ITooltip>;
    
            /** Hides the button group. */
            hide: () => void;
    
            /** Shows the button group. */
            show: () => void;
    }
    
    /**
        * Tooltip Group Properties
        */
    export interface ITooltipGroupProps extends IBaseProps<ITooltipGroup> {
            tooltips?: Array<ITooltipProps>;
            buttonType?: number;
            id?: string;
            isLarge?: boolean;
            isSmall?: boolean;
            isVertical?: boolean;
            label?: string;
            tooltipOptions?: IFloatingUIOptions;
            tooltipPlacement?: number;
            tooltipType?: number;
    }
}

declare module 'gd-bs/components/types' {
    /**
        * Base
        */
    export interface IBase<IProps = IBaseProps> {
            /** Internal method to configure the parent element. */
            configureParent(): HTMLElement;
    
            /** The component HTML element */
            el: HTMLElement;
    
            /** Hides the component. */
            hide(): void;
    
            /** The component properties */
            props: IProps;
    
            /** Shows the component. */
            show(): void;
    }
    
    /**
        * Base Properties
        */
    export interface IBaseProps<IBaseObj = any> {
            /** Assigns the object to the input parameter. */
            assignTo?: (obj: IBaseObj) => void;
    
            /** Custom class names. */
            className?: string;
    
            /** The element to render the component to. */
            el?: HTMLElement;
    }
}

declare module 'gd-bs/components/floating-ui/types' {
    export const FloatingUI: (props: IFloatingUIProps) => IFloatingUI;
    
    import { IBaseProps } from "gd-bs/components/types";
    
    export const FloatingUIPlacements: IFloatingUIPlacements;
    
    export interface IFloatingUI {
            addIgnoreElement: (el: Element) => void;
            hide: () => void;
            isVisible: boolean;
            refreshPosition: () => void;
            removeIgnoreElement: (el: Element) => void;
            setContent: (el: string | Element) => void;
            show: () => void;
            toggle: () => void;
    }
    
    export interface IFloatingUIOptions {
            arrow?: boolean;
            autoPlacement?: boolean | any;
            className?: string;
            content?: string | Element;
            flip?: boolean | any;
            hide?: boolean | any;
            hideOnClick?: boolean;
            inline?: boolean | any;
            offset?: number | any;
            shift?: boolean | any;
            size?: boolean | any;
            trigger?: '' | 'click' | 'focus' | 'mouse';
    }
    
    export interface IFloatingUIProps extends IBaseProps<IFloatingUI> {
            elContent: HTMLElement;
            elTarget: HTMLElement;
            onHide?: (el?: HTMLElement) => void;
            onShow?: (el?: HTMLElement) => void;
            options?: IFloatingUIOptions;
            placement?: number;
            show?: boolean;
            theme?: number;
    }
    
    /**
        * Floating UI Placements
        */
    export type IFloatingUIPlacements = {
            Auto: number;
            AutoStart: number;
            AutoEnd: number;
            Bottom: number;
            BottomStart: number;
            BottomEnd: number;
            Left: number;
            LeftStart: number;
            LeftEnd: number;
            Right: number;
            RightStart: number;
            RightEnd: number;
            Top: number;
            TopStart: number;
            TopEnd: number;
    }
    /**
        * Floating UI
        */
    export type IFloatingUITypes = {
            Danger: number;
            Dark: number;
            Info: number;
            Light: number;
            LightBorder: number;
            Material: number;
            Primary: number;
            Secondary: number;
            Success: number;
            Translucent: number;
            Warning: number;
    }
}