gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
253 lines (252 loc) • 10.9 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.Button = exports.ButtonClassNames = exports.ButtonTypes = void 0;
var base_1 = require("../base");
var badge_1 = require("../badge");
var classNames_1 = require("../classNames");
var spinner_1 = require("../spinner");
var templates_1 = require("./templates");
/**
* Button Types
*/
var ButtonTypes;
(function (ButtonTypes) {
ButtonTypes[ButtonTypes["Danger"] = 1] = "Danger";
ButtonTypes[ButtonTypes["Dark"] = 2] = "Dark";
ButtonTypes[ButtonTypes["Info"] = 3] = "Info";
ButtonTypes[ButtonTypes["Light"] = 4] = "Light";
ButtonTypes[ButtonTypes["Link"] = 5] = "Link";
ButtonTypes[ButtonTypes["Primary"] = 6] = "Primary";
ButtonTypes[ButtonTypes["Secondary"] = 7] = "Secondary";
ButtonTypes[ButtonTypes["Success"] = 8] = "Success";
ButtonTypes[ButtonTypes["Warning"] = 9] = "Warning";
ButtonTypes[ButtonTypes["OutlineDanger"] = 10] = "OutlineDanger";
ButtonTypes[ButtonTypes["OutlineDark"] = 11] = "OutlineDark";
ButtonTypes[ButtonTypes["OutlineInfo"] = 12] = "OutlineInfo";
ButtonTypes[ButtonTypes["OutlineLight"] = 13] = "OutlineLight";
ButtonTypes[ButtonTypes["OutlineLink"] = 14] = "OutlineLink";
ButtonTypes[ButtonTypes["OutlinePrimary"] = 15] = "OutlinePrimary";
ButtonTypes[ButtonTypes["OutlineSecondary"] = 16] = "OutlineSecondary";
ButtonTypes[ButtonTypes["OutlineSuccess"] = 17] = "OutlineSuccess";
ButtonTypes[ButtonTypes["OutlineWarning"] = 18] = "OutlineWarning";
})(ButtonTypes = exports.ButtonTypes || (exports.ButtonTypes = {}));
/**
* Button Classes
*/
exports.ButtonClassNames = new classNames_1.ClassNames([
"btn-danger",
"btn-dark",
"btn-info",
"btn-light",
"btn-link",
"btn-primary",
"btn-secondary",
"btn-success",
"btn-warning",
"btn-outline-danger",
"btn-outline-dark",
"btn-outline-info",
"btn-outline-light",
"btn-outline-link",
"btn-outline-primary",
"btn-outline-secondary",
"btn-outline-success",
"btn-outline-warning"
]);
/**
* Button
* @param props The button properties.
*/
var _Button = /** @class */ (function (_super) {
__extends(_Button, _super);
// Constructor
function _Button(props, template) {
if (template === void 0) { template = props.isBlock ? templates_1.HTMLBlock : (props.href || props.isLink ? templates_1.HTMLLink : templates_1.HTML); }
var _this = _super.call(this, template, props) || this;
// Configure the button
_this.configure();
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
return _this;
}
// Configure the button
_Button.prototype.configure = function () {
// Add the class names
this.props.isLarge ? this.el.classList.add("btn-lg") : null;
this.props.isSmall ? this.el.classList.add("btn-sm") : null;
// Set the default type
this.setType(this.props.type || ButtonTypes.Primary);
// Set the aria label/description
this.props.description ? this.el.setAttribute("aria-description", this.props.description) : null;
this.el.setAttribute("aria-label", this.props.label || this.props.text);
// Set the attributes
this.props.dismiss ? this.el.setAttribute("data-bs-dismiss", this.props.dismiss) : null;
this.props.href ? this.el.href = this.props.href : null;
this.props.id ? this.el.id = this.props.id : null;
this.props.isDisabled ? this.el.setAttribute("disabled", "disabled") : null;
this.props.tabIndex != null ? this.el.setAttribute("tabindex", this.props.tabIndex) : null;
this.props.target ? this.el.setAttribute("data-bs-target", this.props.target) : null;
this.props.title ? this.el.title = this.props.title : null;
this.props.toggle ? this.el.setAttribute("data-bs-toggle", this.props.toggle) : null;
this.props.trigger ? this.el.setAttribute("data-bs-trigger", this.props.trigger) : null;
typeof (this.props.isExpanded) === "boolean" ? this.el.setAttribute("aria-expanded", this.props.isExpanded ? "true" : "false") : null;
// See if controls are defined
if (this.props.controls) {
// See if this is a string
if (typeof (this.props.controls) === "string") {
// Set the controls
this.el.setAttribute("aria-controls", this.props.controls);
}
else {
// Set the controls
this.el.setAttribute("aria-controls", this.props.controls.join(' '));
}
}
// Set the text
this.setText(this.props.text);
// Set the icon if it exists
if (this.props.iconType) {
// Update the styling of the button
this.el.classList.add("btn-icon");
if (typeof (this.props.iconType) === "function") {
// Append the icon
this.el.prepend(this.props.iconType(this.props.iconSize, this.props.iconSize, this.props.iconClassName));
}
// Else, it's an element
else if (typeof (this.props.iconType) === "object") {
// Append the icon
this.el.prepend(this.props.iconType);
}
}
// See if this is a spinner
if (this.props.spinnerProps) {
// Set the element to render to
this.props.spinnerProps.el = this.el;
// Render the spinner
(0, spinner_1.Spinner)(this.props.spinnerProps);
}
// See if there is a badge
if (this.props.badge) {
// Default the type
this.props.badge.type = this.props.badge.type || badge_1.BadgeTypes.Light;
// Render the badge
this.el.appendChild((0, badge_1.Badge)(this.props.badge).el);
}
};
// Configure the events
_Button.prototype.configureEvents = function () {
var _this = this;
// See if there is a click event
if (this.props.onClick) {
// Add a click event
this.el.addEventListener("click", function (ev) {
// Call the click event
_this.props.onClick(_this.props, ev);
});
}
// See if we are toggling anything
if (this.props.toggleObj) {
// Add a click event
this.el.addEventListener("click", function (ev) {
// See if it's a function
if (typeof (_this.props.toggleObj.toggle) === "function") {
// Toggle the object
_this.props.toggleObj.toggle();
}
else {
var objToggle = window[_this.props.toggleObj];
if (typeof (objToggle === null || objToggle === void 0 ? void 0 : objToggle.toggle) === "function") {
// Toggle the object
objToggle.toggle();
}
}
});
}
};
/**
* Public Properties
*/
// Disables the button
_Button.prototype.disable = function () { this.el.disabled = true; };
// Enables the button
_Button.prototype.enable = function () { this.el.disabled = false; };
// Sets the icon
_Button.prototype.setIcon = function (iconType, iconSize, iconClassName) {
if (iconSize === void 0) { iconSize = 16; }
var elButton = this.el;
// Parse the child nodes
for (var i = 0; i < elButton.childNodes.length; i++) {
// See if this is the icon
if (elButton.childNodes[i].nodeName == "svg") {
// Insert the icon
elButton.insertBefore(iconType(iconSize, iconSize, iconClassName), elButton.childNodes[i]);
// Remove the existing icon
elButton.removeChild(this.el.childNodes[i]);
// Update the styling of the button
elButton.classList.add("btn-icon");
// Break from the loop
break;
}
}
};
// Sets the button text
_Button.prototype.setText = function (btnText) {
var elButton = this.el;
var existsFl = false;
// Parse the child nodes
for (var i = 0; i < elButton.childNodes.length; i++) {
// See if this is the text element
if (elButton.childNodes[i].nodeName == "#text") {
// Set the flag
existsFl = true;
// Set the value
elButton.childNodes[i].nodeValue = btnText || "";
// Break from the loop
break;
}
}
// See if it doesn't exist
if (!existsFl) {
// Add the text node
elButton.appendChild(document.createTextNode(btnText == null ? "" : btnText));
}
};
// Sets the button type
_Button.prototype.setType = function (buttonType) {
var _this = this;
// Parse the class names
exports.ButtonClassNames.parse(function (className) {
// Remove the class names
_this.el.classList.remove(className);
});
// Set the class name
var className = exports.ButtonClassNames.getByType(buttonType) || exports.ButtonClassNames.getByType(ButtonTypes.Primary);
this.el.classList.add(className);
};
// Toggles the button
_Button.prototype.toggle = function () {
var btn = this.el;
// Toggle the element
btn.classList.contains("active") ? btn.classList.remove("active") : btn.classList.add("active");
};
return _Button;
}(base_1.Base));
var Button = function (props, template) { return new _Button(props, template); };
exports.Button = Button;