gd-bs 6.5.4 → 6.5.6

package/index.html

@@ -23,6 +23,7 @@
         <div id="panel"></div>
         <div id="badge"></div>
         <div id="card"></div>
+        <div id="card-group"></div>
         <div id="tooltip"></div>
         <div id="toolbar"></div>
         <div id="ddl"></div>
@@ -152,9 +153,11 @@
 
             window["card"] = GD.Components.Card({
                 el: document.getElementById("card"),
+                onRender: (el) => { console.log("Card Render: ", el); },
                 body: [{
                     title: "Card Title",
                     text: "This is the card contents.",
+                    onRender: (el) => { console.log("Card Body Render: ", el); },
                     actions: [{
                         text: "Card Action",
                         buttonType: GD.Components.ButtonTypes.OutlinePrimary,
@@ -165,6 +168,94 @@
                 }]
             });
 
+            window["cardGroup"] = GD.Components.CardGroup({
+                el: document.getElementById("card-group"),
+                className: "g-4",
+                col: 4,
+                onRender: (el) => { console.log("Card Group Render: ", el); },
+                cards: [
+                {
+                        body: [{
+                            title: "Card Title 1",
+                            text: "This is the card contents.",
+                            onRender: (el) => { console.log("Card Group Body Render: ", el); },
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 2",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 3",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 4",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 5",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 6",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    }
+                ]
+            });
+
             window["cbg"] = GD.Components.CheckboxGroup({
                 el: document.getElementById("cbGroup"),
                 label: "Label",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.5.4",
+    "version": "6.5.6",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/button/index.ts

@@ -5,8 +5,6 @@ import { ClassNames } from "../classNames";
 import { Spinner } from "../spinner";
 import { HTML, HTMLBlock, HTMLLink } from "./templates";
 
-declare var GD;
-
 /**
  * Button Types
  */

package/src/components/card/index.ts

@@ -62,6 +62,12 @@ class _Card extends Base<ICardProps> implements ICard {
                 this.props.onClick(body.props);
             });
         }
+
+        // See if there is a render event
+        if (this.props.onRender) {
+            // Call the event
+            this.props.onRender(this.el, body.props);
+        }
     }
 
     // Configure the header

package/src/components/card/types.d.ts

@@ -84,7 +84,7 @@ export interface ICardAction {
 /**
  * Card Body
  */
-export interface ICardBody<T=Element> {
+export interface ICardBody<T = Element> {
     actions?: Array<ICardAction>;
     className?: string;
     content?: string | T;
@@ -100,7 +100,7 @@ export interface ICardBody<T=Element> {
 /**
  * Card Footer
  */
-export interface ICardFooter<T=Element> {
+export interface ICardFooter<T = Element> {
     className?: string;
     content?: string | T;
     onRender?: (el?: HTMLElement, card?: ICardFooter) => void;
@@ -109,7 +109,7 @@ export interface ICardFooter<T=Element> {
 /**
  * Card Header
  */
-export interface ICardHeader<T=Element> {
+export interface ICardHeader<T = Element> {
     className?: string;
     content?: string | T;
     onRender?: (el?: HTMLElement, card?: ICardHeader) => void;
@@ -119,7 +119,7 @@ export interface ICardHeader<T=Element> {
 /**
  * Card Properties
  */
-export interface ICardProps<T=Element> extends IBaseProps<ICard> {
+export interface ICardProps<T = Element> extends IBaseProps<ICard> {
     body?: Array<ICardBody<T>>;
     footer?: ICardFooter<T>;
     header?: ICardHeader<T>;
@@ -132,4 +132,5 @@ export interface ICardProps<T=Element> extends IBaseProps<ICard> {
         src?: string;
     };
     onClick?: (card?: ICardBody, ev?: Event) => void;
+    onRender?: (el?: HTMLElement, card?: ICardProps) => void;
 }

package/src/components/cardGroup/index.ts

@@ -21,12 +21,51 @@ class _CardGroup extends Base<ICardGroupProps> implements ICardGroup {
 
     // Configure the card group
     private configure(cardTemplate: string) {
-        // Parse the cards
         let cards = this.props.cards || [];
+        let isGrid = false;
+
+        // See if we are rendering columns
+        if (typeof (this.props.colSize) === "number") {
+            // Update the flag
+            isGrid = true;
+
+            // Update the class name
+            (this.el as HTMLElement).classList.remove("card-group");
+            (this.el as HTMLElement).classList.add("row");
+
+            // Determine the column class to use
+            let colSize = this.props.colSize > 0 && this.props.colSize <= 12 ? this.props.colSize : 4;
+            (this.el as HTMLElement).classList.add("row-cols-" + colSize);
+        }
+
+        // Parse the cards
         for (let i = 0; i < cards.length; i++) {
-            // Add the card
-            this.el.appendChild(Card(cards[i], cardTemplate).el);
+            // Create the card
+            let card = Card(cards[i], cardTemplate);
+
+            // See if we are using a grid
+            if (isGrid) {
+                // Create a column element
+                let elCol = document.createElement("div");
+                elCol.classList.add("col");
+                elCol.appendChild(card.el);
+
+                // Add the card
+                this.el.appendChild(elCol);
+
+                // Call the event
+                this.props.onColRender ? this.props.onColRender(elCol, cards[i]) : null;
+            } else {
+                // Add the card
+                this.el.appendChild(card.el);
+
+                // Call the event
+                this.props.onCardRender ? this.props.onCardRender(card.el, cards[i]) : null;
+            }
         }
+
+        // Call the event
+        this.props.onRender ? this.props.onRender(this.el, this.props) : null;
     }
 }
 export const CardGroup = (props: ICardGroupProps, template?: string, cardTemplate?: string): ICardGroup => { return new _CardGroup(props, template, cardTemplate); }

package/src/components/cardGroup/types.d.ts

@@ -107,4 +107,8 @@ export interface ICardGroup {
  */
 export interface ICardGroupProps extends IBaseProps<ICardGroup> {
     cards?: Array<ICardProps>;
+    colSize?: number;
+    onCardRender?: (el?: HTMLElement, props?: ICardProps) => void;
+    onColRender?: (el?: HTMLElement, props?: ICardProps) => void;
+    onRender?: (el?: HTMLElement, props?: ICardGroupProps) => void;
 }