gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
149 lines (148 loc) • 6.14 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.ListGroupItem = void 0;
var base_1 = require("../base");
var badge_1 = require("../badge");
var common_1 = require("../common");
var _1 = require(".");
var templates_1 = require("./templates");
/**
* List Group Item
*/
var ListGroupItem = /** @class */ (function (_super) {
__extends(ListGroupItem, _super);
// Constructor
function ListGroupItem(props, isTab, itemTemplate) {
if (isTab === void 0) { isTab = false; }
if (itemTemplate === void 0) { itemTemplate = isTab ? templates_1.HTMLTabItem : templates_1.HTMLItem; }
var _this = _super.call(this, itemTemplate, props) || this;
_this._elTab = null;
// See if this is for a tab
if (isTab) {
// Create the tab element
var el = document.createElement("div");
el.innerHTML = templates_1.HTMLTab;
_this._elTab = el.firstChild;
}
// Configure the item
_this.configure();
// Configure the events
_this.configureEvents();
return _this;
}
// Configure the item
ListGroupItem.prototype.configure = function () {
// Set the class name
this.props.badge ? this.el.classList.add("d-flex") : null;
this.props.badge ? this.el.classList.add("justify-content-between") : null;
this.props.isActive ? this.el.classList.add("active") : null;
// See if this item is active
if (this.props.isActive) {
// Set the class name
this.el.classList.add("active");
// Set the attribute
this.el.setAttribute("aria-current", "true");
}
// See if this item is disabled
if (this.props.isDisabled) {
// Set the class name
this.el.classList.add("disabled");
// Set the attribute
this.el.setAttribute("aria-disabled", "true");
}
// Set the class name
var className = _1.ListGroupClassNames.getByType(this.props.type);
className ? this.el.classList.add(className) : null;
// See if this is a tab
if (this._elTab) {
var tabId = this.props.tabName.replace(/[^a-zA-Z]/g, "");
// Set the properties
this.el.id = tabId + "-tab";
this.el.setAttribute("href", "#" + tabId);
this.el.setAttribute("data-bs-toggle", "list");
this.el.setAttribute("data-tab-title", this.props.tabName);
this.el.setAttribute("aria-controls", tabId);
this.el.innerHTML = this.props.tabName;
// Update the tab
this._elTab.id = tabId;
this._elTab.setAttribute("aria-labelledby", tabId);
this.props.isActive ? this._elTab.classList.add("active") : null;
}
// Append the content
(0, common_1.appendContent)(this._elTab || this.el, this.props.content);
// See if there is a badge
if (this.props.badge) {
// Append a badge
this.el.appendChild((0, badge_1.Badge)(this.props.badge).el);
}
};
// Configures the events
ListGroupItem.prototype.configureEvents = function () {
var _this = this;
// Add a click event
this.el.addEventListener("click", function (ev) {
// Prevent the page from moving to the top
ev.preventDefault();
// Execute the event
_this.props.onClick ? _this.props.onClick(_this.el, _this.props) : null;
});
// See if there is a render tab event
if (this.props.onRenderTab) {
// Execute the render event
this.props.onRenderTab(this.el, this.props);
}
// See if there is a render event
if (this.props.onRender) {
// Execute the render event
this.props.onRender(this._elTab || this.el, this.props);
}
};
Object.defineProperty(ListGroupItem.prototype, "elTab", {
/**
* Public Interface
*/
// The HTML tab element
get: function () { return this._elTab; },
enumerable: false,
configurable: true
});
Object.defineProperty(ListGroupItem.prototype, "isVisible", {
// Returns true if the link is visible
get: function () { return this.el.classList.contains("active"); },
enumerable: false,
configurable: true
});
// Toggles a link
ListGroupItem.prototype.toggle = function (fadeTabs) {
// See if this item is currently active
if (this.isVisible) {
// Hide this link and tab
this.el.classList.remove("active");
this._elTab ? this._elTab.classList.remove("active") : null;
this._elTab ? this._elTab.classList.remove("show") : null;
}
else {
// Show this link and tab
this.el.classList.add("active");
this._elTab ? this._elTab.classList.add("active") : null;
this._elTab && fadeTabs ? this._elTab.classList.add("show") : null;
}
};
return ListGroupItem;
}(base_1.Base));
exports.ListGroupItem = ListGroupItem;