gd-bs 5.1.9 → 5.2.3

package/build/components/dropdown/index.js

@@ -222,11 +222,49 @@ var _Dropdown = /** @class */ (function (_super) {
         // Get the toggle
         var toggle = this.el.querySelector(".dropdown-toggle");
         if (toggle && this._elMenu) {
+            // Set the type, based on the current dropdown type
+            var popoverType = popover_1.PopoverTypes.Light;
+            switch (this.props.type) {
+                case exports.DropdownTypes.Danger:
+                case exports.DropdownTypes.OutlineDanger:
+                    popoverType = popover_1.PopoverTypes.Danger;
+                    break;
+                case exports.DropdownTypes.Dark:
+                case exports.DropdownTypes.OutlineDark:
+                    popoverType = popover_1.PopoverTypes.Dark;
+                    break;
+                case exports.DropdownTypes.Info:
+                case exports.DropdownTypes.OutlineInfo:
+                    popoverType = popover_1.PopoverTypes.Info;
+                    break;
+                case exports.DropdownTypes.Light:
+                case exports.DropdownTypes.OutlineLight:
+                case exports.DropdownTypes.Link:
+                case exports.DropdownTypes.OutlineLink:
+                    popoverType = popover_1.PopoverTypes.Light;
+                    break;
+                case exports.DropdownTypes.Primary:
+                case exports.DropdownTypes.OutlinePrimary:
+                    popoverType = popover_1.PopoverTypes.Primary;
+                    break;
+                case exports.DropdownTypes.Secondary:
+                case exports.DropdownTypes.OutlineSecondary:
+                    popoverType = popover_1.PopoverTypes.Secondary;
+                    break;
+                case exports.DropdownTypes.Success:
+                case exports.DropdownTypes.OutlineSuccess:
+                    popoverType = popover_1.PopoverTypes.Success;
+                    break;
+                case exports.DropdownTypes.Warning:
+                case exports.DropdownTypes.OutlineWarning:
+                    popoverType = popover_1.PopoverTypes.Warning;
+                    break;
+            }
             // Create the props
             var props = {
                 target: toggle,
                 placement: popover_1.PopoverPlacements.LeftEnd,
-                type: popover_1.PopoverTypes.Light,
+                type: popoverType,
                 options: {
                     arrow: false,
                     trigger: "click",

package/build/components/index.js

@@ -40,3 +40,4 @@ __exportStar(require("./table"), exports);
 __exportStar(require("./toast"), exports);
 __exportStar(require("./toolbar"), exports);
 __exportStar(require("./tooltip"), exports);
+__exportStar(require("./tooltipGroup"), exports);

package/build/components/navbar/templates.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLItemButton = exports.HTMLItem = exports.HTML = void 0;
 // Navbar
-exports.HTML = "\n<nav class=\"navbar navbar-expand-lg\">\n    <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"#\"></a>\n        <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" aria-expanded=\"false\"\n            aria-label=\"Toggle Navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"collapse navbar-collapse\">\n            <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\"></ul>\n            <ul class=\"navbar-nav ms-auto mb-2 mb-lg-0\"></ul>\n        </div>\n        <form class=\"d-flex mb-2 mb-lg-0\">\n            <input class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\" />\n            <button class=\"btn\" type=\"submit\">Search</button>\n        </form>\n    </div>\n</nav>".trim();
+exports.HTML = "\n<nav class=\"navbar navbar-expand-lg\">\n    <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"#\"></a>\n        <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" aria-expanded=\"false\"\n            aria-label=\"Toggle Navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"collapse navbar-collapse\">\n            <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\"></ul>\n            <ul class=\"navbar-nav ms-auto mb-2 mb-lg-0\"></ul>\n        </div>\n        <form class=\"d-flex mb-2 mb-lg-0\">\n            <input class=\"form-control lh-1 me-1\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\" />\n            <button class=\"btn\" type=\"submit\">Search</button>\n        </form>\n    </div>\n</nav>".trim();
 // Item
 exports.HTMLItem = "\n<li class=\"nav-item\">\n    <a class=\"nav-link\" href=\"#\" role=\"link\">\n        <span class=\"visually-hidden\">(current)</span>\n    </a>\n</li>".trim();
 // Item

package/build/components/popover/index.js

@@ -35,12 +35,17 @@ var common_1 = require("../common");
  */
 var PopoverTypes;
 (function (PopoverTypes) {
-    PopoverTypes[PopoverTypes["Light"] = 1] = "Light";
-    PopoverTypes[PopoverTypes["LightBorder"] = 2] = "LightBorder";
-    PopoverTypes[PopoverTypes["Material"] = 3] = "Material";
-    PopoverTypes[PopoverTypes["Primary"] = 4] = "Primary";
-    PopoverTypes[PopoverTypes["Secondary"] = 5] = "Secondary";
-    PopoverTypes[PopoverTypes["Translucent"] = 6] = "Translucent";
+    PopoverTypes[PopoverTypes["Danger"] = 1] = "Danger";
+    PopoverTypes[PopoverTypes["Dark"] = 2] = "Dark";
+    PopoverTypes[PopoverTypes["Info"] = 3] = "Info";
+    PopoverTypes[PopoverTypes["Light"] = 4] = "Light";
+    PopoverTypes[PopoverTypes["LightBorder"] = 5] = "LightBorder";
+    PopoverTypes[PopoverTypes["Material"] = 6] = "Material";
+    PopoverTypes[PopoverTypes["Primary"] = 7] = "Primary";
+    PopoverTypes[PopoverTypes["Secondary"] = 8] = "Secondary";
+    PopoverTypes[PopoverTypes["Success"] = 9] = "Success";
+    PopoverTypes[PopoverTypes["Translucent"] = 10] = "Translucent";
+    PopoverTypes[PopoverTypes["Warning"] = 11] = "Warning";
 })(PopoverTypes = exports.PopoverTypes || (exports.PopoverTypes = {}));
 /**
  * Popover Placements
@@ -84,7 +89,6 @@ var _Popover = /** @class */ (function (_super) {
     _Popover.prototype.configure = function () {
         var _this = this;
         // Set the placements
-        var fallbackPlacements = null;
         var placement = null;
         switch (this.props.placement) {
             // Auto
@@ -99,65 +103,64 @@ var _Popover = /** @class */ (function (_super) {
                 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;
         }
         // Set the theme
         var 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";
@@ -177,10 +180,18 @@ var _Popover = /** @class */ (function (_super) {
             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";
@@ -196,17 +207,7 @@ var _Popover = /** @class */ (function (_super) {
             interactive: true,
             placement: placement,
             plugins: [tippy_js_1.animateFill, tippy_js_1.followCursor, tippy_js_1.inlinePositioning, tippy_js_1.sticky],
-            theme: theme,
-            popperOptions: fallbackPlacements ? {
-                modifiers: [
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: fallbackPlacements
-                        }
-                    }
-                ]
-            } : null
+            theme: theme
         }, this.props.options);
         // See if we are targeting an element
         var elPopover = null;

package/build/components/tooltip/index.js

@@ -35,12 +35,17 @@ var common_1 = require("../common");
  */
 var TooltipTypes;
 (function (TooltipTypes) {
-    TooltipTypes[TooltipTypes["Light"] = 1] = "Light";
-    TooltipTypes[TooltipTypes["LightBorder"] = 2] = "LightBorder";
-    TooltipTypes[TooltipTypes["Material"] = 3] = "Material";
-    TooltipTypes[TooltipTypes["Primary"] = 4] = "Primary";
-    TooltipTypes[TooltipTypes["Secondary"] = 5] = "Secondary";
-    TooltipTypes[TooltipTypes["Translucent"] = 6] = "Translucent";
+    TooltipTypes[TooltipTypes["Danger"] = 1] = "Danger";
+    TooltipTypes[TooltipTypes["Dark"] = 2] = "Dark";
+    TooltipTypes[TooltipTypes["Info"] = 3] = "Info";
+    TooltipTypes[TooltipTypes["Light"] = 4] = "Light";
+    TooltipTypes[TooltipTypes["LightBorder"] = 5] = "LightBorder";
+    TooltipTypes[TooltipTypes["Material"] = 6] = "Material";
+    TooltipTypes[TooltipTypes["Primary"] = 7] = "Primary";
+    TooltipTypes[TooltipTypes["Secondary"] = 8] = "Secondary";
+    TooltipTypes[TooltipTypes["Success"] = 9] = "Success";
+    TooltipTypes[TooltipTypes["Translucent"] = 10] = "Translucent";
+    TooltipTypes[TooltipTypes["Warning"] = 11] = "Warning";
 })(TooltipTypes = exports.TooltipTypes || (exports.TooltipTypes = {}));
 /**
  * Tooltip Placements
@@ -100,7 +105,6 @@ var _Tooltip = /** @class */ (function (_super) {
     _Tooltip.prototype.configureOptions = function () {
         var _this = this;
         // Set the placements
-        var fallbackPlacements = null;
         var placement = null;
         switch (this.props.placement) {
             // Auto
@@ -115,65 +119,64 @@ var _Tooltip = /** @class */ (function (_super) {
                 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;
         }
         // Set the theme
         var 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";
@@ -193,10 +196,18 @@ var _Tooltip = /** @class */ (function (_super) {
             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";
@@ -213,19 +224,9 @@ var _Tooltip = /** @class */ (function (_super) {
             interactive: false,
             placement: placement,
             plugins: [tippy_js_1.animateFill, tippy_js_1.followCursor, tippy_js_1.inlinePositioning, tippy_js_1.sticky],
-            theme: theme,
-            popperOptions: fallbackPlacements ? {
-                modifiers: [
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: fallbackPlacements
-                        }
-                    }
-                ]
-            } : null
+            theme: theme
         }, this.props.options);
-        // Create the popover content element
+        // Create the tooltip content element
         this._elContent = document.createElement("div");
         this._elContent.classList.add("tooltip-content");
         common_1.appendContent(this._elContent, options.content);
@@ -270,7 +271,7 @@ var _Tooltip = /** @class */ (function (_super) {
         // Enable the button
         this._btn ? this._btn.enable() : null;
     };
-    // Hides the popover
+    // Hides the tooltip
     _Tooltip.prototype.hide = function () {
         // See if it's visible
         if (this.isVisible) {
@@ -278,7 +279,7 @@ var _Tooltip = /** @class */ (function (_super) {
         }
     };
     Object.defineProperty(_Tooltip.prototype, "isVisible", {
-        // Determines if the popover is visible
+        // Determines if the tooltip is visible
         get: function () { return this._tippy.state.isVisible; },
         enumerable: false,
         configurable: true
@@ -289,7 +290,7 @@ var _Tooltip = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    // Shows the popover
+    // Shows the tooltip
     _Tooltip.prototype.show = function () {
         // See if it's hidden
         if (!this.isVisible) {

package/build/components/tooltipGroup/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipGroup = void 0;
+var base_1 = require("../base");
+var tooltip_1 = require("../tooltip");
+var templates_1 = require("./templates");
+/**
+ * Tooltip Group
+ * @property props - The tooltip group properties.
+ */
+var _TooltipGroup = /** @class */ (function (_super) {
+    __extends(_TooltipGroup, _super);
+    // Constructor
+    function _TooltipGroup(props, template, btnTemplate) {
+        if (template === void 0) { template = templates_1.HTML; }
+        var _this = _super.call(this, template, props) || this;
+        _this._tooltips = null;
+        // Configure the tooltip group
+        _this.configure(btnTemplate);
+        // Configure the parent
+        _this.configureParent();
+        return _this;
+    }
+    // Configure the tooltip group
+    _TooltipGroup.prototype.configure = function (btnTemplate) {
+        // Set the attributes
+        this.props.id ? this.el.id = this.props.id : null;
+        this.props.label ? this.el.setAttribute("aria-label", this.props.label) : null;
+        // Set the class names
+        this.el.classList.add(this.props.isVertical ? "btn-group-vertical" : "btn-group");
+        this.props.isLarge ? this.el.classList.add("btn-group-lg") : null;
+        this.props.isSmall ? this.el.classList.add("btn-group-sm") : null;
+        // Render the tooltips
+        this.renderTooltips(btnTemplate);
+    };
+    // Render the tooltips
+    _TooltipGroup.prototype.renderTooltips = function (tooltipTemplate) {
+        // Clear the tooltips
+        this._tooltips = [];
+        // Parse the tooltips
+        var tooltips = this.props.tooltips || [];
+        for (var i = 0; i < tooltips.length; i++) {
+            var tooltipProps = tooltips[i];
+            // Set the property
+            tooltipProps.type = tooltipProps.type || this.props.tooltipType;
+            // See if the button props exists
+            if (tooltipProps.btnProps) {
+                // Set the button type
+                tooltipProps.btnProps.type = tooltipProps.btnProps.type || this.props.buttonType;
+            }
+            // Create the tooltip
+            var tooltip = tooltip_1.Tooltip(tooltipProps, tooltipTemplate);
+            this._tooltips.push(tooltip);
+            // Append the tooltip to the group
+            this.el.appendChild(tooltip.el);
+        }
+    };
+    Object.defineProperty(_TooltipGroup.prototype, "tooltips", {
+        /**
+         * Public Interface
+         */
+        // Reference to the tooltips
+        get: function () { return this._tooltips; },
+        enumerable: false,
+        configurable: true
+    });
+    return _TooltipGroup;
+}(base_1.Base));
+exports.TooltipGroup = function (props, template, tooltipTemplate) { return new _TooltipGroup(props, template, tooltipTemplate); };

package/build/components/tooltipGroup/templates.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTML = void 0;
+exports.HTML = "<div class=\"btn-group\" role=\"group\"></div>";