gd-bs 5.3.3 → 5.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/buttonGroup/index.js +17 -8
- package/build/components/form/control.js +20 -0
- package/build/components/tooltipGroup/index.js +28 -19
- package/dist/gd-bs-icons.js +3 -3
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.d.ts +6 -0
- package/dist/gd-bs.js +3 -3
- package/dist/gd-bs.min.js +1 -1
- package/package.json +1 -1
- package/src/components/buttonGroup/index.ts +20 -9
- package/src/components/buttonGroup/types.d.ts +3 -0
- package/src/components/form/control.ts +18 -0
- package/src/components/tooltipGroup/index.ts +29 -19
- package/src/components/tooltipGroup/types.d.ts +3 -0
|
@@ -53,16 +53,20 @@ var _ButtonGroup = /** @class */ (function (_super) {
|
|
|
53
53
|
// Parse the buttons
|
|
54
54
|
var buttons = this.props.buttons || [];
|
|
55
55
|
for (var i = 0; i < buttons.length; i++) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
buttonProps.type = buttonProps.type || this.props.buttonType;
|
|
59
|
-
// Create the button
|
|
60
|
-
var button = button_1.Button(buttonProps, btnTemplate);
|
|
61
|
-
this._buttons.push(button);
|
|
62
|
-
// Append the button to the group
|
|
63
|
-
this.el.appendChild(button.el);
|
|
56
|
+
// Render the button
|
|
57
|
+
this.renderButton(buttons[i], btnTemplate);
|
|
64
58
|
}
|
|
65
59
|
};
|
|
60
|
+
// Renders a button
|
|
61
|
+
_ButtonGroup.prototype.renderButton = function (props, template) {
|
|
62
|
+
// Set the property
|
|
63
|
+
props.type = props.type || this.props.buttonType;
|
|
64
|
+
// Create the button
|
|
65
|
+
var button = button_1.Button(props, template);
|
|
66
|
+
this._buttons.push(button);
|
|
67
|
+
// Append the button to the group
|
|
68
|
+
this.el.appendChild(button.el);
|
|
69
|
+
};
|
|
66
70
|
Object.defineProperty(_ButtonGroup.prototype, "buttons", {
|
|
67
71
|
/**
|
|
68
72
|
* Public Interface
|
|
@@ -72,6 +76,11 @@ var _ButtonGroup = /** @class */ (function (_super) {
|
|
|
72
76
|
enumerable: false,
|
|
73
77
|
configurable: true
|
|
74
78
|
});
|
|
79
|
+
// Adds a button to the group
|
|
80
|
+
_ButtonGroup.prototype.add = function (props, btnTemplate) {
|
|
81
|
+
// Render the button
|
|
82
|
+
this.renderButton(props, btnTemplate);
|
|
83
|
+
};
|
|
75
84
|
return _ButtonGroup;
|
|
76
85
|
}(base_1.Base));
|
|
77
86
|
exports.ButtonGroup = function (props, template, btnTemplate) { return new _ButtonGroup(props, template, btnTemplate); };
|
|
@@ -620,6 +620,16 @@ var FormControl = /** @class */ (function () {
|
|
|
620
620
|
// Update the display
|
|
621
621
|
elMessage.style.display = validation.isValid ? "" : "block";
|
|
622
622
|
}
|
|
623
|
+
else {
|
|
624
|
+
// See if there is valid feedback
|
|
625
|
+
var validClassName = useTooltip ? "valid-tooltip" : "valid-feedback";
|
|
626
|
+
var elMessage = elFormControl.parentNode.querySelector("." + validClassName);
|
|
627
|
+
if (elMessage) {
|
|
628
|
+
// Clear the message
|
|
629
|
+
elMessage.innerHTML = "";
|
|
630
|
+
elMessage.style.display = "";
|
|
631
|
+
}
|
|
632
|
+
}
|
|
623
633
|
// See if there is valid feedback
|
|
624
634
|
if (validation.validMessage) {
|
|
625
635
|
// Get the element
|
|
@@ -636,6 +646,16 @@ var FormControl = /** @class */ (function () {
|
|
|
636
646
|
// Update the display
|
|
637
647
|
elMessage.style.display = validation.isValid ? "block" : "";
|
|
638
648
|
}
|
|
649
|
+
else {
|
|
650
|
+
// See if there is invalid feedback
|
|
651
|
+
var invalidClassName = useTooltip ? "invalid-tooltip" : "invalid-feedback";
|
|
652
|
+
var elMessage = elFormControl.parentNode.querySelector("." + invalidClassName);
|
|
653
|
+
if (elMessage) {
|
|
654
|
+
// Clear the message
|
|
655
|
+
elMessage.innerHTML = "";
|
|
656
|
+
elMessage.style.display = "";
|
|
657
|
+
}
|
|
658
|
+
}
|
|
639
659
|
}
|
|
640
660
|
};
|
|
641
661
|
return FormControl;
|
|
@@ -47,33 +47,42 @@ var _TooltipGroup = /** @class */ (function (_super) {
|
|
|
47
47
|
this.renderTooltips(btnTemplate);
|
|
48
48
|
};
|
|
49
49
|
// Render the tooltips
|
|
50
|
-
_TooltipGroup.prototype.renderTooltips = function (
|
|
50
|
+
_TooltipGroup.prototype.renderTooltips = function (btnTemplate) {
|
|
51
51
|
// Clear the tooltips
|
|
52
52
|
this._tooltips = [];
|
|
53
53
|
// Parse the tooltips
|
|
54
54
|
var tooltips = this.props.tooltips || [];
|
|
55
55
|
for (var i = 0; i < tooltips.length; i++) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
tooltipProps.options = tooltipProps.options || this.props.tooltipOptions;
|
|
59
|
-
tooltipProps.placement = tooltipProps.placement || this.props.tooltipPlacement;
|
|
60
|
-
tooltipProps.type = tooltipProps.type || this.props.tooltipType;
|
|
61
|
-
// See if the button props exists
|
|
62
|
-
if (tooltipProps.btnProps) {
|
|
63
|
-
// Set the button type
|
|
64
|
-
tooltipProps.btnProps.type = tooltipProps.btnProps.type || this.props.buttonType;
|
|
65
|
-
}
|
|
66
|
-
// Create the tooltip
|
|
67
|
-
var tooltip = tooltip_1.Tooltip(tooltipProps, tooltipTemplate);
|
|
68
|
-
this._tooltips.push(tooltip);
|
|
69
|
-
// Append the tooltip to the group
|
|
70
|
-
this.el.appendChild(tooltip.el);
|
|
56
|
+
// Render the tooltip
|
|
57
|
+
this.renderTooltip(tooltips[i], btnTemplate);
|
|
71
58
|
}
|
|
72
59
|
};
|
|
60
|
+
// Renders a tooltip
|
|
61
|
+
_TooltipGroup.prototype.renderTooltip = function (props, btnTemplate) {
|
|
62
|
+
// Set the properties
|
|
63
|
+
props.options = props.options || this.props.tooltipOptions;
|
|
64
|
+
props.placement = props.placement || this.props.tooltipPlacement;
|
|
65
|
+
props.type = props.type || this.props.tooltipType;
|
|
66
|
+
// See if the button props exists
|
|
67
|
+
if (props.btnProps) {
|
|
68
|
+
// Set the button type
|
|
69
|
+
props.btnProps.type = props.btnProps.type || this.props.buttonType;
|
|
70
|
+
}
|
|
71
|
+
// Create the tooltip
|
|
72
|
+
var tooltip = tooltip_1.Tooltip(props, btnTemplate);
|
|
73
|
+
this._tooltips.push(tooltip);
|
|
74
|
+
// Append the tooltip to the group
|
|
75
|
+
this.el.appendChild(tooltip.el);
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* Public Interface
|
|
79
|
+
*/
|
|
80
|
+
// Adds a button to the group
|
|
81
|
+
_TooltipGroup.prototype.add = function (props, tooltipTemplate) {
|
|
82
|
+
// Render the tooltip
|
|
83
|
+
this.renderTooltip(props);
|
|
84
|
+
};
|
|
73
85
|
Object.defineProperty(_TooltipGroup.prototype, "tooltips", {
|
|
74
|
-
/**
|
|
75
|
-
* Public Interface
|
|
76
|
-
*/
|
|
77
86
|
// Reference to the tooltips
|
|
78
87
|
get: function () { return this._tooltips; },
|
|
79
88
|
enumerable: false,
|
package/dist/gd-bs-icons.js
CHANGED
|
@@ -764,7 +764,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));
|
|
|
764
764
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
765
765
|
|
|
766
766
|
"use strict";
|
|
767
|
-
eval("\n\nvar __extends = this && this.__extends || function () {\n var _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n };\n\n return function (d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.ButtonGroup = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./src/components/base.ts\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./src/components/button/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/buttonGroup/templates.ts\");\n/**\r\n * Button Group\r\n * @property props - The button group properties.\r\n */\n\n\nvar _ButtonGroup =\n/** @class */\nfunction (_super) {\n __extends(_ButtonGroup, _super); // Constructor\n\n\n function _ButtonGroup(props, template, btnTemplate) {\n if (template === void 0) {\n template = templates_1.HTML;\n }\n\n var _this = _super.call(this, template, props) || this;\n\n _this._buttons = null; // Configure the button group\n\n _this.configure(btnTemplate); // Configure the parent\n\n\n _this.configureParent();\n\n return _this;\n } // Configure the button group\n\n\n _ButtonGroup.prototype.configure = function (btnTemplate) {\n // Set the attributes\n this.props.id ? this.el.id = this.props.id : null;\n this.props.label ? this.el.setAttribute(\"aria-label\", this.props.label) : null; // Set the class names\n\n this.el.classList.add(this.props.isVertical ? \"btn-group-vertical\" : \"btn-group\");\n this.props.isLarge ? this.el.classList.add(\"btn-group-lg\") : null;\n this.props.isSmall ? this.el.classList.add(\"btn-group-sm\") : null; // Render the buttons\n\n this.renderButtons(btnTemplate);\n }; // Render the buttons\n\n\n _ButtonGroup.prototype.renderButtons = function (btnTemplate) {\n // Clear the buttons\n this._buttons = []; // Parse the buttons\n\n var buttons = this.props.buttons || [];\n\n for (var i = 0; i < buttons.length; i++) {\n
|
|
767
|
+
eval("\n\nvar __extends = this && this.__extends || function () {\n var _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n };\n\n return function (d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.ButtonGroup = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./src/components/base.ts\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./src/components/button/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/buttonGroup/templates.ts\");\n/**\r\n * Button Group\r\n * @property props - The button group properties.\r\n */\n\n\nvar _ButtonGroup =\n/** @class */\nfunction (_super) {\n __extends(_ButtonGroup, _super); // Constructor\n\n\n function _ButtonGroup(props, template, btnTemplate) {\n if (template === void 0) {\n template = templates_1.HTML;\n }\n\n var _this = _super.call(this, template, props) || this;\n\n _this._buttons = null; // Configure the button group\n\n _this.configure(btnTemplate); // Configure the parent\n\n\n _this.configureParent();\n\n return _this;\n } // Configure the button group\n\n\n _ButtonGroup.prototype.configure = function (btnTemplate) {\n // Set the attributes\n this.props.id ? this.el.id = this.props.id : null;\n this.props.label ? this.el.setAttribute(\"aria-label\", this.props.label) : null; // Set the class names\n\n this.el.classList.add(this.props.isVertical ? \"btn-group-vertical\" : \"btn-group\");\n this.props.isLarge ? this.el.classList.add(\"btn-group-lg\") : null;\n this.props.isSmall ? this.el.classList.add(\"btn-group-sm\") : null; // Render the buttons\n\n this.renderButtons(btnTemplate);\n }; // Render the buttons\n\n\n _ButtonGroup.prototype.renderButtons = function (btnTemplate) {\n // Clear the buttons\n this._buttons = []; // Parse the buttons\n\n var buttons = this.props.buttons || [];\n\n for (var i = 0; i < buttons.length; i++) {\n // Render the button\n this.renderButton(buttons[i], btnTemplate);\n }\n }; // Renders a button\n\n\n _ButtonGroup.prototype.renderButton = function (props, template) {\n // Set the property\n props.type = props.type || this.props.buttonType; // Create the button\n\n var button = button_1.Button(props, template);\n\n this._buttons.push(button); // Append the button to the group\n\n\n this.el.appendChild(button.el);\n };\n\n Object.defineProperty(_ButtonGroup.prototype, \"buttons\", {\n /**\r\n * Public Interface\r\n */\n // Reference to the buttons\n get: function get() {\n return this._buttons;\n },\n enumerable: false,\n configurable: true\n }); // Adds a button to the group\n\n _ButtonGroup.prototype.add = function (props, btnTemplate) {\n // Render the button\n this.renderButton(props, btnTemplate);\n };\n\n return _ButtonGroup;\n}(base_1.Base);\n\nexports.ButtonGroup = function (props, template, btnTemplate) {\n return new _ButtonGroup(props, template, btnTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./src/components/buttonGroup/index.ts?");
|
|
768
768
|
|
|
769
769
|
/***/ }),
|
|
770
770
|
|
|
@@ -1028,7 +1028,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));
|
|
|
1028
1028
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
1029
1029
|
|
|
1030
1030
|
"use strict";
|
|
1031
|
-
eval("\n\nvar __assign = this && this.__assign || function () {\n __assign = Object.assign || function (t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return __assign.apply(this, arguments);\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.FormControl = void 0;\n\nvar checkboxGroup_1 = __webpack_require__(/*! ../checkboxGroup */ \"./src/components/checkboxGroup/index.ts\");\n\nvar custom_1 = __webpack_require__(/*! ./custom */ \"./src/components/form/custom.ts\");\n\nvar dropdown_1 = __webpack_require__(/*! ../dropdown */ \"./src/components/dropdown/index.ts\");\n\nvar inputGroup_1 = __webpack_require__(/*! ../inputGroup */ \"./src/components/inputGroup/index.ts\");\n\nvar listBox_1 = __webpack_require__(/*! ../listBox */ \"./src/components/listBox/index.ts\");\n\nvar _1 = __webpack_require__(/*! . */ \"./src/components/form/index.ts\");\n/**\r\n * Form Control\r\n */\n\n\nvar FormControl =\n/** @class */\nfunction () {\n // Constructor\n function FormControl(props, formProps, elLabel) {\n var _this = this;\n\n this._cb = null;\n this._custom = null;\n this._el = null;\n this._elLabel = null;\n this._formProps = null;\n this._ddl = null;\n this._isRendered = false;\n this._lb = null;\n this._tb = null; // Save the parameters\n\n this._formProps = formProps;\n this._props = props;\n this._elLabel = elLabel; // See if there is a rendering event\n\n if (typeof this._props.onControlRendering === \"function\") {\n // Call the event and see if a promise is returned\n var returnVal = this._props.onControlRendering(Object.assign({}, this._props));\n\n if (returnVal && typeof returnVal[\"then\"] === \"function\") {\n // Wait for it to complete\n returnVal[\"then\"](function (newProps) {\n // Update the properties\n _this._props = newProps || _this._props; // Create the control\n\n _this.create();\n });\n } else {\n // Create the control\n this.create();\n }\n } else {\n // Create the control\n this.create();\n }\n } // Configure the control\n\n\n FormControl.prototype.configure = function () {\n // Ensure a control was created\n if (this.control) {\n // Set the element\n this._el = this.control.el; // See if an error message exists\n\n if (this._props.errorMessage) {\n // Get the group\n var elGroup = this._el.querySelector(\".input-group\") || this._el.querySelector(\".form-check:last-child\");\n\n if (elGroup) {\n // Add the error message\n var elErrorMessage = document.createElement(\"div\");\n elErrorMessage.className = \"invalid-feedback\";\n elErrorMessage.innerHTML = this._props.errorMessage;\n elGroup.appendChild(elErrorMessage);\n }\n } // See if an element was defined to render to\n\n\n if (this._props.el) {\n // Append the control to the element\n this._props.el.appendChild(this._el);\n } // See if the label is set\n\n\n if (this._elLabel && this._formProps.isFloating && this._el.id) {\n // Set the attributes\n this._elLabel.setAttribute(\"for\", this._el.id);\n }\n }\n }; // Creates the control\n\n\n FormControl.prototype.create = function () {\n var _this = this; // Parse the custom classes to add\n\n\n var className = [this._props.className || \"\", this._props.controlClassName || \"\"].join(\" \").trim(); // Render the control based on the type\n\n switch (this._props.type) {\n // Checkbox\n case _1.FormControlTypes.Checkbox:\n var cbProps = this._props; // Add the checkbox group\n\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isInline: cbProps.isInline,\n isReadonly: this._props.isReadonly,\n items: cbProps.items,\n onChange: cbProps.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n value: this._props.value\n });\n break;\n // Color Picker\n\n case _1.FormControlTypes.ColorPicker:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.ColorPicker,\n value: this._props.value\n });\n break;\n // Datalist\n\n case _1.FormControlTypes.Datalist:\n // Add the dropdown\n this._ddl = dropdown_1.Dropdown({\n className: className,\n formFl: true,\n id: this._props.id,\n isDatalist: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n title: this._props.title,\n value: this._props.value\n });\n break;\n // Dropdown\n\n case _1.FormControlTypes.Dropdown:\n // Add the dropdown\n this._ddl = dropdown_1.Dropdown({\n className: className,\n formFl: true,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n onMenuRendering: this._props.onMenuRendering,\n title: this._props.title,\n value: this._props.value\n });\n break;\n // Email\n\n case _1.FormControlTypes.Email:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.Email,\n value: this._props.value\n });\n break;\n // File\n\n case _1.FormControlTypes.File:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.File,\n value: this._props.value\n });\n break;\n // List Box\n\n case _1.FormControlTypes.ListBox:\n // Add the list box\n this._lb = listBox_1.ListBox({\n id: this._props.name,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n value: this._props.value\n });\n break;\n // Multi-Checkbox\n\n case _1.FormControlTypes.MultiCheckbox:\n var cbMultiProps = this._props; // Add the checkbox group\n\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isInline: cbMultiProps.isInline,\n isReadonly: this._props.isReadonly,\n items: cbMultiProps.items,\n multi: true,\n onChange: cbMultiProps.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n value: this._props.value\n });\n break;\n // Multi-Dropdown\n\n case _1.FormControlTypes.MultiDropdown:\n // Add the dropdown\n this._ddl = dropdown_1.Dropdown({\n className: className,\n formFl: true,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n onMenuRendering: this._props.onMenuRendering,\n title: this._props.title,\n value: this._props.value\n });\n break;\n // Multi-List Box\n\n case _1.FormControlTypes.MultiListBox:\n // Add the list box\n this._lb = listBox_1.ListBox({\n id: this._props.name,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n value: this._props.value\n });\n break;\n // Multi-Radio\n\n case _1.FormControlTypes.MultiRadio:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n value: this._props.value\n });\n break;\n // Multi-Switch\n\n case _1.FormControlTypes.MultiSwitch:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n value: this._props.value\n });\n break;\n // Password\n\n case _1.FormControlTypes.Password:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.Password,\n value: this._props.value\n });\n break;\n // Radio\n\n case _1.FormControlTypes.Radio:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n value: this._props.value\n });\n break;\n // Range\n\n case _1.FormControlTypes.Range:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n min: this._props.min || 0,\n max: this._props.max || 100,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n step: this._props.step,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.Range,\n value: this._props.value\n });\n break;\n // Read Only\n\n case _1.FormControlTypes.Readonly:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: true,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.TextField,\n value: this._props.value\n });\n break;\n // Switch\n\n case _1.FormControlTypes.Switch:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n value: this._props.value\n });\n break;\n // Text Area\n\n case _1.FormControlTypes.TextArea:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n rows: this._props.rows,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.TextArea,\n value: this._props.value\n });\n break;\n // Text Field\n\n case _1.FormControlTypes.TextField:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.TextField,\n value: this._props.value\n });\n break;\n // Custom Type\n\n default:\n // Create the default element\n this._el = document.createElement(\"div\");\n this._el.className = className; // See if there is a custom type\n\n var custom = custom_1.CustomControls.getByType(this._props.type);\n\n if (custom && typeof custom === \"function\") {\n // Execute the event\n this._custom = custom(this._props);\n }\n\n break;\n } // See if a checkbox was rendered and an id was set\n\n\n if (this.control && this._props.id) {\n // Set the id\n this.control.el.id = this._props.id;\n } // Configure the control\n\n\n this.configure(); // Wait before executing the rendered event, otherwise the controls will be null\n\n setTimeout(function () {\n // Execute the events\n _this._props.onControlRendered ? _this._props.onControlRendered(_this) : null;\n _this._formProps.onControlRendered ? _this._formProps.onControlRendered(_this) : null; // Set the flag\n\n _this._isRendered = true;\n }, 10);\n };\n\n Object.defineProperty(FormControl.prototype, \"el\", {\n /**\r\n * Public Interface\r\n */\n get: function get() {\n return this._el;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"checkbox\", {\n // The checkbox control\n get: function get() {\n return this._cb;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"dropdown\", {\n // The dropdown control\n get: function get() {\n return this._ddl;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"control\", {\n // The textbox control\n get: function get() {\n return this._cb || this._ddl || this._lb || this._tb || this._custom;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"listbox\", {\n // The listbox control\n get: function get() {\n return this._lb;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"textbox\", {\n // The textbox control\n get: function get() {\n return this._tb;\n },\n enumerable: false,\n configurable: true\n }); // Method to get the form control value\n\n FormControl.prototype.getValue = function () {\n // See if there is an override event\n if (this._props.onGetValue) {\n return this._props.onGetValue(this._props);\n } // See if this is a checkbox\n\n\n if (this._cb) {\n // See if the items were defined\n if (this._props.items) {\n // Return the value(s)\n return this._cb.getValue();\n } // Return the value\n\n\n return this._cb.getValue() ? true : false;\n } // See if this is a dropdown\n\n\n if (this._ddl) {\n // Return the value\n return this._ddl.getValue();\n } // See if this is a list box\n\n\n if (this._lb) {\n // Return the value\n return this._lb.getValue();\n } // See if this is a textbox\n\n\n if (this._tb) {\n // Return the value\n return this._tb.getValue();\n }\n }; // Is loaded\n\n\n FormControl.prototype.isLoaded = function () {\n var _this = this; // Return a promise\n\n\n return new Promise(function (resolve) {\n // Wait for the control to be created\n var id = setInterval(function () {\n // See if the control has been rendered\n if (_this.isRendered) {\n // Stop the loop\n clearInterval(id); // Resolve the promise\n\n resolve();\n }\n }, 10);\n });\n };\n\n Object.defineProperty(FormControl.prototype, \"isRendered\", {\n // Flag indicating the control is loaded\n get: function get() {\n return this._isRendered;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"isValid\", {\n // Validates the control\n get: function get() {\n var validation = {\n isValid: true\n }; // Get the element and value\n\n var elControl = this._cb || this._ddl || this._lb || this._tb ? (this._cb || this._ddl || this._lb || this._tb).el : this._el;\n var value = this.getValue(); // See if this control is required\n\n if (this._props.required) {\n // See if a value doesn't exists\n if (value == null) {\n // Set the flag\n validation.isValid = false;\n } // Else, see if the value is an array\n else if (typeof value.length === \"number\") {\n // Set the flag\n validation.isValid = value.length > 0;\n }\n } // See if an event exists\n\n\n if (this._props.onValidate) {\n // Call the event\n var returnValue = this._props.onValidate(this._props, {\n value: value\n });\n\n if (typeof returnValue === \"boolean\") {\n // Set the flag\n validation.isValid = returnValue;\n } // Else, ensure it exists\n else if (returnValue) {\n // Set the validation\n validation = __assign(__assign({}, validation), returnValue);\n }\n } // Update the validation\n\n\n this.updateValidation(elControl, validation); // Return the flag\n\n return validation.isValid;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"props\", {\n // The form control properties\n get: function get() {\n return this._props;\n },\n enumerable: false,\n configurable: true\n }); // Sets the form control label\n\n FormControl.prototype.setLabel = function (value) {\n // Update the label\n this._elLabel ? this._elLabel.innerHTML = value || \"\" : null;\n }; // Sets the custom control\n\n\n FormControl.prototype.setControl = function (control) {\n // Set the custom control\n this._custom = control;\n }; // Sets the form control value\n\n\n FormControl.prototype.setValue = function (value) {\n // Set the value\n this.control ? this.control.setValue(value) : null;\n }; // Updates the control validation\n\n\n FormControl.prototype.updateValidation = function (elControl, validation) {\n // Get the form control\n var elFormControl = elControl.querySelector(\".form-control\") || elControl.querySelector(\".form-select\");\n\n if (elFormControl) {\n // Clear the invalid/valid classes\n elFormControl.classList.remove(\"is-invalid\");\n elFormControl.classList.remove(\"is-valid\"); // Set the class\n\n elFormControl.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n } else {\n var validateControls = function validateControls(controls) {\n // Parse the controls\n for (var i = 0; i < controls.length; i++) {\n var control = controls[i]; // Clear the invalid/valid classes\n\n control.classList.remove(\"is-invalid\");\n control.classList.remove(\"is-valid\"); // Set the class\n\n control.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n }\n }; // Get the checkboxes\n\n\n var elCheckboxes = elControl.querySelectorAll(\".form-check-input\");\n\n if (elCheckboxes.length > 0) {\n // Validate the controls\n validateControls(elCheckboxes); // Set the form control\n\n elFormControl = elCheckboxes.length > 0 ? elCheckboxes[elCheckboxes.length - 1] : elFormControl;\n } // Get the custom controls\n\n\n var elCustomControls = elControl.querySelectorAll(\".custom-control-input\");\n\n if (elCustomControls.length > 0) {\n // Validate the controls\n validateControls(elCustomControls); // Set the form control\n\n elFormControl = elCustomControls.length > 0 ? elCustomControls[elCustomControls.length - 1] : elFormControl;\n }\n } // Ensure the form control exists\n\n\n if (elFormControl) {\n var useTooltip = this._formProps.validationType == _1.FormValidationTypes.Tooltip; // See if there is invalid feedback\n\n if (validation.invalidMessage || this._props.errorMessage) {\n // Get the element\n var invalidClassName = useTooltip ? \"invalid-tooltip\" : \"invalid-feedback\";\n var elMessage = elFormControl.parentNode.querySelector(\".\" + invalidClassName);\n\n if (elMessage == null) {\n // Create the element\n elMessage = document.createElement(\"div\");\n elMessage.className = invalidClassName;\n elFormControl.parentNode.appendChild(elMessage);\n } // Set the message\n\n\n elMessage.innerHTML = validation.invalidMessage || this._props.errorMessage; // Update the display\n\n elMessage.style.display = validation.isValid ? \"\" : \"block\";\n } // See if there is valid feedback\n\n\n if (validation.validMessage) {\n // Get the element\n var validClassName = useTooltip ? \"valid-tooltip\" : \"valid-feedback\";\n var elMessage = elFormControl.parentNode.querySelector(\".\" + validClassName);\n\n if (elMessage == null) {\n // Create the element\n elMessage = document.createElement(\"div\");\n elMessage.className = validClassName;\n elFormControl.parentNode.appendChild(elMessage);\n } // Set the message\n\n\n elMessage.innerHTML = validation.validMessage; // Update the display\n\n elMessage.style.display = validation.isValid ? \"block\" : \"\";\n }\n }\n };\n\n return FormControl;\n}();\n\nexports.FormControl = FormControl;\n\n//# sourceURL=webpack://gd-bs/./src/components/form/control.ts?");
|
|
1031
|
+
eval("\n\nvar __assign = this && this.__assign || function () {\n __assign = Object.assign || function (t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return __assign.apply(this, arguments);\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.FormControl = void 0;\n\nvar checkboxGroup_1 = __webpack_require__(/*! ../checkboxGroup */ \"./src/components/checkboxGroup/index.ts\");\n\nvar custom_1 = __webpack_require__(/*! ./custom */ \"./src/components/form/custom.ts\");\n\nvar dropdown_1 = __webpack_require__(/*! ../dropdown */ \"./src/components/dropdown/index.ts\");\n\nvar inputGroup_1 = __webpack_require__(/*! ../inputGroup */ \"./src/components/inputGroup/index.ts\");\n\nvar listBox_1 = __webpack_require__(/*! ../listBox */ \"./src/components/listBox/index.ts\");\n\nvar _1 = __webpack_require__(/*! . */ \"./src/components/form/index.ts\");\n/**\r\n * Form Control\r\n */\n\n\nvar FormControl =\n/** @class */\nfunction () {\n // Constructor\n function FormControl(props, formProps, elLabel) {\n var _this = this;\n\n this._cb = null;\n this._custom = null;\n this._el = null;\n this._elLabel = null;\n this._formProps = null;\n this._ddl = null;\n this._isRendered = false;\n this._lb = null;\n this._tb = null; // Save the parameters\n\n this._formProps = formProps;\n this._props = props;\n this._elLabel = elLabel; // See if there is a rendering event\n\n if (typeof this._props.onControlRendering === \"function\") {\n // Call the event and see if a promise is returned\n var returnVal = this._props.onControlRendering(Object.assign({}, this._props));\n\n if (returnVal && typeof returnVal[\"then\"] === \"function\") {\n // Wait for it to complete\n returnVal[\"then\"](function (newProps) {\n // Update the properties\n _this._props = newProps || _this._props; // Create the control\n\n _this.create();\n });\n } else {\n // Create the control\n this.create();\n }\n } else {\n // Create the control\n this.create();\n }\n } // Configure the control\n\n\n FormControl.prototype.configure = function () {\n // Ensure a control was created\n if (this.control) {\n // Set the element\n this._el = this.control.el; // See if an error message exists\n\n if (this._props.errorMessage) {\n // Get the group\n var elGroup = this._el.querySelector(\".input-group\") || this._el.querySelector(\".form-check:last-child\");\n\n if (elGroup) {\n // Add the error message\n var elErrorMessage = document.createElement(\"div\");\n elErrorMessage.className = \"invalid-feedback\";\n elErrorMessage.innerHTML = this._props.errorMessage;\n elGroup.appendChild(elErrorMessage);\n }\n } // See if an element was defined to render to\n\n\n if (this._props.el) {\n // Append the control to the element\n this._props.el.appendChild(this._el);\n } // See if the label is set\n\n\n if (this._elLabel && this._formProps.isFloating && this._el.id) {\n // Set the attributes\n this._elLabel.setAttribute(\"for\", this._el.id);\n }\n }\n }; // Creates the control\n\n\n FormControl.prototype.create = function () {\n var _this = this; // Parse the custom classes to add\n\n\n var className = [this._props.className || \"\", this._props.controlClassName || \"\"].join(\" \").trim(); // Render the control based on the type\n\n switch (this._props.type) {\n // Checkbox\n case _1.FormControlTypes.Checkbox:\n var cbProps = this._props; // Add the checkbox group\n\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isInline: cbProps.isInline,\n isReadonly: this._props.isReadonly,\n items: cbProps.items,\n onChange: cbProps.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n value: this._props.value\n });\n break;\n // Color Picker\n\n case _1.FormControlTypes.ColorPicker:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.ColorPicker,\n value: this._props.value\n });\n break;\n // Datalist\n\n case _1.FormControlTypes.Datalist:\n // Add the dropdown\n this._ddl = dropdown_1.Dropdown({\n className: className,\n formFl: true,\n id: this._props.id,\n isDatalist: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n title: this._props.title,\n value: this._props.value\n });\n break;\n // Dropdown\n\n case _1.FormControlTypes.Dropdown:\n // Add the dropdown\n this._ddl = dropdown_1.Dropdown({\n className: className,\n formFl: true,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n onMenuRendering: this._props.onMenuRendering,\n title: this._props.title,\n value: this._props.value\n });\n break;\n // Email\n\n case _1.FormControlTypes.Email:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.Email,\n value: this._props.value\n });\n break;\n // File\n\n case _1.FormControlTypes.File:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.File,\n value: this._props.value\n });\n break;\n // List Box\n\n case _1.FormControlTypes.ListBox:\n // Add the list box\n this._lb = listBox_1.ListBox({\n id: this._props.name,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n value: this._props.value\n });\n break;\n // Multi-Checkbox\n\n case _1.FormControlTypes.MultiCheckbox:\n var cbMultiProps = this._props; // Add the checkbox group\n\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isInline: cbMultiProps.isInline,\n isReadonly: this._props.isReadonly,\n items: cbMultiProps.items,\n multi: true,\n onChange: cbMultiProps.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,\n value: this._props.value\n });\n break;\n // Multi-Dropdown\n\n case _1.FormControlTypes.MultiDropdown:\n // Add the dropdown\n this._ddl = dropdown_1.Dropdown({\n className: className,\n formFl: true,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n onMenuRendering: this._props.onMenuRendering,\n title: this._props.title,\n value: this._props.value\n });\n break;\n // Multi-List Box\n\n case _1.FormControlTypes.MultiListBox:\n // Add the list box\n this._lb = listBox_1.ListBox({\n id: this._props.name,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n value: this._props.value\n });\n break;\n // Multi-Radio\n\n case _1.FormControlTypes.MultiRadio:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n value: this._props.value\n });\n break;\n // Multi-Switch\n\n case _1.FormControlTypes.MultiSwitch:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n multi: true,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n value: this._props.value\n });\n break;\n // Password\n\n case _1.FormControlTypes.Password:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.Password,\n value: this._props.value\n });\n break;\n // Radio\n\n case _1.FormControlTypes.Radio:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Radio,\n value: this._props.value\n });\n break;\n // Range\n\n case _1.FormControlTypes.Range:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n min: this._props.min || 0,\n max: this._props.max || 100,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n step: this._props.step,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.Range,\n value: this._props.value\n });\n break;\n // Read Only\n\n case _1.FormControlTypes.Readonly:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: true,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.TextField,\n value: this._props.value\n });\n break;\n // Switch\n\n case _1.FormControlTypes.Switch:\n // Add the checkbox group\n this._cb = checkboxGroup_1.CheckboxGroup({\n className: className,\n hideLabel: true,\n isReadonly: this._props.isReadonly,\n items: this._props.items,\n onChange: this._props.onChange,\n title: this._props.title,\n type: checkboxGroup_1.CheckboxGroupTypes.Switch,\n value: this._props.value\n });\n break;\n // Text Area\n\n case _1.FormControlTypes.TextArea:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n rows: this._props.rows,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.TextArea,\n value: this._props.value\n });\n break;\n // Text Field\n\n case _1.FormControlTypes.TextField:\n // Add the input\n this._tb = inputGroup_1.InputGroup({\n className: className,\n id: this._props.id,\n isReadonly: this._props.isReadonly,\n onChange: this._props.onChange,\n placeholder: this._props.placeholder,\n title: this._props.title,\n type: inputGroup_1.InputGroupTypes.TextField,\n value: this._props.value\n });\n break;\n // Custom Type\n\n default:\n // Create the default element\n this._el = document.createElement(\"div\");\n this._el.className = className; // See if there is a custom type\n\n var custom = custom_1.CustomControls.getByType(this._props.type);\n\n if (custom && typeof custom === \"function\") {\n // Execute the event\n this._custom = custom(this._props);\n }\n\n break;\n } // See if a checkbox was rendered and an id was set\n\n\n if (this.control && this._props.id) {\n // Set the id\n this.control.el.id = this._props.id;\n } // Configure the control\n\n\n this.configure(); // Wait before executing the rendered event, otherwise the controls will be null\n\n setTimeout(function () {\n // Execute the events\n _this._props.onControlRendered ? _this._props.onControlRendered(_this) : null;\n _this._formProps.onControlRendered ? _this._formProps.onControlRendered(_this) : null; // Set the flag\n\n _this._isRendered = true;\n }, 10);\n };\n\n Object.defineProperty(FormControl.prototype, \"el\", {\n /**\r\n * Public Interface\r\n */\n get: function get() {\n return this._el;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"checkbox\", {\n // The checkbox control\n get: function get() {\n return this._cb;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"dropdown\", {\n // The dropdown control\n get: function get() {\n return this._ddl;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"control\", {\n // The textbox control\n get: function get() {\n return this._cb || this._ddl || this._lb || this._tb || this._custom;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"listbox\", {\n // The listbox control\n get: function get() {\n return this._lb;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"textbox\", {\n // The textbox control\n get: function get() {\n return this._tb;\n },\n enumerable: false,\n configurable: true\n }); // Method to get the form control value\n\n FormControl.prototype.getValue = function () {\n // See if there is an override event\n if (this._props.onGetValue) {\n return this._props.onGetValue(this._props);\n } // See if this is a checkbox\n\n\n if (this._cb) {\n // See if the items were defined\n if (this._props.items) {\n // Return the value(s)\n return this._cb.getValue();\n } // Return the value\n\n\n return this._cb.getValue() ? true : false;\n } // See if this is a dropdown\n\n\n if (this._ddl) {\n // Return the value\n return this._ddl.getValue();\n } // See if this is a list box\n\n\n if (this._lb) {\n // Return the value\n return this._lb.getValue();\n } // See if this is a textbox\n\n\n if (this._tb) {\n // Return the value\n return this._tb.getValue();\n }\n }; // Is loaded\n\n\n FormControl.prototype.isLoaded = function () {\n var _this = this; // Return a promise\n\n\n return new Promise(function (resolve) {\n // Wait for the control to be created\n var id = setInterval(function () {\n // See if the control has been rendered\n if (_this.isRendered) {\n // Stop the loop\n clearInterval(id); // Resolve the promise\n\n resolve();\n }\n }, 10);\n });\n };\n\n Object.defineProperty(FormControl.prototype, \"isRendered\", {\n // Flag indicating the control is loaded\n get: function get() {\n return this._isRendered;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"isValid\", {\n // Validates the control\n get: function get() {\n var validation = {\n isValid: true\n }; // Get the element and value\n\n var elControl = this._cb || this._ddl || this._lb || this._tb ? (this._cb || this._ddl || this._lb || this._tb).el : this._el;\n var value = this.getValue(); // See if this control is required\n\n if (this._props.required) {\n // See if a value doesn't exists\n if (value == null) {\n // Set the flag\n validation.isValid = false;\n } // Else, see if the value is an array\n else if (typeof value.length === \"number\") {\n // Set the flag\n validation.isValid = value.length > 0;\n }\n } // See if an event exists\n\n\n if (this._props.onValidate) {\n // Call the event\n var returnValue = this._props.onValidate(this._props, {\n value: value\n });\n\n if (typeof returnValue === \"boolean\") {\n // Set the flag\n validation.isValid = returnValue;\n } // Else, ensure it exists\n else if (returnValue) {\n // Set the validation\n validation = __assign(__assign({}, validation), returnValue);\n }\n } // Update the validation\n\n\n this.updateValidation(elControl, validation); // Return the flag\n\n return validation.isValid;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FormControl.prototype, \"props\", {\n // The form control properties\n get: function get() {\n return this._props;\n },\n enumerable: false,\n configurable: true\n }); // Sets the form control label\n\n FormControl.prototype.setLabel = function (value) {\n // Update the label\n this._elLabel ? this._elLabel.innerHTML = value || \"\" : null;\n }; // Sets the custom control\n\n\n FormControl.prototype.setControl = function (control) {\n // Set the custom control\n this._custom = control;\n }; // Sets the form control value\n\n\n FormControl.prototype.setValue = function (value) {\n // Set the value\n this.control ? this.control.setValue(value) : null;\n }; // Updates the control validation\n\n\n FormControl.prototype.updateValidation = function (elControl, validation) {\n // Get the form control\n var elFormControl = elControl.querySelector(\".form-control\") || elControl.querySelector(\".form-select\");\n\n if (elFormControl) {\n // Clear the invalid/valid classes\n elFormControl.classList.remove(\"is-invalid\");\n elFormControl.classList.remove(\"is-valid\"); // Set the class\n\n elFormControl.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n } else {\n var validateControls = function validateControls(controls) {\n // Parse the controls\n for (var i = 0; i < controls.length; i++) {\n var control = controls[i]; // Clear the invalid/valid classes\n\n control.classList.remove(\"is-invalid\");\n control.classList.remove(\"is-valid\"); // Set the class\n\n control.classList.add(validation.isValid ? \"is-valid\" : \"is-invalid\");\n }\n }; // Get the checkboxes\n\n\n var elCheckboxes = elControl.querySelectorAll(\".form-check-input\");\n\n if (elCheckboxes.length > 0) {\n // Validate the controls\n validateControls(elCheckboxes); // Set the form control\n\n elFormControl = elCheckboxes.length > 0 ? elCheckboxes[elCheckboxes.length - 1] : elFormControl;\n } // Get the custom controls\n\n\n var elCustomControls = elControl.querySelectorAll(\".custom-control-input\");\n\n if (elCustomControls.length > 0) {\n // Validate the controls\n validateControls(elCustomControls); // Set the form control\n\n elFormControl = elCustomControls.length > 0 ? elCustomControls[elCustomControls.length - 1] : elFormControl;\n }\n } // Ensure the form control exists\n\n\n if (elFormControl) {\n var useTooltip = this._formProps.validationType == _1.FormValidationTypes.Tooltip; // See if there is invalid feedback\n\n if (validation.invalidMessage || this._props.errorMessage) {\n // Get the element\n var invalidClassName = useTooltip ? \"invalid-tooltip\" : \"invalid-feedback\";\n var elMessage = elFormControl.parentNode.querySelector(\".\" + invalidClassName);\n\n if (elMessage == null) {\n // Create the element\n elMessage = document.createElement(\"div\");\n elMessage.className = invalidClassName;\n elFormControl.parentNode.appendChild(elMessage);\n } // Set the message\n\n\n elMessage.innerHTML = validation.invalidMessage || this._props.errorMessage; // Update the display\n\n elMessage.style.display = validation.isValid ? \"\" : \"block\";\n } else {\n // See if there is valid feedback\n var validClassName = useTooltip ? \"valid-tooltip\" : \"valid-feedback\";\n var elMessage = elFormControl.parentNode.querySelector(\".\" + validClassName);\n\n if (elMessage) {\n // Clear the message\n elMessage.innerHTML = \"\";\n elMessage.style.display = \"\";\n }\n } // See if there is valid feedback\n\n\n if (validation.validMessage) {\n // Get the element\n var validClassName = useTooltip ? \"valid-tooltip\" : \"valid-feedback\";\n var elMessage = elFormControl.parentNode.querySelector(\".\" + validClassName);\n\n if (elMessage == null) {\n // Create the element\n elMessage = document.createElement(\"div\");\n elMessage.className = validClassName;\n elFormControl.parentNode.appendChild(elMessage);\n } // Set the message\n\n\n elMessage.innerHTML = validation.validMessage; // Update the display\n\n elMessage.style.display = validation.isValid ? \"block\" : \"\";\n } else {\n // See if there is invalid feedback\n var invalidClassName = useTooltip ? \"invalid-tooltip\" : \"invalid-feedback\";\n var elMessage = elFormControl.parentNode.querySelector(\".\" + invalidClassName);\n\n if (elMessage) {\n // Clear the message\n elMessage.innerHTML = \"\";\n elMessage.style.display = \"\";\n }\n }\n }\n };\n\n return FormControl;\n}();\n\nexports.FormControl = FormControl;\n\n//# sourceURL=webpack://gd-bs/./src/components/form/control.ts?");
|
|
1032
1032
|
|
|
1033
1033
|
/***/ }),
|
|
1034
1034
|
|
|
@@ -1490,7 +1490,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));
|
|
|
1490
1490
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
1491
1491
|
|
|
1492
1492
|
"use strict";
|
|
1493
|
-
eval("\n\nvar __extends = this && this.__extends || function () {\n var _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n };\n\n return function (d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.TooltipGroup = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./src/components/base.ts\");\n\nvar tooltip_1 = __webpack_require__(/*! ../tooltip */ \"./src/components/tooltip/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/tooltipGroup/templates.ts\");\n/**\r\n * Tooltip Group\r\n * @property props - The tooltip group properties.\r\n */\n\n\nvar _TooltipGroup =\n/** @class */\nfunction (_super) {\n __extends(_TooltipGroup, _super); // Constructor\n\n\n function _TooltipGroup(props, template, btnTemplate) {\n if (template === void 0) {\n template = templates_1.HTML;\n }\n\n var _this = _super.call(this, template, props) || this;\n\n _this._tooltips = null; // Configure the tooltip group\n\n _this.configure(btnTemplate); // Configure the parent\n\n\n _this.configureParent();\n\n return _this;\n } // Configure the tooltip group\n\n\n _TooltipGroup.prototype.configure = function (btnTemplate) {\n // Set the attributes\n this.props.id ? this.el.id = this.props.id : null;\n this.props.label ? this.el.setAttribute(\"aria-label\", this.props.label) : null; // Set the class names\n\n this.el.classList.add(this.props.isVertical ? \"btn-group-vertical\" : \"btn-group\");\n this.props.isLarge ? this.el.classList.add(\"btn-group-lg\") : null;\n this.props.isSmall ? this.el.classList.add(\"btn-group-sm\") : null; // Render the tooltips\n\n this.renderTooltips(btnTemplate);\n }; // Render the tooltips\n\n\n _TooltipGroup.prototype.renderTooltips = function (
|
|
1493
|
+
eval("\n\nvar __extends = this && this.__extends || function () {\n var _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n };\n\n return function (d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.TooltipGroup = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./src/components/base.ts\");\n\nvar tooltip_1 = __webpack_require__(/*! ../tooltip */ \"./src/components/tooltip/index.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/tooltipGroup/templates.ts\");\n/**\r\n * Tooltip Group\r\n * @property props - The tooltip group properties.\r\n */\n\n\nvar _TooltipGroup =\n/** @class */\nfunction (_super) {\n __extends(_TooltipGroup, _super); // Constructor\n\n\n function _TooltipGroup(props, template, btnTemplate) {\n if (template === void 0) {\n template = templates_1.HTML;\n }\n\n var _this = _super.call(this, template, props) || this;\n\n _this._tooltips = null; // Configure the tooltip group\n\n _this.configure(btnTemplate); // Configure the parent\n\n\n _this.configureParent();\n\n return _this;\n } // Configure the tooltip group\n\n\n _TooltipGroup.prototype.configure = function (btnTemplate) {\n // Set the attributes\n this.props.id ? this.el.id = this.props.id : null;\n this.props.label ? this.el.setAttribute(\"aria-label\", this.props.label) : null; // Set the class names\n\n this.el.classList.add(this.props.isVertical ? \"btn-group-vertical\" : \"btn-group\");\n this.props.isLarge ? this.el.classList.add(\"btn-group-lg\") : null;\n this.props.isSmall ? this.el.classList.add(\"btn-group-sm\") : null; // Render the tooltips\n\n this.renderTooltips(btnTemplate);\n }; // Render the tooltips\n\n\n _TooltipGroup.prototype.renderTooltips = function (btnTemplate) {\n // Clear the tooltips\n this._tooltips = []; // Parse the tooltips\n\n var tooltips = this.props.tooltips || [];\n\n for (var i = 0; i < tooltips.length; i++) {\n // Render the tooltip\n this.renderTooltip(tooltips[i], btnTemplate);\n }\n }; // Renders a tooltip\n\n\n _TooltipGroup.prototype.renderTooltip = function (props, btnTemplate) {\n // Set the properties\n props.options = props.options || this.props.tooltipOptions;\n props.placement = props.placement || this.props.tooltipPlacement;\n props.type = props.type || this.props.tooltipType; // See if the button props exists\n\n if (props.btnProps) {\n // Set the button type\n props.btnProps.type = props.btnProps.type || this.props.buttonType;\n } // Create the tooltip\n\n\n var tooltip = tooltip_1.Tooltip(props, btnTemplate);\n\n this._tooltips.push(tooltip); // Append the tooltip to the group\n\n\n this.el.appendChild(tooltip.el);\n };\n /**\r\n * Public Interface\r\n */\n // Adds a button to the group\n\n\n _TooltipGroup.prototype.add = function (props, tooltipTemplate) {\n // Render the tooltip\n this.renderTooltip(props);\n };\n\n Object.defineProperty(_TooltipGroup.prototype, \"tooltips\", {\n // Reference to the tooltips\n get: function get() {\n return this._tooltips;\n },\n enumerable: false,\n configurable: true\n });\n return _TooltipGroup;\n}(base_1.Base);\n\nexports.TooltipGroup = function (props, template, tooltipTemplate) {\n return new _TooltipGroup(props, template, tooltipTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./src/components/tooltipGroup/index.ts?");
|
|
1494
1494
|
|
|
1495
1495
|
/***/ }),
|
|
1496
1496
|
|