gd-bs 6.5.5 → 6.5.6

package/index.html

@@ -153,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,
@@ -170,11 +172,13 @@
                 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,

package/package.json

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

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

@@ -52,11 +52,20 @@ class _CardGroup extends Base<ICardGroupProps> implements ICardGroup {
 
                 // 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

@@ -108,4 +108,7 @@ 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;
 }