gd-bs/src/components/button/types.d.ts

Bootstrap JavaScript, TypeScript and Web Components library.

/**
 * <div id="demo"></div>
 * <script src="https://unpkg.com/gd-sprest-bs/dist/gd-sprest-bs.js"></script>
 * <script type="text/javascript">
 *     // Wait for the window to be loaded
 *     window.addEventListener("load", function() {
 *         // Render the button
 *         $REST.Components.Button({
 *             el: document.querySelector("#demo"),
 *             text: "Button",
 *             type: $REST.Components.ButtonTypes.OutlineSuccess,
 *             isLarge: true,
 *             onClick: function(ev) {
 *                  alert("The button was clicked.");
 *             }
 *         });
 *     });
 * </script>
 */

/**
 * ### 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 "../types";
import { IBadgeProps } from "../badge/types";
import { ISpinnerProps } from "../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;
}