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