gd-bs 6.8.8 → 6.9.1

package/index.html

@@ -1384,7 +1384,8 @@
             });
             GD.Components.Pagination({
                 el: document.querySelector("#paging"),
-                numberOfPages: 5,
+                numberOfPages: 200,
+                isCompact: true,
                 onClick: function (pageNumber) {
                     alert(pageNumber + " was clicked.");
                 }

package/indexv2.html

@@ -380,7 +380,7 @@
 
     <h5>Paging</h5>
 
-    <bs-paging number-of-pages="5" on-click="MyLib.pagingOnClick"></bs-paging>
+    <bs-paging number-of-pages="20" on-click="MyLib.pagingOnClick"></bs-paging>
 
     <h5>Popover</h5>
 

package/package.json

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

package/src/components/dropdown/index.ts

@@ -82,6 +82,12 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         // Render the items
         this.renderItems();
 
+        // See if values were defined
+        if (this.props.value) {
+            // Set the values
+            this.setValue(this.props.value);
+        }
+
         // Set the menu element
         this._elMenu = this.el.querySelector(".dropdown-menu");
         if (this._elMenu) {

package/src/components/nav/index.ts

@@ -32,10 +32,12 @@ class _Nav extends Base<INavProps> implements INav {
             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

package/src/components/pagination/index.ts

@@ -15,6 +15,7 @@ export enum PaginationAlignment {
  * Pagination
  */
 class _Pagination extends Base<IPaginationProps> implements IPagination {
+    private _elList: HTMLUListElement = null;
     private _items: Array<HTMLLIElement> = null;
 
     // Constructor
@@ -34,25 +35,25 @@ class _Pagination extends Base<IPaginationProps> implements IPagination {
         this.props.label ? this.el.setAttribute("aria-label", this.props.label) : null;
 
         // Update the list
-        let 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);
         }
     }
 
@@ -176,31 +177,42 @@ class _Pagination extends Base<IPaginationProps> implements IPagination {
     }
 
     // Renders the page numbers
-    private renderPageNumbers(list: HTMLUListElement, itemTemplate: string) {
+    private renderPageNumbers(activeItem: number, itemTemplate: string) {
         // Clear the items
         this._items = [];
 
+        // Determine if there are > 10 pages
+        let pages = this.props.numberOfPages || 1;
+        let showFirstLast = pages > 10;
+
         // Create the previous link
         let 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
-        let pages = this.props.numberOfPages || 1;
-        for (let i = 1; i <= pages; i++) {
+        for (let 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);
     }
 }
 export const Pagination = (props: IPaginationProps, template?: string, itemTemplate?: string): IPagination => { return new _Pagination(props, template, itemTemplate); }

package/src/components/tooltip/index.ts

@@ -269,14 +269,15 @@ class _Tooltip extends Base<ITooltipProps> {
 
     // Sets the tippy content
     setContent(content: string | Element) {
-        // 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);
         }
     }