gd-bs 6.8.2 → 6.8.4

package/build/components/listBox/index.js

@@ -0,0 +1,296 @@
+"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.ListBox = void 0;
+var base_1 = require("../base");
+var templates_1 = require("./templates");
+/**
+ * List Box
+ * @property props - The list box properties.
+ */
+var _ListBox = /** @class */ (function (_super) {
+    __extends(_ListBox, _super);
+    // Constructor
+    function _ListBox(props, template) {
+        if (template === void 0) { template = templates_1.HTML; }
+        var _this = _super.call(this, template, props) || this;
+        _this._elLabel = null;
+        _this._elSearchBox = null;
+        _this._elDatalist = null;
+        _this._elValues = null;
+        _this._initFl = false;
+        _this._items = null;
+        _this._selectedItems = null;
+        // Configure the list box
+        _this.configure();
+        // Configure the events
+        _this.configureEvents();
+        // Configure the parent
+        _this.configureParent();
+        // Set the flag
+        _this._initFl = true;
+        return _this;
+    }
+    // Configures the list box
+    _ListBox.prototype.configure = function () {
+        this._elLabel = this.el.querySelector("label");
+        this._elSearchBox = this.el.querySelector("input");
+        this._elDatalist = this.el.querySelector("datalist");
+        this._elValues = this.el.querySelector("ul");
+        // See if the placeholder exists
+        if (this.props.placeholder) {
+            // Update the placeholder
+            this._elSearchBox ? this._elSearchBox.placeholder = this.props.placeholder : null;
+        }
+        // See if the id is set
+        if (this.props.id) {
+            // Update the ids
+            this.el.id = this.props.id;
+            this._elLabel ? this._elLabel.setAttribute("for", this.props.id + "-search") : null;
+            this._elSearchBox ? this._elSearchBox.id = this.props.id + "-search" : null;
+            this._elSearchBox ? this._elSearchBox.setAttribute("list", this.props.id + "-list") : null;
+            this._elDatalist ? this._elDatalist.id = this.props.id + "-list" : null;
+        }
+        // See if the label exists
+        if (this._elLabel) {
+            if (this.props.label) {
+                this._elLabel.innerHTML = this.props.label;
+            }
+            else {
+                // Remove the label
+                this.el.removeChild(this._elLabel);
+            }
+        }
+        // See if this is read-only
+        if (this.props.isReadonly) {
+            // Disable the search box
+            this._elSearchBox ? this._elSearchBox.disabled = true : null;
+        }
+        // Set the required property
+        this._elSearchBox.required = this.props.required ? true : false;
+        // Set the options
+        this.setOptions(this.props.items);
+        // Set the value if it's been defined
+        if (this.props.value != undefined) {
+            this.setValue(this.props.value);
+        }
+    };
+    // Configures the events
+    _ListBox.prototype.configureEvents = function () {
+        var _this = this;
+        // Execute the load event
+        var returnVal = this.props.onLoadData ? this.props.onLoadData() : null;
+        if (returnVal) {
+            // See if a promise was returned
+            if (typeof (returnVal.then) === "function") {
+                // Wait for the promise to complete
+                returnVal.then(function (items) {
+                    // Set the options
+                    _this.setOptions(items);
+                    // Set the value if it's been defined
+                    if (_this.props.value != undefined) {
+                        _this.setValue(_this.props.value);
+                    }
+                });
+            }
+            else {
+                // Set the options
+                this.setOptions(returnVal);
+                // Set the value if it's been defined
+                if (this.props.value != undefined) {
+                    this.setValue(this.props.value);
+                }
+            }
+        }
+        // Set the change event on the search box
+        this._elSearchBox.addEventListener("input", function (ev) {
+            var value = _this._elSearchBox.value;
+            // Parse the items
+            for (var i = 0; i < _this._items.length; i++) {
+                var item = _this._items[i];
+                // See if this is the target item
+                if (item.text == value) {
+                    // See if this is a multi-select
+                    if (_this.props.multi) {
+                        var existsFl = false;
+                        // Parse the selected items
+                        for (var j = 0; j < _this._selectedItems.length; j++) {
+                            var selectedItem = _this._selectedItems[j];
+                            // See if this item is already selected
+                            if (selectedItem.text == item.text) {
+                                // Set the flag
+                                existsFl = true;
+                                break;
+                            }
+                        }
+                        // Ensure the item wasn't already selected
+                        if (!existsFl) {
+                            // Set the value
+                            _this.setValue(_this._selectedItems.concat(item).sort(function (a, b) {
+                                if (a.text < b.text) {
+                                    return -1;
+                                }
+                                if (a.text > b.text) {
+                                    return 1;
+                                }
+                                return 0;
+                            }));
+                            // Call the change event
+                            _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;
+                        }
+                    }
+                    else {
+                        // Set the value
+                        _this.setValue(value);
+                        // Call the change event
+                        _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;
+                    }
+                    // Clear the selected value
+                    _this._elSearchBox.value = "";
+                    // Bug - Edge (non-chromium)
+                    // The menu is still visible, so we fill force a "blur" to hide the menu after selection
+                    _this._elSearchBox.blur();
+                }
+            }
+        });
+    };
+    // Method to configure the item event
+    _ListBox.prototype.configureItemEvent = function (elRemove, elItem, item) {
+        var _this = this;
+        // Ensure the remove element exists
+        if (elRemove) {
+            // Add a click event to the badge
+            var badge = elItem.querySelector(".badge");
+            if (badge) {
+                badge.addEventListener("click", function (ev) {
+                    // Remove the item
+                    _this._elValues.removeChild(elItem);
+                    // Find the selected item
+                    for (var i = 0; i < _this._selectedItems.length; i++) {
+                        var selectedItem = _this._selectedItems[i];
+                        // See if this is the target item
+                        if (selectedItem.text == item.text) {
+                            // Remove this item
+                            _this._selectedItems.splice(i, 1);
+                            // Call the change event
+                            _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;
+                            break;
+                        }
+                    }
+                });
+            }
+        }
+    };
+    /**
+     * Public Interface
+     */
+    // Gets the selected items
+    _ListBox.prototype.getValue = function () {
+        // Return the value
+        return this.props.multi ? this._selectedItems : this._selectedItems[0];
+    };
+    // Sets the options
+    _ListBox.prototype.setOptions = function (items) {
+        if (items === void 0) { items = []; }
+        var elDatalist = this.el.querySelector("datalist");
+        if (elDatalist) {
+            // Save a reference to the items
+            this._items = items;
+            // Clear the options
+            while (elDatalist.firstChild) {
+                elDatalist.removeChild(elDatalist.firstChild);
+            }
+            // Clear the value
+            this._elSearchBox.value = "";
+            this._selectedItems = [];
+            // Parse the items
+            for (var i = 0; i < items.length; i++) {
+                var props = items[i];
+                // Add the option
+                var elOption = document.createElement("option");
+                elOption.value = props.text;
+                elDatalist.appendChild(elOption);
+                // See if the item is selected
+                if (props.isSelected) {
+                    // Add the selected item
+                    this._selectedItems.push(props);
+                }
+            }
+            // See if items are selected
+            if (this._selectedItems.length > 0) {
+                // Set the value
+                this.setValue(this._selectedItems);
+            }
+        }
+    };
+    // Set the value
+    _ListBox.prototype.setValue = function (value) {
+        // Clear the items
+        this._selectedItems = [];
+        while (this._elValues.firstChild) {
+            this._elValues.removeChild(this._elValues.firstChild);
+        }
+        // Parse the values
+        if (value) {
+            // Ensure this is an array
+            var values = typeof (value) === "string" || typeof (value) === "number" ? [value] : value;
+            // Parse the values
+            for (var i = 0; i < values.length; i++) {
+                var itemValue = values[i];
+                itemValue = typeof (itemValue) === "string" || typeof (itemValue) === "number" ? itemValue : itemValue.text;
+                // Parse the items
+                for (var j = 0; j < this._items.length; j++) {
+                    var item = this._items[j];
+                    // See if this is the target item
+                    if (item.text == itemValue || item.value == itemValue) {
+                        // Add the selected item
+                        this._selectedItems.push(item);
+                        // Create the list item
+                        var elItem = document.createElement("div");
+                        elItem.innerHTML = templates_1.HTMLItem;
+                        elItem = elItem.firstChild;
+                        this._elValues.appendChild(elItem);
+                        // Set the text value
+                        var elRemove = elItem.querySelector("span");
+                        if (elRemove) {
+                            var text = document.createTextNode(item.text);
+                            elItem.insertBefore(text, elRemove);
+                        }
+                        // See if this is read-only
+                        if (this.props.isReadonly) {
+                            // Delete the "remove" button
+                            elItem.removeChild(elRemove);
+                            elRemove = null;
+                        }
+                        // Configure the event for this item
+                        this.configureItemEvent(elRemove, elItem, item);
+                        // Break from the loop
+                        break;
+                    }
+                }
+            }
+        }
+        // See if a change event exists
+        if (this._initFl && this.props.onChange) {
+            // Execute the change event
+            this.props.onChange(this.getValue());
+        }
+    };
+    return _ListBox;
+}(base_1.Base));
+var ListBox = function (props, template) { return new _ListBox(props, template); };
+exports.ListBox = ListBox;

package/build/components/listBox/templates.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLItem = exports.HTML = void 0;
+exports.HTML = "\n<div class=\"listbox\">\n    <label class=\"form-label\" for=\"search-options\"></label>\n    <input class=\"form-control\" id=\"search-options\" list=\"options\" placeholder=\"Type to search...\">\n    <datalist id=\"options\"></datalist>\n    <ul class=\"list-group\"></ul>\n</div>".trim();
+exports.HTMLItem = "\n<li class=\"list-group-item d-flex justify-content-between align-items-center active\">\n    <span class=\"badge bg-secondary rounded-pill\">&times;</span>\n</li>".trim();

package/build/components/listGroup/index.js

@@ -0,0 +1,162 @@
+"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.ListGroup = exports.ListGroupClassNames = exports.ListGroupItemTypes = void 0;
+var base_1 = require("../base");
+var classNames_1 = require("../classNames");
+var common_1 = require("../common");
+var item_1 = require("./item");
+var templates_1 = require("./templates");
+/**
+ * List Group Item Types
+ */
+var ListGroupItemTypes;
+(function (ListGroupItemTypes) {
+    ListGroupItemTypes[ListGroupItemTypes["Danger"] = 1] = "Danger";
+    ListGroupItemTypes[ListGroupItemTypes["Dark"] = 2] = "Dark";
+    ListGroupItemTypes[ListGroupItemTypes["Info"] = 3] = "Info";
+    ListGroupItemTypes[ListGroupItemTypes["Light"] = 4] = "Light";
+    ListGroupItemTypes[ListGroupItemTypes["Primary"] = 5] = "Primary";
+    ListGroupItemTypes[ListGroupItemTypes["Secondary"] = 6] = "Secondary";
+    ListGroupItemTypes[ListGroupItemTypes["Success"] = 7] = "Success";
+    ListGroupItemTypes[ListGroupItemTypes["Warning"] = 8] = "Warning";
+})(ListGroupItemTypes = exports.ListGroupItemTypes || (exports.ListGroupItemTypes = {}));
+/**
+ * List Group Classes
+ */
+exports.ListGroupClassNames = new classNames_1.ClassNames([
+    "list-group-item-danger",
+    "list-group-item-dark",
+    "list-group-item-info",
+    "list-group-item-light",
+    "list-group-item-primary",
+    "list-group-item-secondary",
+    "list-group-item-success",
+    "list-group-item-warning"
+]);
+/**
+ * List Group
+ * @param props The list group properties.
+ */
+var _ListGroup = /** @class */ (function (_super) {
+    __extends(_ListGroup, _super);
+    // Constructor
+    function _ListGroup(props, template, itemTemplate) {
+        if (template === void 0) { template = props.isTabs && props.colWidth > 0 && props.colWidth <= 12 ? templates_1.HTMLTabs : templates_1.HTML; }
+        var _this = _super.call(this, template, props) || this;
+        _this._items = null;
+        // Configure the collapse
+        _this.configure(itemTemplate);
+        // Configure the parent
+        _this.configureParent();
+        return _this;
+    }
+    // Configure the card group
+    _ListGroup.prototype.configure = function (itemTemplate) {
+        // Update the list group
+        var listGroup = this.el.querySelector(".list-group") || this.el;
+        if (listGroup) {
+            this.props.isFlush ? listGroup.classList.add("list-group-flush") : null;
+            this.props.isHorizontal ? listGroup.classList.add("list-group-horizontal") : null;
+            this.props.isNumbered ? listGroup.classList.add("list-group-numbered") : null;
+            this.props.isTabs ? listGroup.setAttribute("role", "tablist") : null;
+        }
+        // See if the column width is defined
+        var column = this.el.querySelector(".col");
+        if (column) {
+            // Update the width
+            column.className = "col-" + this.props.colWidth;
+        }
+        // Render the items
+        this.renderItems(listGroup, itemTemplate);
+    };
+    // Configures the item event
+    _ListGroup.prototype.configureEvents = function (tab) {
+        var _this = this;
+        // Add a click event
+        tab.el.addEventListener("click", function () {
+            // Parse the tabs
+            for (var i = 0; i < _this._items.length; i++) {
+                var item = _this._items[i];
+                // See if it's visible
+                if (item.isVisible) {
+                    // Toggle it
+                    item.toggle(_this.props.fadeTabs);
+                }
+            }
+            // Toggle the link
+            tab.toggle(_this.props.fadeTabs);
+        });
+    };
+    // Render the items
+    _ListGroup.prototype.renderItems = function (listGroup, itemTemplate) {
+        // Clear the items
+        this._items = [];
+        // Get the tab content element
+        var tabs = this.el.querySelector(".tab-content");
+        // Parse the items
+        var items = this.props.items || [];
+        for (var i = 0; i < items.length; i++) {
+            // Create the item
+            var item = new item_1.ListGroupItem(items[i], tabs ? true : false, itemTemplate);
+            this._items.push(item);
+            listGroup.appendChild(item.el);
+            // See if we are rendering tabs
+            if (tabs) {
+                // Configure the events
+                this.configureEvents(item);
+                // Set the class names
+                (0, common_1.setClassNames)(item.elTab, this.props.tabClassName);
+                // Add the tab content
+                tabs.appendChild(item.elTab);
+                // See if the fade option is enabled
+                if (this.props.fadeTabs) {
+                    // Set the class name
+                    item.elTab.classList.add("fade");
+                    // See if the tab is active
+                    if (item.props.isActive) {
+                        // Set the class name
+                        item.elTab.classList.add("show");
+                        item.elTab.classList.add("active");
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Public Interface
+     */
+    _ListGroup.prototype.showTab = function (tabId) {
+        // Parse the tabs
+        for (var i = 0; i < this._items.length; i++) {
+            var item = this._items[i];
+            // See if this is the target tab
+            if (tabId === i + 1 || item.elTab.id == tabId) {
+                // Toggle it if it's not visible
+                item.isVisible ? null : item.toggle(this.props.fadeTabs);
+            }
+            // Else, see if it's visible
+            else if (item.isVisible) {
+                // Toggle it
+                item.toggle(this.props.fadeTabs);
+            }
+        }
+    };
+    return _ListGroup;
+}(base_1.Base));
+var ListGroup = function (props, template, itemTemplate) { return new _ListGroup(props, template, itemTemplate); };
+exports.ListGroup = ListGroup;

package/build/components/listGroup/item.js

@@ -0,0 +1,148 @@
+"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.ListGroupItem = void 0;
+var base_1 = require("../base");
+var badge_1 = require("../badge");
+var common_1 = require("../common");
+var _1 = require(".");
+var templates_1 = require("./templates");
+/**
+ * List Group Item
+ */
+var ListGroupItem = /** @class */ (function (_super) {
+    __extends(ListGroupItem, _super);
+    // Constructor
+    function ListGroupItem(props, isTab, itemTemplate) {
+        if (isTab === void 0) { isTab = false; }
+        if (itemTemplate === void 0) { itemTemplate = isTab ? templates_1.HTMLTabItem : templates_1.HTMLItem; }
+        var _this = _super.call(this, itemTemplate, props) || this;
+        _this._elTab = null;
+        // See if this is for a tab
+        if (isTab) {
+            // Create the tab element
+            var el = document.createElement("div");
+            el.innerHTML = templates_1.HTMLTab;
+            _this._elTab = el.firstChild;
+        }
+        // Configure the item
+        _this.configure();
+        // Configure the events
+        _this.configureEvents();
+        return _this;
+    }
+    // Configure the item
+    ListGroupItem.prototype.configure = function () {
+        // Set the class name
+        this.props.badge ? this.el.classList.add("d-flex") : null;
+        this.props.badge ? this.el.classList.add("justify-content-between") : null;
+        this.props.isActive ? this.el.classList.add("active") : null;
+        // See if this item is active
+        if (this.props.isActive) {
+            // Set the class name
+            this.el.classList.add("active");
+            // Set the attribute
+            this.el.setAttribute("aria-current", "true");
+        }
+        // See if this item is disabled
+        if (this.props.isDisabled) {
+            // Set the class name
+            this.el.classList.add("disabled");
+            // Set the attribute
+            this.el.setAttribute("aria-disabled", "true");
+        }
+        // Set the class name
+        var className = _1.ListGroupClassNames.getByType(this.props.type);
+        className ? this.el.classList.add(className) : null;
+        // See if this is a tab
+        if (this._elTab) {
+            var tabId = this.props.tabName.replace(/[^a-zA-Z]/g, "");
+            // Set the properties
+            this.el.id = tabId + "-tab";
+            this.el.setAttribute("href", "#" + tabId);
+            this.el.setAttribute("data-bs-toggle", "list");
+            this.el.setAttribute("data-tab-title", this.props.tabName);
+            this.el.setAttribute("aria-controls", tabId);
+            this.el.innerHTML = this.props.tabName;
+            // Update the tab
+            this._elTab.id = tabId;
+            this._elTab.setAttribute("aria-labelledby", tabId);
+            this.props.isActive ? this._elTab.classList.add("active") : null;
+        }
+        // Append the content
+        (0, common_1.appendContent)(this._elTab || this.el, this.props.content);
+        // See if there is a badge
+        if (this.props.badge) {
+            // Append a badge
+            this.el.appendChild((0, badge_1.Badge)(this.props.badge).el);
+        }
+    };
+    // Configures the events
+    ListGroupItem.prototype.configureEvents = function () {
+        var _this = this;
+        // Add a click event
+        this.el.addEventListener("click", function (ev) {
+            // Prevent the page from moving to the top
+            ev.preventDefault();
+            // Execute the event
+            _this.props.onClick ? _this.props.onClick(_this.el, _this.props) : null;
+        });
+        // See if there is a render tab event
+        if (this.props.onRenderTab) {
+            // Execute the render event
+            this.props.onRenderTab(this.el, this.props);
+        }
+        // See if there is a render event
+        if (this.props.onRender) {
+            // Execute the render event
+            this.props.onRender(this._elTab || this.el, this.props);
+        }
+    };
+    Object.defineProperty(ListGroupItem.prototype, "elTab", {
+        /**
+         * Public Interface
+         */
+        // The HTML tab element
+        get: function () { return this._elTab; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ListGroupItem.prototype, "isVisible", {
+        // Returns true if the link is visible
+        get: function () { return this.el.classList.contains("active"); },
+        enumerable: false,
+        configurable: true
+    });
+    // Toggles a link
+    ListGroupItem.prototype.toggle = function (fadeTabs) {
+        // See if this item is currently active
+        if (this.isVisible) {
+            // Hide this link and tab
+            this.el.classList.remove("active");
+            this._elTab ? this._elTab.classList.remove("active") : null;
+            this._elTab ? this._elTab.classList.remove("show") : null;
+        }
+        else {
+            // Show this link and tab
+            this.el.classList.add("active");
+            this._elTab ? this._elTab.classList.add("active") : null;
+            this._elTab && fadeTabs ? this._elTab.classList.add("show") : null;
+        }
+    };
+    return ListGroupItem;
+}(base_1.Base));
+exports.ListGroupItem = ListGroupItem;

package/build/components/listGroup/templates.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLTabs = exports.HTMLTabItem = exports.HTMLTab = exports.HTMLItem = exports.HTML = void 0;
+// List Group
+exports.HTML = "<ul class=\"list-group\"></ul>";
+// Item
+exports.HTMLItem = "<li class=\"list-group-item\"></li>";
+// Tab
+exports.HTMLTab = "<div class=\"tab-pane\" role=\"tabpanel\"></div>";
+// Tab Item
+exports.HTMLTabItem = "<a class=\"list-group-item\"></a>";
+// Tabs
+exports.HTMLTabs = "\n<div class=\"row\">\n    <div class=\"col\">\n        <div class=\"list-group\" role=\"tablist\"></div>\n    </div>\n    <div class=\"col\">\n        <div class=\"tab-content\"></div>\n    </div>\n</div>".trim();