gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
886 lines (885 loc) • 39.9 kB
JavaScript
"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.FormControl = void 0;
var checkboxGroup_1 = require("../checkboxGroup");
var custom_1 = require("./custom");
var dropdown_1 = require("../dropdown");
var inputGroup_1 = require("../inputGroup");
var listBox_1 = require("../listBox");
var _1 = require(".");
/**
* Form Control
*/
var FormControl = /** @class */ (function () {
// Constructor
function FormControl(props, formProps, elLabel) {
var _this = this;
this._cb = null;
this._custom = null;
this._el = null;
this._elLabel = null;
this._formProps = null;
this._ddl = null;
this._isRendered = false;
this._lb = null;
this._tb = null;
// Save the parameters
this._formProps = formProps;
this._props = props;
this._elLabel = elLabel;
// See if there is a rendering event
if (typeof (this._props.onControlRendering) === "function") {
// Call the event and see if a promise is returned
var returnVal = this._props.onControlRendering(Object.assign({}, this._props));
if (returnVal && typeof (returnVal["then"]) === "function") {
// Wait for it to complete
returnVal["then"](function (newProps) {
// Update the properties
_this._props = newProps || _this._props;
// Create the control
_this.create();
});
}
else {
// Create the control
this.create();
}
}
else {
// Create the control
this.create();
}
}
// Configure the control
FormControl.prototype.configure = function () {
// Ensure a control was created
if (this.control) {
// Set the element
this._el = this.control.el;
// See if an error message exists
if (this._props.errorMessage) {
// Get the group
var elGroup = this._el.querySelector(".input-group") || this._el.querySelector(".form-check:last-child");
if (elGroup) {
// Add the error message
var elErrorMessage = document.createElement("div");
elErrorMessage.className = "invalid-feedback";
elErrorMessage.innerHTML = this._props.errorMessage;
elGroup.appendChild(elErrorMessage);
}
}
// See if an element was defined to render to
if (this._props.el) {
// Append the control to the element
this._props.el.appendChild(this._el);
}
// See if the label is set
if (this._elLabel && this._formProps.isFloating && this._el.id) {
// Set the attributes
this._elLabel.setAttribute("for", this._el.id);
}
}
};
// Creates the control
FormControl.prototype.create = function () {
var _this = this;
// Parse the custom classes to add
var className = this._props.controlClassName || "";
// Set the value
var formValue = this._formProps.value ? this._formProps.value[this._props.name] : null;
var value = typeof (this._props.value) === "undefined" ? formValue : this._props.value;
// Render the control based on the type
switch (this._props.type) {
// Checkbox
case _1.FormControlTypes.Checkbox:
var cbProps = this._props;
// Add the checkbox group
this._cb = (0, checkboxGroup_1.CheckboxGroup)({
className: className,
colSize: cbProps.colSize,
hideLabel: true,
isInline: cbProps.isInline,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
items: cbProps.items,
onChange: cbProps.onChange,
required: this._props.required,
title: this._props.title,
type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,
value: value
});
break;
// Color Picker
case _1.FormControlTypes.ColorPicker:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
appendedDropdown: this.props.appendedDropdown,
appendedLabel: this.props.appendedLabel,
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
prependedDropdown: this.props.prependedDropdown,
prependedLabel: this.props.prependedLabel,
required: this._props.required,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.ColorPicker,
value: value
});
break;
// Datalist
case _1.FormControlTypes.Datalist:
// Add the dropdown
this._ddl = (0, dropdown_1.Dropdown)({
className: className,
formFl: true,
id: this._props.id,
isDatalist: true,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
onChange: this._props.onChange,
required: this._props.required,
title: this._props.title,
value: value
});
break;
// Dropdown
case _1.FormControlTypes.Dropdown:
// Add the dropdown
this._ddl = (0, dropdown_1.Dropdown)({
className: className,
formFl: true,
id: this._props.id,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
onChange: this._props.onChange,
onMenuRendering: this._props.onMenuRendering,
required: this._props.required,
title: this._props.title,
value: value
});
break;
// Dropdown
case _1.FormControlTypes.DropdownButton:
// Add the dropdown
this._ddl = (0, dropdown_1.Dropdown)({
className: className,
formFl: false,
id: this._props.id,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
label: this.props.placeholder,
onChange: this._props.onChange,
onMenuRendering: this._props.onMenuRendering,
placement: this._props.placement,
required: this._props.required,
title: this._props.title,
value: value
});
break;
// Dropdown
case _1.FormControlTypes.DropdownCheckbox:
// Add the dropdown
this._ddl = (0, dropdown_1.Dropdown)({
className: className,
formFl: false,
id: this._props.id,
isCheckbox: true,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
label: this.props.placeholder,
onChange: this._props.onChange,
onMenuRendering: this._props.onMenuRendering,
placement: this._props.placement,
required: this._props.required,
title: this._props.title,
value: value
});
break;
// Email
case _1.FormControlTypes.Email:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
appendedDropdown: this.props.appendedDropdown,
appendedLabel: this.props.appendedLabel,
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
prependedDropdown: this.props.prependedDropdown,
prependedLabel: this.props.prependedLabel,
required: this._props.required,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.Email,
value: value
});
break;
// File
case _1.FormControlTypes.File:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
appendedDropdown: this.props.appendedDropdown,
appendedLabel: this.props.appendedLabel,
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
prependedDropdown: this.props.prependedDropdown,
prependedLabel: this.props.prependedLabel,
required: this._props.required,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.File,
value: value
});
break;
// List Box
case _1.FormControlTypes.ListBox:
// Add the list box
this._lb = (0, listBox_1.ListBox)({
id: this._props.name,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
required: this._props.required,
value: value
});
break;
// Multi-Checkbox
case _1.FormControlTypes.MultiCheckbox:
var cbMultiProps = this._props;
// Add the checkbox group
this._cb = (0, checkboxGroup_1.CheckboxGroup)({
className: className,
colSize: cbMultiProps.colSize,
hideLabel: true,
isDisabled: this._props.isDisabled,
isInline: cbMultiProps.isInline,
isReadonly: this._props.isReadonly,
items: cbMultiProps.items,
multi: true,
onChange: cbMultiProps.onChange,
required: this._props.required,
title: this._props.title,
type: checkboxGroup_1.CheckboxGroupTypes.Checkbox,
value: value
});
break;
// Multi-Dropdown
case _1.FormControlTypes.MultiDropdown:
// Add the dropdown
this._ddl = (0, dropdown_1.Dropdown)({
className: className,
formFl: true,
id: this._props.id,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
multi: true,
onChange: this._props.onChange,
onMenuRendering: this._props.onMenuRendering,
required: this._props.required,
title: this._props.title,
value: value
});
break;
// Multi-Dropdown Button
case _1.FormControlTypes.MultiDropdownButton:
// Add the dropdown
this._ddl = (0, dropdown_1.Dropdown)({
className: className,
formFl: false,
id: this._props.id,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
label: this._props.placeholder,
multi: true,
onChange: this._props.onChange,
onMenuRendering: this._props.onMenuRendering,
placement: this._props.placement,
required: this._props.required,
title: this._props.title,
value: value
});
break;
// Multi-Dropdown Checkbox
case _1.FormControlTypes.MultiDropdownCheckbox:
// Add the dropdown
this._ddl = (0, dropdown_1.Dropdown)({
className: className,
formFl: false,
id: this._props.id,
isCheckbox: true,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
label: this._props.placeholder,
multi: true,
onChange: this._props.onChange,
onMenuRendering: this._props.onMenuRendering,
placement: this._props.placement,
required: this._props.required,
title: this._props.title,
value: value
});
break;
// Multi-List Box
case _1.FormControlTypes.MultiListBox:
// Add the list box
this._lb = (0, listBox_1.ListBox)({
id: this._props.name,
isReadonly: this._props.isReadonly || this._props.isDisabled,
items: this._props.items,
multi: true,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
required: this._props.required,
value: value
});
break;
// Multi-Radio
case _1.FormControlTypes.MultiRadio:
// Add the checkbox group
this._cb = (0, checkboxGroup_1.CheckboxGroup)({
className: className,
colSize: this._props.colSize,
hideLabel: true,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
items: this._props.items,
multi: true,
onChange: this._props.onChange,
required: this._props.required,
title: this._props.title,
type: checkboxGroup_1.CheckboxGroupTypes.Radio,
value: value
});
break;
// Multi-Switch
case _1.FormControlTypes.MultiSwitch:
// Add the checkbox group
this._cb = (0, checkboxGroup_1.CheckboxGroup)({
className: className,
colSize: this._props.colSize,
hideLabel: true,
isDisabled: this._props.isDisabled,
isInline: this._props.isInline,
isReadonly: this._props.isReadonly,
items: this._props.items,
multi: true,
onChange: this._props.onChange,
required: this._props.required,
title: this._props.title,
type: checkboxGroup_1.CheckboxGroupTypes.Switch,
value: value
});
break;
// Password
case _1.FormControlTypes.Password:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
appendedDropdown: this.props.appendedDropdown,
appendedLabel: this.props.appendedLabel,
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
prependedDropdown: this.props.prependedDropdown,
prependedLabel: this.props.prependedLabel,
required: this._props.required,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.Password,
value: value
});
break;
// Radio
case _1.FormControlTypes.Radio:
// Add the checkbox group
this._cb = (0, checkboxGroup_1.CheckboxGroup)({
className: className,
colSize: this._props.colSize,
hideLabel: true,
isDisabled: this._props.isDisabled,
isInline: this._props.isInline,
isReadonly: this._props.isReadonly,
items: this._props.items,
onChange: this._props.onChange,
required: this._props.required,
title: this._props.title,
type: checkboxGroup_1.CheckboxGroupTypes.Radio,
value: value
});
break;
// Range
case _1.FormControlTypes.Range:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
min: this._props.min || 0,
max: this._props.max || 100,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
required: this._props.required,
step: this._props.step,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.Range,
value: value
});
break;
// Read Only
case _1.FormControlTypes.Readonly:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
appendedDropdown: this.props.appendedDropdown,
appendedLabel: this.props.appendedLabel,
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: true,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
prependedDropdown: this.props.prependedDropdown,
prependedLabel: this.props.prependedLabel,
required: this._props.required,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.TextField,
value: value
});
break;
// Switch
case _1.FormControlTypes.Switch:
// Add the checkbox group
this._cb = (0, checkboxGroup_1.CheckboxGroup)({
className: className,
colSize: this._props.colSize,
hideLabel: true,
isDisabled: this._props.isDisabled,
isInline: this._props.isInline,
isReadonly: this._props.isReadonly,
items: this._props.items,
onChange: this._props.onChange,
required: this._props.required,
title: this._props.title,
type: checkboxGroup_1.CheckboxGroupTypes.Switch,
value: value
});
break;
// Text Area
case _1.FormControlTypes.TextArea:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
appendedDropdown: this.props.appendedDropdown,
appendedLabel: this.props.appendedLabel,
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
prependedDropdown: this.props.prependedDropdown,
prependedLabel: this.props.prependedLabel,
required: this._props.required,
rows: this._props.rows,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.TextArea,
value: value
});
break;
// Text Field
case _1.FormControlTypes.TextField:
// Add the input
this._tb = (0, inputGroup_1.InputGroup)({
appendedDropdown: this.props.appendedDropdown,
appendedLabel: this.props.appendedLabel,
className: className,
id: this._props.id,
isDisabled: this._props.isDisabled,
isReadonly: this._props.isReadonly,
onChange: this._props.onChange,
placeholder: this._props.placeholder,
prependedDropdown: this.props.prependedDropdown,
prependedLabel: this.props.prependedLabel,
required: this._props.required,
title: this._props.title,
type: inputGroup_1.InputGroupTypes.TextField,
value: value
});
break;
// Custom Type
default:
// Create the default element
this._el = document.createElement("div");
this._el.className = className;
// See if there is a custom type
var custom = custom_1.CustomControls.getByType(this._props.type);
if (custom && typeof (custom) === "function") {
// Set the default value
this._props.value = this._props.value || value;
// Execute the event
this._custom = custom(this._props, this._formProps);
}
break;
}
// See if a checkbox was rendered and an id was set
if (this.control && this._props.id) {
// Set the id
this.control.el.id = this._props.id;
}
// Configure the control
this.configure();
// Wait before executing the rendered event, otherwise the controls will be null
setTimeout(function () {
// Execute the events
_this._props.onControlRendered ? _this._props.onControlRendered(_this) : null;
_this._formProps.onControlRendered ? _this._formProps.onControlRendered(_this) : null;
// Set the flag
_this._isRendered = true;
}, 10);
};
Object.defineProperty(FormControl.prototype, "el", {
/**
* Public Interface
*/
get: function () { return this._el; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "checkbox", {
// The checkbox control
get: function () { return this._cb; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "dropdown", {
// The dropdown control
get: function () { return this._ddl; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "control", {
// The textbox control
get: function () { return this._cb || this._ddl || this._lb || this._tb || this._custom; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "label", {
// The control label
get: function () { return this._elLabel; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "listbox", {
// The listbox control
get: function () { return this._lb; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "textbox", {
// The textbox control
get: function () { return this._tb; },
enumerable: false,
configurable: true
});
// Method to get the form control value
FormControl.prototype.getValue = function () {
// See if there is an override event
if (this._props.onGetValue) {
return this._props.onGetValue(this._props);
}
// See if this is a checkbox
if (this._cb) {
// See if this is a multi-checkbox
if (this._props.type == _1.FormControlTypes.MultiCheckbox || this._props.type == _1.FormControlTypes.MultiRadio || this._props.type == _1.FormControlTypes.MultiSwitch) {
// Return the selected items
return this._cb.getValue().selectedItems;
}
// Return a boolean
return this._cb.getValue().selectedItems ? true : false;
}
// See if this is a dropdown
if (this._ddl) {
// Return the value
return this._ddl.getValue();
}
// See if this is a list box
if (this._lb) {
// Return the value
return this._lb.getValue();
}
// See if this is a textbox
if (this._tb) {
// See if this is a file
if (this._props.type == _1.FormControlTypes.File) {
// Return the file information
return this._tb.getFileInfo();
}
// Return the value
return this._tb.getValue();
}
};
// Hides the control
FormControl.prototype.hide = function () {
// Ensure an element exists
if (this._el) {
// See if this is a row
if (this._el.parentElement && this._el.parentElement.parentElement && this._el.parentElement.parentElement.classList.contains("row")) {
// See if there are other controls in this row
if (this._el.parentElement.parentElement.querySelectorAll(".col").length > 1) {
// Hide the column element
this._el.parentElement.classList.add("d-none");
}
else {
// Hide the row element
this._el.parentElement.parentElement.classList.add("d-none");
}
}
// Else, ensure the parent element exists
else if (this._el.parentElement) {
// Hide the group element
this._el.parentElement.classList.add("d-none");
}
}
};
// Is loaded
FormControl.prototype.isLoaded = function () {
var _this = this;
// Return a promise
return new Promise(function (resolve) {
// Wait for the control to be created
var id = setInterval(function () {
// See if the control has been rendered
if (_this.isRendered) {
// Stop the loop
clearInterval(id);
// Resolve the promise
resolve();
}
}, 10);
});
};
Object.defineProperty(FormControl.prototype, "isRendered", {
// Flag indicating the control is loaded
get: function () { return this._isRendered; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "isValid", {
// Validates the control
get: function () {
var validation = { isValid: true };
// Get the element and value
var elControl = (this._cb || this._ddl || this._lb || this._tb) ? (this._cb || this._ddl || this._lb || this._tb).el : this._el;
var value = this.getValue();
// See if this control is required
if (this._props.required) {
// See if a value doesn't exists
if (value == null) {
// Set the flag
validation.isValid = false;
}
// Else, see if the value is an array
else if (typeof (value.length) === "number") {
// Set the flag
validation.isValid = value.length > 0;
}
// Else, see if this is a single checkbox
else if (this._cb && typeof (value) === "boolean") {
// Set the flag
validation.isValid = value;
}
// Else, see if this is a dropdown and ensure it has a value
else if (this._ddl && !this._ddl.isMulti && value) {
// Set the flag to ensure a text/value exists
validation.isValid = value.text || value.value ? true : false;
}
}
// See if an event exists
if (this._props.onValidate) {
// Call the event
var returnValue = this._props.onValidate(this._props, { value: value });
if (typeof (returnValue) === "boolean") {
// Set the flag
validation.isValid = returnValue;
}
// Else, ensure it exists
else if (returnValue) {
// Set the validation
validation = __assign(__assign({}, validation), returnValue);
}
}
// Update the validation
this.updateValidation(elControl, validation);
// Return the flag
return validation.isValid;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FormControl.prototype, "props", {
// The form control properties
get: function () { return this._props; },
enumerable: false,
configurable: true
});
// Sets the form control label
FormControl.prototype.setLabel = function (value) {
// Update the label
this._elLabel ? this._elLabel.innerHTML = value || "" : null;
};
// Sets the custom control
FormControl.prototype.setControl = function (control) {
// Set the custom control
this._custom = control;
};
// Sets the form control value
FormControl.prototype.setValue = function (value) {
// Set the value
this.control ? this.control.setValue(value) : null;
};
// Shows the control
FormControl.prototype.show = function () {
// Ensure an element exists
if (this._el) {
// See if this is a row
if (this._el.parentElement && this._el.parentElement.parentElement && this._el.parentElement.parentElement.classList.contains("row")) {
// See if there are other controls in this row
if (this._el.parentElement.parentElement.querySelectorAll(".col").length > 1) {
// Show the column element
this._el.parentElement.classList.remove("d-none");
}
else {
// Show the row element
this._el.parentElement.parentElement.classList.remove("d-none");
}
}
// Else, ensure the parent element exists
else if (this._el.parentElement) {
// Show the group element
this._el.parentElement.classList.remove("d-none");
}
}
};
// Updates the control validation
FormControl.prototype.updateValidation = function (elControl, validation) {
// See if this is a checkbox/switch
var isCheckbox = elControl.querySelectorAll(".form-check").length > 0;
// Get the form controls
var elFormControls = isCheckbox ? [elControl] : elControl.querySelectorAll(".form-control");
elFormControls = elFormControls.length == 0 ? elControl.querySelectorAll(".form-select") : elFormControls;
// Parse the form controls
for (var i = 0; i < elFormControls.length; i++) {
// Ensure the control exists
var elFormControl = elFormControls[i];
if (!isCheckbox) {
// Clear the invalid/valid classes
elFormControl.classList.remove("is-invalid");
elFormControl.classList.remove("is-valid");
// Set the class
elFormControl.classList.add(validation.isValid ? "is-valid" : "is-invalid");
}
else {
var validateControls = function (controls) {
// Parse the controls
for (var i_1 = 0; i_1 < controls.length; i_1++) {
var control = controls[i_1];
// Clear the invalid/valid classes
control.classList.remove("is-invalid");
control.classList.remove("is-valid");
// Set the class
control.classList.add(validation.isValid ? "is-valid" : "is-invalid");
}
};
// Get the checkboxes
var elCheckboxes = elControl.querySelectorAll(".form-check-input");
if (elCheckboxes.length > 0) {
// Validate the controls
validateControls(elCheckboxes);
// Set the form control
elFormControl = elCheckboxes.length > 0 ? elCheckboxes[elCheckboxes.length - 1] : elFormControl;
}
// Get the custom controls
var elCustomControls = elControl.querySelectorAll(".custom-control-input");
if (elCustomControls.length > 0) {
// Validate the controls
validateControls(elCustomControls);
// Set the form control
elFormControl = elCustomControls.length > 0 ? elCustomControls[elCustomControls.length - 1] : elFormControl;
}
}
// Ensure the form control exists
if (elFormControl) {
var useTooltip = this._formProps.validationType == _1.FormValidationTypes.Tooltip;
// Clear the old valid message if it exists
var validClassName = useTooltip ? "valid-tooltip" : "valid-feedback";
var elMessage = elFormControl.parentNode.querySelector("." + validClassName);
if (elMessage) {
// Clear the message
elMessage.innerHTML = "";
elMessage.style.display = "";
}
// Clear the old valid message if it exists
var invalidClassName = useTooltip ? "invalid-tooltip" : "invalid-feedback";
elMessage = elFormControl.parentNode.querySelector("." + invalidClassName);
if (elMessage) {
// Clear the message
elMessage.innerHTML = "";
elMessage.style.display = "";
}
// See if there is invalid feedback
if (validation.invalidMessage || this._props.errorMessage) {
// Get the element
var invalidClassName_1 = useTooltip ? "invalid-tooltip" : "invalid-feedback";
elMessage = elFormControl.parentNode.querySelector("." + invalidClassName_1);
if (elMessage == null) {
// Create the element
elMessage = document.createElement("div");
elMessage.className = invalidClassName_1;
elFormControl.parentNode.appendChild(elMessage);
}
// Set the message
elMessage.innerHTML = validation.invalidMessage || this._props.errorMessage;
// Update the display
elMessage.style.display = validation.isValid ? "" : "block";
}
// See if there is valid feedback
if (validation.validMessage) {
// Get the element
var validClassName_1 = useTooltip ? "valid-tooltip" : "valid-feedback";
elMessage = elFormControl.parentNode.querySelector("." + validClassName_1);
if (elMessage == null) {
// Create the element
elMessage = document.createElement("div");
elMessage.className = validClassName_1;
elFormControl.parentNode.appendChild(elMessage);
}
// Set the message
elMessage.innerHTML = validation.validMessage;
// Update the display
elMessage.style.display = validation.isValid ? "block" : "";
}
}
}
};
return FormControl;
}());
exports.FormControl = FormControl;