gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
144 lines (143 loc) • 5.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormGroup = void 0;
var control_1 = require("./control");
var templates_1 = require("./templates");
var types_1 = require("./types");
/**
* Form Group
*/
var FormGroup = /** @class */ (function () {
// Constructor
function FormGroup(props, formProps) {
this._control = null;
this._el = null;
this._props = null;
this._formProps = null;
// Save the properties
this._props = props;
this._formProps = formProps;
// Create the element
var el = document.createElement("div");
el.innerHTML = templates_1.HTMLGroup;
this._el = el.firstChild;
this._el.className = formProps.groupClassName = formProps.groupClassName || "";
// Configure the control
this.configure();
}
// Configure the row
FormGroup.prototype.configure = function () {
var _this = this;
// Execute the rendering event
this.configureEvents(this._props.onControlRendering).then(function () {
// Execute the parent rendering event
_this.configureEvents(_this._formProps.onControlRendering).then(function () {
// Remove the rendering event to prevent a duplicate run
var onControlRendering = _this._props.onControlRendering;
_this._props.onControlRendering = null;
// Render the control
_this.render();
// Update the property
_this._props.onControlRendering = onControlRendering;
});
});
};
// Configure the events
FormGroup.prototype.configureEvents = function (event) {
var _this = this;
// Return a promise
return new Promise(function (resolve, reject) {
// Execute the rendering event
var returnVal = event ? event(_this._props) : null;
if (returnVal && returnVal.then) {
// Wait for the event to complete
returnVal.then(function (props) {
// Update the properties
_this._props = props;
// Resolve the promise
resolve();
}, reject);
}
else {
// Resolve the promise
resolve();
}
});
};
// Renders the control
FormGroup.prototype.render = function () {
var _this = this;
// Update the label
var elLabel = this._el.querySelector("label");
var label = this._props.label || (this._control && this._control.props.label);
if (label) {
// Set the text
elLabel.innerHTML = label;
}
else {
// Remove the label
this._el.removeChild(elLabel);
elLabel = null;
}
// Update the description
var elDescription = this._el.querySelector("small");
var description = this._props.description || (this._control && this._control.props.description);
if (description) {
// Set the text
elDescription.innerHTML = description;
}
else {
// Remove the description
this._el.removeChild(elDescription);
elDescription = null;
}
// Set the class name
if (this._props.className) {
// Set the class
this._el.className = [
this._el.className || "",
this._props.className
].join(' ').trim();
}
// Create the control
this._control = new control_1.FormControl(this._props, this._formProps, elLabel);
// Wait for the control to be created
this._control.isLoaded().then(function () {
// See if the id/name and control element exists
var controlId = _this._props.id || _this._props.name;
var elControl = _this._control.control && _this._control.control.el ? _this._control.control.el : null;
elControl = elControl ? elControl.querySelector("input") || elControl.querySelector("select") || elControl : null;
if (controlId && elControl && _this._props.type != types_1.FormControlTypes.Checkbox) {
// See if the description exists
if (elDescription) {
// Set the id and aria properties
elDescription ? elDescription.id = controlId + "_desc" : null;
elControl.setAttribute("aria-describedby", elDescription.id);
}
// See if the label exists
if (elLabel) {
// Set the id and aria properties
elLabel ? elLabel.id = controlId + "_label" : null;
elControl.setAttribute("aria-labelledby", elLabel.id);
}
}
// Append the control, after the label
elDescription ? _this._el.insertBefore(_this._control.el, elDescription) : _this._el.appendChild(_this._control.el);
});
};
Object.defineProperty(FormGroup.prototype, "control", {
/**
* Public Interface
*/
get: function () { return this._control; },
enumerable: false,
configurable: true
});
Object.defineProperty(FormGroup.prototype, "el", {
get: function () { return this._el; },
enumerable: false,
configurable: true
});
return FormGroup;
}());
exports.FormGroup = FormGroup;