gd-bs 5.3.7 → 5.4.0

package/build/components/inputGroup/index.js

@@ -0,0 +1,289 @@
+"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) {
+        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.InputGroup = exports.InputGroupTypes = void 0;
+var base_1 = require("../base");
+var button_1 = require("../button");
+var templates_1 = require("./templates");
+/**
+ * Input Group Types
+ */
+var InputGroupTypes;
+(function (InputGroupTypes) {
+    InputGroupTypes[InputGroupTypes["ColorPicker"] = 1] = "ColorPicker";
+    InputGroupTypes[InputGroupTypes["Email"] = 2] = "Email";
+    InputGroupTypes[InputGroupTypes["File"] = 3] = "File";
+    InputGroupTypes[InputGroupTypes["Password"] = 4] = "Password";
+    InputGroupTypes[InputGroupTypes["Range"] = 5] = "Range";
+    InputGroupTypes[InputGroupTypes["Search"] = 6] = "Search";
+    InputGroupTypes[InputGroupTypes["TextArea"] = 7] = "TextArea";
+    InputGroupTypes[InputGroupTypes["TextField"] = 8] = "TextField";
+})(InputGroupTypes = exports.InputGroupTypes || (exports.InputGroupTypes = {}));
+/**
+ * Input Group
+ * @param props The input group properties.
+ */
+var _InputGroup = /** @class */ (function (_super) {
+    __extends(_InputGroup, _super);
+    // Constructor
+    function _InputGroup(props, template) {
+        if (template === void 0) { template = templates_1.HTML; }
+        var _this = _super.call(this, template, props) || this;
+        _this._initFl = false;
+        // Configure the collapse
+        _this.configure();
+        // Configure the textbox
+        _this.configureTextbox();
+        // Configure the events
+        _this.configureEvents();
+        // Configure the parent
+        _this.configureParent();
+        // Set the flag
+        _this._initFl = true;
+        return _this;
+    }
+    // Configure the card group
+    _InputGroup.prototype.configure = function () {
+        var elInput = this.el.querySelector("input");
+        if (elInput) {
+            // Set the class names
+            this.props.isLarge ? this.el.classList.add("input-group-lg") : null;
+            this.props.isSmall ? this.el.classList.add("input-group-sm") : null;
+            // Update the label
+            var label = this.el.querySelector("label");
+            if (label) {
+                this.props.id ? label.setAttribute("for", this.props.id) : null;
+                // See if this is a file
+                if (this.props.type == InputGroupTypes.File) {
+                    // Set the class
+                    label.classList.add("form-file-label");
+                    // Set the text
+                    var spanText = document.createElement("span");
+                    spanText.classList.add("form-file-text");
+                    spanText.innerHTML = this.props.label || "Choose a file...";
+                    label.appendChild(spanText);
+                    // Set the button
+                    var spanButton = document.createElement("span");
+                    spanButton.classList.add("form-file-button");
+                    spanButton.innerHTML = "Browse";
+                    label.appendChild(spanButton);
+                }
+                else {
+                    // Set the label if it exists
+                    if (this.props.label) {
+                        label.innerHTML = this.props.label;
+                    }
+                    // Else, remove it
+                    else {
+                        this.el.removeChild(label);
+                    }
+                }
+            }
+            // See if the label exists
+            if (this.props.prependedLabel) {
+                // Add the label
+                var label_1 = document.createElement("span");
+                label_1.classList.add("input-group-text");
+                label_1.innerHTML = this.props.prependedLabel;
+                this.el.insertBefore(label_1, elInput);
+            }
+            // Parse the buttons
+            var buttons = this.props.prependedButtons || [];
+            for (var i = 0; i < buttons.length; i++) {
+                // Add the button
+                this.el.insertBefore(button_1.Button(buttons[i]).el, elInput);
+            }
+            // Default the appended buttons
+            var appendedButtons = this.props.appendedButtons || [];
+            if (this.props.type == InputGroupTypes.Range) {
+                // Add the button
+                appendedButtons.push({
+                    id: "range-value",
+                    text: this.props.value == null ? "" : this.props.value
+                });
+            }
+            // See if the label exists
+            if (this.props.appendedLabel) {
+                // Add the label
+                var label_2 = document.createElement("span");
+                label_2.classList.add("input-group-text");
+                label_2.innerHTML = this.props.appendedLabel;
+                this.el.appendChild(label_2);
+            }
+            // Parse the buttons
+            for (var i = 0; i < appendedButtons.length; i++) {
+                // Add the button
+                this.el.appendChild(button_1.Button(appendedButtons[i]).el);
+            }
+        }
+    };
+    // Configure the events
+    _InputGroup.prototype.configureEvents = function () {
+        var _this = this;
+        var isMultiLine = this.props.type == InputGroupTypes.TextArea;
+        var elInput = this.el.querySelector("input") || this.el.querySelector("textarea");
+        if (elInput) {
+            // See if a change event exists
+            var callbackValue_1 = null;
+            if (this.props.onChange) {
+                // Add an input event
+                elInput.addEventListener("input", function (ev) {
+                    // See if we have already executed the change event
+                    if (callbackValue_1 != elInput.value) {
+                        // Set the value
+                        callbackValue_1 = elInput.value;
+                        // Call the change event
+                        _this.props.onChange(callbackValue_1, ev);
+                    }
+                });
+            }
+            // See if this is a range
+            if (this.props.type == InputGroupTypes.Range) {
+                // Add a change event
+                elInput.addEventListener("input", function () {
+                    // Get the button
+                    var btn = _this.el.querySelector("#range-value");
+                    if (btn) {
+                        // Update the value
+                        btn.innerHTML = elInput.value;
+                    }
+                });
+            }
+            // See if this is not a multi-line
+            if (!isMultiLine) {
+                // Add a mouse up event to detect the clear event
+                elInput.addEventListener("mouseup", function (ev) {
+                    // Get the current value
+                    var el = ev.currentTarget;
+                    var oldValue = el.value;
+                    // Wait for the user to stop updating the value
+                    setTimeout(function () {
+                        // Get the current value
+                        var currentValue = el.value;
+                        // See if the values have changed
+                        if (currentValue != oldValue) {
+                            // See if we have already executed the change event
+                            if (callbackValue_1 != currentValue) {
+                                // Set the value
+                                callbackValue_1 = currentValue;
+                                // Call the events
+                                _this.props.onChange ? _this.props.onChange(callbackValue_1, ev) : null;
+                                _this.props.onClear && callbackValue_1 == "" ? _this.props.onClear() : null;
+                            }
+                        }
+                    }, 1);
+                });
+            }
+        }
+    };
+    // Configures the text box
+    _InputGroup.prototype.configureTextbox = function () {
+        var isTextArea = this.props.type == InputGroupTypes.TextArea;
+        var input = this.el.querySelector("input");
+        var textarea = this.el.querySelector("textarea");
+        // See if this is a text area
+        if (isTextArea) {
+            // Remove the input
+            input ? this.el.removeChild(input) : null;
+            // Ensure the textarea exists
+            if (textarea) {
+                // Update the textbox
+                this.props.id ? textarea.id = this.props.id : null;
+                this.props.placeholder ? textarea.placeholder = this.props.placeholder : null;
+                textarea.disabled = this.props.isReadonly ? true : false;
+                textarea.readOnly = textarea.disabled;
+                textarea.rows = this.props.rows;
+                this.props.title ? textarea.title = this.props.title : null;
+            }
+        }
+        else {
+            // Remove the textarea
+            textarea ? this.el.removeChild(textarea) : null;
+            // Ensure the input exists
+            if (input) {
+                // Update the textbox
+                this.props.id ? input.id = this.props.id : null;
+                this.props.placeholder ? input.placeholder = this.props.placeholder : null;
+                input.disabled = this.props.isReadonly ? true : false;
+                input.readOnly = input.disabled;
+                this.props.title ? input.title = this.props.title : null;
+                typeof (this.props.min) === "number" ? input.min = this.props.min + "" : null;
+                typeof (this.props.max) === "number" ? input.max = this.props.max + "" : null;
+                typeof (this.props.step) === "number" ? input.step = this.props.step + "" : null;
+                // Update the type
+                switch (this.props.type) {
+                    // Color Picker
+                    case InputGroupTypes.ColorPicker:
+                        input.classList.add("form-control-color");
+                        input.type = "color";
+                        break;
+                    // Email
+                    case InputGroupTypes.Email:
+                        input.classList.add("form-email");
+                        input.type = "email";
+                        break;
+                    // File
+                    case InputGroupTypes.File:
+                        this.el.classList.add("form-file");
+                        input.classList.remove("form-control");
+                        input.classList.add("form-file-input");
+                        input.type = "file";
+                        break;
+                    // Password
+                    case InputGroupTypes.Password:
+                        input.classList.add("form-password");
+                        input.type = "password";
+                        break;
+                    // Range
+                    case InputGroupTypes.Range:
+                        input.classList.add("form-range");
+                        input.type = "range";
+                        break;
+                    // Search
+                    case InputGroupTypes.Search:
+                        input.classList.add("form-search");
+                        input.type = "search";
+                        input.setAttribute("aria-label", "Search");
+                        break;
+                }
+            }
+        }
+        // Set the default value
+        this.setValue(this.props.value);
+    };
+    /**
+     * Public Interface
+     */
+    _InputGroup.prototype.getValue = function () { return this.textbox.value; };
+    // Sets the textbox value
+    _InputGroup.prototype.setValue = function (value) {
+        if (value === void 0) { value = ""; }
+        // Set the textbox value
+        this.textbox.value = value;
+        // See if a change event exists
+        if (this._initFl && this.props.onChange) {
+            // Execute the change event
+            this.props.onChange(value);
+        }
+    };
+    Object.defineProperty(_InputGroup.prototype, "textbox", {
+        // Returns the textbox
+        get: function () { return this.el.querySelector("input") || this.el.querySelector("textarea"); },
+        enumerable: false,
+        configurable: true
+    });
+    return _InputGroup;
+}(base_1.Base));
+exports.InputGroup = function (props, template) { return new _InputGroup(props, template); };

package/build/components/inputGroup/templates.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTML = void 0;
+exports.HTML = "\n<div class=\"input-group\">\n    <label></label>\n    <input type=\"text\" class=\"form-control\" />\n    <textarea class=\"form-control\"></textarea>\n</div>".trim();

package/build/components/jumbotron/index.js

@@ -0,0 +1,75 @@
+"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) {
+        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.Jumbotron = void 0;
+var base_1 = require("../base");
+var common_1 = require("../common");
+var templates_1 = require("./templates");
+/**
+ * Jumbotron
+ */
+var _Jumbotron = /** @class */ (function (_super) {
+    __extends(_Jumbotron, _super);
+    // Constructor
+    function _Jumbotron(props, template) {
+        if (template === void 0) { template = templates_1.HTML; }
+        var _this = _super.call(this, template, props) || this;
+        // Configure the collapse
+        _this.configure();
+        // Configure the events
+        _this.configureEvents();
+        // Configure the parent
+        _this.configureParent();
+        return _this;
+    }
+    // Configure the card group
+    _Jumbotron.prototype.configure = function () {
+        // Set the class names
+        this.props.isFluid ? this.el.classList.add("jumbotron-fluid") : null;
+        // Set the title
+        var title = this.el.querySelector("h1");
+        if (title) {
+            if (this.props.title) {
+                // Set the title
+                title.innerHTML = this.props.title;
+            }
+            else {
+                // Remove the title
+                this.el.removeChild(title);
+            }
+        }
+        // Set the lead
+        var lead = this.el.querySelector("p");
+        if (lead) {
+            if (this.props.lead) {
+                // Set the lead
+                lead.innerHTML = this.props.lead;
+            }
+            else {
+                // Remove the lead
+                this.el.removeChild(lead);
+            }
+        }
+        // Append the content
+        common_1.appendContent(this.el, this.props.content);
+    };
+    // Configures the events
+    _Jumbotron.prototype.configureEvents = function () {
+        // Call the render event
+        this.props.onRenderContent ? this.props.onRenderContent(this.el) : null;
+    };
+    return _Jumbotron;
+}(base_1.Base));
+exports.Jumbotron = function (props, template) { return new _Jumbotron(props, template); };

package/build/components/jumbotron/templates.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTML = void 0;
+exports.HTML = "\n<div class=\"row py-5 m-0\">\n    <h1 class=\"display-4\"></h1>\n    <p class=\"lead\"></p>\n</div>".trim();

package/build/components/listBox/index.js

@@ -0,0 +1,288 @@
+"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) {
+        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 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 this._selectedItems; };
+    // 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));
+exports.ListBox = function (props, template) { return new _ListBox(props, template); };

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