gd-bs 5.2.2 → 5.2.3

package/package.json

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

package/src/bs.scss

@@ -234,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;
 }
@@ -269,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/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/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
 }
 
 /**
@@ -121,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";
@@ -140,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";

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
 }
 
 /**
@@ -142,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";
@@ -161,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";

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;
 }
 
 /**