gd-bs 6.6.91 → 6.6.92

package/dist/gd-bs.d.ts

@@ -0,0 +1,3249 @@
+// Generated by dts-bundle v0.7.3
+
+declare module 'gd-bs' {
+    import * as Components from "gd-bs/components/components";
+    var render: (el: HTMLElement) => void;
+    
+    export {
+        Components, render
+    }
+}
+
+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;
+            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;
+            rowClassName?: string;
+            rows?: Array<IFormRow>;
+            onControlRendering?: (control: IFormControlProps) => void | PromiseLike<IFormControlProps>;
+            onControlRendered?: (control: IFormControl) => void | PromiseLike<IFormControl>;
+            onRendered?: (controls: Array<IFormControl>) => void;
+            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;
+    
+            /** 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 { IFloatingUIOptions, IFloatingUIPlacements, IFloatingUITypes } from "gd-bs/components/floating-ui/types";
+    
+    /**
+        * Popover
+        */
+    export interface IPopover {
+            /** The element. */
+            el: HTMLElement;
+    
+            /** The floating ui instance. */
+            floatingUI: any;
+    
+            /** 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 { 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: any;
+    
+            /** 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 {
+            hide: () => void;
+            isVisible: boolean;
+            setContent: (el: string | Element) => void;
+            show: () => void;
+            toggle: () => void;
+    }
+    
+    export interface IFloatingUIOptions {
+            arrow?: boolean;
+            autoPlacement?: boolean | any;
+            className?: string;
+            content?: string;
+            flip?: boolean | any;
+            hide?: boolean | any;
+            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;
+            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;
+    }
+}
+