gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
70 lines (69 loc) • 2.27 kB
JavaScript
import { Base } from "../base";
import { ClassNames } from "../classNames";
import { appendContent } from "../common";
import { HTMLLink, HTMLSpan } from "./templates";
/**
* Badge Types
*/
export var BadgeTypes;
(function (BadgeTypes) {
BadgeTypes[BadgeTypes["Danger"] = 1] = "Danger";
BadgeTypes[BadgeTypes["Dark"] = 2] = "Dark";
BadgeTypes[BadgeTypes["Info"] = 3] = "Info";
BadgeTypes[BadgeTypes["Light"] = 4] = "Light";
BadgeTypes[BadgeTypes["Primary"] = 5] = "Primary";
BadgeTypes[BadgeTypes["Secondary"] = 6] = "Secondary";
BadgeTypes[BadgeTypes["Success"] = 7] = "Success";
BadgeTypes[BadgeTypes["Warning"] = 8] = "Warning";
})(BadgeTypes || (BadgeTypes = {}));
/**
* Badge Class Names
*/
export const BadgeClassNames = new ClassNames([
"bg-danger",
"bg-dark",
"bg-info",
"bg-light",
"bg-primary",
"bg-secondary",
"bg-success",
"bg-warning"
]);
/**
* Badge
*/
class _Badge extends Base {
// Constructor
constructor(props, template = props.href || props.onClick ? HTMLLink : HTMLSpan) {
super(template, props);
// Set the href property
props.href ? this.el.setAttribute("href", props.href) : null;
// Configure the badge
this.configure();
// Configure the events
this.configureEvents();
// Configure the parent element
this.configureParent();
}
// Configure the badge
configure() {
// See if this is a pill
if (this.props.isPill) {
// Add the class name
this.el.classList.add("rounded-pill");
}
// Set the default styling
this.el.classList.add(BadgeClassNames.getByType(this.props.type) || BadgeClassNames.getByType(BadgeTypes.Primary));
// Append the content
appendContent(this.el, this.props.content);
}
// Configures the events
configureEvents() {
// Set the click event
this.props.onClick ? this.el.addEventListener("click", ev => {
// Call the event
this.props.onClick(this.props, ev);
}) : null;
}
}
export const Badge = (props, template) => { return new _Badge(props, template); };