gd-bs 6.6.90 → 6.6.92

package/build/components/dropdown/index.js

@@ -19,14 +19,14 @@ exports.Dropdown = exports.DropdownTypes = exports.DropdownPlacements = void 0;
 var base_1 = require("../base");
 var button_1 = require("../button");
 var checkboxGroup_1 = require("../checkboxGroup");
-var popover_1 = require("../popover");
+var floating_ui_1 = require("../floating-ui");
 var formItem_1 = require("./formItem");
 var item_1 = require("./item");
 var templates_1 = require("./templates");
 /**
  * Dropdown Types
  */
-exports.DropdownPlacements = popover_1.PopoverPlacements;
+exports.DropdownPlacements = floating_ui_1.FloatingUIPlacements;
 exports.DropdownTypes = button_1.ButtonTypes;
 // Gets the template
 var GetHTML = function (props) {
@@ -57,9 +57,9 @@ var _Dropdown = /** @class */ (function (_super) {
         var _this = _super.call(this, template, props) || this;
         _this._autoSelect = null;
         _this._cb = null;
+        _this._floatingUI = null;
         _this._initFl = false;
         _this._items = null;
-        _this._popover = null;
         // Handles the click event outside of the menu to close it
         _this.handleClick = function (ev) {
             // See if we clicked within the menu
@@ -229,60 +229,57 @@ var _Dropdown = /** @class */ (function (_super) {
         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.LightBorder;
+            var popoverType = floating_ui_1.FloatingUITypes.LightBorder;
             switch (this.props.type) {
                 case exports.DropdownTypes.Danger:
                 case exports.DropdownTypes.OutlineDanger:
-                    popoverType = popover_1.PopoverTypes.Danger;
+                    popoverType = floating_ui_1.FloatingUITypes.Danger;
                     break;
                 case exports.DropdownTypes.Dark:
                 case exports.DropdownTypes.OutlineDark:
-                    popoverType = popover_1.PopoverTypes.Dark;
+                    popoverType = floating_ui_1.FloatingUITypes.Dark;
                     break;
                 case exports.DropdownTypes.Info:
                 case exports.DropdownTypes.OutlineInfo:
-                    popoverType = popover_1.PopoverTypes.Info;
+                    popoverType = floating_ui_1.FloatingUITypes.Info;
                     break;
                 case exports.DropdownTypes.Light:
                 case exports.DropdownTypes.OutlineLight:
                 case exports.DropdownTypes.Link:
                 case exports.DropdownTypes.OutlineLink:
-                    popoverType = popover_1.PopoverTypes.Light;
+                    popoverType = floating_ui_1.FloatingUITypes.Light;
                     break;
                 case exports.DropdownTypes.Primary:
                 case exports.DropdownTypes.OutlinePrimary:
-                    popoverType = popover_1.PopoverTypes.Primary;
+                    popoverType = floating_ui_1.FloatingUITypes.Primary;
                     break;
                 case exports.DropdownTypes.Secondary:
                 case exports.DropdownTypes.OutlineSecondary:
-                    popoverType = popover_1.PopoverTypes.Secondary;
+                    popoverType = floating_ui_1.FloatingUITypes.Secondary;
                     break;
                 case exports.DropdownTypes.Success:
                 case exports.DropdownTypes.OutlineSuccess:
-                    popoverType = popover_1.PopoverTypes.Success;
+                    popoverType = floating_ui_1.FloatingUITypes.Success;
                     break;
                 case exports.DropdownTypes.Warning:
                 case exports.DropdownTypes.OutlineWarning:
-                    popoverType = popover_1.PopoverTypes.Warning;
+                    popoverType = floating_ui_1.FloatingUITypes.Warning;
                     break;
             }
-            // Create the props
-            var props = {
-                target: toggle,
-                placement: typeof (this.props.placement) === "number" ? this.props.placement : popover_1.PopoverPlacements.BottomStart,
-                type: popoverType,
+            // Create the menu
+            this._floatingUI = (0, floating_ui_1.FloatingUI)({
+                className: "floating-dropdown",
+                elContent: this._elMenu,
+                elTarget: toggle,
+                placement: typeof (this.props.placement) === "number" ? this.props.placement : floating_ui_1.FloatingUIPlacements.BottomStart,
+                theme: popoverType,
                 options: {
                     arrow: false,
-                    trigger: "click",
-                    offset: [0, 4]
+                    flip: true,
+                    shift: true,
+                    trigger: "click"
                 }
-            };
-            // Call the render event
-            props = this.props.onMenuRendering ? this.props.onMenuRendering(props) : props;
-            // Create a popover to display the menu
-            this._popover = (0, popover_1.Popover)(props);
-            // Set the popover content
-            this._popover.setContent(this._elMenu);
+            });
         }
     };
     // Configures the dropdown for a form
@@ -594,13 +591,13 @@ var _Dropdown = /** @class */ (function (_super) {
     });
     Object.defineProperty(_Dropdown.prototype, "isVisible", {
         // Returns true if the dropdown menu is visible
-        get: function () { return this._popover ? this._popover.tippy.state.isVisible : false; },
+        get: function () { return this._floatingUI ? this._floatingUI.isVisible : false; },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(_Dropdown.prototype, "popover", {
-        // The popover menu
-        get: function () { return this._popover; },
+    Object.defineProperty(_Dropdown.prototype, "floatingUI", {
+        // The floating ui menu
+        get: function () { return this._floatingUI; },
         enumerable: false,
         configurable: true
     });
@@ -639,6 +636,7 @@ var _Dropdown = /** @class */ (function (_super) {
     };
     // Sets the label of the dropdown
     _Dropdown.prototype.setLabel = function (value) {
+        if (value === void 0) { value = ""; }
         // Get the dropdown
         var ddl = this.el.querySelector(".dropdown-toggle");
         if (ddl) {
@@ -729,7 +727,7 @@ var _Dropdown = /** @class */ (function (_super) {
         // See if we are updating the label
         if (this.props.updateLabel) {
             // See if a value exists
-            if (value) {
+            if (value && typeof (value) === "string") {
                 // Set the label
                 this.setLabel(value);
             }
@@ -748,7 +746,7 @@ var _Dropdown = /** @class */ (function (_super) {
     // Toggles the menu
     _Dropdown.prototype.toggle = function () {
         // Toggle the popover
-        this._popover ? this._popover.toggle() : null;
+        this._floatingUI ? this._floatingUI.toggle() : null;
     };
     return _Dropdown;
 }(base_1.Base));

package/build/components/floating-ui/index.js

@@ -0,0 +1,375 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingUI = exports.FloatingUITypes = exports.FloatingUIPlacements = exports.FloatingUILib = void 0;
+var dom_1 = require("@floating-ui/dom");
+var common_1 = require("../common");
+exports.FloatingUILib = require("@floating-ui/dom");
+/**
+ * Floating UI Placements
+ */
+var FloatingUIPlacements;
+(function (FloatingUIPlacements) {
+    FloatingUIPlacements[FloatingUIPlacements["Auto"] = 1] = "Auto";
+    FloatingUIPlacements[FloatingUIPlacements["AutoStart"] = 2] = "AutoStart";
+    FloatingUIPlacements[FloatingUIPlacements["AutoEnd"] = 3] = "AutoEnd";
+    FloatingUIPlacements[FloatingUIPlacements["Bottom"] = 4] = "Bottom";
+    FloatingUIPlacements[FloatingUIPlacements["BottomStart"] = 5] = "BottomStart";
+    FloatingUIPlacements[FloatingUIPlacements["BottomEnd"] = 6] = "BottomEnd";
+    FloatingUIPlacements[FloatingUIPlacements["Left"] = 7] = "Left";
+    FloatingUIPlacements[FloatingUIPlacements["LeftStart"] = 8] = "LeftStart";
+    FloatingUIPlacements[FloatingUIPlacements["LeftEnd"] = 9] = "LeftEnd";
+    FloatingUIPlacements[FloatingUIPlacements["Right"] = 10] = "Right";
+    FloatingUIPlacements[FloatingUIPlacements["RightStart"] = 11] = "RightStart";
+    FloatingUIPlacements[FloatingUIPlacements["RightEnd"] = 12] = "RightEnd";
+    FloatingUIPlacements[FloatingUIPlacements["Top"] = 13] = "Top";
+    FloatingUIPlacements[FloatingUIPlacements["TopStart"] = 14] = "TopStart";
+    FloatingUIPlacements[FloatingUIPlacements["TopEnd"] = 15] = "TopEnd";
+})(FloatingUIPlacements = exports.FloatingUIPlacements || (exports.FloatingUIPlacements = {}));
+/**
+ * Floating UI Types
+ */
+var FloatingUITypes;
+(function (FloatingUITypes) {
+    FloatingUITypes[FloatingUITypes["Danger"] = 1] = "Danger";
+    FloatingUITypes[FloatingUITypes["Dark"] = 2] = "Dark";
+    FloatingUITypes[FloatingUITypes["Info"] = 3] = "Info";
+    FloatingUITypes[FloatingUITypes["Light"] = 4] = "Light";
+    FloatingUITypes[FloatingUITypes["LightBorder"] = 5] = "LightBorder";
+    FloatingUITypes[FloatingUITypes["Material"] = 6] = "Material";
+    FloatingUITypes[FloatingUITypes["Primary"] = 7] = "Primary";
+    FloatingUITypes[FloatingUITypes["Secondary"] = 8] = "Secondary";
+    FloatingUITypes[FloatingUITypes["Success"] = 9] = "Success";
+    FloatingUITypes[FloatingUITypes["Translucent"] = 10] = "Translucent";
+    FloatingUITypes[FloatingUITypes["Warning"] = 11] = "Warning";
+})(FloatingUITypes = exports.FloatingUITypes || (exports.FloatingUITypes = {}));
+/**
+ * Floating UI Element
+ */
+var _FloatingUI = /** @class */ (function () {
+    // Constructor
+    function _FloatingUI(props) {
+        var _a;
+        this._elArrow = null;
+        this._elTarget = null;
+        this._elContent = null;
+        this._options = null;
+        this._props = null;
+        this._elTarget = props.elTarget;
+        this._props = props;
+        // Create the content element
+        this._elContent = document.createElement("div");
+        this._elContent.classList.add("bs");
+        this._elContent.classList.add("floating-ui");
+        this._elContent.appendChild(props.elContent);
+        this._elContent.setAttribute("data-theme", this.getTheme(this._props.theme));
+        (0, common_1.setClassNames)(this._elContent, this._props.className);
+        // Add the events
+        this.addEvents((_a = props.options) === null || _a === void 0 ? void 0 : _a.trigger);
+        // Create the floating ui element
+        this.create();
+        // Set the visibility
+        this._props.show ? this.show() : this.hide();
+    }
+    _FloatingUI.prototype.addEvents = function (trigger) {
+        var _this = this;
+        if (trigger === void 0) { trigger = ""; }
+        // Events
+        if (trigger.indexOf("mouse") >= 0) {
+            this._elTarget.addEventListener("mouseenter", function () { _this.show(); });
+            this._elTarget.addEventListener("mouseleave", function () { _this.hide(); });
+        }
+        if (trigger.indexOf("focus") >= 0) {
+            this._elTarget.addEventListener("focus", function () { _this.show(); });
+            this._elTarget.addEventListener("blur", function () { _this.hide(); });
+        }
+        if (trigger.indexOf("click") >= 0) {
+            this._elTarget.addEventListener("click", function (ev) {
+                // Call the event
+                _this.isVisible ? _this.hide() : _this.show();
+            });
+        }
+        // Add the events
+        _FloatingUI.Events.push(function (ev) {
+            // See if it's outside the target element
+            if (!_this._elTarget.contains(ev.target)) {
+                // Hide the element
+                _this.hide();
+            }
+        });
+        _FloatingUI.ScrollEvents.push(function (ev) {
+            // Refresh the content
+            _this.refresh();
+        });
+        // Ensure the click event exists
+        if (!_FloatingUI.EventsCreated) {
+            // Create the event
+            document.addEventListener("click", function (ev) {
+                // Wait for the other events to run
+                setTimeout(function () {
+                    // Parse the events
+                    _FloatingUI.Events.forEach(function (fnEvent) {
+                        // Call the event
+                        fnEvent(ev);
+                    });
+                }, 10);
+            });
+            // Create the scroll event
+            document.addEventListener("scroll", function (ev) {
+                // Wait for the other events to run
+                setTimeout(function () {
+                    // Parse the events
+                    _FloatingUI.ScrollEvents.forEach(function (fnEvent) {
+                        // Call the event
+                        fnEvent(ev);
+                    });
+                }, 10);
+            });
+            // Set the flag
+            _FloatingUI.EventsCreated = true;
+        }
+    };
+    // Creates the floating ui
+    _FloatingUI.prototype.create = function () {
+        var _a;
+        var placement = this.getPlacement(this._props.placement);
+        var middleware = this.getMiddleware(placement);
+        // See if we are adding an arrow
+        if ((_a = this._props.options) === null || _a === void 0 ? void 0 : _a.arrow) {
+            // Create the element
+            this._elArrow = document.createElement("div");
+            this._elArrow.classList.add("arrow");
+            this._elContent.appendChild(this._elArrow);
+            // Add the plugin
+            middleware.push((0, dom_1.arrow)({ element: this._elArrow }));
+            middleware = [(0, dom_1.offset)(6)].concat(middleware);
+        }
+        // Set the options
+        this._options = {
+            middleware: middleware,
+            placement: placement.placement
+        };
+    };
+    // Returns the plugins
+    _FloatingUI.prototype.getMiddleware = function (placement) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var middleware = [];
+        // See if we are adding the offset option
+        if ((_a = this._props.options) === null || _a === void 0 ? void 0 : _a.offset) {
+            middleware.push((0, dom_1.offset)(this._props.options.offset));
+        }
+        // See if we are adding the auto placement option
+        if (((_b = this._props.options) === null || _b === void 0 ? void 0 : _b.autoPlacement) || placement.autoPlacement) {
+            middleware.push((0, dom_1.autoPlacement)(this._props.options.autoPlacement));
+        }
+        // Else, see if we are adding the flip option
+        else if ((_c = this._props.options) === null || _c === void 0 ? void 0 : _c.flip) {
+            middleware.push((0, dom_1.flip)());
+        }
+        // See if we are adding the hide option
+        if ((_d = this._props.options) === null || _d === void 0 ? void 0 : _d.hide) {
+            middleware.push((0, dom_1.hide)(this._props.options.hide));
+        }
+        // See if we are adding the inline option
+        if ((_e = this._props.options) === null || _e === void 0 ? void 0 : _e.inline) {
+            middleware.push((0, dom_1.inline)(this._props.options.inline));
+        }
+        // See if we are adding the shift option
+        if ((_f = this._props.options) === null || _f === void 0 ? void 0 : _f.shift) {
+            middleware.push((0, dom_1.shift)((_g = this._props.options) === null || _g === void 0 ? void 0 : _g.shift));
+        }
+        // See if we are adding the size option
+        if ((_h = this._props.options) === null || _h === void 0 ? void 0 : _h.size) {
+            middleware.push((0, dom_1.size)((_j = this._props.options) === null || _j === void 0 ? void 0 : _j.size));
+        }
+        // Return the middle ware
+        return middleware;
+    };
+    // Returns the placement information
+    _FloatingUI.prototype.getPlacement = function (placementValue) {
+        var autoPlacement = false;
+        var placement = "top-end";
+        switch (placementValue) {
+            // Auto
+            case FloatingUIPlacements.Auto:
+                autoPlacement = true;
+                break;
+            case FloatingUIPlacements.AutoEnd:
+                placement = 'end';
+                autoPlacement = true;
+                break;
+            case FloatingUIPlacements.AutoStart:
+                placement = 'start';
+                autoPlacement = true;
+                break;
+            // Bottom
+            case FloatingUIPlacements.Bottom:
+                placement = "bottom";
+                break;
+            case FloatingUIPlacements.BottomEnd:
+                placement = "bottom-end";
+                break;
+            case FloatingUIPlacements.BottomStart:
+                placement = "bottom-start";
+                break;
+            // Left
+            case FloatingUIPlacements.Left:
+                placement = "left";
+                break;
+            case FloatingUIPlacements.LeftEnd:
+                placement = "left-end";
+                break;
+            case FloatingUIPlacements.LeftStart:
+                placement = "left-start";
+                break;
+            // Right
+            case FloatingUIPlacements.Right:
+                placement = "right";
+                break;
+            case FloatingUIPlacements.RightEnd:
+                placement = "right-end";
+                break;
+            case FloatingUIPlacements.RightStart:
+                placement = "right-start";
+                break;
+            // Top
+            case FloatingUIPlacements.Top:
+                placement = "top";
+                break;
+            case FloatingUIPlacements.TopEnd:
+                placement = "top-end";
+                break;
+            case FloatingUIPlacements.TopStart:
+                placement = "top-start";
+                break;
+        }
+        // Return the placement
+        return { autoPlacement: autoPlacement, placement: placement };
+    };
+    // Returns the theme
+    _FloatingUI.prototype.getTheme = function (themeValue) {
+        var theme = null;
+        // Set the theme
+        switch (themeValue) {
+            // Dark
+            case FloatingUITypes.Dark:
+                theme = "dark";
+                break;
+            // Danger
+            case FloatingUITypes.Danger:
+                theme = "danger";
+                break;
+            // Info
+            case FloatingUITypes.Info:
+                theme = "info";
+                break;
+            // Light
+            case FloatingUITypes.Light:
+                theme = "light";
+                break;
+            case FloatingUITypes.LightBorder:
+                theme = "light-border";
+                break;
+            // Material
+            case FloatingUITypes.Material:
+                theme = "material";
+                break;
+            // Primary
+            case FloatingUITypes.Primary:
+                theme = "primary";
+                break;
+            // Secondary
+            case FloatingUITypes.Secondary:
+                theme = "secondary";
+                break;
+            // Success
+            case FloatingUITypes.Success:
+                theme = "success";
+                break;
+            // Translucent
+            case FloatingUITypes.Translucent:
+                theme = "translucent";
+                break;
+            // Warning
+            case FloatingUITypes.Warning:
+                theme = "warning";
+                break;
+            // Default - Light Border
+            default:
+                theme = "light-border";
+                break;
+        }
+        // Return the theme
+        return theme;
+    };
+    // Refresh the element position
+    _FloatingUI.prototype.refresh = function () {
+        var _this = this;
+        // Create the floating ui
+        (0, dom_1.computePosition)(this._elTarget, this._elContent, this._options).then(function (_a) {
+            var _b;
+            var _c;
+            var x = _a.x, y = _a.y, middlewareData = _a.middlewareData;
+            // Update the location
+            Object.assign(_this._elContent.style, {
+                left: "".concat(x, "px"),
+                top: "".concat(y, "px")
+            });
+            // See if the arrow exists
+            if (_this._elArrow) {
+                var arrowX = middlewareData.arrow.x;
+                var arrowY = middlewareData.arrow.y;
+                var side = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[((_c = middlewareData.offset) === null || _c === void 0 ? void 0 : _c.placement) || _this._options.placement.split('-')[0]];
+                // Update the location
+                Object.assign(_this._elArrow.style, (_b = {
+                        left: arrowX != null ? "".concat(arrowX, "px") : '',
+                        top: arrowY != null ? "".concat(arrowY, "px") : '',
+                        right: '',
+                        bottom: ''
+                    },
+                    _b[side] = '-4px',
+                    _b));
+            }
+        });
+    };
+    /**
+     * Public Methods
+     */
+    _FloatingUI.prototype.setContent = function (el) { this._elContent = el; };
+    // Hides the content
+    _FloatingUI.prototype.hide = function () {
+        // Remove it from the document
+        this._elContent.classList.add("d-none");
+        if (document.body.contains(this._elContent)) {
+            document.body.removeChild(this._elContent);
+        }
+    };
+    Object.defineProperty(_FloatingUI.prototype, "isVisible", {
+        // Determines if the content is visible
+        get: function () { return !this._elContent.classList.contains("d-none"); },
+        enumerable: false,
+        configurable: true
+    });
+    // Shows the content
+    _FloatingUI.prototype.show = function () {
+        // Append it to the document
+        this._elContent.classList.remove("d-none");
+        if (!document.body.contains(this._elContent)) {
+            document.body.appendChild(this._elContent);
+            this.refresh();
+        }
+    };
+    // Toggles the floating ui
+    _FloatingUI.prototype.toggle = function () { this.isVisible ? this.hide() : this.show(); };
+    // Static events
+    _FloatingUI.Events = [];
+    _FloatingUI.EventsCreated = false;
+    _FloatingUI.ScrollEvents = [];
+    return _FloatingUI;
+}());
+var FloatingUI = function (props) { return new _FloatingUI(props); };
+exports.FloatingUI = FloatingUI;

package/build/components/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+// Components
 __exportStar(require("./accordion"), exports);
 __exportStar(require("./alert"), exports);
 __exportStar(require("./badge"), exports);
@@ -26,6 +27,7 @@ __exportStar(require("./carousel"), exports);
 __exportStar(require("./checkboxGroup"), exports);
 __exportStar(require("./collapse"), exports);
 __exportStar(require("./dropdown"), exports);
+__exportStar(require("./floating-ui"), exports);
 __exportStar(require("./form"), exports);
 __exportStar(require("./iconLink"), exports);
 __exportStar(require("./inputGroup"), exports);
@@ -46,3 +48,5 @@ __exportStar(require("./toast"), exports);
 __exportStar(require("./toolbar"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./tooltipGroup"), exports);
+// Custom Elements
+__exportStar(require("./custom-element"), exports);

package/build/components/modal/index.js

@@ -91,6 +91,8 @@ var _Modal = /** @class */ (function (_super) {
                 closeButton ? closeButton.classList.add("d-none") : null;
             }
         }
+        // Set the header
+        (0, common_1.appendContent)(this.el.querySelector(".modal-header"), this.props.header);
         // Set the body
         (0, common_1.appendContent)(this.el.querySelector(".modal-body"), this.props.body);
         // Set the footer
@@ -303,8 +305,12 @@ var _Modal = /** @class */ (function (_super) {
         // Get the title
         var elTitle = this.el.querySelector(".modal-title");
         if (elTitle) {
-            // Set the text
-            elTitle.innerHTML = title == null ? "" : title;
+            // Clear the element
+            while (elTitle.firstChild) {
+                elTitle.removeChild(elTitle.firstChild);
+            }
+            // Append the content
+            (0, common_1.appendContent)(elTitle, title);
         }
     };
     // Updates the type

package/build/components/nav/index.js

@@ -27,7 +27,7 @@ var _Nav = /** @class */ (function (_super) {
     __extends(_Nav, _super);
     // Constructor
     function _Nav(props, template, itemTemplate) {
-        if (template === void 0) { template = props.isTabs ? (props.isVertical ? templates_1.HTMLVerticalTabs : templates_1.HTMLTabs) : templates_1.HTML; }
+        if (template === void 0) { template = props.menuOnly ? templates_1.HTML : (props.isVertical ? templates_1.HTMLVerticalTabs : templates_1.HTMLTabs); }
         var _this = _super.call(this, template, props) || this;
         _this._links = null;
         // Configure the collapse
@@ -44,12 +44,12 @@ var _Nav = /** @class */ (function (_super) {
         var nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
         if (nav) {
             this.props.id ? nav.id = this.props.id : null;
-            this.props.enableFill ? this.el.classList.add("nav-fill") : null;
-            this.props.isJustified ? this.el.classList.add("nav-justified") : null;
-            this.props.isPills ? this.el.classList.add("nav-pills") : null;
-            this.props.isTabs ? this.el.classList.add("nav-tabs") : null;
-            this.props.isUnderline ? this.el.classList.add("nav-underline") : null;
-            this.props.isVertical ? this.el.classList.add("flex-column") : null;
+            this.props.enableFill ? nav.classList.add("nav-fill") : null;
+            this.props.isJustified ? nav.classList.add("nav-justified") : null;
+            this.props.isPills ? nav.classList.add("nav-pills") : null;
+            this.props.isTabs ? nav.classList.add("nav-tabs") : null;
+            this.props.isUnderline ? nav.classList.add("nav-underline") : null;
+            this.props.isVertical ? nav.classList.add("flex-column") : null;
         }
         // Render the nav links
         this.renderItems(itemTemplate);

package/build/components/nav/templates.js

@@ -8,6 +8,6 @@ exports.HTMLLink = "\n<li class=\"nav-item\">\n    <a class=\"nav-link\" href=\"
 // Tab
 exports.HTMLTab = "<div class=\"tab-pane\" role=\"tabpanel\"></div>";
 // Tabs
-exports.HTMLTabs = "\n<div class=\"row\">\n    <div class=\"col\">\n        <ul class=\"nav nav-tabs\" role=\"tablist\"></ul>\n        <div class=\"tab-content\"></div>\n    </div>\n</div>".trim();
+exports.HTMLTabs = "\n<div class=\"row\">\n    <div class=\"col\">\n        <ul class=\"nav\" role=\"tablist\"></ul>\n        <div class=\"tab-content\"></div>\n    </div>\n</div>".trim();
 // Vertical Tabs
 exports.HTMLVerticalTabs = "\n<div class=\"row\">\n    <div class=\"col-3\">\n        <ul class=\"nav flex-column\" role=\"tablist\"></ul>\n    </div>\n    <div class=\"col-9\">\n        <div class=\"tab-content\"></div>\n    </div>\n</div>".trim();