Module components/components

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."
        }
    ]
});

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
});

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
});

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 }
    ]
});

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.");
    }
});

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."); } }
    ]
});

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."); }
                }
            ]
        }
    ]
});

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."
                }
            ]
        }
    ]
});

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"
        }
    ]
});

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" }
    ]
});

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"
});

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);
    }
});

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"
    }
});

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"
});

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"
});

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" }
    ]
});

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." }
    ]
});

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
});

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."; } }
    ]
});

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" }
            ]
        }
    ]
});

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
});

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);
    }
});

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"
    }
});

import { Components } from "gd-sprest-bs";

// Create the progress
let el = document.querySelector("#progress");
let progress = Components.Progress({
    el: el,
    size: 25,
    label: "25%"
});

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%"
        }
    ]
});

import { Components } from "gd-sprest-bs";

// Create a spinner
let el = document.querySelector("#spinner");
Components.Spinner({
    el,
    text: "Loading...",
    type: Components.SpinnerTypes.Danger
});

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" }
    ]
});

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 }
});

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" }] }
    ]
});

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
}
});

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."); } }
    ]
});