gd-bs 5.4.1 → 5.4.4

package/src/bs.scss

@@ -41,6 +41,7 @@
     @import "~bootstrap/scss/placeholders";
 }
 
+
 /** Helpers */
 
 @import "~bootstrap/scss/helpers";
@@ -88,17 +89,19 @@
         margin-bottom: 0;
     }
     /* Color match breadcrumb links */
-    .breadcrumb-item.active, .breadcrumb-item > a {
+    .breadcrumb-item.active,
+    .breadcrumb-item>a {
         color: #fff;
         text-decoration: none;
     }
     /* Color match breadcrumb hover links */
-    .breadcrumb-item > a:hover, .breadcrumb-item > a:focus {
+    .breadcrumb-item>a:hover,
+    .breadcrumb-item>a:focus {
         color: #dee2e6;
         text-decoration: underline;
     }
     /* Color match breadcrumb active links */
-    .breadcrumb-item > a:active {
+    .breadcrumb-item>a:active {
         color: #333333;
         font-weight: 500;
         text-decoration: underline;
@@ -223,7 +226,8 @@
         border-color: #6c757d;
     }
     /* Color match disabled form elements */
-    .form-control:disabled, .form-control[readonly] {
+    .form-control:disabled,
+    .form-control[readonly] {
         border-color: #eaeaea;
         color: #a6a6a6;
     }
@@ -290,7 +294,7 @@
     /* Fix padding on the nav links */
     .nav-link {
         color: #0078d4;
-        padding: 0 !important;
+        /* padding: 0 !important; Removing this by default. */
     }
     /* Set background color and border for nav-tabs */
     .nav-tabs .nav-link {
@@ -414,7 +418,9 @@
     }
 }
 
+
 /** Modal background - Shouldn't be under the .bs class */
+
 .modal-backdrop {
     position: fixed;
     top: 0;
@@ -432,7 +438,9 @@
     }
 }
 
+
 /** Offcanvas background - Shouldn't be under the .bs class */
+
 .offcanvas-backdrop {
     position: fixed;
     top: 0;
@@ -450,23 +458,33 @@
     }
 }
 
+
 /* Center the dataTables_info element properly */
+
 div.dataTables_wrapper div.dataTables_info {
     padding-top: 0.9rem;
 }
 
+
 /* Add proper width for dataTables_length select */
+
 div.dataTables_wrapper div.dataTables_length select {
     width: 3.75rem;
 }
 
+
 /* Color match colReorder line */
+
 div.DTCR_pointer {
     background-color: #0078d4;
 }
 
+
 /* Be sure to escape any characters, such as # to %23 when specifying hex color values in background-image */
+
+
 /* DataTables sorting with Bootstrap Icons */
+
 table.dataTable thead .sorting,
 table.dataTable thead .sorting_asc,
 table.dataTable thead .sorting_desc,
@@ -489,21 +507,28 @@ table.dataTable thead .sorting_desc_disabled:after {
     content: "" !important;
 }
 
+
 /* Bootstrap Icon: caret-up */
+
 table.dataTable thead .sorting {
     background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%236c757d' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3.204 11L8 5.519 12.796 11H3.204zm-.753-.659l4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z'/></svg>");
 }
 
+
 /* Bootstrap Icon: caret-up-fill */
+
 table.dataTable thead .sorting_asc {
     background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%236c757d' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
 }
 
+
 /* Bootstrap Icon: caret-down-fill */
+
 table.dataTable thead .sorting_desc {
     background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%236c757d' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
 }
 
+
 /* Tippy Tooltip primary theme color */
 
 .tippy-box[data-theme~='primary'] {
@@ -526,6 +551,7 @@ table.dataTable thead .sorting_desc {
     border-right-color: #0078d4;
 }
 
+
 /* Tippy Tooltip secondary theme color */
 
 .tippy-box[data-theme~='secondary'] {
@@ -548,6 +574,7 @@ table.dataTable thead .sorting_desc {
     border-right-color: #6c757d;
 }
 
+
 /* Tippy Tooltip success theme color */
 
 .tippy-box[data-theme~='success'] {
@@ -570,6 +597,7 @@ table.dataTable thead .sorting_desc {
     border-right-color: #198754;
 }
 
+
 /* Tippy Tooltip info theme color */
 
 .tippy-box[data-theme~='info'] {
@@ -593,6 +621,7 @@ table.dataTable thead .sorting_desc {
     border-right-color: #0dcaf0;
 }
 
+
 /* Tippy Tooltip warning theme color */
 
 .tippy-box[data-theme~='warning'] {
@@ -616,6 +645,7 @@ table.dataTable thead .sorting_desc {
     border-right-color: #ffc107;
 }
 
+
 /* Tippy Tooltip danger theme color */
 
 .tippy-box[data-theme~='danger'] {
@@ -638,6 +668,7 @@ table.dataTable thead .sorting_desc {
     border-right-color: #dc3545;
 }
 
+
 /* Tippy Tooltip light theme color - override Tippy default to match Bootstrap */
 
 .tippy-box[data-theme~='light'] {
@@ -661,6 +692,7 @@ table.dataTable thead .sorting_desc {
     border-right-color: #f8f9fa !important;
 }
 
+
 /* Tippy Tooltip dark theme color */
 
 .tippy-box[data-theme~='dark'] {
@@ -681,4 +713,4 @@ table.dataTable thead .sorting_desc {
 
 .tippy-box[data-theme~='dark'][data-placement^='right']>.tippy-arrow::before {
     border-right-color: #212529;
-}
+}

package/src/components/carousel/index.ts

@@ -59,6 +59,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                 this.nextWhenVisible(options.slide);
             }
         }
+
+        // Call the event if it exists
+        this.props.onRendered ? this.props.onRendered(this.el, this.props) : null;
     }
 
     // Configures the events
@@ -73,12 +76,12 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                 // Add a keydown event
                 el.addEventListener("keydown", (ev) => {
                     // See if the left arrow was pressed
-                    if (ev.keyCode == 37) {
+                    if (ev.code == "37") {
                         // Move to the previous slide
                         this.previous();
                     }
                     // Else, see if the right arrow was pressed
-                    else if (ev.keyCode == 39) {
+                    else if (ev.code == "39") {
                         // Move tot he next slide
                         this.next();
                     }
@@ -220,6 +223,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
 
                 // Create the item element
                 slides.appendChild(slide.el);
+
+                // Call the event
+                this.props.onSlideRendered ? this.props.onSlideRendered(slide.el, items[i]) : null;
             }
         }
     }

package/src/components/carousel/item.ts

@@ -48,6 +48,9 @@ export class CarouselItem {
             // Append the content
             appendContent(this._el, this._props.content);
         }
+
+        // Call the event if it exists
+        this._props.onRendered ? this._props.onRendered(this._el, this._props) : null;
     }
 
     /**

package/src/components/carousel/types.d.ts

@@ -124,6 +124,7 @@ export interface ICarouselItem<T = Element> {
     imageAlt?: string;
     imageUrl?: string;
     isActive?: boolean;
+    onRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
 }
 
 /**
@@ -147,5 +148,7 @@ export interface ICarouselProps<T = Element> extends IBaseProps<ICarousel> {
     id?: string;
     isDark?: boolean;
     items?: Array<ICarouselItem<T>>;
+    onRendered?: (el?: HTMLElement, props?: ICarouselProps) => void;
+    onSlideRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
     options?: ICarouselOptions;
 }

package/src/components/dropdown/item.ts

@@ -125,8 +125,9 @@ export class DropdownItem {
             // Prevent the page from moving to the top
             ev.preventDefault();
 
-            // See if we are selecting items
-            if (this._parent.autoSelect) {
+            // See if we are automatically selecting items
+            let autoSelect = typeof (this._parent.autoSelect) === "boolean" ? this._parent.autoSelect : true;
+            if (autoSelect) {
                 // Toggle the item
                 this.toggle();
             }

package/src/components/modal/index.ts

@@ -195,7 +195,7 @@ class _Modal extends Base<IModalProps> implements IModal {
             // Add a click event
             (this.el as HTMLElement).addEventListener("keydown", ev => {
                 // See if the escape key was clicked and the modal is visible
-                if (ev.keyCode === 27 && this.isVisible) {
+                if (ev.code === "27" && this.isVisible) {
                     // Toggle the modal
                     this.toggle();
                 }

package/src/components/navbar/index.ts

@@ -95,7 +95,7 @@ class _Navbar extends Base<INavbarProps> implements INavbar {
             // Set a keydown event to catch the "Enter" key being pressed
             searchbox.addEventListener("keydown", ev => {
                 // See if the "Enter" key was pressed
-                if (ev.keyCode == 13) {
+                if (ev.code == "13") {
                     // Disable the postback
                     ev.preventDefault();
 

package/src/components/offcanvas/index.ts

@@ -144,7 +144,7 @@ class _Offcanvas extends Base<IOffcanvasProps> implements IOffcanvas {
             // Add a click event
             (this.el as HTMLElement).addEventListener("keydown", ev => {
                 // See if the escape key was clicked and the modal is visible
-                if (ev.keyCode === 27 && this.isVisible) {
+                if (ev.code === "27" && this.isVisible) {
                     // Toggle the modal
                     this.toggle();
                 }