gd-bs 6.1.5 → 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/iconLink/index.js

@@ -0,0 +1,84 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconLink = exports.IconLinkTypes = void 0;
+var base_1 = require("../base");
+var common_1 = require("../common");
+var templates_1 = require("./templates");
+/**
+ * Icon Link Types
+ */
+var IconLinkTypes;
+(function (IconLinkTypes) {
+    IconLinkTypes[IconLinkTypes["AfterText"] = 1] = "AfterText";
+    IconLinkTypes[IconLinkTypes["BeforeText"] = 2] = "BeforeText";
+})(IconLinkTypes = exports.IconLinkTypes || (exports.IconLinkTypes = {}));
+/**
+ * Icon Link
+ * @property props - The list box properties.
+ */
+var _IconLink = /** @class */ (function (_super) {
+    __extends(_IconLink, _super);
+    // Constructor
+    function _IconLink(props, template) {
+        if (template === void 0) { template = templates_1.HTML; }
+        var _this = _super.call(this, template, props) || this;
+        _this._elIcon = null;
+        // Configure the list box
+        _this.configure();
+        // Configure the events
+        _this.configureEvents();
+        // Configure the parent
+        _this.configureParent();
+        return _this;
+    }
+    // Configures the list box
+    _IconLink.prototype.configure = function () {
+        // Render the content
+        (0, common_1.appendContent)(this.el, this.props.content);
+        // Set the icon if it exists
+        if (this.props.iconType) {
+            if (typeof (this.props.iconType) === "function") {
+                // Set the icon
+                this._elIcon = this.props.iconType(this.props.iconSize, this.props.iconSize, this.props.iconClassName);
+            }
+            // Else, it's an element
+            else if (typeof (this.props.iconType === "object")) {
+                // Set the icon
+                this._elIcon = this.props.iconType;
+            }
+            else {
+                return;
+            }
+            // See if we are rendering the content first
+            if (this.props.type == IconLinkTypes.AfterText) {
+                // Append the icon
+                this.el.appendChild(this._elIcon);
+            }
+            else {
+                // Prepend the icon
+                this.el.prepend(this._elIcon);
+            }
+        }
+    };
+    // Configures the events
+    _IconLink.prototype.configureEvents = function () {
+    };
+    return _IconLink;
+}(base_1.Base));
+var IconLink = function (props, template) { return new _IconLink(props, template); };
+exports.IconLink = IconLink;

package/build/components/iconLink/templates.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTML = void 0;
+// Form
+exports.HTML = "<a class=\"icon-link\" href=\"#\"></a>".trim();

package/build/components/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./checkboxGroup"), exports);
 __exportStar(require("./collapse"), exports);
 __exportStar(require("./dropdown"), exports);
 __exportStar(require("./form"), exports);
+__exportStar(require("./iconLink"), exports);
 __exportStar(require("./inputGroup"), exports);
 __exportStar(require("./jumbotron"), exports);
 __exportStar(require("./listBox"), exports);

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

package/build/components/nav/index.js

@@ -41,13 +41,14 @@ var _Nav = /** @class */ (function (_super) {
     // Configure the card group
     _Nav.prototype.configure = function (itemTemplate) {
         // Update the navigation
-        var nav = this.el.querySelector(".nav");
+        var nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
         if (nav) {
             this.props.id ? nav.id = this.props.id : null;
             this.props.enableFill ? this.el.classList.add("nav-fill") : null;
             this.props.isJustified ? this.el.classList.add("nav-justified") : null;
             this.props.isPills ? this.el.classList.add("nav-pills") : null;
             this.props.isTabs ? this.el.classList.add("nav-tabs") : null;
+            this.props.isUnderline ? this.el.classList.add("nav-underline") : null;
             this.props.isVertical ? this.el.classList.add("flex-column") : null;
         }
         // Render the nav links
@@ -59,25 +60,25 @@ var _Nav = /** @class */ (function (_super) {
         this.props.onRendered ? this.props.onRendered(this.el) : null;
     };
     // Configures the tab link event
-    _Nav.prototype.configureTabEvents = function (tab) {
+    _Nav.prototype.configureLinkEvents = function (link) {
         var _this = this;
         // Add a click event
-        tab.el.addEventListener("click", function () {
+        link.el.addEventListener("click", function () {
             var prevTab = null;
-            var newTab = tab;
+            var newTab = link;
             // Parse the links
             for (var i = 0; i < _this._links.length; i++) {
-                var link = _this._links[i];
+                var link_2 = _this._links[i];
                 // See if it's active
-                if (link.isActive) {
+                if (link_2.isActive) {
                     // Set the old tab
-                    prevTab = link;
+                    prevTab = link_2;
                     // Toggle it
-                    link.toggle(_this.props.fadeTabs);
+                    link_2.toggle(_this.props.fadeTabs);
                 }
             }
             // Toggle the link
-            tab.toggle(_this.props.fadeTabs);
+            link.toggle(_this.props.fadeTabs);
             // Call the click event
             _this.props.onClick ? _this.props.onClick(newTab, prevTab) : null;
         });
@@ -87,7 +88,7 @@ var _Nav = /** @class */ (function (_super) {
         // Clear the links
         this._links = [];
         // Get the nav and tab elements
-        var nav = this.el.querySelector(".nav") || this.el;
+        var nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
         if (nav) {
             var tabs = this.el.querySelector(".tab-content");
             // Parse the navigation items
@@ -97,10 +98,10 @@ var _Nav = /** @class */ (function (_super) {
                 var link = new link_1.NavLink(links[i], tabs ? true : false, itemTemplate);
                 nav.appendChild(link.el);
                 this._links.push(link);
+                // Configure the link event
+                this.configureLinkEvents(link);
                 // See if we are rendering tabs
                 if (tabs) {
-                    // Configure the events
-                    this.configureTabEvents(link);
                     // Add the tab content
                     tabs.appendChild(link.elTabContent);
                     // See if the fade option is enabled

package/build/components/nav/link.js

@@ -129,14 +129,14 @@ var NavLink = /** @class */ (function (_super) {
         if (this.isActive) {
             // Hide this link and tab
             this._elLink.classList.remove("active");
-            this._elTab.classList.remove("active");
-            this._elTab.classList.remove("show");
+            this._elTab ? this._elTab.classList.remove("active") : null;
+            this._elTab ? this._elTab.classList.remove("show") : null;
         }
         else {
             // Show this link and tab
             this._elLink.classList.add("active");
-            this._elTab.classList.add("active");
-            fadeTabs ? this._elTab.classList.add("show") : null;
+            this._elTab ? this._elTab.classList.add("active") : null;
+            this._elTab && fadeTabs ? this._elTab.classList.add("show") : null;
         }
     };
     return NavLink;