gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
1,505 lines (1,319 loc) • 104 kB
TypeScript
// Generated by dts-bundle v0.7.3
declare module 'gd-bs' {
import * as Components from "gd-bs/components/components";
export {
Components
}
}
declare module 'gd-bs/components/components' {
export * from "gd-bs/components/accordion/types";
export * from "gd-bs/components/alert/types";
export * from "gd-bs/components/badge/types";
export * from "gd-bs/components/breadcrumb/types";
export * from "gd-bs/components/button/types";
export * from "gd-bs/components/buttonGroup/types";
export * from "gd-bs/components/card/types";
export * from "gd-bs/components/cardGroup/types";
export * from "gd-bs/components/carousel/types";
export * from "gd-bs/components/checkboxGroup/types";
export * from "gd-bs/components/collapse/types";
export * from "gd-bs/components/dropdown/types";
export * from "gd-bs/components/form/controlTypes";
export * from "gd-bs/components/form/formTypes";
export * from "gd-bs/components/inputGroup/types";
export * from "gd-bs/components/jumbotron/types";
export * from "gd-bs/components/listBox/types";
export * from "gd-bs/components/listGroup/types";
export * from "gd-bs/components/modal/types";
export * from "gd-bs/components/nav/types";
export * from "gd-bs/components/navbar/types";
export * from "gd-bs/components/offcanvas/types";
export * from "gd-bs/components/pagination/types";
export * from "gd-bs/components/popover/types";
export * from "gd-bs/components/progress/types";
export * from "gd-bs/components/progressGroup/types";
export * from "gd-bs/components/spinner/types";
export * from "gd-bs/components/table/types";
export * from "gd-bs/components/toast/types";
export * from "gd-bs/components/toolbar/types";
export * from "gd-bs/components/tooltip/types";
export * from "gd-bs/components/tooltipGroup/types";
}
declare module 'gd-bs/components/accordion/types' {
/**
* ### Accordion
*
* ```ts
* import { Components } from "gd-sprest-bs";
*
* // Create the accordion
* let el = document.querySelector("#accordion");
* let accordion = Components.Accordion({
* autoCollapse: true,
* el: el,
* id: "demoAccordion",
* items: [
* {
* header: "Item 1",
* content: "This is the content for item 1.",
* showFl: true
* },
* {
* header: "Item 2",
* content: "This is the content for item 2."
* },
* {
* header: "Item 3",
* content: "This is the content for item 3."
* }
* ]
* });
* ```
*/
export const Accordion: (props: IAccordionProps, template?: string, itemTemplate?: string) => IAccordion;
import { IBase, IBaseProps } from "gd-bs/components/types";
/**
* Accordion
*/
export interface IAccordion extends IBase<IAccordionProps> { }
/**
* Accordion Item
*/
export interface IAccordionItem<T = HTMLElement> {
data?: any;
className?: string;
content?: string | T;
header?: string;
onClick?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
onRender?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
onRenderBody?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
onRenderHeader?: (el?: HTMLElement, item?: IAccordionItem<T>) => void;
showFl?: boolean;
}
/**
* Accordion Properties
*/
export interface IAccordionProps<T = HTMLElement> extends IBaseProps<IAccordion> {
autoCollapse?: boolean;
id?: string;
items?: Array<IAccordionItem<T>>;
}
}
declare module 'gd-bs/components/alert/types' {
/**
* ### Alert
*
* ```ts
* import { Components } from "gd-sprest-bs";
*
* // Create the alert
* let el = document.querySelector("#alert");
* let alert = Components.Alert({
* el: el,
* header: "Demo",
* content: "This is an alert.",
* isDismissible: true,
* type: Components.AlertTypes.Success
* });
* ```
*/
export const Alert: (props: IAlertProps, template?: string) => IAlert;
/**
* Alert Types
*/
export const AlertTypes: IAlertTypes;
import { IBase, IBaseProps } from "gd-bs/components/types";
/**
* Alert
*/
export interface IAlert extends IBase<IAlertProps> {
/** Closes an alert by removing it from the DOM. */
close: () => void;
/** Updates the alert text. */
setText: (alertText?: string) => void;
/** Updates the alert type. */
setType: (alertType: number) => void;
}
/**
* Alert Properties
*/
export interface IAlertProps<T = HTMLElement> extends IBaseProps<IAlert> {
content?: string | T;
data?: any;
header?: string;
isDismissible?: boolean;
onClose?: (props?: IAlertProps) => void;
type?: number;
}
/**
* Alert Types
*/
export type IAlertTypes = {
Danger: number;
Dark: number;
Info: number;
Light: number;
Primary: number;
Secondary: number;
Success: number;
Warning: number;
}
}
declare module 'gd-bs/components/badge/types' {
/**
* ### Badge
*
* ```ts
* import { Components } from "gd-sprest-bs";
*
* // Create the badge
* let el = document.querySelector("#badge");
* let badge = Components.Badge({
* el: el,
* content: "Badge",
* isPill: true,
* type: Components.BadgeTypes.Success
* });
* ```
*/
export const Badge: (props: IBadgeProps, template?: string) => IBadge;
/**
* Badge Types
*/
export const BadgeTypes: IBadgeTypes;
import { IBase, IBaseProps } from 'gd-bs/components/types';
/**
* Badge
*/
export interface IBadge extends IBase<IBadgeProps> {
/** The element. */
el: HTMLAnchorElement | HTMLSpanElement;
}
/**
* Badge Properties
*/
export interface IBadgeProps<T=Element> extends IBaseProps<IBadge> {
content?: string | T;
data?: any;
href?: string;
isPill?: boolean;
onClick?: (badge?: IBadgeProps, ev?: Event) => void;
type?: number;
}
/**
* Badge Types
*/
export type IBadgeTypes = {
Danger: number;
Dark: number;
Info: number;
Light: number;
Primary: number;
Secondary: number;
Success: number;
Warning: number;
}
}
declare module 'gd-bs/components/breadcrumb/types' {
/**
* ### Breadcrumb
*
* ```ts
* import { Components } from "gd-sprest-bs";
*
* // Create the breadcrumb
* let el = document.querySelector("#breadcrumb");
* let breadcrumb = Components.Breadcrumb({
* el: el,
* items: [
* { text: "Root", href: "/" },
* { text: "Web 1", href: "/web" },
* { text: "Web 1-1", href: "/web/1", isActive: true }
* ]
* });
* ```
*/
export const Breadcrumb: (props: IBreadcrumbProps, template?: string) => IBreadcrumb;
import { IBaseProps } from "gd-bs/components/types";
/**
* Breadcrumb
*/
export interface IBreadcrumb {
/** Adds a breadcrumb item. */
add: (item: IBreadcrumbItem) => void;
/** The element. */
el: HTMLElement;
/** Hides the breadcrumb. */
hide: () => void;
/** Removes the last breadcrumb item. */
remove: () => void;
/** Removes a breadcrumb item by it's name property. */
removeByName: (name: string) => void;
/** Sets the breadcrumb items. */
setItems: (items: IBreadcrumbItem[]) => void;
/** Shows the breadcrumb. */
show: () => void;
}
/**
* Breadcrumb Item
*/
export interface IBreadcrumbItem {
/** Custom class names. */
className?: string;
/** The breadcrumb link */
href?: string;
/** Internal flag set by the component */
isActive?: boolean;
/** A unique name of the */
name?: string;
/** Click event for the link */
onClick?: (item?: IBreadcrumbItem, ev?: Event) => void;
/** The link text */
text?: string;
}
/**
* Breadcrumb Properties
*/
export interface IBreadcrumbProps extends IBaseProps {
/** The breadcrumb items */
items?: Array<IBreadcrumbItem>
/** Click event for the link */
onClick?: (item?: IBreadcrumbItem, ev?: Event) => void;
}
}
declare module 'gd-bs/components/button/types' {
/**
* ### Button
*
* ```ts
* import { Components } from "gd-sprest-bs";
*
* // Create the button
* let el = document.querySelector("#btn");
* let btn = Components.Button({
* el: el,
* type: Components.ButtonTypes.OutlineSuccess,
* isLarge: true,
* onClick: function(ev) {
* alert("The button was clicked.");
* }
* });
* ```
*/
export const Button: (props: IButtonProps, template?: string) => IButton;
/**
* Button Types
*/
export const ButtonTypes: IButtonTypes;
import { IBaseProps } from "gd-bs/components/types";
import { IBadgeProps } from "gd-bs/components/badge/types";
import { ISpinnerProps } from "gd-bs/components/spinner/types";
/**
* Button
*/
export interface IButton {
/** The element. */
el: HTMLAnchorElement | HTMLButtonElement;
/** Disables the button. */
disable: () => void;
/** Enables the button. */
enable: () => void;
/** Hides the button. */
hide: () => void;
/** Updates the icon. */
setIcon: (iconType: Function, iconSize: number, iconClassName?: string) => void;
/** Updates the button text. */
setText: (btnText?: string) => void;
/** Updates the button type. */
setType: (btnType: number) => void;
/** Shows the button. */
show: () => void;
/** Toggles push state. Gives the button the appearance that it has been activated. */
toggle: () => void;
}
/**
* Button Properties
*/
export interface IButtonProps extends IBaseProps<IButton> {
badge?: IBadgeProps;
controls?: string | Array<string>;
data?: any;
description?: string;
dismiss?: string;
href?: string;
iconClassName?: string;
iconSize?: number;
iconType?: SVGImageElement | HTMLElement | 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 | HTMLElement | Function;
isDisabled?: boolean;
isDivider?: boolean;
isHeader?: boolean;
isSelected?: boolean;
onClick?: (item?: IDropdownItem, ev?: Event) => void;
onRender?: (el: HTMLElement, item?: IDropdownItem) => void;
target?: string;
text?: string;
title?: string;
toggle?: string;
value?: string;
}
/**
* Dropdown Properties
*/
export interface IDropdownProps extends IBaseProps<IDropdown> {
autoSelect?: boolean;
btnClassName?: string;
dropLeft?: boolean;
dropRight?: boolean;
dropUp?: boolean;
formFl?: boolean;
id?: string;
isCheckbox?: boolean;
isDark?: boolean;
isDatalist?: boolean;
isReadonly?: boolean;
isSplit?: boolean;
items?: Array<IDropdownItem>;
label?: string;
menuOnly?: boolean;
multi?: boolean;
navFl?: boolean;
onChange?: (item?: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
placement?: number;
required?: boolean;
search?: boolean;
title?: string;
type?: number;
updateLabel?: boolean;
value?: any;
}
}
declare module 'gd-bs/components/form/controlTypes' {
/**
* ### Form Control
*/
export const FormControl: (props: IFormControlProps) => IFormControl;
import { IBaseProps } from "gd-bs/components/types";
import { ICheckboxGroup, ICheckboxGroupItem } from "gd-bs/components/checkboxGroup/types";
import { IDropdown, IDropdownItem, IDropdownProps } from "gd-bs/components/dropdown/types";
import { IInputGroup } from "gd-bs/components/inputGroup/types";
import { IListBox } from "gd-bs/components/listBox/types";
import { IFloatingUIProps } from "gd-bs/components/floating-ui/types";
/**
* Custom Controls
*/
export const CustomControls: {
// Gets the event by type
getByType(key: number): (props?: IFormControlProps) => void;
/** Registers a custom form control type. */
registerType: (key: number, onRender: (props?: IFormControlProps) => void) => void;
}
/**
* Form Control Types
*/
export const FormControlTypes: IFormControlTypes;
/**
* Form Control
*/
export interface IFormControl {
checkbox: ICheckboxGroup;
control: ICheckboxGroup | IDropdown | IInputGroup | IListBox;
dropdown: IDropdown;
el: HTMLElement;
getValue: () => any;
hide: () => void;
isLoaded: () => PromiseLike<void>;
isRendered: boolean;
isValid: boolean;
label?: HTMLElement;
props: IFormControlProps;
textbox: IInputGroup;
setDescription: (value: string) => void;
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 | HTMLElement;
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 | HTMLElement;
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 | HTMLElement;
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;
/** Clears the validation on the form. */
clearValidation: () => 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;
}
/**
*