gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
368 lines (367 loc) • 16.4 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.InputGroup = exports.InputGroupTypes = void 0;
var base_1 = require("../base");
var button_1 = require("../button");
var dropdown_1 = require("../dropdown");
var templates_1 = require("./templates");
/**
* Input Group Types
*/
var InputGroupTypes;
(function (InputGroupTypes) {
InputGroupTypes[InputGroupTypes["ColorPicker"] = 1] = "ColorPicker";
InputGroupTypes[InputGroupTypes["Email"] = 2] = "Email";
InputGroupTypes[InputGroupTypes["File"] = 3] = "File";
InputGroupTypes[InputGroupTypes["Password"] = 4] = "Password";
InputGroupTypes[InputGroupTypes["Range"] = 5] = "Range";
InputGroupTypes[InputGroupTypes["Search"] = 6] = "Search";
InputGroupTypes[InputGroupTypes["TextArea"] = 7] = "TextArea";
InputGroupTypes[InputGroupTypes["TextField"] = 8] = "TextField";
})(InputGroupTypes = exports.InputGroupTypes || (exports.InputGroupTypes = {}));
/**
* Input Group
* @param props The input group properties.
*/
var _InputGroup = /** @class */ (function (_super) {
__extends(_InputGroup, _super);
// Constructor
function _InputGroup(props, template) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
_this._ddlAppended = null;
_this._ddlPrepended = null;
_this._fileValue = null;
_this._initFl = false;
// Configure the collapse
_this.configure();
// Configure the textbox
_this.configureTextbox();
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
// Set the flag
_this._initFl = true;
return _this;
}
// Configure the card group
_InputGroup.prototype.configure = function () {
var elInput = this.el.querySelector("input");
if (elInput) {
// Set the class names
this.props.isLarge ? this.el.classList.add("input-group-lg") : null;
this.props.isSmall ? this.el.classList.add("input-group-sm") : null;
// Update the label
var label = this.el.querySelector("label");
if (label) {
this.props.id ? label.setAttribute("for", this.props.id) : null;
// Set the label if it exists
if (this.props.label) {
label.innerHTML = this.props.label;
}
// Else, remove it
else {
this.el.removeChild(label);
}
}
// See if the label exists
if (this.props.prependedLabel) {
// Add the label
var label_1 = document.createElement("span");
label_1.classList.add("input-group-text");
label_1.innerHTML = this.props.prependedLabel;
this.el.insertBefore(label_1, elInput);
}
// Parse the buttons
var buttons = this.props.prependedButtons || [];
for (var i = 0; i < buttons.length; i++) {
// Add the button
this.el.insertBefore((0, button_1.Button)(buttons[i]).el, elInput);
}
// See if there is a dropdown
if (this.props.prependedDropdown) {
// Add the dropdown
this._ddlPrepended = (0, dropdown_1.Dropdown)(this.props.prependedDropdown);
this.el.insertBefore(this._ddlPrepended.el, elInput);
}
// Default the appended buttons
var appendedButtons = this.props.appendedButtons || [];
if (this.props.type == InputGroupTypes.Range) {
// Add the button
appendedButtons.push({
id: "range-value",
text: this.props.value == null ? "" : this.props.value
});
}
// See if the label exists
if (this.props.appendedLabel) {
// Add the label
var label_2 = document.createElement("span");
label_2.classList.add("input-group-text");
label_2.innerHTML = this.props.appendedLabel;
this.el.appendChild(label_2);
}
// Parse the buttons
for (var i = 0; i < appendedButtons.length; i++) {
// Add the button
this.el.appendChild((0, button_1.Button)(appendedButtons[i]).el);
}
// See if there is a dropdown
if (this.props.appendedDropdown) {
// Add the dropdown
this._ddlAppended = (0, dropdown_1.Dropdown)(this.props.appendedDropdown);
this.el.appendChild(this._ddlAppended.el);
}
}
};
// Configure the events
_InputGroup.prototype.configureEvents = function () {
var _this = this;
var isMultiLine = this.props.type == InputGroupTypes.TextArea;
var elInput = this.el.querySelector("input") || this.el.querySelector("textarea");
if (elInput) {
// See if a change event exists
var callbackValue_1 = null;
if (this.props.onChange) {
// Add an input event
elInput.addEventListener("input", function (ev) {
// See if we have already executed the change event
if (callbackValue_1 != elInput.value) {
// Set the value
callbackValue_1 = elInput.value;
// Call the change event
_this.props.onChange(_this.getValue(), ev);
}
});
}
// See if this is a range
if (this.props.type == InputGroupTypes.Range) {
// Add a change event
elInput.addEventListener("input", function () {
// Get the button
var btn = _this.el.querySelector("#range-value");
if (btn) {
// Update the value
btn.innerHTML = elInput.value;
}
});
}
// See if this is not a multi-line
if (!isMultiLine) {
// Add a mouse up event to detect the clear event
elInput.addEventListener("mouseup", function (ev) {
// Get the current value
var el = ev.currentTarget;
var oldValue = el.value;
// Wait for the user to stop updating the value
setTimeout(function () {
// Get the current value
var currentValue = el.value;
// See if the values have changed
if (currentValue != oldValue) {
// See if we have already executed the change event
if (callbackValue_1 != currentValue) {
// Set the value
callbackValue_1 = currentValue;
// Call the events
_this.props.onChange ? _this.props.onChange(_this.getValue(), ev) : null;
_this.props.onClear && callbackValue_1 == "" ? _this.props.onClear() : null;
}
}
}, 1);
});
}
// See if this is a file
if (this.props.type == InputGroupTypes.File) {
// Set the change event
elInput.addEventListener("change", function (ev) {
// Get the source file
var srcFile = ev.target["files"][0];
if (srcFile) {
var reader = new FileReader();
// Set the file loaded event
reader.onloadend = function (ev) {
_this._fileValue = {
data: ev.target.result,
name: srcFile.name
};
};
// Set the error
reader.onerror = function (ev) {
// Log
console.log("Error reading the file", srcFile, ev.target.error);
};
// Read the file
reader.readAsArrayBuffer(srcFile);
}
});
}
}
};
// Configures the text box
_InputGroup.prototype.configureTextbox = function () {
var isTextArea = this.props.type == InputGroupTypes.TextArea;
var input = this.el.querySelector("input");
var textarea = this.el.querySelector("textarea");
// See if this is a text area
if (isTextArea) {
// Remove the input
input ? this.el.removeChild(input) : null;
// Ensure the textarea exists
if (textarea) {
// Update the textbox
this.props.id ? textarea.id = this.props.id : null;
this.props.placeholder ? textarea.placeholder = this.props.placeholder : null;
textarea.disabled = this.props.isDisabled ? true : false;
textarea.readOnly = this.props.isReadonly ? true : false;
textarea.required = this.props.required ? true : false;
textarea.rows = this.props.rows;
this.props.title ? textarea.title = this.props.title : null;
}
}
else {
// Remove the textarea
textarea ? this.el.removeChild(textarea) : null;
// Ensure the input exists
if (input) {
// Update the textbox
this.props.id ? input.id = this.props.id : null;
this.props.placeholder ? input.placeholder = this.props.placeholder : null;
input.disabled = this.props.isDisabled ? true : false;
input.readOnly = this.props.isReadonly ? true : false;
input.required = this.props.required ? true : false;
this.props.title ? input.title = this.props.title : null;
typeof (this.props.min) === "number" ? input.min = this.props.min + "" : null;
typeof (this.props.max) === "number" ? input.max = this.props.max + "" : null;
typeof (this.props.step) === "number" ? input.step = this.props.step + "" : null;
// Update the type
switch (this.props.type) {
// Color Picker
case InputGroupTypes.ColorPicker:
input.classList.add("form-control-color");
input.type = "color";
break;
// Email
case InputGroupTypes.Email:
input.classList.add("form-email");
input.type = "email";
break;
// File
case InputGroupTypes.File:
input.type = "file";
break;
// Password
case InputGroupTypes.Password:
input.classList.add("form-password");
input.type = "password";
break;
// Range
case InputGroupTypes.Range:
input.classList.add("form-range");
input.type = "range";
break;
// Search
case InputGroupTypes.Search:
input.classList.add("form-search");
input.type = "search";
input.setAttribute("aria-label", "Search");
break;
}
}
}
// Set the default value
this.setValue(this.props.value);
};
Object.defineProperty(_InputGroup.prototype, "appendedDropdown", {
/**
* Public Interface
*/
get: function () { return this._ddlAppended; },
enumerable: false,
configurable: true
});
_InputGroup.prototype.disable = function () { this.elTextbox.disabled = true; };
_InputGroup.prototype.enable = function () { this.elTextbox.disabled = false; };
_InputGroup.prototype.getFileInfo = function () { return this._fileValue; };
_InputGroup.prototype.getValue = function () {
var _a, _b;
var value = "";
// See if a prepended dropdown exist
if (this._ddlPrepended) {
// See if this is a multi item
if (this.props.prependedDropdown.multi) {
// Set the value
var items = this._ddlPrepended.getValue();
for (var i = 0; i < items.length; i++) {
// Add the value
value += items[i].value;
}
}
else {
// Set the value
value += (_a = this._ddlPrepended.getValue()) === null || _a === void 0 ? void 0 : _a.value;
}
}
// Append the input value
value += this.elTextbox.value;
// See if a appended dropdown exist
if (this._ddlAppended) {
// See if this is a multi item
if (this.props.appendedDropdown.multi) {
// Set the value
var items = this._ddlAppended.getValue();
for (var i = 0; i < items.length; i++) {
// Add the value
value += items[i].value;
}
}
else {
// Set the value
value += (_b = this._ddlAppended.getValue()) === null || _b === void 0 ? void 0 : _b.value;
}
}
// Return the value
return value;
};
Object.defineProperty(_InputGroup.prototype, "prependedDropdown", {
get: function () { return this._ddlPrepended; },
enumerable: false,
configurable: true
});
// Sets the textbox value
_InputGroup.prototype.setValue = function (value) {
if (value === void 0) { value = ""; }
// Set the textbox value
this.elTextbox.value = value;
// See if a change event exists
if (this._initFl && this.props.onChange) {
// Execute the change event
this.props.onChange(value);
}
};
Object.defineProperty(_InputGroup.prototype, "elTextbox", {
// Returns the textbox
get: function () { return this.el.querySelector("input") || this.el.querySelector("textarea"); },
enumerable: false,
configurable: true
});
return _InputGroup;
}(base_1.Base));
var InputGroup = function (props, template) { return new _InputGroup(props, template); };
exports.InputGroup = InputGroup;