gd-bs 5.3.7 → 5.3.8

package/build/components/checkboxGroup/index.js

@@ -0,0 +1,199 @@
+"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.CheckboxGroup = exports.CheckboxGroupTypes = void 0;
+var base_1 = require("../base");
+var item_1 = require("./item");
+var templates_1 = require("./templates");
+/**
+ * Checkbox Group Types
+ */
+var CheckboxGroupTypes;
+(function (CheckboxGroupTypes) {
+    CheckboxGroupTypes[CheckboxGroupTypes["Checkbox"] = 1] = "Checkbox";
+    CheckboxGroupTypes[CheckboxGroupTypes["Radio"] = 2] = "Radio";
+    CheckboxGroupTypes[CheckboxGroupTypes["Switch"] = 3] = "Switch";
+})(CheckboxGroupTypes = exports.CheckboxGroupTypes || (exports.CheckboxGroupTypes = {}));
+/**
+ * Checkbox Group
+ */
+var _CheckboxGroup = /** @class */ (function (_super) {
+    __extends(_CheckboxGroup, _super);
+    // Constructor
+    function _CheckboxGroup(props, template, cbTemplate) {
+        if (template === void 0) { template = templates_1.HTML; }
+        var _this = _super.call(this, template, props) || this;
+        _this._checkboxes = null;
+        _this._initFl = false;
+        // Configure the checkbox group
+        _this.configure(cbTemplate);
+        // Configure the parent
+        _this.configureParent();
+        // Set the flag
+        _this._initFl = true;
+        return _this;
+    }
+    // Configure the card group
+    _CheckboxGroup.prototype.configure = function (cbTemplate) {
+        var colSize = this.props.colSize > 0 && this.props.colSize < 13 ? this.props.colSize : (this.props.label ? 10 : 12);
+        var renderRow = typeof (this.props.renderRow) === "boolean" ? this.props.renderRow : true;
+        // See if we are not rendering a row
+        if (!renderRow) {
+            // Remove the row class
+            this.el.classList.remove("row");
+        }
+        // See if a label is defined
+        var label = this.el.querySelector("legend");
+        if (label) {
+            if (this.props.label && this.props.hideLabel != true) {
+                // Add the label
+                renderRow ? label.classList.add("col-" + (12 - colSize)) : null;
+                label.innerHTML = this.props.label;
+            }
+            else {
+                // Remove the label
+                this.el.removeChild(label);
+            }
+        }
+        // Get the group and configure the size
+        var group = this.el.querySelector("div");
+        if (group) {
+            if (renderRow) {
+                // Set the class
+                group.classList.add("col-" + colSize);
+            }
+            else {
+                // Remove the group element
+                this.el.removeChild(group);
+            }
+        }
+        // Render the checkboxes
+        this.renderItems(renderRow ? group : this.el, cbTemplate);
+    };
+    // Configure the events
+    _CheckboxGroup.prototype.configureEvents = function (item) {
+        var _this = this;
+        // See if we are not allowing multiple selections
+        if (this.props.multi != true) {
+            // Add a click event
+            item.checkbox.addEventListener("click", function (ev) {
+                // Parse the checkboxes
+                for (var i = 0; i < _this._checkboxes.length; i++) {
+                    var checkbox = _this._checkboxes[i];
+                    // Ensure this item is checked
+                    if (!checkbox.isChecked) {
+                        continue;
+                    }
+                    // Skip this item
+                    if (checkbox.el.outerHTML == item.el.outerHTML) {
+                        continue;
+                    }
+                    // Toggle the checkbox
+                    checkbox.toggle();
+                }
+            });
+        }
+        // See if there is a change event defined
+        if (this.props.onChange) {
+            // Add a click event
+            item.checkbox.addEventListener("click", function (ev) {
+                // Call the event
+                _this.props.onChange(_this.getValue(), ev);
+            });
+        }
+    };
+    // Render the checkboxes
+    _CheckboxGroup.prototype.renderItems = function (group, cbTemplate) {
+        // Clear the checkboxes
+        this._checkboxes = [];
+        // Set the items
+        var items = this.props.items;
+        if (items == null || typeof (items.length) !== "number") {
+            // Clear the items
+            items = [];
+            // Create an item based on the label
+            items.push({
+                label: this.props.label || ""
+            });
+        }
+        // See if this is a single checkbox
+        if (this.props.multi != true && items.length > 0) {
+            // See if this checkbox should be checked
+            if (typeof (this.props.value) === "boolean" && this.props.value) {
+                // Select the item
+                items[0].isSelected = true;
+            }
+        }
+        // Parse the items
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            // Create the checkbox
+            var checkbox = new item_1.CheckboxItem(item, this.props, cbTemplate);
+            this._checkboxes.push(checkbox);
+            group.appendChild(checkbox.el);
+            // Configure the events
+            this.configureEvents(checkbox);
+            // Execute the render event
+            this.props.onRender ? this.props.onRender(checkbox.el, item) : null;
+        }
+    };
+    /**
+     * Public Methods
+     */
+    // Method to get the value
+    _CheckboxGroup.prototype.getValue = function () {
+        var values = [];
+        // Parse the checkboxes
+        for (var i = 0; i < this._checkboxes.length; i++) {
+            var cb = this._checkboxes[i];
+            // See if it's checked
+            if (cb.isChecked) {
+                // Add the value
+                values.push(cb.props);
+            }
+        }
+        // Return the values
+        return this.props.multi ? values : values[0];
+    };
+    // Method to set the value
+    // Sets the dropdown value
+    _CheckboxGroup.prototype.setValue = function (value) {
+        // Ensure it's an array
+        var values = value ? (typeof (value.length) === "number" && typeof (value) !== "string" ? value : [value]) : [];
+        // Parse the items
+        for (var i = 0; i < this._checkboxes.length; i++) {
+            var checkbox = this._checkboxes[i];
+            // Toggle checked items
+            checkbox.isChecked ? checkbox.toggle() : null;
+        }
+        // Parse the values
+        for (var i = 0; i < values.length; i++) {
+            var value_1 = values[i];
+            // Parse the items
+            for (var j = 0; j < this._checkboxes.length; j++) {
+                var checkbox = this._checkboxes[j];
+                // Select this checkbox if the label matches
+                checkbox.props.label == value_1 ? checkbox.toggle() : null;
+            }
+        }
+        // See if a change event exists
+        if (this._initFl && this.props.onChange) {
+            // Execute the change event
+            this.props.onChange(this.getValue());
+        }
+    };
+    return _CheckboxGroup;
+}(base_1.Base));
+exports.CheckboxGroup = function (props, template, cbTemplate) { return new _CheckboxGroup(props, template, cbTemplate); };

package/build/components/checkboxGroup/item.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxItem = void 0;
+var _1 = require(".");
+var templates_1 = require("./templates");
+/**
+ * Checkbox Item
+ */
+var CheckboxItem = /** @class */ (function () {
+    // Constructor
+    function CheckboxItem(props, parent, template) {
+        this._el = null;
+        this._elCheckbox = null;
+        this._isSelected = null;
+        this._parent = null;
+        this._props = null;
+        // Save the properties
+        this._parent = parent;
+        this._props = props;
+        // Create the element
+        var el = document.createElement("div");
+        el.innerHTML = template || this.getHTML().trim();
+        this._el = el.firstChild;
+        // Configure the item
+        this.configure();
+        // Configure the events
+        this.configureEvents();
+    }
+    // Configure the item
+    CheckboxItem.prototype.configure = function () {
+        // Set the attributes
+        this._elCheckbox = this._el.querySelector("input");
+        if (this._elCheckbox) {
+            this._elCheckbox.disabled = this._parent.isReadonly || this._props.isDisabled ? true : false;
+            // Default the title property for the checkbox
+            this._elCheckbox.title = this.props.label || this._parent.title || "";
+        }
+        // See if the title property is defined
+        if (this._parent.title) {
+            // Set the title
+            this._el.title = this._parent.title;
+        }
+        // See if the inline flag is set
+        if (this._parent.isInline) {
+            this._el.classList.add("form-check-inline");
+        }
+        // Set the label
+        var label = this._el.querySelector("label");
+        if (label) {
+            label.innerHTML = this._props.label || " ";
+        }
+        // Ensure the checkbox exists
+        if (this._elCheckbox) {
+            // See if the "isSelected" property is set
+            if (typeof (this._props.isSelected) === "boolean") {
+                // Set the selected property
+                this._isSelected = this._props.isSelected;
+                this._elCheckbox.checked = this._isSelected;
+            }
+            // Else, see if a value exists for the group
+            else if (this._parent.value) {
+                // Parse the values
+                var values = typeof (this._parent.value) === "string" ? [this._parent.value] : this._parent.value;
+                for (var j = 0; j < values.length; j++) {
+                    // See if this item is selected
+                    if (values[j] == this._props.label) {
+                        // Select this item
+                        this._elCheckbox.checked = true;
+                    }
+                }
+                // Set the value
+                this._isSelected = this._elCheckbox.checked;
+            }
+            else {
+                // Set the default value
+                this._isSelected = this._props.isSelected ? true : false;
+                this._elCheckbox.checked = this._isSelected;
+            }
+        }
+    };
+    // Configures the events
+    CheckboxItem.prototype.configureEvents = function () {
+        var _this = this;
+        // Add a click event
+        this._elCheckbox.addEventListener("click", function (ev) {
+            // Update the value
+            _this._isSelected = !_this._isSelected;
+            _this._elCheckbox.checked = _this._isSelected;
+            // See if an event is defined
+            if (_this._props.onChange) {
+                // Call the event
+                _this._props.onChange(_this._isSelected ? _this._props : null, ev);
+            }
+        });
+    };
+    // Gets the HTML template
+    CheckboxItem.prototype.getHTML = function () {
+        // Return it based on the type
+        switch (this._props.type || this._parent.type) {
+            // Radio
+            case _1.CheckboxGroupTypes.Radio:
+                return templates_1.HTMLRadio;
+            // Switch
+            case _1.CheckboxGroupTypes.Switch:
+                return templates_1.HTMLSwitch;
+            // Default to a checkbox
+            default:
+                return templates_1.HTMLCheckbox;
+        }
+    };
+    Object.defineProperty(CheckboxItem.prototype, "checkbox", {
+        /**
+         * Public Properties
+         */
+        // The checkbox element
+        get: function () { return this._elCheckbox; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CheckboxItem.prototype, "el", {
+        // The component HTML element
+        get: function () { return this._el; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CheckboxItem.prototype, "isChecked", {
+        // Returns true if the checkbox is checked
+        get: function () {
+            // Get the checkbox
+            var cb = this._el.querySelector("input");
+            // Return the value
+            return cb ? cb.checked : null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CheckboxItem.prototype, "props", {
+        // The component properties
+        get: function () { return this._props; },
+        enumerable: false,
+        configurable: true
+    });
+    // Toggles the checkbox
+    CheckboxItem.prototype.toggle = function () {
+        // Update the value
+        this._isSelected = !this._isSelected;
+        // Set the checkbox value
+        this._el.querySelector("input").checked = this._isSelected;
+    };
+    return CheckboxItem;
+}());
+exports.CheckboxItem = CheckboxItem;

package/build/components/checkboxGroup/templates.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLSwitch = exports.HTMLRadio = exports.HTMLCheckbox = exports.HTML = void 0;
+// Checkbox
+exports.HTML = "\n<div class=\"row\">\n    <legend class=\"col-form-label\"></legend>\n    <div></div>\n</div>".trim();
+// Checkbox
+exports.HTMLCheckbox = "\n<div class=\"form-check\">\n    <input type=\"checkbox\" class=\"form-check-input\" />\n    <label class=\"form-check-label\"></label>\n</div>".trim();
+// Radio
+exports.HTMLRadio = "\n<div class=\"form-check\">\n    <input type=\"radio\" class=\"form-check-input\" />\n    <label class=\"form-check-label\"></label>\n</div>".trim();
+// Switch
+exports.HTMLSwitch = "\n<div class=\"form-check form-switch\">\n    <input type=\"checkbox\" class=\"form-check-input\" />\n    <label class=\"form-check-label\"></label>\n</div>".trim();

package/build/components/classNames.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassNames = void 0;
+/**
+ * Class Names
+ */
+var ClassNames = /** @class */ (function () {
+    // Constructor
+    function ClassNames(items) {
+        this._items = null;
+        // Set the items
+        this._items = items || [];
+    }
+    // Gets a class name by type
+    // The enumerator value is equal to the index + 1
+    ClassNames.prototype.getByType = function (type) { return this._items[type - 1]; };
+    // Parse the class names
+    ClassNames.prototype.parse = function (callback) {
+        // Parse the items
+        for (var i = 0; i < this._items.length; i++) {
+            // Call the callback
+            callback(this._items[i]);
+        }
+    };
+    return ClassNames;
+}());
+exports.ClassNames = ClassNames;

package/build/components/collapse/index.js

@@ -0,0 +1,101 @@
+"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.Collapse = void 0;
+var base_1 = require("../base");
+var common_1 = require("../common");
+var templates_1 = require("./templates");
+/**
+ * Collapse
+ */
+var _Collapse = /** @class */ (function (_super) {
+    __extends(_Collapse, _super);
+    // Constructor
+    function _Collapse(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 parent
+        _this.configureParent();
+        return _this;
+    }
+    // Configure the card group
+    _Collapse.prototype.configure = function () {
+        // Set the id
+        var id = this.props.id || "collapse" + (new Date()).getTime();
+        // Set the attributes
+        this.el.id = id;
+        this.props.isHorizontal ? this.el.classList.add("collapse-horizontal") : null;
+        this.props.isMulti ? this.el.classList.add("multi-collapse") : null;
+        // Append the content
+        var body = this.el.querySelector(".card");
+        common_1.appendContent(body, this.props.content);
+        // Execute the render event
+        this.props.onRender ? this.props.onRender(body, this.props) : null;
+        // See if we are expanding it by default
+        if (this.props.options && this.props.options.toggle) {
+            // Toggle the element
+            this.toggle();
+        }
+    };
+    Object.defineProperty(_Collapse.prototype, "isExpanded", {
+        /**
+         * Public Interface
+         */
+        // Returns true if the item is expanded
+        get: function () {
+            // See if the item is expanded
+            return this.el.classList.contains("collapsing") || this.el.classList.contains("show");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Toggles the collapse
+    _Collapse.prototype.toggle = function () {
+        var _this = this;
+        // See if it's expanded
+        if (this.isExpanded) {
+            // Start the animation
+            this.el.style[this.props.isHorizontal ? "width" : "height"] = this.el.getBoundingClientRect()[this.props.isHorizontal ? "width" : "height"] + "px";
+            setTimeout(function () {
+                _this.el.classList.add("collapsing");
+                _this.el.classList.remove("collapse");
+                _this.el.classList.remove("show");
+                _this.el.style[_this.props.isHorizontal ? "width" : "height"] = "";
+            }, 10);
+            // Wait for the animation to complete
+            setTimeout(function () {
+                _this.el.classList.remove("collapsing");
+                _this.el.classList.add("collapse");
+            }, 250);
+        }
+        else {
+            // Start the animation
+            this.el.classList.remove("collapse");
+            this.el.classList.add("collapsing");
+            this.el.style[this.props.isHorizontal ? "width" : "height"] = (this.props.isHorizontal ? this.el.scrollWidth : this.el.scrollHeight) + "px";
+            // Wait for the animation to complete
+            setTimeout(function () {
+                _this.el.classList.remove("collapsing");
+                _this.el.classList.add("collapse");
+                _this.el.classList.add("show");
+                _this.el.style[_this.props.isHorizontal ? "width" : "height"] = "";
+            }, 250);
+        }
+    };
+    return _Collapse;
+}(base_1.Base));
+exports.Collapse = function (props, template) { return new _Collapse(props, template); };

package/build/components/collapse/templates.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTML = void 0;
+exports.HTML = "\n<div class=\"collapse\">\n    <div class=\"card card-body\"></div>\n</div>".trim();

package/build/components/common.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.show = exports.setClassNames = exports.configureParent = exports.hide = exports.appendContent = void 0;
+exports.appendContent = function (elParent, content) {
+    // Return if the parent or content doesn't exist
+    if (elParent == null || content == null) {
+        return;
+    }
+    // See if this is a string
+    if (typeof (content) === "string" || typeof (content) === "number") {
+        // Set the html
+        elParent.innerHTML = content;
+    }
+    else {
+        // Append the content
+        elParent.appendChild(typeof (content) === "function" ? content() : content);
+    }
+};
+exports.hide = function (el) {
+    // Ensure the alert is hidden
+    if (el.classList.contains("d-none")) {
+        return;
+    }
+    // Hide the alert
+    el.classList.add("d-none");
+};
+exports.configureParent = function (component, parent) {
+    // Create the element
+    var el = document.createElement("div");
+    el.appendChild(component);
+    // See if the parent element exists
+    if (parent) {
+        // Ensure the class list exists and it's not the body element
+        if (parent.classList && parent.tagName != "BODY") {
+            // Set the bootstrap class
+            parent.classList.contains("bs") ? null : parent.classList.add("bs");
+        }
+        // Append the elements
+        while (el.children.length > 0) {
+            parent.appendChild(el.children[0]);
+        }
+        // Update the element
+        el = parent;
+    }
+    else {
+        // Set the bootstrap class
+        el.classList.add("bs");
+    }
+    // Return the parent element
+    return el;
+};
+exports.setClassNames = function (el, className) {
+    if (className === void 0) { className = ""; }
+    // Set the class names
+    var classNames = className.split(' ');
+    for (var i = 0; i < classNames.length; i++) {
+        // Ensure the class name exists
+        var className_1 = classNames[i];
+        if (className_1) {
+            // Add the class
+            el.classList.add(className_1);
+        }
+    }
+};
+exports.show = function (el) {
+    // Ensure the alert is visible
+    if (el.classList.contains("d-none")) {
+        // Show the alert
+        el.classList.remove("d-none");
+    }
+};

package/build/components/dropdown/formItem.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownFormItem = void 0;
+/**
+ * Dropdown Form Item
+ */
+var DropdownFormItem = /** @class */ (function () {
+    // Constructor
+    function DropdownFormItem(props, parent) {
+        this._el = null;
+        this._isSelected = false;
+        this._parent = null;
+        this._props = null;
+        // Save the properties
+        this._parent = parent;
+        this._props = props;
+        // Configure the item
+        this.configure();
+    }
+    // Configures the item
+    DropdownFormItem.prototype.configure = function () {
+        // See if this is a divider
+        if (this._props.isDivider) {
+            // Create the divider
+            this._el = document.createElement("optgroup");
+            this._el.className = this._props.className || "";
+            this._el.classList.add("dropdown-divider");
+        }
+        // Else, see if this is a header
+        else if (this._props.isHeader) {
+            // Create the header
+            this._el = document.createElement("optgroup");
+            this._el.className = this._props.className || "";
+            this._el.classList.add("dropdown-header");
+            this._el.label = this._props.text == null ? "" : this._props.text;
+        }
+        else {
+            // Create the option
+            this._el = document.createElement("option");
+            this._el.className = this._props.className || "";
+            this._el.disabled = this._props.isDisabled ? true : false;
+            this._el.innerText = this._props.text == null ? "" : this._props.text;
+            // See if the item is selected
+            if (this._props.isSelected) {
+                // Select the option
+                this._el.selected = true;
+            }
+            // Else, see if a value exists
+            else if (this._parent.value != undefined) {
+                // Ensure it's an array
+                var values = this._parent.value && this._parent.value.length && typeof (this._parent.value) !== "string" ? this._parent.value : [this._parent.value];
+                // Parse the values
+                for (var i = 0; i < values.length; i++) {
+                    var value = this._props.value == undefined ? this._props.text : this._props.value;
+                    // See if this item is selected
+                    if (value == values[i]) {
+                        // Select the option
+                        this._el.selected = true;
+                        break;
+                    }
+                }
+            }
+            // Set the flag
+            this._isSelected = this._el.selected;
+        }
+    };
+    Object.defineProperty(DropdownFormItem.prototype, "el", {
+        /**
+         * Public Interface
+         */
+        // The component HTML element
+        get: function () { return this._el; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownFormItem.prototype, "isSelected", {
+        // Returns true if the item is selected
+        get: function () { return this._isSelected; },
+        set: function (value) { this._isSelected = value; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownFormItem.prototype, "props", {
+        // The component properties
+        get: function () { return this._props; },
+        enumerable: false,
+        configurable: true
+    });
+    // Toggles the item selection
+    DropdownFormItem.prototype.toggle = function () {
+        // Skip the dividers, headers
+        if (this._props.isDivider || this._props.isHeader) {
+            return;
+        }
+        // Update the selected flag
+        this._isSelected = !this._isSelected;
+        var option = this._el;
+        // See if the value needs to be updated
+        if (option.selected != this._isSelected) {
+            // Update the option
+            option.selected = this._isSelected;
+        }
+    };
+    return DropdownFormItem;
+}());
+exports.DropdownFormItem = DropdownFormItem;