gd-bs 6.1.6 → 6.1.7

package/build/components/carousel/index.js

@@ -45,7 +45,7 @@ var _Carousel = /** @class */ (function (_super) {
     // Configure the card group
     _Carousel.prototype.configure = function (slideTemplate) {
         // 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
         this.renderIndicators();
@@ -181,8 +181,9 @@ var _Carousel = /** @class */ (function (_super) {
                 for (var i = 0; i < items.length; i++) {
                     var item = items[i];
                     // Create the item
-                    var elItem = document.createElement("li");
+                    var 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", function (ev) {
@@ -210,16 +211,25 @@ var _Carousel = /** @class */ (function (_super) {
         // Get the indicators
         var slides = this.el.querySelector(".carousel-inner");
         if (slides) {
+            var hasActiveItem = false;
             // Parse the items
             var items = this.props.items || [];
             for (var i = 0; i < items.length; i++) {
                 var slide = new item_1.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
+                var firstSlide = this._slides[0];
+                firstSlide ? firstSlide.el.classList.add("active") : null;
+            }
         }
     };
     // Starts to move automatically
@@ -257,6 +267,10 @@ var _Carousel = /** @class */ (function (_super) {
         var currentSlide = null;
         var nextSlide = null;
         var options = this.props.options || {};
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) {
+            return;
+        }
         // Parse the slides
         for (var i = 0; i < this._slides.length; i++) {
             var slide = this._slides[i];
@@ -270,8 +284,10 @@ var _Carousel = /** @class */ (function (_super) {
                 currentSlide = slide;
                 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");
+                var indicator = this._indicators[i];
+                indicator ? indicator.classList.remove("active") : null;
+                var nextIndicator = this._indicators[i + 1] || this._indicators[0];
+                nextIndicator ? nextIndicator.classList.add("active") : null;
                 break;
             }
         }
@@ -283,6 +299,10 @@ var _Carousel = /** @class */ (function (_super) {
         var currentSlide = null;
         var nextSlide = this._slides[idx];
         var slideRight = true;
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) {
+            return;
+        }
         // Parse the slides
         for (var i = 0; i < this._slides.length; i++) {
             var slide = this._slides[i];
@@ -297,8 +317,10 @@ var _Carousel = /** @class */ (function (_super) {
                 // Set the current slide
                 currentSlide = slide;
                 // Update the indicators
-                this._indicators[i].classList.remove("active");
-                this._indicators[idx].classList.add("active");
+                var indicator = this._indicators[i];
+                indicator ? indicator.classList.remove("active") : null;
+                var nextIndicator = this._indicators[idx];
+                nextIndicator ? nextIndicator.classList.add("active") : null;
                 break;
             }
         }
@@ -315,6 +337,10 @@ var _Carousel = /** @class */ (function (_super) {
         var currentSlide = null;
         var options = this.props.options || {};
         var prevSlide = null;
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) {
+            return;
+        }
         // Parse the slides
         for (var i = 0; i < this._slides.length; i++) {
             var slide = this._slides[i];

package/build/components/carousel/item.js

@@ -23,6 +23,8 @@ var CarouselItem = /** @class */ (function () {
     }
     // Configure the item
     CarouselItem.prototype.configure = function () {
+        // Set the class names
+        (0, common_1.setClassNames)(this._el, this._props.className);
         // Set the attributes
         this._props.isActive ? this._el.classList.add("active") : null;
         // Get the image elements

package/build/components/carousel/templates.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLItem = exports.HTML = void 0;
 // Carousel
-exports.HTML = "\n<div class=\"carousel slide\" data-bs-ride=\"carousel\">\n    <ol class=\"carousel-indicators\"></ol>\n    <div class=\"carousel-inner\"></div>\n    <a class=\"carousel-control-prev\" href=\"#\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Previous</span>\n    </a>\n    <a class=\"carousel-control-next\" href=\"#\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Next</span>\n    </a>\n</div>".trim();
+exports.HTML = "\n<div class=\"carousel slide\" data-bs-ride=\"carousel\">\n    <div class=\"carousel-indicators\"></div>\n    <div class=\"carousel-inner\"></div>\n    <a class=\"carousel-control-prev\" href=\"#\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Previous</span>\n    </a>\n    <a class=\"carousel-control-next\" href=\"#\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Next</span>\n    </a>\n</div>".trim();
 // Carousel Item
 exports.HTMLItem = "\n<div class=\"carousel-item\">\n    <img class=\"d-block w-100\" />\n    <div class=\"carousel-caption\"></div>\n</div>".trim();

package/build/components/form/templates.js

@@ -4,6 +4,6 @@ exports.HTMLRow = exports.HTMLGroup = exports.HTML = void 0;
 // Form
 exports.HTML = "<form class=\"needs-validation\"></form>";
 // Group
-exports.HTMLGroup = "\n<div>\n    <label class=\"form-label\" tabindex=\"-1\"></label>\n    <small class=\"form-text text-muted\" tabindex=\"-1\"></small>\n</div>".trim();
+exports.HTMLGroup = "\n<div>\n    <label class=\"form-label\" tabindex=\"-1\"></label>\n    <small class=\"form-text\" tabindex=\"-1\"></small>\n</div>".trim();
 // Row
 exports.HTMLRow = "<div class=\"row\"></div>";

package/build/components/modal/templates.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTML = void 0;
-exports.HTML = "\n<div class=\"modal\" tabindex=\"-1\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <div class=\"modal-title fs-5\"></div>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" area-label=\"Close\"></button>\n            </div>\n            <div class=\"modal-body\"></div>\n            <div class=\"modal-footer\"></div>\n        </div>\n    </div>\n</div>".trim();
+exports.HTML = "\n<div class=\"modal\" tabindex=\"-1\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <div class=\"modal-title fs-5\"></div>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n            </div>\n            <div class=\"modal-body\"></div>\n            <div class=\"modal-footer\"></div>\n        </div>\n    </div>\n</div>".trim();