gd-bs 6.1.6 → 6.1.7

package/index.html

@@ -1166,7 +1166,7 @@
                     imageUrl: "https://via.placeholder.com/400x200",
                     imageAlt: "First Slide",
                     isActive: true
-                }, {
+                }/*, {
                     captions: "<h5>Second Slide</h5>",
                     imageUrl: "https://via.placeholder.com/400x200",
                     imageAlt: "Second Slide"
@@ -1176,7 +1176,7 @@
                     imageAlt: "Third Slide"
                 }, {
                     content: "<h1>Header</h1><h3>Title</h3><p>Content</p>"
-                }]
+                }*/]
             });
             window["collapse"] = GD.Components.Collapse({
                 el: document.querySelector("#collapse"),

package/package.json

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

package/src/components/carousel/index.ts

@@ -31,7 +31,7 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
     // Configure the card group
     private configure(slideTemplate: string) {
         // Set the attributes
-        this.el.id = "carousel" + (this.props.id == null ? "" : this.props.id);
+        this.el.id = this.props.id == null ? "carousel" : this.props.id;
         this.props.enableCrossfade ? this.el.classList.add("carousel-fade") : null;
 
         // Render the indicators
@@ -182,8 +182,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                     let item = items[i];
 
                     // Create the item
-                    let elItem = document.createElement("li");
+                    let elItem = document.createElement("button");
                     elItem.setAttribute("data-bs-target", "#" + this.el.id);
+                    elItem.setAttribute("aria-label", "Slide " + (i + 1));
                     elItem.setAttribute("data-bs-slide-to", i.toString());
                     item.isActive ? elItem.classList.add("active") : null;
                     elItem.addEventListener("click", ev => {
@@ -194,7 +195,7 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
 
                         // Go to the slide
                         this.nextWhenVisible(elSlide.getAttribute("data-bs-slide-to"));
-                    })
+                    });
 
                     // Add the item
                     indicators.appendChild(elItem);
@@ -215,18 +216,30 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         // Get the indicators
         let slides = this.el.querySelector(".carousel-inner");
         if (slides) {
+            let hasActiveItem = false;
+
             // Parse the items
             let items = this.props.items || [];
             for (let i = 0; i < items.length; i++) {
                 let slide = new CarouselItem(items[i], slideTemplate);
                 this._slides.push(slide);
 
+                // See if this is active
+                slide.isActive ? hasActiveItem = true : null;
+
                 // Create the item element
                 slides.appendChild(slide.el);
 
                 // Call the event
                 this.props.onSlideRendered ? this.props.onSlideRendered(slide.el, items[i]) : null;
             }
+
+            // See if it doesn't have an active item
+            if (!hasActiveItem) {
+                // Set the first as active
+                let firstSlide = this._slides[0];
+                firstSlide ? firstSlide.el.classList.add("active") : null;
+            }
         }
     }
 
@@ -265,6 +278,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         let nextSlide: CarouselItem = null;
         let options = this.props.options || {};
 
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) { return; }
+
         // Parse the slides
         for (let i = 0; i < this._slides.length; i++) {
             let slide = this._slides[i];
@@ -281,8 +297,10 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                 nextSlide = this._slides[i + 1] || this._slides[0];
 
                 // Update the indicators
-                this._indicators[i].classList.remove("active");
-                (this._indicators[i + 1] || this._indicators[0]).classList.add("active");
+                let indicator = this._indicators[i];
+                indicator ? indicator.classList.remove("active") : null;
+                let nextIndicator = this._indicators[i + 1] || this._indicators[0];
+                nextIndicator ? nextIndicator.classList.add("active") : null;
                 break;
             }
         }
@@ -297,6 +315,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         let nextSlide: CarouselItem = this._slides[idx];
         let slideRight = true;
 
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) { return; }
+
         // Parse the slides
         for (let i = 0; i < this._slides.length; i++) {
             let slide = this._slides[i];
@@ -313,8 +334,10 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                 currentSlide = slide;
 
                 // Update the indicators
-                this._indicators[i].classList.remove("active");
-                this._indicators[idx].classList.add("active");
+                let indicator = this._indicators[i];
+                indicator ? indicator.classList.remove("active") : null;
+                let nextIndicator = this._indicators[idx];
+                nextIndicator ? nextIndicator.classList.add("active") : null;
                 break;
             }
         }
@@ -335,6 +358,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         let options = this.props.options || {};
         let prevSlide: CarouselItem = null;
 
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) { return; }
+
         // Parse the slides
         for (let i = 0; i < this._slides.length; i++) {
             let slide = this._slides[i];

package/src/components/carousel/item.ts

@@ -1,5 +1,5 @@
 import { ICarouselItem } from "./types";
-import { appendContent } from "../common";
+import { appendContent, setClassNames } from "../common";
 import { HTMLItem } from "./templates";
 
 /**
@@ -25,6 +25,9 @@ export class CarouselItem {
 
     // Configure the item
     private configure() {
+        // Set the class names
+        setClassNames(this._el, this._props.className);
+
         // Set the attributes
         this._props.isActive ? this._el.classList.add("active") : null;
 

package/src/components/carousel/templates.ts

@@ -1,7 +1,7 @@
 // Carousel
 export const HTML = `
 <div class="carousel slide" data-bs-ride="carousel">
-    <ol class="carousel-indicators"></ol>
+    <div class="carousel-indicators"></div>
     <div class="carousel-inner"></div>
     <a class="carousel-control-prev" href="#" role="button" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>

package/src/components/form/templates.ts

@@ -5,7 +5,7 @@ export const HTML = `<form class="needs-validation"></form>`;
 export const HTMLGroup = `
 <div>
     <label class="form-label" tabindex="-1"></label>
-    <small class="form-text text-muted" tabindex="-1"></small>
+    <small class="form-text" tabindex="-1"></small>
 </div>`.trim();
 
 // Row

package/src/components/modal/templates.ts

@@ -4,10 +4,10 @@ export const HTML = `
         <div class="modal-content">
             <div class="modal-header">
                 <div class="modal-title fs-5"></div>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" area-label="Close"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body"></div>
             <div class="modal-footer"></div>
         </div>
     </div>
-</div>`.trim();
+</div>`.trim();