gd-bs 5.1.9 → 5.2.3

package/src/bs.scss

@@ -112,10 +112,18 @@
         margin: 0rem 0rem 0rem auto;
         padding: 1rem;
     }
+    /* Fix for TippyJS Placement */
+    .popover-body>* {
+        position: relative !important;
+    }
     /* Auto size the toast width */
     .toast {
         width: auto;
     }
+    /* Fix for TippyJS Placement */
+    .tooltip-body>* {
+        position: relative !important;
+    }
     /* Center the dataTables_info element properly */
     div.dataTables_wrapper div.dataTables_info {
         padding-top: 0.9rem;
@@ -226,30 +234,18 @@ table.dataTable thead .sorting_desc {
     background-color: #0078d4;
 }
 
-
-/* Tippy Tooltip primary theme color */
-
 .tippy-box[data-theme~='primary'][data-placement^='top']>.tippy-arrow::before {
     border-top-color: #0078d4;
 }
 
-
-/* Tippy Tooltip primary theme color */
-
 .tippy-box[data-theme~='primary'][data-placement^='bottom']>.tippy-arrow::before {
     border-bottom-color: #0078d4;
 }
 
-
-/* Tippy Tooltip primary theme color */
-
 .tippy-box[data-theme~='primary'][data-placement^='left']>.tippy-arrow::before {
     border-left-color: #0078d4;
 }
 
-
-/* Tippy Tooltip primary theme color */
-
 .tippy-box[data-theme~='primary'][data-placement^='right']>.tippy-arrow::before {
     border-right-color: #0078d4;
 }
@@ -261,30 +257,159 @@ table.dataTable thead .sorting_desc {
     background-color: #6c757d;
 }
 
-
-/* Tippy Tooltip secondary theme color */
-
 .tippy-box[data-theme~='secondary'][data-placement^='top']>.tippy-arrow::before {
     border-top-color: #6c757d;
 }
 
-
-/* Tippy Tooltip secondary theme color */
-
 .tippy-box[data-theme~='secondary'][data-placement^='bottom']>.tippy-arrow::before {
     border-bottom-color: #6c757d;
 }
 
-
-/* Tippy Tooltip secondary theme color */
-
 .tippy-box[data-theme~='secondary'][data-placement^='left']>.tippy-arrow::before {
     border-left-color: #6c757d;
 }
 
-
-/* Tippy Tooltip secondary theme color */
-
 .tippy-box[data-theme~='secondary'][data-placement^='right']>.tippy-arrow::before {
     border-right-color: #6c757d;
+}
+
+
+/* Tippy Tooltip success theme color */
+
+.tippy-box[data-theme~='success'] {
+    background-color: #198754;
+}
+
+.tippy-box[data-theme~='success'][data-placement^='top']>.tippy-arrow::before {
+    border-top-color: #198754;
+}
+
+.tippy-box[data-theme~='success'][data-placement^='bottom']>.tippy-arrow::before {
+    border-bottom-color: #198754;
+}
+
+.tippy-box[data-theme~='success'][data-placement^='left']>.tippy-arrow::before {
+    border-left-color: #198754;
+}
+
+.tippy-box[data-theme~='success'][data-placement^='right']>.tippy-arrow::before {
+    border-right-color: #198754;
+}
+
+
+/* Tippy Tooltip info theme color */
+
+.tippy-box[data-theme~='info'] {
+    background-color: #0dcaf0;
+    color: #000;
+}
+
+.tippy-box[data-theme~='info'][data-placement^='top']>.tippy-arrow::before {
+    border-top-color: #0dcaf0;
+}
+
+.tippy-box[data-theme~='info'][data-placement^='bottom']>.tippy-arrow::before {
+    border-bottom-color: #0dcaf0;
+}
+
+.tippy-box[data-theme~='info'][data-placement^='left']>.tippy-arrow::before {
+    border-left-color: #0dcaf0;
+}
+
+.tippy-box[data-theme~='info'][data-placement^='right']>.tippy-arrow::before {
+    border-right-color: #0dcaf0;
+}
+
+
+/* Tippy Tooltip warning theme color */
+
+.tippy-box[data-theme~='warning'] {
+    background-color: #ffc107;
+    color: #000;
+}
+
+.tippy-box[data-theme~='warning'][data-placement^='top']>.tippy-arrow::before {
+    border-top-color: #ffc107;
+}
+
+.tippy-box[data-theme~='warning'][data-placement^='bottom']>.tippy-arrow::before {
+    border-bottom-color: #ffc107;
+}
+
+.tippy-box[data-theme~='warning'][data-placement^='left']>.tippy-arrow::before {
+    border-left-color: #ffc107;
+}
+
+.tippy-box[data-theme~='warning'][data-placement^='right']>.tippy-arrow::before {
+    border-right-color: #ffc107;
+}
+
+
+/* Tippy Tooltip danger theme color */
+
+.tippy-box[data-theme~='danger'] {
+    background-color: #dc3545;
+}
+
+.tippy-box[data-theme~='danger'][data-placement^='top']>.tippy-arrow::before {
+    border-top-color: #dc3545;
+}
+
+.tippy-box[data-theme~='danger'][data-placement^='bottom']>.tippy-arrow::before {
+    border-bottom-color: #dc3545;
+}
+
+.tippy-box[data-theme~='danger'][data-placement^='left']>.tippy-arrow::before {
+    border-left-color: #dc3545;
+}
+
+.tippy-box[data-theme~='danger'][data-placement^='right']>.tippy-arrow::before {
+    border-right-color: #dc3545;
+}
+
+
+/* Tippy Tooltip light theme color - override Tippy default to match Bootstrap */
+
+.tippy-box[data-theme~='light'] {
+    background-color: #f8f9fa !important;
+    color: #000 !important;
+}
+
+.tippy-box[data-theme~='light'][data-placement^='top']>.tippy-arrow::before {
+    border-top-color: #f8f9fa !important;
+}
+
+.tippy-box[data-theme~='light'][data-placement^='bottom']>.tippy-arrow::before {
+    border-bottom-color: #f8f9fa !important;
+}
+
+.tippy-box[data-theme~='light'][data-placement^='left']>.tippy-arrow::before {
+    border-left-color: #f8f9fa !important;
+}
+
+.tippy-box[data-theme~='light'][data-placement^='right']>.tippy-arrow::before {
+    border-right-color: #f8f9fa !important;
+}
+
+
+/* Tippy Tooltip dark theme color */
+
+.tippy-box[data-theme~='dark'] {
+    background-color: #212529;
+}
+
+.tippy-box[data-theme~='dark'][data-placement^='top']>.tippy-arrow::before {
+    border-top-color: #212529;
+}
+
+.tippy-box[data-theme~='dark'][data-placement^='bottom']>.tippy-arrow::before {
+    border-bottom-color: #212529;
+}
+
+.tippy-box[data-theme~='dark'][data-placement^='left']>.tippy-arrow::before {
+    border-left-color: #212529;
+}
+
+.tippy-box[data-theme~='dark'][data-placement^='right']>.tippy-arrow::before {
+    border-right-color: #212529;
 }

package/src/components/components.d.ts

@@ -28,4 +28,5 @@ export * from "./spinner/types";
 export * from "./table/types";
 export * from "./toast/types";
 export * from "./toolbar/types";
-export * from "./tooltip/types";
+export * from "./tooltip/types";
+export * from "./tooltipGroup/types";

package/src/components/dropdown/index.ts

@@ -207,11 +207,50 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         // Get the toggle
         let toggle = this.el.querySelector(".dropdown-toggle") as HTMLElement;
         if (toggle && this._elMenu) {
+            // Set the type, based on the current dropdown type
+            let popoverType = PopoverTypes.Light;
+            switch (this.props.type) {
+                case DropdownTypes.Danger:
+                case DropdownTypes.OutlineDanger:
+                    popoverType = PopoverTypes.Danger;
+                    break;
+                case DropdownTypes.Dark:
+                case DropdownTypes.OutlineDark:
+                    popoverType = PopoverTypes.Dark;
+                    break;
+                case DropdownTypes.Info:
+                case DropdownTypes.OutlineInfo:
+                    popoverType = PopoverTypes.Info;
+                    break;
+                case DropdownTypes.Light:
+                case DropdownTypes.OutlineLight:
+                case DropdownTypes.Link:
+                case DropdownTypes.OutlineLink:
+                    popoverType = PopoverTypes.Light;
+                    break;
+                case DropdownTypes.Primary:
+                case DropdownTypes.OutlinePrimary:
+                    popoverType = PopoverTypes.Primary;
+                    break;
+                case DropdownTypes.Secondary:
+                case DropdownTypes.OutlineSecondary:
+                    popoverType = PopoverTypes.Secondary;
+                    break;
+                case DropdownTypes.Success:
+                case DropdownTypes.OutlineSuccess:
+                    popoverType = PopoverTypes.Success;
+                    break;
+                case DropdownTypes.Warning:
+                case DropdownTypes.OutlineWarning:
+                    popoverType = PopoverTypes.Warning;
+                    break;
+            }
+
             // Create the props
             let props: IPopoverProps = {
                 target: toggle,
                 placement: PopoverPlacements.LeftEnd,
-                type: PopoverTypes.Light,
+                type: popoverType,
                 options: {
                     arrow: false,
                     trigger: "click",

package/src/components/index.ts

@@ -27,4 +27,5 @@ export * from "./spinner";
 export * from "./table";
 export * from "./toast";
 export * from "./toolbar";
-export * from "./tooltip";
+export * from "./tooltip";
+export * from "./tooltipGroup";

package/src/components/navbar/templates.ts

@@ -12,7 +12,7 @@ export const HTML = `
             <ul class="navbar-nav ms-auto mb-2 mb-lg-0"></ul>
         </div>
         <form class="d-flex mb-2 mb-lg-0">
-            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
+            <input class="form-control lh-1 me-1" type="search" placeholder="Search" aria-label="Search" />
             <button class="btn" type="submit">Search</button>
         </form>
     </div>

package/src/components/popover/index.ts

@@ -10,12 +10,17 @@ import { appendContent } from "../common";
  * Popover Types
  */
 export enum PopoverTypes {
-    Light = 1,
-    LightBorder = 2,
-    Material = 3,
-    Primary = 4,
-    Secondary = 5,
-    Translucent = 6
+    Danger = 1,
+    Dark = 2,
+    Info = 3,
+    Light = 4,
+    LightBorder = 5,
+    Material = 6,
+    Primary = 7,
+    Secondary = 8,
+    Success = 9,
+    Translucent = 10,
+    Warning = 11
 }
 
 /**
@@ -60,7 +65,6 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
     // Configure the card group
     private configure() {
         // Set the placements
-        let fallbackPlacements = null;
         let placement = null;
         switch (this.props.placement) {
             // Auto
@@ -75,59 +79,46 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
                 break;
             // Bottom
             case PopoverPlacements.Bottom:
-                fallbackPlacements = ["top"];
                 placement = "bottom";
                 break;
             case PopoverPlacements.BottomEnd:
-                fallbackPlacements = ["top", "right"];
                 placement = "bottom-end";
                 break;
             case PopoverPlacements.BottomStart:
-                fallbackPlacements = ["top", "left"];
                 placement = "bottom-start";
                 break;
             // Left
             case PopoverPlacements.Left:
-                fallbackPlacements = ["right"];
                 placement = "left";
                 break;
             case PopoverPlacements.LeftEnd:
-                fallbackPlacements = ["right"];
                 placement = "left-end";
                 break;
             case PopoverPlacements.LeftStart:
-                fallbackPlacements = ["right"];
                 placement = "left-start";
                 break;
             // Right
             case PopoverPlacements.Right:
-                fallbackPlacements = ["left"];
                 placement = "right";
                 break;
             case PopoverPlacements.RightEnd:
-                fallbackPlacements = ["left"];
                 placement = "right-end";
                 break;
             case PopoverPlacements.RightStart:
-                fallbackPlacements = ["left"];
                 placement = "right-start";
                 break;
             // Top
             case PopoverPlacements.Top:
-                fallbackPlacements = ["bottom"];
                 placement = "top";
                 break;
             case PopoverPlacements.TopEnd:
-                fallbackPlacements = ["bottom", "right"];
                 placement = "top-end";
                 break;
             case PopoverPlacements.TopStart:
-                fallbackPlacements = ["bottom", "left"];
                 placement = "top-start";
                 break;
             // Default - Auto
             default:
-                fallbackPlacements = ["bottom"];
                 placement = "top";
                 break;
         }
@@ -135,6 +126,18 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
         // Set the theme
         let theme = null;
         switch (this.props.type) {
+            // Dark
+            case PopoverTypes.Dark:
+                theme = "dark";
+                break;
+            // Danger
+            case PopoverTypes.Danger:
+                theme = "danger";
+                break;
+            // Info
+            case PopoverTypes.Info:
+                theme = "info";
+                break;
             // Light
             case PopoverTypes.Light:
                 theme = "light";
@@ -154,10 +157,18 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
             case PopoverTypes.Secondary:
                 theme = "secondary";
                 break;
+            // Success
+            case PopoverTypes.Success:
+                theme = "success";
+                break;
             // Translucent
             case PopoverTypes.Translucent:
                 theme = "translucent";
                 break;
+            // Warning
+            case PopoverTypes.Warning:
+                theme = "warning";
+                break;
             // Default - Light Border
             default:
                 theme = "light-border";
@@ -175,17 +186,7 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
                 interactive: true,
                 placement,
                 plugins: [animateFill, followCursor, inlinePositioning, sticky],
-                theme,
-                popperOptions: fallbackPlacements ? {
-                    modifiers: [
-                        {
-                            name: "flip",
-                            options: {
-                                fallbackPlacements
-                            }
-                        }
-                    ]
-                } : null
+                theme
             },
             ...this.props.options
         };

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

@@ -106,12 +106,17 @@ export interface IPopoverProps extends IBaseProps<IPopover> {
  * Popover Types
  */
  export type IPopoverTypes = {
+    Danger: number;
+    Dark: number;
+    Info: number;
     Light: number;
     LightBorder: number;
     Material: number;
     Primary: number;
     Secondary: number;
+    Success: number;
     Translucent: number;
+    Warning: number;
 }
 
 /**

package/src/components/tooltip/index.ts

@@ -11,12 +11,17 @@ import { appendContent } from "../common";
  * Tooltip Types
  */
 export enum TooltipTypes {
-    Light = 1,
-    LightBorder = 2,
-    Material = 3,
-    Primary = 4,
-    Secondary = 5,
-    Translucent = 6
+    Danger = 1,
+    Dark = 2,
+    Info = 3,
+    Light = 4,
+    LightBorder = 5,
+    Material = 6,
+    Primary = 7,
+    Secondary = 8,
+    Success = 9,
+    Translucent = 10,
+    Warning = 11
 }
 
 /**
@@ -81,7 +86,6 @@ class _Tooltip extends Base<ITooltipProps> {
     // Configure the options
     private configureOptions() {
         // Set the placements
-        let fallbackPlacements = null;
         let placement = null;
         switch (this.props.placement) {
             // Auto
@@ -96,59 +100,46 @@ class _Tooltip extends Base<ITooltipProps> {
                 break;
             // Bottom
             case TooltipPlacements.Bottom:
-                fallbackPlacements = ["top"];
                 placement = "bottom";
                 break;
             case TooltipPlacements.BottomEnd:
-                fallbackPlacements = ["top", "right"];
                 placement = "bottom-end";
                 break;
             case TooltipPlacements.BottomStart:
-                fallbackPlacements = ["top", "left"];
                 placement = "bottom-start";
                 break;
             // Left
             case TooltipPlacements.Left:
-                fallbackPlacements = ["right"];
                 placement = "left";
                 break;
             case TooltipPlacements.LeftEnd:
-                fallbackPlacements = ["right"];
                 placement = "left-end";
                 break;
             case TooltipPlacements.LeftStart:
-                fallbackPlacements = ["right"];
                 placement = "left-start";
                 break;
             // Right
             case TooltipPlacements.Right:
-                fallbackPlacements = ["left"];
                 placement = "right";
                 break;
             case TooltipPlacements.RightEnd:
-                fallbackPlacements = ["left"];
                 placement = "right-end";
                 break;
             case TooltipPlacements.RightStart:
-                fallbackPlacements = ["left"];
                 placement = "right-start";
                 break;
             // Top
             case TooltipPlacements.Top:
-                fallbackPlacements = ["bottom"];
                 placement = "top";
                 break;
             case TooltipPlacements.TopEnd:
-                fallbackPlacements = ["bottom", "right"];
                 placement = "top-end";
                 break;
             case TooltipPlacements.TopStart:
-                fallbackPlacements = ["bottom", "left"];
                 placement = "top-start";
                 break;
             // Default - Auto
             default:
-                fallbackPlacements = ["bottom"];
                 placement = "top";
                 break;
         }
@@ -156,6 +147,18 @@ class _Tooltip extends Base<ITooltipProps> {
         // Set the theme
         let theme = null;
         switch (this.props.type) {
+            // Dark
+            case TooltipTypes.Dark:
+                theme = "dark";
+                break;
+            // Danger
+            case TooltipTypes.Danger:
+                theme = "danger";
+                break;
+            // Info
+            case TooltipTypes.Info:
+                theme = "info";
+                break;
             // Light
             case TooltipTypes.Light:
                 theme = "light";
@@ -175,10 +178,18 @@ class _Tooltip extends Base<ITooltipProps> {
             case TooltipTypes.Secondary:
                 theme = "secondary";
                 break;
+            // Success
+            case TooltipTypes.Success:
+                theme = "success";
+                break;
             // Translucent
             case TooltipTypes.Translucent:
                 theme = "translucent";
                 break;
+            // Warning
+            case TooltipTypes.Warning:
+                theme = "warning";
+                break;
             // Default - Secondary
             default:
                 theme = "secondary";
@@ -197,22 +208,12 @@ class _Tooltip extends Base<ITooltipProps> {
                 interactive: false,
                 placement,
                 plugins: [animateFill, followCursor, inlinePositioning, sticky],
-                theme,
-                popperOptions: fallbackPlacements ? {
-                    modifiers: [
-                        {
-                            name: "flip",
-                            options: {
-                                fallbackPlacements
-                            }
-                        }
-                    ]
-                } : null
+                theme
             },
             ...this.props.options
         };
 
-        // Create the popover content element
+        // Create the tooltip content element
         this._elContent = document.createElement("div") as HTMLElement;
         this._elContent.classList.add("tooltip-content");
         appendContent(this._elContent, options.content as any);
@@ -263,19 +264,19 @@ class _Tooltip extends Base<ITooltipProps> {
         this._btn ? this._btn.enable() : null;
     }
 
-    // Hides the popover
+    // Hides the tooltip
     hide() {
         // See if it's visible
         if (this.isVisible) { this._tippy.hide(); }
     }
 
-    // Determines if the popover is visible
+    // Determines if the tooltip is visible
     get isVisible(): boolean { return this._tippy.state.isVisible; }
 
     // The tippy instance
     get tippy() { return this._tippy; }
 
-    // Shows the popover
+    // Shows the tooltip
     show() {
         // See if it's hidden
         if (!this.isVisible) { this._tippy.show(); }

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

@@ -97,12 +97,17 @@ export interface ITooltipProps extends IBaseProps<ITooltip> {
  * Tooltip Types
  */
 export type ITooltipTypes = {
+    Danger: number;
+    Dark: number;
+    Info: number;
     Light: number;
     LightBorder: number;
     Material: number;
     Primary: number;
     Secondary: number;
+    Success: number;
     Translucent: number;
+    Warning: number;
 }
 
 /**