gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
193 lines (192 loc) • 8.09 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Popover = exports.PopoverPlacements = exports.PopoverTypes = void 0;
var button_1 = require("../button");
var base_1 = require("../base");
var common_1 = require("../common");
var floating_ui_1 = require("../floating-ui");
Object.defineProperty(exports, "PopoverPlacements", { enumerable: true, get: function () { return floating_ui_1.FloatingUIPlacements; } });
/**
* Popover Types
*/
var PopoverTypes;
(function (PopoverTypes) {
PopoverTypes[PopoverTypes["Danger"] = 1] = "Danger";
PopoverTypes[PopoverTypes["Dark"] = 2] = "Dark";
PopoverTypes[PopoverTypes["Info"] = 3] = "Info";
PopoverTypes[PopoverTypes["Light"] = 4] = "Light";
PopoverTypes[PopoverTypes["LightBorder"] = 5] = "LightBorder";
PopoverTypes[PopoverTypes["Material"] = 6] = "Material";
PopoverTypes[PopoverTypes["Primary"] = 7] = "Primary";
PopoverTypes[PopoverTypes["Secondary"] = 8] = "Secondary";
PopoverTypes[PopoverTypes["Success"] = 9] = "Success";
PopoverTypes[PopoverTypes["Translucent"] = 10] = "Translucent";
PopoverTypes[PopoverTypes["Warning"] = 11] = "Warning";
})(PopoverTypes = exports.PopoverTypes || (exports.PopoverTypes = {}));
/**
* Popover
*/
var _Popover = /** @class */ (function (_super) {
__extends(_Popover, _super);
// Constructor
function _Popover(props, template) {
if (template === void 0) { template = ""; }
var _this = _super.call(this, template, props) || this;
_this._elContent = null;
_this._floatingUI = null;
// Configure the collapse
_this.configure();
// Configure the parent, if the target wasn't specified
_this.props.target ? null : _this.configureParent();
return _this;
}
// Configure the card group
_Popover.prototype.configure = function () {
var _a;
// See if we are targeting an element
var elPopover = null;
if (this.props.target) {
// Set the popover to the target element
elPopover = this.props.target;
// Ensure the attributes are set in the target element
elPopover.setAttribute("tabindex", "0");
// Update this element
this.el = elPopover;
}
else {
// Create the button
var btnProps = this.props.btnProps || {};
btnProps.isLink = this.props.isDismissible ? true : false;
btnProps.tabIndex = btnProps.tabIndex || 0;
this.el = (0, button_1.Button)(btnProps).el;
}
// Create the content element
this._elContent = document.createElement("div");
this._elContent.classList.add("popover");
(0, common_1.setClassNames)(this._elContent, this.props.className);
this._elContent.innerHTML = '<div class="popover-header"></div><div class="popover-body"></div>';
(0, common_1.appendContent)(this._elContent.querySelector(".popover-header"), this.props.title);
(0, common_1.setClassNames)(this._elContent.querySelector(".popover-header"), this.props.classNameHeader);
(0, common_1.appendContent)(this._elContent.querySelector(".popover-body"), (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.content);
(0, common_1.setClassNames)(this._elContent.querySelector(".popover-body"), this.props.classNameBody);
// Create the floating ui
this._floatingUI = (0, floating_ui_1.FloatingUI)({
elContent: this._elContent,
elTarget: this.el,
options: __assign({ arrow: true, flip: true, shift: { padding: 5 }, trigger: "mouse" }, this.props.options),
placement: this.props.placement || floating_ui_1.FloatingUIPlacements.Top,
show: this.props.show,
theme: this.props.type
});
};
/**
* Public Interface
*/
// Disables the popover
_Popover.prototype.disable = function () {
// Disable the target element
this.el.disabled = true;
};
// Enables the popover
_Popover.prototype.enable = function () {
// Enable the target element
this.el.disabled = false;
};
// Hides the popover
_Popover.prototype.hide = function () { this._floatingUI.hide(); };
Object.defineProperty(_Popover.prototype, "isVisible", {
// Determines if the popover is visible
get: function () { return this._floatingUI.isVisible; },
enumerable: false,
configurable: true
});
Object.defineProperty(_Popover.prototype, "floatingUI", {
// The floating ui instand
get: function () { return this._floatingUI; },
enumerable: false,
configurable: true
});
// Sets the popover body element
_Popover.prototype.setBody = function (content) {
var elBody = this._elContent.querySelector(".popover-body");
if (elBody) {
// Clear the content
while (elBody.firstChild) {
elBody.removeChild(elBody.firstChild);
}
// Update the content
(0, common_1.appendContent)(elBody, content);
}
};
// Sets the tippy content
_Popover.prototype.setContent = function (content) {
// See if this is a string
if (typeof (content) === "string") {
// Set the content
this._elContent.innerHTML = content;
}
else {
// Clear the content
while (this._elContent.firstChild) {
this._elContent.removeChild(this._elContent.firstChild);
}
// Append the content
(0, common_1.appendContent)(this._elContent, content);
}
};
// Sets the popover header element
_Popover.prototype.setHeader = function (content) {
var elHeader = this._elContent.querySelector(".popover-header");
if (elHeader) {
// Clear the content
while (elHeader.firstChild) {
elHeader.removeChild(elHeader.firstChild);
}
// Update the content
(0, common_1.appendContent)(elHeader, content);
}
};
// Shows the popover
_Popover.prototype.show = function () { this._floatingUI.show(); };
// Toggles the popover
_Popover.prototype.toggle = function () {
// Toggle the element
if (this.isVisible) {
// Hide the element
this.hide();
}
else {
// Show the element
this.show();
}
};
return _Popover;
}(base_1.Base));
var Popover = function (props, template) { return new _Popover(props, template); };
exports.Popover = Popover;