gd-bs 6.6.90 → 6.6.92

package/build/components/alert/index.js

@@ -104,9 +104,9 @@ var _Alert = /** @class */ (function (_super) {
                 // Add the fade class
                 _this.el.classList.add("fade");
                 setTimeout(function () { _this.hide(); }, 250);
+                // Execute the event
+                _this.props.onClose ? _this.props.onClose(_this.props) : null;
             });
-            // Execute the event
-            this.props.onClose ? this.props.onClose(this.props) : null;
         }
     };
     /**

package/build/components/button/index.js

@@ -162,11 +162,21 @@ var _Button = /** @class */ (function (_super) {
             });
         }
         // See if we are toggling anything
-        if (this.props.toggleObj && typeof (this.props.toggleObj.toggle) === "function") {
+        if (this.props.toggleObj) {
             // Add a click event
             this.el.addEventListener("click", function (ev) {
-                // Toggle the object
-                _this.props.toggleObj.toggle();
+                // See if it's a function
+                if (typeof (_this.props.toggleObj.toggle) === "function") {
+                    // Toggle the object
+                    _this.props.toggleObj.toggle();
+                }
+                else {
+                    var objToggle = window[_this.props.toggleObj];
+                    if (typeof (objToggle === null || objToggle === void 0 ? void 0 : objToggle.toggle) === "function") {
+                        // Toggle the object
+                        objToggle.toggle();
+                    }
+                }
             });
         }
     };

package/build/components/custom-element.js

@@ -0,0 +1,529 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomElement = void 0;
+var CustomElement = /** @class */ (function () {
+    function CustomElement(el) {
+        var componentName = el.nodeName.substring(3);
+        // Get the component props
+        var props = __assign(__assign({}, this.getProps(el, componentName)), { el: el });
+        switch (componentName) {
+            case "ACCORDION":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.Accordion(props);
+                break;
+            case "ALERT":
+                GD.Components.Alert(props);
+                break;
+            case "BADGE":
+                GD.Components.Badge(props);
+                break;
+            case "BREADCRUMB":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.Breadcrumb(props);
+                break;
+            case "BUTTON":
+                GD.Components.Button(props);
+                break;
+            case "BUTTON-GROUP":
+                props.buttons = this.getChildItems(el, "bs-button", "BUTTON");
+                GD.Components.ButtonGroup(props);
+                break;
+            case "CARD":
+                props.body = this.getChildItems(el, "card-body", componentName);
+                props.header = this.getChildItems(el, "card-footer", componentName);
+                props.footer = this.getChildItems(el, "card-header", componentName);
+                GD.Components.Card(props);
+                break;
+            case "CARD-GROUP":
+                props.cards = this.getChildItems(el, "bs-card", "CARD");
+                GD.Components.CardGroup(props);
+                break;
+            case "CAROUSEL":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.Carousel(props);
+                break;
+            case "CHECKBOX-GROUP":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.CheckboxGroup(props);
+                break;
+            case "COLLAPSE":
+                GD.Components.Collapse(props);
+                break;
+            case "DROPDOWN":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.Dropdown(props);
+                break;
+            case "FORM":
+                var controls = [];
+                var rows = [];
+                var _loop_1 = function (i) {
+                    var elChild = el.children[i];
+                    switch (elChild.nodeName) {
+                        // Append the control
+                        case "BS-FORM-CONTROL":
+                            //controls.push((new RenderComponents(elChild, true, true)).Props[0]);
+                            break;
+                        // Append the row
+                        case "ROW":
+                            var columns = [];
+                            /*
+                            let rowControls = (new RenderComponents(elChild, true)).Props;
+                            if (rowControls?.length > 0) {
+                                // Append the control
+                                for (let i = 0; i < rowControls.length; i++) {
+                                    columns.push({ control: rowControls[i] });
+                                }
+                            }
+                            */
+                            // Append the row
+                            rows.push({ columns: columns });
+                            break;
+                        // Default
+                        default:
+                            // Add it to the appropriate property
+                            // Move the custom html
+                            if (rows.length > 0) {
+                                rows.push({
+                                    columns: [{
+                                            control: {
+                                                onControlRendered: function (ctrl) { ctrl.el.appendChild(elChild); }
+                                            }
+                                        }]
+                                });
+                            }
+                            else {
+                                controls.push({
+                                    onControlRendered: function (ctrl) { ctrl.el.appendChild(elChild); }
+                                });
+                            }
+                            break;
+                    }
+                };
+                // Parse the child elements
+                for (var i = 0; i < el.children.length; i++) {
+                    _loop_1(i);
+                }
+                // Set the rows
+                props.rows = rows.length > 0 ? rows : undefined;
+                // Set the controls
+                //props.controls = this.getChildItems(el, "bs-form-control", componentName);
+                props.controls = controls.length > 0 ? controls : undefined;
+                // Render the form
+                GD.Components.Form(props);
+                break;
+            case "FORM-CONTROL":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.FormControl(props);
+                break;
+            case "ICON-LINK":
+                GD.Components.IconLink(props);
+                break;
+            case "INPUT-GROUP":
+                // Get the prepended label
+                var prependedLabel = el.querySelector("prepended-label");
+                if (prependedLabel) {
+                    // Set the property
+                    props.prependedLabel = prependedLabel.innerHTML.trim();
+                }
+                // Set the properties
+                props.appendedButtons = this.getChildItems(el, "appended-button", "APPENDED-BUTTON");
+                props.prependedButtons = this.getChildItems(el, "prepended-button", "PREPENDED-BUTTON");
+                GD.Components.InputGroup(props);
+                break;
+            case "LIST-BOX":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.ListBox(props);
+                break;
+            case "LIST-GROUP":
+                props.items = this.getChildItems(el, "item", componentName);
+                GD.Components.ListGroup(props);
+                break;
+            case "MODAL":
+                // Set the custom elements
+                props.body = this.getElement(el, "bs-modal-body");
+                props.footer = this.getElement(el, "bs-modal-footer");
+                props.header = this.getElement(el, "bs-modal-header");
+                props.title = this.getElement(el, "bs-modal-title");
+                // Render the modal
+                GD.Components.Modal(props);
+                break;
+            case "NAV":
+                props.items = this.getChildItems(el, "nav-item", componentName);
+                GD.Components.Nav(props);
+                break;
+            case "NAVBAR":
+                // Parse the child elements
+                for (var i = 0; i < el.children.length; i++) {
+                    var elChild = el.children[i];
+                    switch (elChild.nodeName) {
+                        // Append the item
+                        case "NAVBAR-ITEM":
+                            var item = this.getProps(elChild, elChild.nodeName);
+                            item.items = this.getChildItems(elChild, "navbar-item", componentName);
+                            props.items = props.items || [];
+                            props.items.push(item);
+                            break;
+                        // Append the item
+                        case "NAVBAR-ITEM-END":
+                            var itemEnd = this.getProps(elChild, elChild.nodeName);
+                            itemEnd.itemsEnd = this.getChildItems(elChild, "navbar-item-end", componentName);
+                            props.itemsEnd = props.itemsEnd || [];
+                            props.itemsEnd.push(itemEnd);
+                            break;
+                        // Set the searchbox
+                        case "NAVBAR-SEARCH-BOX":
+                            props.searchBox = this.getProps(elChild, elChild.nodeName);
+                            break;
+                    }
+                }
+                // Render the navbar
+                GD.Components.Navbar(props);
+                break;
+            case "OFFCANVAS":
+                props.body = this.createElement(el, false);
+                GD.Components.Offcanvas(props);
+                break;
+            case "PAGING":
+                GD.Components.Pagination(props);
+                break;
+            case "POPOVER":
+                props.btnProps = this.getChildItems(el, "btn-props", componentName);
+                props.options = props.options || {};
+                props.options["content"] = this.createElement(el, false);
+                GD.Components.Popover(props);
+                break;
+            case "PROGRESS":
+                GD.Components.Progress(props);
+                break;
+            case "PROGRESS-GROUP":
+                props.progressbars = this.getChildItems(el, "bs-progress", componentName);
+                GD.Components.ProgressGroup(props);
+                break;
+            case "SPINNER":
+                GD.Components.Spinner(props);
+                break;
+            case "TABLE":
+                // Set the rows
+                try {
+                    if (props.rows == null) {
+                        var elRows = el.querySelector("bs-rows");
+                        if (elRows) {
+                            // Set the rows
+                            props.rows = JSON.parse(elRows.innerHTML);
+                            el.removeChild(elRows);
+                        }
+                    }
+                }
+                catch (_a) { }
+                // Set the properties
+                props.columns = this.getChildItems(el, "bs-col", componentName);
+                GD.Components.Table(props);
+                break;
+            case "TOAST":
+                props.body = this.createElement(el, false);
+                GD.Components.Toast(props);
+                break;
+            case "TOOLBAR":
+                props.items = this.getChildItems(el, "toolbar-item", componentName);
+                GD.Components.Toolbar(props);
+                break;
+            case "TOOLTIP":
+                props.btnProps = this.getChildItems(el, "btn-props", componentName);
+                props.content = props.content || this.createElement(el, false);
+                GD.Components.Tooltip(props);
+                break;
+            // Do nothing
+            default:
+                return;
+        }
+    }
+    // Creates an element and appends the children to it
+    CustomElement.prototype.createElement = function (elSource, removeFl) {
+        if (removeFl === void 0) { removeFl = true; }
+        var elTarget = document.createElement("div");
+        // See if the target exists
+        while (elSource.firstChild) {
+            elTarget.appendChild(elSource.firstChild);
+        }
+        // Render any custom elements
+        //new RenderComponents(elTarget);
+        // Remove the element
+        removeFl ? elSource.remove() : null;
+        // Return the target element
+        return elTarget.childNodes.length > 0 ? elTarget : null;
+    };
+    // Converts the custom childelements
+    CustomElement.prototype.getChildItems = function (el, propName, componentName) {
+        var _this = this;
+        var items = [];
+        // Get the item elements
+        el.querySelectorAll(propName).forEach(function (elItem) {
+            var _a, _b, _c, _d;
+            // Ensure this is an item
+            if (elItem.nodeName == propName.toUpperCase()) {
+                var item = _this.getProps(elItem, componentName);
+                // See if there is content
+                if (elItem.innerHTML) {
+                    // Set custom child elements
+                    switch (elItem.nodeName) {
+                        case "APPENDED-BUTTON":
+                        case "BTN-PROPS":
+                        case "CARD-ACTION":
+                        case "PREPENDED-BUTTON":
+                            item.text = (_a = (item.text || elItem.innerHTML)) === null || _a === void 0 ? void 0 : _a.trim();
+                            break;
+                        case "BS-CARD":
+                            item.body = _this.getChildItems(elItem, "card-body", componentName);
+                            item.header = _this.getChildItems(elItem, "card-footer", componentName);
+                            item.footer = _this.getChildItems(elItem, "card-header", componentName);
+                            break;
+                        case "BS-COL":
+                            item.title = (_b = (item.title || elItem.innerHTML)) === null || _b === void 0 ? void 0 : _b.trim();
+                            break;
+                        case "CARD-BODY":
+                            item.actions = _this.getChildItems(elItem, "card-action", elItem.nodeName);
+                            break;
+                        case "NAVBAR-ITEM":
+                            item.items = _this.getChildItems(elItem, "navbar-item", componentName);
+                            item.text = (_c = (item.text || elItem.innerHTML)) === null || _c === void 0 ? void 0 : _c.trim();
+                            break;
+                        case "NAVBAR-ITEM-END":
+                            item.items = _this.getChildItems(elItem, "navbar-item-end", componentName);
+                            item.text = (_d = (item.text || elItem.innerHTML)) === null || _d === void 0 ? void 0 : _d.trim();
+                            break;
+                        case "TOOLBAR-ITEM":
+                            item.buttons = _this.getChildItems(elItem, "bs-button", "BUTTON");
+                            break;
+                    }
+                    // See if there is a sub-component
+                    switch (componentName) {
+                        case "LIST-GROUP":
+                            // Set the badge
+                            var badge = _this.getChildItems(elItem, "bs-badge", componentName);
+                            if ((badge === null || badge === void 0 ? void 0 : badge.length) > 0) {
+                                item.badge = badge[0];
+                            }
+                            break;
+                    }
+                    // Set the custom property
+                    switch (componentName) {
+                        // content
+                        case "ACCORDION":
+                        case "CARD":
+                        case "CAROUSEL":
+                        case "LIST-GROUP":
+                            item.content = item.content || _this.createElement(elItem);
+                            break;
+                        // label
+                        case "CHECKBOX-GROUP":
+                            item.label = item.label || elItem.innerHTML;
+                            break;
+                        // tab content
+                        case "NAV":
+                            item.tabContent = item.tabContent || _this.createElement(elItem);
+                            break;
+                        // text
+                        case "CARD-BODY":
+                            break;
+                        case "BREADCRUMB":
+                        case "DROPDOWN":
+                        case "FORM-CONTROL":
+                        case "LIST-BOX":
+                            item.text = item.text || elItem.innerHTML;
+                            break;
+                    }
+                }
+                // Add the item
+                items.push(item);
+                // Remove the item
+                elItem.remove();
+            }
+        });
+        // See if items exist
+        if (items.length > 0) {
+            switch (propName) {
+                case "btn-props":
+                    return items[0];
+                default:
+                    return items;
+            }
+        }
+        // Return nothing
+        return undefined;
+    };
+    // Converts the target component name to an element
+    CustomElement.prototype.getElement = function (elSource, componentName) {
+        var elTarget = null;
+        // See if the target exists
+        elSource.childNodes.forEach(function (el) {
+            if (el.nodeName == componentName.toUpperCase()) {
+                // Create the element
+                elTarget = document.createElement("div");
+                // Set the element
+                while (el.firstChild) {
+                    elTarget.appendChild(el.firstChild);
+                }
+                // Remove the element
+                el.remove();
+            }
+        });
+        // Return the target element
+        return elTarget;
+    };
+    // Gets the property name
+    CustomElement.prototype.getPropName = function (propName) {
+        var idx = propName.indexOf('-');
+        while (idx > 0) {
+            // Update the key and index
+            propName = propName.substring(0, idx) + propName[idx + 1].toUpperCase() + propName.substring(idx + 2);
+            idx = propName.indexOf('-');
+        }
+        // Return the property name
+        return propName;
+    };
+    // Gets the properties of an element and returns an object
+    CustomElement.prototype.getProps = function (el, componentName) {
+        var _a, _b;
+        var props = {};
+        // Parse the attributes
+        for (var i = 0; i < el.attributes.length; i++) {
+            var attribute = el.attributes[i];
+            // Set the value
+            var value = attribute.value;
+            // Convert the value
+            if (typeof (value) === "string") {
+                // See if it's a boolean value
+                if ((value === null || value === void 0 ? void 0 : value.toLowerCase()) == "true") {
+                    value = true;
+                }
+                else if ((value === null || value === void 0 ? void 0 : value.toLowerCase()) == "false") {
+                    value = false;
+                }
+                // Else, see if it's linked to a global library
+                else if (value.indexOf('.') > 0) {
+                    // Split the value
+                    var objInfo = value.split('.');
+                    // See if this is linked to a global library
+                    var objProp = null;
+                    for (var i_1 = 0; i_1 < objInfo.length; i_1++) {
+                        if (i_1 == 0) {
+                            objProp = window[objInfo[0]];
+                            if (objProp) {
+                                continue;
+                            }
+                            else {
+                                break;
+                            }
+                            ;
+                        }
+                        // Update the object
+                        objProp = objProp[objInfo[i_1]];
+                        if (objProp == null) {
+                            break;
+                        }
+                    }
+                    // See if the object exists
+                    if (objProp) {
+                        // Update the value
+                        value = objProp;
+                    }
+                }
+                else {
+                    try {
+                        // See if it's JSON
+                        var jsonObj = JSON.parse(value);
+                        value = jsonObj;
+                    }
+                    catch (_c) {
+                        try {
+                            // See if it's a reference
+                            var elTarget = document.querySelector(value);
+                            if (elTarget) {
+                                value = elTarget;
+                            }
+                        }
+                        catch (_d) { }
+                    }
+                }
+            }
+            // Add the property
+            props[this.getPropName(attribute.name)] = value;
+        }
+        // See if there is a sub-component
+        switch (componentName) {
+            case "BUTTON":
+                // Set the spinner
+                var spinner = this.getChildItems(el, "bs-spinner", componentName);
+                if ((spinner === null || spinner === void 0 ? void 0 : spinner.length) > 0) {
+                    props.spinner = spinner[0];
+                }
+                break;
+        }
+        // Set common properties
+        var clearElementFl = false;
+        switch (componentName) {
+            // content
+            case "ALERT":
+            case "BADGE":
+            case "COLLAPSE":
+            case "ICON-LINK":
+                props.content = this.createElement(el, false);
+                break;
+            // data
+            case "DATA":
+                // Try to parse the value
+                try {
+                    var data = JSON.parse(el.innerHTML.trim());
+                    props.data = data;
+                    clearElementFl = true;
+                }
+                catch (_e) { }
+                break;
+            // label
+            case "PROGRESS":
+                clearElementFl = props.label ? false : true;
+                props.label = (_a = (props.label || el.innerHTML)) === null || _a === void 0 ? void 0 : _a.trim();
+                break;
+            // text
+            case "BUTTON":
+            case "NAVBAR-ITEM":
+            case "NAVBAR-ITEM-END":
+                clearElementFl = props.text ? false : true;
+                props.text = (_b = (props.text || el.innerHTML)) === null || _b === void 0 ? void 0 : _b.trim();
+                break;
+            // value
+            case "INPUT-GROUP":
+            case "NAVBAR-SEARCH-BOX":
+                // Ensure the value exists
+                if (typeof (props.value) != "undefined") {
+                    props.value = typeof (props.value) === "string" ? props.value : props.value;
+                }
+                else {
+                    clearElementFl = true;
+                    props.value = el.innerHTML.trim();
+                }
+                break;
+        }
+        // Clear the element
+        if (clearElementFl) {
+            while (el.firstChild) {
+                el.removeChild(el.firstChild);
+            }
+        }
+        // Return the properties
+        return props;
+    };
+    return CustomElement;
+}());
+exports.CustomElement = CustomElement;