gd-bs 6.6.57 → 6.6.59

package/index.html

@@ -666,7 +666,9 @@
                         el: el,
                         title: "My Panel",
                         lead: "this is a lead",
-                        content: "This is the content of the jumbotron."
+                        size: 2,
+                        type: 3
+                        //content: "This is the content of the jumbotron."
                     });
                 }
             });

package/package.json

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

package/src/components/jumbotron/index.ts

@@ -1,8 +1,60 @@
 import { IJumbotron, IJumbotronProps } from "./types";
 import { Base } from "../base";
+import { ClassNames } from "../classNames";
 import { appendContent } from "../common";
 import { HTML } from "./templates";
 
+/**
+ * Jumbotron Size
+ */
+export enum JumbotronSize {
+    XSmall = 1,
+    Small = 2,
+    Medium = 3,
+    Large = 4,
+    XLarge = 5
+}
+
+/**
+ * Jumbotron Types
+ */
+export enum JumbotronTypes {
+    Danger = 1,
+    Dark = 2,
+    Info = 3,
+    Light = 4,
+    Primary = 5,
+    Secondary = 6,
+    Success = 7,
+    Warning = 8,
+}
+
+/**
+ * Jumbotron Classes
+ */
+export const JumbotronSizeClassNames = new ClassNames([
+    "py-1",
+    "py-2",
+    "py-3",
+    "py-4",
+    "py-5"
+]);
+
+/**
+ * Jumbotron Classes
+ */
+export const JumbotronTypeClassNames = new ClassNames([
+    "jumbotron-danger",
+    "jumbotron-dark",
+    "jumbotron-info",
+    "jumbotron-light",
+    "jumbotron-link",
+    "jumbotron-primary",
+    "jumbotron-secondary",
+    "jumbotron-success",
+    "jumbotron-warning"
+]);
+
 /**
  * Jumbotron
  */
@@ -50,6 +102,14 @@ class _Jumbotron extends Base<IJumbotronProps> implements IJumbotron {
             }
         }
 
+        // Set the size
+        let className = JumbotronSizeClassNames.getByType(this.props.size) || JumbotronSizeClassNames.getByType(JumbotronSize.XLarge);
+        this.el.classList.add(className);
+
+        // Set the type
+        className = JumbotronTypeClassNames.getByType(this.props.type);
+        if (className) { this.el.classList.add(className); }
+
         // Append the content
         appendContent(this.el, this.props.content);
     }

package/src/components/jumbotron/templates.ts

@@ -1,5 +1,5 @@
 export const HTML = `
-<div class="row py-5 m-0">
+<div class="jumbotron row m-0">
     <h1 class="display-4"></h1>
     <p class="lead"></p>
 </div>`.trim();

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

@@ -30,6 +30,8 @@
  * ```
  */
 export const Jumbotron: (props: IJumbotronProps, template?: string) => IJumbotron;
+export const JumbotronSize: IJumbotronSize;
+export const JumbotronType: IJumbotronTypes;
 
 import { IBaseProps } from "../types";
 
@@ -50,10 +52,36 @@ export interface IJumbotron {
 /**
  * Jumbotron Properties
  */
-export interface IJumbotronProps<T=Element> extends IBaseProps<IJumbotron> {
+export interface IJumbotronProps<T = Element> extends IBaseProps<IJumbotron> {
     content?: string | T;
     isFluid?: boolean;
     lead?: string;
     onRenderContent?: (el?: HTMLElement) => void;
+    size?: number;
     title?: string;
+    type?: number;
+}
+
+/**
+ * Jumbotron Size
+ */
+export type IJumbotronSize = {
+    XSmall: number;
+    Small: number;
+    Medium: number;
+    Large: number;
+    XLarge: number;
+}
+/**
+ * Jumbotron Types
+ */
+export type IJumbotronTypes = {
+    Danger: number;
+    Dark: number;
+    Info: number;
+    Light: number;
+    Primary: number;
+    Secondary: number;
+    Success: number;
+    Warning: number;
 }

package/src/components/listGroup/item.ts

@@ -67,6 +67,7 @@ export class ListGroupItem extends Base<IListGroupItem> {
             this.el.id = tabId + "-tab";
             this.el.setAttribute("href", "#" + tabId);
             this.el.setAttribute("data-bs-toggle", "list");
+            this.el.setAttribute("data-tab-title", this.props.tabName);
             this.el.setAttribute("aria-controls", tabId);
             this.el.innerHTML = this.props.tabName;
 
@@ -97,6 +98,12 @@ export class ListGroupItem extends Base<IListGroupItem> {
             this.props.onClick ? this.props.onClick(this.el, this.props) : null;
         });
 
+        // See if there is a render tab event
+        if (this.props.onRenderTab) {
+            // Execute the render event
+            this.props.onRenderTab(this.el, this.props);
+        }
+
         // See if there is a render event
         if (this.props.onRender) {
             // Execute the render event

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

@@ -84,6 +84,7 @@ export interface IListGroupItem<T=Element> {
     isDisabled?: boolean;
     onClick?: (el?: HTMLElement, item?: IListGroupItem) => void;
     onRender?: (el?: HTMLElement, item?: IListGroupItem) => void;
+    onRenderTab?: (el?: HTMLElement, item?: IListGroupItem) => void;
     tabName?: string;
     type?: number;
 }