gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
320 lines (319 loc) • 12.3 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.Tooltip = exports.TooltipPlacements = exports.TooltipTypes = void 0;
var base_1 = require("../base");
var button_1 = require("../button");
var dropdown_1 = require("../dropdown");
var floating_ui_1 = require("../floating-ui");
Object.defineProperty(exports, "TooltipPlacements", { enumerable: true, get: function () { return floating_ui_1.FloatingUIPlacements; } });
/**
* Tooltip Types
*/
var TooltipTypes;
(function (TooltipTypes) {
TooltipTypes[TooltipTypes["Danger"] = 1] = "Danger";
TooltipTypes[TooltipTypes["Dark"] = 2] = "Dark";
TooltipTypes[TooltipTypes["Info"] = 3] = "Info";
TooltipTypes[TooltipTypes["Light"] = 4] = "Light";
TooltipTypes[TooltipTypes["LightBorder"] = 5] = "LightBorder";
TooltipTypes[TooltipTypes["Material"] = 6] = "Material";
TooltipTypes[TooltipTypes["Primary"] = 7] = "Primary";
TooltipTypes[TooltipTypes["Secondary"] = 8] = "Secondary";
TooltipTypes[TooltipTypes["Success"] = 9] = "Success";
TooltipTypes[TooltipTypes["Translucent"] = 10] = "Translucent";
TooltipTypes[TooltipTypes["Warning"] = 11] = "Warning";
})(TooltipTypes = exports.TooltipTypes || (exports.TooltipTypes = {}));
/**
* Tooltip
*/
var _Tooltip = /** @class */ (function (_super) {
__extends(_Tooltip, _super);
// Constructor
function _Tooltip(props, template) {
if (template === void 0) { template = ""; }
var _this = _super.call(this, template, props) || this;
_this._btn = null;
_this._ddl = null;
_this._elContent = null;
_this._floatingUI = null;
// Configure the collapse
_this.configure();
return _this;
}
// Configure the tooltip
_Tooltip.prototype.configure = function () {
// See if the target element was defined
if (this.props.target) {
// Update the element
this.el = this.props.target;
// Configure the options
this.configureOptions();
}
else {
// See if the dropdown property exists
if (this.props.ddlProps) {
// Set the default properties
var ddlProps = this.props.ddlProps;
ddlProps.type = ddlProps.type || dropdown_1.DropdownTypes.OutlinePrimary;
// Create the dropdown
this._ddl = (0, dropdown_1.Dropdown)(ddlProps);
// Update the element
this.el = this._ddl.el.querySelector("button");
}
else {
// Default the toggle property for the button
var btnProps = this.props.btnProps || {};
btnProps.type = btnProps.type || button_1.ButtonTypes.OutlinePrimary;
// See if the content is text
if (typeof (this.props.content) === "string") {
// Set the label
btnProps.description = this.props.content;
}
// Create the button
this._btn = (0, button_1.Button)(btnProps);
// Update the element
this.el = this._btn.el;
}
// Configure the options
this.configureOptions();
// Configure the parent
this.configureParent();
}
};
// Configure the options
_Tooltip.prototype.configureOptions = function () {
// Set the theme
var theme = null;
switch (this.props.type) {
// Danger
case TooltipTypes.Danger:
theme = "danger";
break;
// Dark
case TooltipTypes.Dark:
theme = "dark";
break;
// Info
case TooltipTypes.Info:
theme = "info";
break;
// Light
case TooltipTypes.Light:
theme = "light";
break;
case TooltipTypes.LightBorder:
theme = "light-border";
break;
// Material
case TooltipTypes.Material:
theme = "material";
break;
// Primary
case TooltipTypes.Primary:
theme = "primary";
break;
// Secondary
case TooltipTypes.Secondary:
theme = "secondary";
break;
// Success
case TooltipTypes.Success:
theme = "success";
break;
// Translucent
case TooltipTypes.Translucent:
theme = "translucent";
break;
// Warning
case TooltipTypes.Warning:
theme = "warning";
break;
// Default - Secondary
default:
// Set the default theme
theme = "secondary";
break;
}
// See if a button/dropdown exists
var objType = this.props.btnProps && this.props.btnProps.type > 0 ? this.props.btnProps.type : null;
objType = this.props.ddlProps && this.props.ddlProps.type > 0 ? this.props.ddlProps.type : objType;
if (objType > 0) {
// Match the theme to the button/dropdown type
switch (objType) {
// Danger
case button_1.ButtonTypes.Danger:
case button_1.ButtonTypes.OutlineDanger:
theme = "danger";
break;
// Dark
case button_1.ButtonTypes.Dark:
case button_1.ButtonTypes.OutlineDark:
theme = "dark";
break;
// Info
case button_1.ButtonTypes.Info:
case button_1.ButtonTypes.OutlineInfo:
theme = "info";
break;
// Light
case button_1.ButtonTypes.Light:
case button_1.ButtonTypes.OutlineLight:
theme = "light";
break;
// Link
case button_1.ButtonTypes.Link:
case button_1.ButtonTypes.OutlineLink:
theme = "light-border";
break;
// Primary
case button_1.ButtonTypes.Primary:
case button_1.ButtonTypes.OutlinePrimary:
theme = "primary";
break;
// Secondary
case button_1.ButtonTypes.Secondary:
case button_1.ButtonTypes.OutlineSecondary:
theme = "secondary";
break;
// Success
case button_1.ButtonTypes.Success:
case button_1.ButtonTypes.OutlineSuccess:
theme = "success";
break;
// Warning
case button_1.ButtonTypes.Warning:
case button_1.ButtonTypes.OutlineWarning:
theme = "warning";
break;
}
}
// Set the tooltip content element
if (typeof (this.props.content) === "string") {
this._elContent = document.createElement("div");
this._elContent.innerHTML = this.props.content;
}
else if (this.props.content) {
this._elContent = this.props.content;
}
else {
this._elContent = document.createElement("div");
}
// Set the padding
this._elContent.classList.add("p-2");
// Create the floating ui
this._floatingUI = (0, floating_ui_1.FloatingUI)({
className: "floating-tooltip",
elContent: this._elContent,
elTarget: this.el,
options: __assign({ arrow: true, flip: true, shift: { padding: 5 }, trigger: "mouse" }, this.props.options),
show: this.props.show,
placement: this.props.placement || floating_ui_1.FloatingUIPlacements.Top,
theme: this.props.type
});
};
Object.defineProperty(_Tooltip.prototype, "button", {
/**
* Public Interface
*/
// Reference to the button
get: function () { return this._btn; },
enumerable: false,
configurable: true
});
Object.defineProperty(_Tooltip.prototype, "ddl", {
// Reference to the dropdown
get: function () { return this._ddl; },
enumerable: false,
configurable: true
});
// Disbles the tooltip
_Tooltip.prototype.disable = function () {
// Disable the button or dropdown
this._btn ? this._btn.disable() : null;
this._ddl ? this._ddl.disable() : null;
};
// Enables the tooltip
_Tooltip.prototype.enable = function () {
// Enable the button or dropdown
this._btn ? this._btn.enable() : null;
this._ddl ? this._ddl.enable() : null;
};
// Hides the tooltip
_Tooltip.prototype.hide = function () {
// See if it's visible
if (this.isVisible) {
this._floatingUI.hide();
}
};
Object.defineProperty(_Tooltip.prototype, "isVisible", {
// Determines if the tooltip is visible
get: function () { return this._floatingUI.isVisible; },
enumerable: false,
configurable: true
});
Object.defineProperty(_Tooltip.prototype, "floatingUI", {
// The floating ui instance
get: function () { return this._floatingUI; },
enumerable: false,
configurable: true
});
// Sets the tippy content
_Tooltip.prototype.setContent = function (content) {
// Set the tippy content
this._floatingUI.setContent(content);
// See if the content is a string
if (typeof (content) === "string") {
// Update the content
this._btn ? this._btn.el.setAttribute("aria-description", content) : null;
this._ddl ? this._ddl.el.setAttribute("aria-description", content) : null;
}
};
// Shows the tooltip
_Tooltip.prototype.show = function () {
// See if it's hidden
if (!this.isVisible) {
this._floatingUI.show();
}
};
// Toggles the tooltip
_Tooltip.prototype.toggle = function () {
// Toggle the element
if (this.isVisible) {
// Hide the element
this.hide();
}
else {
// Show the element
this.show();
}
};
return _Tooltip;
}(base_1.Base));
var Tooltip = function (props, template) { return new _Tooltip(props, template); };
exports.Tooltip = Tooltip;