gd-bs 5.3.9 → 5.4.2

package/src/bs.scss

@@ -218,8 +218,13 @@
         background-color: #0078d4;
         border-color: #0078d4;
     }
+    /* Color match form elements */
+    .form-control {
+        border-color: #6c757d;
+    }
     /* Color match disabled form elements */
     .form-control:disabled, .form-control[readonly] {
+        border-color: #eaeaea;
         color: #a6a6a6;
     }
     /* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */

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/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();
                 }