gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
235 lines (234 loc) • 9.45 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxGroup = exports.CheckboxGroupTypes = void 0;
var base_1 = require("../base");
var item_1 = require("./item");
var templates_1 = require("./templates");
/**
* Checkbox Group Types
*/
var CheckboxGroupTypes;
(function (CheckboxGroupTypes) {
CheckboxGroupTypes[CheckboxGroupTypes["Checkbox"] = 1] = "Checkbox";
CheckboxGroupTypes[CheckboxGroupTypes["Radio"] = 2] = "Radio";
CheckboxGroupTypes[CheckboxGroupTypes["Switch"] = 3] = "Switch";
})(CheckboxGroupTypes = exports.CheckboxGroupTypes || (exports.CheckboxGroupTypes = {}));
/**
* Checkbox Group
*/
var _CheckboxGroup = /** @class */ (function (_super) {
__extends(_CheckboxGroup, _super);
// Constructor
function _CheckboxGroup(props, template, cbTemplate) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
_this._cbTemplate = null;
_this._checkboxes = null;
_this._elCheckboxes = null;
_this._initFl = false;
// Set the template
_this._cbTemplate = cbTemplate;
// Configure the checkbox group
_this.configure();
// Configure the parent
_this.configureParent();
// Set the flag
_this._initFl = true;
return _this;
}
// Configure the card group
_CheckboxGroup.prototype.configure = function () {
var renderRow = typeof (this.props.colSize) === "number" ? this.props.colSize > 0 : false;
// See if a label is defined
var label = this.el.querySelector("legend");
if (label) {
if (this.props.label && this.props.hideLabel != true) {
// Add the label
label.innerHTML = this.props.label;
}
else {
// Remove the label
this.el.removeChild(label);
}
}
// Get the group and configure the size
var group = this.el.querySelector("div");
if (group) {
if (!renderRow) {
// Remove the group element
this.el.removeChild(group);
// Set the checkboxes element
this._elCheckboxes = this.el;
}
else {
// Set the checkboxes element
this._elCheckboxes = group;
}
}
// Render the checkboxes
this.renderItems();
// Parse the items
var valueSet = false;
var items = this.props.items || [];
for (var i = 0; i < items.length; i++) {
// See if the item is using the isSelected property
if (typeof (items[i].isSelected) === "boolean") {
// Set the flag
valueSet = true;
break;
}
}
// Set the value if we need to
valueSet ? null : this.setValue(this.props.value);
};
// Configure the events
_CheckboxGroup.prototype.configureEvents = function (item) {
var _this = this;
// See if we are not allowing multiple selections
if (this.props.multi != true) {
// Add a click event
item.checkbox.addEventListener("click", function (ev) {
// Parse the checkboxes
for (var i = 0; i < _this._checkboxes.length; i++) {
var checkbox = _this._checkboxes[i];
// Ensure this item is checked
if (!checkbox.isChecked) {
continue;
}
// Skip this item
if (checkbox.el.outerHTML == item.el.outerHTML) {
continue;
}
// Toggle the checkbox
checkbox.toggle();
}
});
}
// See if there is a change event defined
if (this.props.onChange) {
// Add a click event
item.checkbox.addEventListener("click", function (ev) {
var value = _this.getValue();
// Call the event
_this.props.onChange(value.selectedItems, value.allItems, ev);
});
}
};
// Render the checkboxes
_CheckboxGroup.prototype.renderItems = function () {
// Clear the checkboxes
this._checkboxes = [];
// Set the items
var items = this.props.items;
if (items == null || typeof (items.length) !== "number") {
// Clear the items
items = [];
// Create an item based on the label
items.push({
label: this.props.label || ""
});
}
// Parse the items
for (var i = 0; i < items.length; i++) {
var item = items[i];
// Create the checkbox
var checkbox = new item_1.CheckboxItem(item, this.props, this._cbTemplate);
this._checkboxes.push(checkbox);
this._elCheckboxes.appendChild(checkbox.el);
// Configure the events
this.configureEvents(checkbox);
// Execute the render event
this.props.onRender ? this.props.onRender(checkbox.el, item) : null;
}
};
/**
* Public Methods
*/
// Method to get the value
_CheckboxGroup.prototype.getValue = function () {
var allItems = [];
var selectedItems = [];
// Parse the checkboxes
for (var i = 0; i < this._checkboxes.length; i++) {
var cb = this._checkboxes[i];
// Add the item
allItems.push(cb.props);
// See if it's checked
if (cb.isChecked) {
// Add the value
selectedItems.push(cb.props);
}
}
// Return the values
return { selectedItems: this.props.multi ? selectedItems : selectedItems[0], allItems: allItems };
};
// Sets the checkbox items
_CheckboxGroup.prototype.setItems = function (newItems) {
if (newItems === void 0) { newItems = []; }
var renderRow = typeof (this.props.colSize) === "number" ? this.props.colSize > 0 : false;
// Update the properties
this.props.items = newItems;
// Get the element containing the checkboxes and clear them
var elParent = renderRow ? this.el.querySelector("div") : this.el;
while (elParent.firstChild) {
elParent.removeChild(elParent.firstChild);
}
// Render the checkboxes
this.renderItems();
};
// Method to set the value
// Sets the dropdown value
_CheckboxGroup.prototype.setValue = function (value) {
// See if this is a single checkbox
if (this.props.multi != true && this._checkboxes.length == 1) {
// See if this checkbox should be checked
if (typeof (value) === "boolean" && value) {
// Select the item
this._checkboxes[0].isChecked ? null : this._checkboxes[0].toggle();
}
return;
}
// Ensure it's an array
var values = value ? (typeof (value.length) === "number" && typeof (value) !== "string" ? value : [value]) : [];
// Parse the items
for (var i = 0; i < this._checkboxes.length; i++) {
var checkbox = this._checkboxes[i];
// Toggle checked items
checkbox.isChecked ? checkbox.toggle() : null;
}
// Parse the values
for (var i = 0; i < values.length; i++) {
var value_1 = values[i];
// Parse the items
for (var j = 0; j < this._checkboxes.length; j++) {
var checkbox = this._checkboxes[j];
// Select this checkbox if the label matches
checkbox.props.label == value_1 ? checkbox.toggle() : null;
}
}
// See if a change event exists
if (this._initFl && this.props.onChange) {
var value_2 = this.getValue();
// Execute the change event
this.props.onChange(value_2.selectedItems, value_2.allItems);
}
};
return _CheckboxGroup;
}(base_1.Base));
var CheckboxGroup = function (props, template, cbTemplate) { return new _CheckboxGroup(props, template, cbTemplate); };
exports.CheckboxGroup = CheckboxGroup;