gd-bs 6.8.7 → 6.9.0

package/build/components/nav/index.js

@@ -46,10 +46,17 @@ var _Nav = /** @class */ (function (_super) {
             this.props.id ? nav.id = this.props.id : 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;
+            // Set the class name based on the properties
+            if (this.props.isTabs) {
+                nav.classList.add("nav-tabs");
+            }
+            else if (this.props.isPills) {
+                nav.classList.add("nav-pills");
+            }
+            else if (this.props.isTabs) {
+                nav.classList.add("nav-tabs");
+            }
         }
         // Render the nav links
         this.renderItems(itemTemplate);

package/build/components/pagination/index.js

@@ -37,6 +37,7 @@ var _Pagination = /** @class */ (function (_super) {
         if (template === void 0) { template = templates_1.HTML; }
         if (itemTemplate === void 0) { itemTemplate = templates_1.HTMLItem; }
         var _this = _super.call(this, template, props) || this;
+        _this._elList = null;
         _this._items = null;
         // Configure the collapse
         _this.configure(itemTemplate);
@@ -49,23 +50,23 @@ var _Pagination = /** @class */ (function (_super) {
         // Update the nav properties
         this.props.label ? this.el.setAttribute("aria-label", this.props.label) : null;
         // Update the list
-        var list = this.el.querySelector("ul");
-        if (list) {
-            this.props.isLarge ? list.classList.add("pagination-lg") : null;
-            this.props.isSmall ? list.classList.add("pagination-sm") : null;
+        this._elList = this.el.querySelector("ul");
+        if (this._elList) {
+            this.props.isLarge ? this._elList.classList.add("pagination-lg") : null;
+            this.props.isSmall ? this._elList.classList.add("pagination-sm") : null;
             // Read the alignment
             switch (this.props.alignment) {
                 // Danger
                 case PaginationAlignment.Center:
-                    list.classList.add("justify-content-center");
+                    this._elList.classList.add("justify-content-center");
                     break;
                 // Dark
                 case PaginationAlignment.Right:
-                    list.classList.add("justify-content-end");
+                    this._elList.classList.add("justify-content-end");
                     break;
             }
             // Render the page numbers
-            this.renderPageNumbers(list, itemTemplate);
+            this.renderPageNumbers(1, itemTemplate);
         }
     };
     // Configures the next/previous buttons, based on the active index
@@ -175,28 +176,37 @@ var _Pagination = /** @class */ (function (_super) {
         return item;
     };
     // Renders the page numbers
-    _Pagination.prototype.renderPageNumbers = function (list, itemTemplate) {
+    _Pagination.prototype.renderPageNumbers = function (activeItem, itemTemplate) {
         // Clear the items
         this._items = [];
+        // Determine if there are > 10 pages
+        var pages = this.props.numberOfPages || 1;
+        var showFirstLast = pages > 10;
         // Create the previous link
         var item = this.createItem("Previous", itemTemplate);
         item.classList.add("disabled");
         item.classList.add("previous");
-        list.appendChild(item);
+        this._elList.appendChild(item);
+        // See if we are showing the first/last links
+        if (showFirstLast) {
+            item = this.createItem("1", itemTemplate);
+            activeItem == 1 ? item.classList.add("active") : null;
+            item.classList.add("next");
+            this._elList.appendChild(item);
+        }
         // Loop for the number of pages to create
         // Parse the number of pages
-        var pages = this.props.numberOfPages || 1;
-        for (var i = 1; i <= pages; i++) {
+        for (var i = 2; i <= pages; i++) {
             // Create a link
             item = this.createItem(i.toString(), itemTemplate);
-            i == 1 ? item.classList.add("active") : null;
-            list.appendChild(item);
+            i == activeItem ? item.classList.add("active") : null;
+            this._elList.appendChild(item);
         }
         // Create the next link
         item = this.createItem("Next", itemTemplate);
         pages > 1 ? null : item.classList.add("disabled");
         item.classList.add("next");
-        list.appendChild(item);
+        this._elList.appendChild(item);
     };
     return _Pagination;
 }(base_1.Base));

package/build/components/tooltip/index.js

@@ -64,14 +64,18 @@ var _Tooltip = /** @class */ (function (_super) {
         _this._floatingUI = null;
         // Configure the collapse
         _this.configure();
-        // Configure the parent
-        _this.configureParent();
         return _this;
     }
     // Configure the tooltip
     _Tooltip.prototype.configure = function () {
-        // See if the target element was not defined
-        if (this.props.target == null) {
+        // See if the target element was defined
+        if (this.props.target) {
+            // Update the element
+            this.el = this.props.target;
+            // Configure the options
+            this.configureOptions();
+        }
+        else {
             // See if the dropdown property exists
             if (this.props.ddlProps) {
                 // Set the default properties
@@ -96,9 +100,11 @@ var _Tooltip = /** @class */ (function (_super) {
                 // Update the element
                 this.el = this._btn.el;
             }
+            // Configure the options
+            this.configureOptions();
+            // Configure the parent
+            this.configureParent();
         }
-        // Configure the options
-        this.configureOptions();
     };
     // Configure the options
     _Tooltip.prototype.configureOptions = function () {
@@ -152,61 +158,61 @@ var _Tooltip = /** @class */ (function (_super) {
             default:
                 // Set the default theme
                 theme = "secondary";
-                // See if a button/dropdown exists
-                var objType = this.props.btnProps && this.props.btnProps.type > 0 ? this.props.btnProps.type : null;
-                objType = this.props.ddlProps && this.props.ddlProps.type > 0 ? this.props.ddlProps.type : objType;
-                if (objType > 0) {
-                    // Match the theme to the button/dropdown type
-                    switch (objType) {
-                        // Danger
-                        case button_1.ButtonTypes.Danger:
-                        case button_1.ButtonTypes.OutlineDanger:
-                            theme = "danger";
-                            break;
-                        // Dark
-                        case button_1.ButtonTypes.Dark:
-                        case button_1.ButtonTypes.OutlineDark:
-                            theme = "dark";
-                            break;
-                        // Info
-                        case button_1.ButtonTypes.Info:
-                        case button_1.ButtonTypes.OutlineInfo:
-                            theme = "info";
-                            break;
-                        // Light
-                        case button_1.ButtonTypes.Light:
-                        case button_1.ButtonTypes.OutlineLight:
-                            theme = "light";
-                            break;
-                        // Link
-                        case button_1.ButtonTypes.Link:
-                        case button_1.ButtonTypes.OutlineLink:
-                            theme = "light-border";
-                            break;
-                        // Primary
-                        case button_1.ButtonTypes.Primary:
-                        case button_1.ButtonTypes.OutlinePrimary:
-                            theme = "primary";
-                            break;
-                        // Secondary
-                        case button_1.ButtonTypes.Secondary:
-                        case button_1.ButtonTypes.OutlineSecondary:
-                            theme = "secondary";
-                            break;
-                        // Success
-                        case button_1.ButtonTypes.Success:
-                        case button_1.ButtonTypes.OutlineSuccess:
-                            theme = "success";
-                            break;
-                        // Warning
-                        case button_1.ButtonTypes.Warning:
-                        case button_1.ButtonTypes.OutlineWarning:
-                            theme = "warning";
-                            break;
-                    }
-                }
                 break;
         }
+        // See if a button/dropdown exists
+        var objType = this.props.btnProps && this.props.btnProps.type > 0 ? this.props.btnProps.type : null;
+        objType = this.props.ddlProps && this.props.ddlProps.type > 0 ? this.props.ddlProps.type : objType;
+        if (objType > 0) {
+            // Match the theme to the button/dropdown type
+            switch (objType) {
+                // Danger
+                case button_1.ButtonTypes.Danger:
+                case button_1.ButtonTypes.OutlineDanger:
+                    theme = "danger";
+                    break;
+                // Dark
+                case button_1.ButtonTypes.Dark:
+                case button_1.ButtonTypes.OutlineDark:
+                    theme = "dark";
+                    break;
+                // Info
+                case button_1.ButtonTypes.Info:
+                case button_1.ButtonTypes.OutlineInfo:
+                    theme = "info";
+                    break;
+                // Light
+                case button_1.ButtonTypes.Light:
+                case button_1.ButtonTypes.OutlineLight:
+                    theme = "light";
+                    break;
+                // Link
+                case button_1.ButtonTypes.Link:
+                case button_1.ButtonTypes.OutlineLink:
+                    theme = "light-border";
+                    break;
+                // Primary
+                case button_1.ButtonTypes.Primary:
+                case button_1.ButtonTypes.OutlinePrimary:
+                    theme = "primary";
+                    break;
+                // Secondary
+                case button_1.ButtonTypes.Secondary:
+                case button_1.ButtonTypes.OutlineSecondary:
+                    theme = "secondary";
+                    break;
+                // Success
+                case button_1.ButtonTypes.Success:
+                case button_1.ButtonTypes.OutlineSuccess:
+                    theme = "success";
+                    break;
+                // Warning
+                case button_1.ButtonTypes.Warning:
+                case button_1.ButtonTypes.OutlineWarning:
+                    theme = "warning";
+                    break;
+            }
+        }
         // Set the tooltip content element
         if (typeof (this.props.content) === "string") {
             this._elContent = document.createElement("div");
@@ -220,29 +226,6 @@ var _Tooltip = /** @class */ (function (_super) {
         }
         // Set the padding
         this._elContent.classList.add("p-2");
-        // Set the on create event
-        /*
-        options["onCreate"] = (tippyObj) => {
-            // Get the content element
-            let elContent = tippyObj.popper.querySelector(".tippy-content") as HTMLElement;
-            if (elContent) {
-                // Set the class
-                elContent.classList.add("bs");
-
-                // Get the custom class name(s)
-                let custom = (this.props.className || "").trim().split(" ");
-                for (let i = 0; i < custom.length; i++) {
-                    let className = custom[i];
-
-                    // Add the custom class name
-                    className ? elContent.classList.add(custom[i]) : null;
-                }
-            }
-
-            // Call the custom event if it's defined
-            this.props.options && this.props.options.onCreate ? this.props.options.onCreate(tippyObj) : null;
-        }
-            */
         // Create the floating ui
         this._floatingUI = (0, floating_ui_1.FloatingUI)({
             className: "floating-tooltip",
@@ -302,14 +285,17 @@ var _Tooltip = /** @class */ (function (_super) {
     });
     // Sets the tippy content
     _Tooltip.prototype.setContent = function (content) {
-        // Set the tippy content
-        this._floatingUI.setContent(content);
         // See if the content is a string
         if (typeof (content) === "string") {
             // Update the content
+            this._elContent.innerHTML = content;
             this._btn ? this._btn.el.setAttribute("aria-description", content) : null;
             this._ddl ? this._ddl.el.setAttribute("aria-description", content) : null;
         }
+        else {
+            // Set the tippy content
+            this._floatingUI.setContent(content);
+        }
     };
     // Shows the tooltip
     _Tooltip.prototype.show = function () {