gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
78 lines (77 loc) • 3.04 kB
JavaScript
import { ClassNames } from "../classNames";
import { Base } from "../base";
import { HTML } from "./templates";
/**
* Progress Bar Types
*/
export var ProgressBarTypes;
(function (ProgressBarTypes) {
ProgressBarTypes[ProgressBarTypes["Danger"] = 1] = "Danger";
ProgressBarTypes[ProgressBarTypes["Dark"] = 2] = "Dark";
ProgressBarTypes[ProgressBarTypes["Info"] = 3] = "Info";
ProgressBarTypes[ProgressBarTypes["Light"] = 4] = "Light";
ProgressBarTypes[ProgressBarTypes["Primary"] = 5] = "Primary";
ProgressBarTypes[ProgressBarTypes["Secondary"] = 6] = "Secondary";
ProgressBarTypes[ProgressBarTypes["Success"] = 7] = "Success";
ProgressBarTypes[ProgressBarTypes["Transparent"] = 8] = "Transparent";
ProgressBarTypes[ProgressBarTypes["Warning"] = 9] = "Warning";
ProgressBarTypes[ProgressBarTypes["White"] = 10] = "White";
})(ProgressBarTypes || (ProgressBarTypes = {}));
/**
* Progress Bar Class Names
*/
export const ProgressBarClassNames = new ClassNames([
"bg-danger",
"bg-dark",
"bg-info",
"bg-light",
"bg-primary",
"bg-secondary",
"bg-success",
"bg-transparent",
"bg-warning",
"bg-white"
]);
/**
* Progress
*/
class _Progress extends Base {
// Constructor
constructor(props, template = HTML) {
super(template, props);
// Configure the collapse
this.configure();
// Configure the parent
this.configureParent();
}
// Configure the card group
configure() {
// Set the default values
let maxValue = typeof (this.props.max) === "number" ? this.props.max : 100;
let minValue = typeof (this.props.min) === "number" ? this.props.min : 0;
let size = typeof (this.props.size) === "number" ? this.props.size : 0;
// Update the progress bar
let progressBar = this.el.querySelector(".progress-bar");
if (progressBar) {
progressBar.style.width = size + "%";
progressBar.setAttribute("aria-valuenow", size.toString());
progressBar.setAttribute("aria-valuemin", minValue.toString());
progressBar.setAttribute("aria-valuemax", maxValue.toString());
this.props.isAnimated ? progressBar.classList.add("progress-bar-animated") : null;
this.props.isStriped ? progressBar.classList.add("progress-bar-striped") : null;
this.props.label ? progressBar.innerHTML = this.props.label : null;
// See if a type exists
let className = ProgressBarClassNames.getByType(this.props.type);
if (className) {
// Add the class name
progressBar.classList.add(className);
}
}
}
/**
* Public Interface
*/
// Return the progress bar element
get progressBar() { return this.el.querySelector(".progress-bar"); }
}
export const Progress = (props, template) => { return new _Progress(props, template); };