gd-bs 6.6.90 → 6.6.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/bs.js +1 -1
- package/build/components/alert/index.js +2 -2
- package/build/components/button/index.js +13 -3
- package/build/components/custom-element.js +529 -0
- package/build/components/dropdown/index.js +30 -32
- package/build/components/floating-ui/index.js +375 -0
- package/build/components/index.js +4 -0
- package/build/components/modal/index.js +8 -2
- package/build/components/nav/index.js +7 -7
- package/build/components/nav/templates.js +1 -1
- package/build/components/popover/index.js +37 -201
- package/build/components/tooltip/index.js +40 -117
- package/build/custom-elements.js +46 -0
- package/build/index-icons.js +5 -5
- package/build/index.js +5 -5
- package/build/render.js +581 -0
- package/dev.html +229 -0
- package/dist/gd-bs-icons.js +1 -1
- package/dist/gd-bs-icons.js.LICENSE.txt +20 -216
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.d.ts +113 -150
- package/dist/gd-bs.js +1 -1
- package/dist/gd-bs.js.LICENSE.txt +20 -216
- package/dist/gd-bs.min.js +1 -1
- package/index.html +9 -3
- package/indexv2.html +572 -0
- package/package.json +5 -5
- package/pre-build.js +7 -0
- package/src/bs.scss +2 -2
- package/src/components/alert/index.ts +3 -3
- package/src/components/button/index.ts +12 -3
- package/src/components/custom-element.ts +532 -0
- package/src/components/dropdown/index.ts +30 -36
- package/src/components/dropdown/types.d.ts +4 -4
- package/src/components/floating-ui/index.ts +392 -0
- package/src/components/floating-ui/types.d.ts +73 -0
- package/src/components/form/controlTypes.d.ts +3 -3
- package/src/components/index.ts +6 -1
- package/src/components/modal/index.ts +10 -4
- package/src/components/modal/types.d.ts +3 -2
- package/src/components/nav/index.ts +7 -7
- package/src/components/nav/templates.ts +1 -1
- package/src/components/nav/types.d.ts +1 -0
- package/src/components/navbar/types.d.ts +2 -2
- package/src/components/popover/index.ts +39 -205
- package/src/components/popover/types.d.ts +12 -45
- package/src/components/tooltip/index.ts +33 -110
- package/src/components/tooltip/types.d.ts +9 -45
- package/src/components/tooltipGroup/types.d.ts +3 -2
- package/src/components/types.d.ts +0 -47
- package/src/custom-elements.js +46 -0
- package/src/index-icons.d.ts +1 -3
- package/src/index-icons.ts +4 -4
- package/src/index.d.ts +2 -2
- package/src/index.ts +4 -4
- package/src/render.ts +583 -0
- package/src/styles/_core.scss +0 -2
- package/src/styles/_custom.scss +3 -8
- package/src/styles/_floating-ui.scss +275 -0
- package/src/styles/_tippy.scss +0 -249
|
@@ -27,10 +27,11 @@ var __assign = (this && this.__assign) || function () {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.Popover = exports.PopoverPlacements = exports.PopoverTypes = void 0;
|
|
30
|
-
var tippy_js_1 = require("tippy.js");
|
|
31
30
|
var button_1 = require("../button");
|
|
32
31
|
var base_1 = require("../base");
|
|
33
32
|
var common_1 = require("../common");
|
|
33
|
+
var floating_ui_1 = require("../floating-ui");
|
|
34
|
+
Object.defineProperty(exports, "PopoverPlacements", { enumerable: true, get: function () { return floating_ui_1.FloatingUIPlacements; } });
|
|
34
35
|
/**
|
|
35
36
|
* Popover Types
|
|
36
37
|
*/
|
|
@@ -48,27 +49,6 @@ var PopoverTypes;
|
|
|
48
49
|
PopoverTypes[PopoverTypes["Translucent"] = 10] = "Translucent";
|
|
49
50
|
PopoverTypes[PopoverTypes["Warning"] = 11] = "Warning";
|
|
50
51
|
})(PopoverTypes = exports.PopoverTypes || (exports.PopoverTypes = {}));
|
|
51
|
-
/**
|
|
52
|
-
* Popover Placements
|
|
53
|
-
*/
|
|
54
|
-
var PopoverPlacements;
|
|
55
|
-
(function (PopoverPlacements) {
|
|
56
|
-
PopoverPlacements[PopoverPlacements["Auto"] = 1] = "Auto";
|
|
57
|
-
PopoverPlacements[PopoverPlacements["AutoStart"] = 2] = "AutoStart";
|
|
58
|
-
PopoverPlacements[PopoverPlacements["AutoEnd"] = 3] = "AutoEnd";
|
|
59
|
-
PopoverPlacements[PopoverPlacements["Bottom"] = 4] = "Bottom";
|
|
60
|
-
PopoverPlacements[PopoverPlacements["BottomStart"] = 5] = "BottomStart";
|
|
61
|
-
PopoverPlacements[PopoverPlacements["BottomEnd"] = 6] = "BottomEnd";
|
|
62
|
-
PopoverPlacements[PopoverPlacements["Left"] = 7] = "Left";
|
|
63
|
-
PopoverPlacements[PopoverPlacements["LeftStart"] = 8] = "LeftStart";
|
|
64
|
-
PopoverPlacements[PopoverPlacements["LeftEnd"] = 9] = "LeftEnd";
|
|
65
|
-
PopoverPlacements[PopoverPlacements["Right"] = 10] = "Right";
|
|
66
|
-
PopoverPlacements[PopoverPlacements["RightStart"] = 11] = "RightStart";
|
|
67
|
-
PopoverPlacements[PopoverPlacements["RightEnd"] = 12] = "RightEnd";
|
|
68
|
-
PopoverPlacements[PopoverPlacements["Top"] = 13] = "Top";
|
|
69
|
-
PopoverPlacements[PopoverPlacements["TopStart"] = 14] = "TopStart";
|
|
70
|
-
PopoverPlacements[PopoverPlacements["TopEnd"] = 15] = "TopEnd";
|
|
71
|
-
})(PopoverPlacements = exports.PopoverPlacements || (exports.PopoverPlacements = {}));
|
|
72
52
|
/**
|
|
73
53
|
* Popover
|
|
74
54
|
*/
|
|
@@ -79,7 +59,7 @@ var _Popover = /** @class */ (function (_super) {
|
|
|
79
59
|
if (template === void 0) { template = ""; }
|
|
80
60
|
var _this = _super.call(this, template, props) || this;
|
|
81
61
|
_this._elContent = null;
|
|
82
|
-
_this.
|
|
62
|
+
_this._floatingUI = null;
|
|
83
63
|
// Configure the collapse
|
|
84
64
|
_this.configure();
|
|
85
65
|
// Configure the parent, if the target wasn't specified
|
|
@@ -88,138 +68,7 @@ var _Popover = /** @class */ (function (_super) {
|
|
|
88
68
|
}
|
|
89
69
|
// Configure the card group
|
|
90
70
|
_Popover.prototype.configure = function () {
|
|
91
|
-
var
|
|
92
|
-
// Set the placements
|
|
93
|
-
var placement = null;
|
|
94
|
-
switch (this.props.placement) {
|
|
95
|
-
// Auto
|
|
96
|
-
case PopoverPlacements.Auto:
|
|
97
|
-
placement = "auto";
|
|
98
|
-
break;
|
|
99
|
-
case PopoverPlacements.AutoEnd:
|
|
100
|
-
placement = "auto-end";
|
|
101
|
-
break;
|
|
102
|
-
case PopoverPlacements.AutoStart:
|
|
103
|
-
placement = "auto-start";
|
|
104
|
-
break;
|
|
105
|
-
// Bottom
|
|
106
|
-
case PopoverPlacements.Bottom:
|
|
107
|
-
placement = "bottom";
|
|
108
|
-
break;
|
|
109
|
-
case PopoverPlacements.BottomEnd:
|
|
110
|
-
placement = "bottom-end";
|
|
111
|
-
break;
|
|
112
|
-
case PopoverPlacements.BottomStart:
|
|
113
|
-
placement = "bottom-start";
|
|
114
|
-
break;
|
|
115
|
-
// Left
|
|
116
|
-
case PopoverPlacements.Left:
|
|
117
|
-
placement = "left";
|
|
118
|
-
break;
|
|
119
|
-
case PopoverPlacements.LeftEnd:
|
|
120
|
-
placement = "left-end";
|
|
121
|
-
break;
|
|
122
|
-
case PopoverPlacements.LeftStart:
|
|
123
|
-
placement = "left-start";
|
|
124
|
-
break;
|
|
125
|
-
// Right
|
|
126
|
-
case PopoverPlacements.Right:
|
|
127
|
-
placement = "right";
|
|
128
|
-
break;
|
|
129
|
-
case PopoverPlacements.RightEnd:
|
|
130
|
-
placement = "right-end";
|
|
131
|
-
break;
|
|
132
|
-
case PopoverPlacements.RightStart:
|
|
133
|
-
placement = "right-start";
|
|
134
|
-
break;
|
|
135
|
-
// Top
|
|
136
|
-
case PopoverPlacements.Top:
|
|
137
|
-
placement = "top";
|
|
138
|
-
break;
|
|
139
|
-
case PopoverPlacements.TopEnd:
|
|
140
|
-
placement = "top-end";
|
|
141
|
-
break;
|
|
142
|
-
case PopoverPlacements.TopStart:
|
|
143
|
-
placement = "top-start";
|
|
144
|
-
break;
|
|
145
|
-
// Default - Auto
|
|
146
|
-
default:
|
|
147
|
-
placement = "top";
|
|
148
|
-
break;
|
|
149
|
-
}
|
|
150
|
-
// Set the theme
|
|
151
|
-
var theme = null;
|
|
152
|
-
switch (this.props.type) {
|
|
153
|
-
// Dark
|
|
154
|
-
case PopoverTypes.Dark:
|
|
155
|
-
theme = "dark";
|
|
156
|
-
break;
|
|
157
|
-
// Danger
|
|
158
|
-
case PopoverTypes.Danger:
|
|
159
|
-
theme = "danger";
|
|
160
|
-
break;
|
|
161
|
-
// Info
|
|
162
|
-
case PopoverTypes.Info:
|
|
163
|
-
theme = "info";
|
|
164
|
-
break;
|
|
165
|
-
// Light
|
|
166
|
-
case PopoverTypes.Light:
|
|
167
|
-
theme = "light";
|
|
168
|
-
break;
|
|
169
|
-
case PopoverTypes.LightBorder:
|
|
170
|
-
theme = "light-border";
|
|
171
|
-
break;
|
|
172
|
-
// Material
|
|
173
|
-
case PopoverTypes.Material:
|
|
174
|
-
theme = "material";
|
|
175
|
-
break;
|
|
176
|
-
// Primary
|
|
177
|
-
case PopoverTypes.Primary:
|
|
178
|
-
theme = "primary";
|
|
179
|
-
break;
|
|
180
|
-
// Secondary
|
|
181
|
-
case PopoverTypes.Secondary:
|
|
182
|
-
theme = "secondary";
|
|
183
|
-
break;
|
|
184
|
-
// Success
|
|
185
|
-
case PopoverTypes.Success:
|
|
186
|
-
theme = "success";
|
|
187
|
-
break;
|
|
188
|
-
// Translucent
|
|
189
|
-
case PopoverTypes.Translucent:
|
|
190
|
-
theme = "translucent";
|
|
191
|
-
break;
|
|
192
|
-
// Warning
|
|
193
|
-
case PopoverTypes.Warning:
|
|
194
|
-
theme = "warning";
|
|
195
|
-
break;
|
|
196
|
-
// Default - Light Border
|
|
197
|
-
default:
|
|
198
|
-
theme = "light-border";
|
|
199
|
-
break;
|
|
200
|
-
}
|
|
201
|
-
// Set the options
|
|
202
|
-
var options = __assign({
|
|
203
|
-
allowHTML: true,
|
|
204
|
-
appendTo: document.body,
|
|
205
|
-
animation: "scale",
|
|
206
|
-
arrow: true,
|
|
207
|
-
delay: 100,
|
|
208
|
-
inertia: true,
|
|
209
|
-
interactive: true,
|
|
210
|
-
placement: placement,
|
|
211
|
-
plugins: [tippy_js_1.animateFill, tippy_js_1.followCursor, tippy_js_1.inlinePositioning, tippy_js_1.sticky],
|
|
212
|
-
theme: theme,
|
|
213
|
-
popperOptions: {
|
|
214
|
-
modifiers: [{
|
|
215
|
-
name: "preventOverflow",
|
|
216
|
-
options: {
|
|
217
|
-
altAxis: true,
|
|
218
|
-
tether: false
|
|
219
|
-
}
|
|
220
|
-
}]
|
|
221
|
-
}
|
|
222
|
-
}, this.props.options);
|
|
71
|
+
var _a;
|
|
223
72
|
// See if we are targeting an element
|
|
224
73
|
var elPopover = null;
|
|
225
74
|
if (this.props.target) {
|
|
@@ -237,38 +86,24 @@ var _Popover = /** @class */ (function (_super) {
|
|
|
237
86
|
btnProps.tabIndex = btnProps.tabIndex || 0;
|
|
238
87
|
this.el = (0, button_1.Button)(btnProps).el;
|
|
239
88
|
}
|
|
240
|
-
// Create the
|
|
89
|
+
// Create the content element
|
|
241
90
|
this._elContent = document.createElement("div");
|
|
242
91
|
this._elContent.classList.add("popover");
|
|
243
|
-
this._elContent.
|
|
92
|
+
(0, common_1.setClassNames)(this._elContent, this.props.className);
|
|
244
93
|
this._elContent.innerHTML = '<div class="popover-header"></div><div class="popover-body"></div>';
|
|
245
94
|
(0, common_1.appendContent)(this._elContent.querySelector(".popover-header"), this.props.title);
|
|
246
95
|
(0, common_1.setClassNames)(this._elContent.querySelector(".popover-header"), this.props.classNameHeader);
|
|
247
|
-
(0, common_1.appendContent)(this._elContent.querySelector(".popover-body"), options.content);
|
|
96
|
+
(0, common_1.appendContent)(this._elContent.querySelector(".popover-body"), (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.content);
|
|
248
97
|
(0, common_1.setClassNames)(this._elContent.querySelector(".popover-body"), this.props.classNameBody);
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
elContent.style.padding = "0";
|
|
259
|
-
// Get the custom class name(s)
|
|
260
|
-
var custom = (_this.props.className || "").trim().split(" ");
|
|
261
|
-
for (var i = 0; i < custom.length; i++) {
|
|
262
|
-
var className = custom[i];
|
|
263
|
-
// Add the custom class name
|
|
264
|
-
className ? elContent.classList.add(custom[i]) : null;
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
// Call the custom event if it's defined
|
|
268
|
-
_this.props.options && _this.props.options.onCreate ? _this.props.options.onCreate(tippyObj) : null;
|
|
269
|
-
};
|
|
270
|
-
// Create the tippy
|
|
271
|
-
this._tippy = (0, tippy_js_1.default)(this.el, options);
|
|
98
|
+
// Create the floating ui
|
|
99
|
+
this._floatingUI = (0, floating_ui_1.FloatingUI)({
|
|
100
|
+
elContent: this._elContent,
|
|
101
|
+
elTarget: this.el,
|
|
102
|
+
options: __assign({ arrow: true, flip: true, shift: { padding: 5 } }, this.props.options),
|
|
103
|
+
placement: this.props.placement,
|
|
104
|
+
show: this.props.show,
|
|
105
|
+
theme: this.props.type
|
|
106
|
+
});
|
|
272
107
|
};
|
|
273
108
|
/**
|
|
274
109
|
* Public Interface
|
|
@@ -284,27 +119,22 @@ var _Popover = /** @class */ (function (_super) {
|
|
|
284
119
|
this.el.disabled = false;
|
|
285
120
|
};
|
|
286
121
|
// Hides the popover
|
|
287
|
-
_Popover.prototype.hide = function () {
|
|
288
|
-
// See if it's visible
|
|
289
|
-
if (this.isVisible) {
|
|
290
|
-
this._tippy.hide();
|
|
291
|
-
}
|
|
292
|
-
};
|
|
122
|
+
_Popover.prototype.hide = function () { this._floatingUI.hide(); };
|
|
293
123
|
Object.defineProperty(_Popover.prototype, "isVisible", {
|
|
294
124
|
// Determines if the popover is visible
|
|
295
|
-
get: function () { return this.
|
|
125
|
+
get: function () { return this._floatingUI.isVisible; },
|
|
296
126
|
enumerable: false,
|
|
297
127
|
configurable: true
|
|
298
128
|
});
|
|
299
|
-
Object.defineProperty(_Popover.prototype, "
|
|
300
|
-
// The
|
|
301
|
-
get: function () { return this.
|
|
129
|
+
Object.defineProperty(_Popover.prototype, "floatingUI", {
|
|
130
|
+
// The floating ui instand
|
|
131
|
+
get: function () { return this._floatingUI; },
|
|
302
132
|
enumerable: false,
|
|
303
133
|
configurable: true
|
|
304
134
|
});
|
|
305
135
|
// Sets the popover body element
|
|
306
136
|
_Popover.prototype.setBody = function (content) {
|
|
307
|
-
var elBody = this.
|
|
137
|
+
var elBody = this._elContent.querySelector(".popover-body");
|
|
308
138
|
if (elBody) {
|
|
309
139
|
// Clear the content
|
|
310
140
|
while (elBody.firstChild) {
|
|
@@ -316,12 +146,23 @@ var _Popover = /** @class */ (function (_super) {
|
|
|
316
146
|
};
|
|
317
147
|
// Sets the tippy content
|
|
318
148
|
_Popover.prototype.setContent = function (content) {
|
|
319
|
-
//
|
|
320
|
-
|
|
149
|
+
// See if this is a string
|
|
150
|
+
if (typeof (content) === "string") {
|
|
151
|
+
// Set the content
|
|
152
|
+
this._elContent.innerHTML = content;
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
// Clear the content
|
|
156
|
+
while (this._elContent.firstChild) {
|
|
157
|
+
this._elContent.removeChild(this._elContent.firstChild);
|
|
158
|
+
}
|
|
159
|
+
// Append the content
|
|
160
|
+
(0, common_1.appendContent)(this._elContent, content);
|
|
161
|
+
}
|
|
321
162
|
};
|
|
322
163
|
// Sets the popover header element
|
|
323
164
|
_Popover.prototype.setHeader = function (content) {
|
|
324
|
-
var elHeader = this.
|
|
165
|
+
var elHeader = this._elContent.querySelector(".popover-header");
|
|
325
166
|
if (elHeader) {
|
|
326
167
|
// Clear the content
|
|
327
168
|
while (elHeader.firstChild) {
|
|
@@ -332,12 +173,7 @@ var _Popover = /** @class */ (function (_super) {
|
|
|
332
173
|
}
|
|
333
174
|
};
|
|
334
175
|
// Shows the popover
|
|
335
|
-
_Popover.prototype.show = function () {
|
|
336
|
-
// See if it's hidden
|
|
337
|
-
if (!this.isVisible) {
|
|
338
|
-
this._tippy.show();
|
|
339
|
-
}
|
|
340
|
-
};
|
|
176
|
+
_Popover.prototype.show = function () { this._floatingUI.show(); };
|
|
341
177
|
// Toggles the popover
|
|
342
178
|
_Popover.prototype.toggle = function () {
|
|
343
179
|
// Toggle the element
|
|
@@ -27,11 +27,11 @@ var __assign = (this && this.__assign) || function () {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.Tooltip = exports.TooltipPlacements = exports.TooltipTypes = void 0;
|
|
30
|
-
var tippy_js_1 = require("tippy.js");
|
|
31
30
|
var base_1 = require("../base");
|
|
32
31
|
var button_1 = require("../button");
|
|
33
32
|
var dropdown_1 = require("../dropdown");
|
|
34
|
-
var
|
|
33
|
+
var floating_ui_1 = require("../floating-ui");
|
|
34
|
+
Object.defineProperty(exports, "TooltipPlacements", { enumerable: true, get: function () { return floating_ui_1.FloatingUIPlacements; } });
|
|
35
35
|
/**
|
|
36
36
|
* Tooltip Types
|
|
37
37
|
*/
|
|
@@ -49,27 +49,6 @@ var TooltipTypes;
|
|
|
49
49
|
TooltipTypes[TooltipTypes["Translucent"] = 10] = "Translucent";
|
|
50
50
|
TooltipTypes[TooltipTypes["Warning"] = 11] = "Warning";
|
|
51
51
|
})(TooltipTypes = exports.TooltipTypes || (exports.TooltipTypes = {}));
|
|
52
|
-
/**
|
|
53
|
-
* Tooltip Placements
|
|
54
|
-
*/
|
|
55
|
-
var TooltipPlacements;
|
|
56
|
-
(function (TooltipPlacements) {
|
|
57
|
-
TooltipPlacements[TooltipPlacements["Auto"] = 1] = "Auto";
|
|
58
|
-
TooltipPlacements[TooltipPlacements["AutoStart"] = 2] = "AutoStart";
|
|
59
|
-
TooltipPlacements[TooltipPlacements["AutoEnd"] = 3] = "AutoEnd";
|
|
60
|
-
TooltipPlacements[TooltipPlacements["Bottom"] = 4] = "Bottom";
|
|
61
|
-
TooltipPlacements[TooltipPlacements["BottomStart"] = 5] = "BottomStart";
|
|
62
|
-
TooltipPlacements[TooltipPlacements["BottomEnd"] = 6] = "BottomEnd";
|
|
63
|
-
TooltipPlacements[TooltipPlacements["Left"] = 7] = "Left";
|
|
64
|
-
TooltipPlacements[TooltipPlacements["LeftStart"] = 8] = "LeftStart";
|
|
65
|
-
TooltipPlacements[TooltipPlacements["LeftEnd"] = 9] = "LeftEnd";
|
|
66
|
-
TooltipPlacements[TooltipPlacements["Right"] = 10] = "Right";
|
|
67
|
-
TooltipPlacements[TooltipPlacements["RightStart"] = 11] = "RightStart";
|
|
68
|
-
TooltipPlacements[TooltipPlacements["RightEnd"] = 12] = "RightEnd";
|
|
69
|
-
TooltipPlacements[TooltipPlacements["Top"] = 13] = "Top";
|
|
70
|
-
TooltipPlacements[TooltipPlacements["TopStart"] = 14] = "TopStart";
|
|
71
|
-
TooltipPlacements[TooltipPlacements["TopEnd"] = 15] = "TopEnd";
|
|
72
|
-
})(TooltipPlacements = exports.TooltipPlacements || (exports.TooltipPlacements = {}));
|
|
73
52
|
/**
|
|
74
53
|
* Tooltip
|
|
75
54
|
*/
|
|
@@ -82,7 +61,7 @@ var _Tooltip = /** @class */ (function (_super) {
|
|
|
82
61
|
_this._btn = null;
|
|
83
62
|
_this._ddl = null;
|
|
84
63
|
_this._elContent = null;
|
|
85
|
-
_this.
|
|
64
|
+
_this._floatingUI = null;
|
|
86
65
|
// Configure the collapse
|
|
87
66
|
_this.configure();
|
|
88
67
|
// Configure the parent
|
|
@@ -123,65 +102,6 @@ var _Tooltip = /** @class */ (function (_super) {
|
|
|
123
102
|
};
|
|
124
103
|
// Configure the options
|
|
125
104
|
_Tooltip.prototype.configureOptions = function () {
|
|
126
|
-
var _this = this;
|
|
127
|
-
// Set the placements
|
|
128
|
-
var placement = null;
|
|
129
|
-
switch (this.props.placement) {
|
|
130
|
-
// Auto
|
|
131
|
-
case TooltipPlacements.Auto:
|
|
132
|
-
placement = "auto";
|
|
133
|
-
break;
|
|
134
|
-
case TooltipPlacements.AutoEnd:
|
|
135
|
-
placement = "auto-end";
|
|
136
|
-
break;
|
|
137
|
-
case TooltipPlacements.AutoStart:
|
|
138
|
-
placement = "auto-start";
|
|
139
|
-
break;
|
|
140
|
-
// Bottom
|
|
141
|
-
case TooltipPlacements.Bottom:
|
|
142
|
-
placement = "bottom";
|
|
143
|
-
break;
|
|
144
|
-
case TooltipPlacements.BottomEnd:
|
|
145
|
-
placement = "bottom-end";
|
|
146
|
-
break;
|
|
147
|
-
case TooltipPlacements.BottomStart:
|
|
148
|
-
placement = "bottom-start";
|
|
149
|
-
break;
|
|
150
|
-
// Left
|
|
151
|
-
case TooltipPlacements.Left:
|
|
152
|
-
placement = "left";
|
|
153
|
-
break;
|
|
154
|
-
case TooltipPlacements.LeftEnd:
|
|
155
|
-
placement = "left-end";
|
|
156
|
-
break;
|
|
157
|
-
case TooltipPlacements.LeftStart:
|
|
158
|
-
placement = "left-start";
|
|
159
|
-
break;
|
|
160
|
-
// Right
|
|
161
|
-
case TooltipPlacements.Right:
|
|
162
|
-
placement = "right";
|
|
163
|
-
break;
|
|
164
|
-
case TooltipPlacements.RightEnd:
|
|
165
|
-
placement = "right-end";
|
|
166
|
-
break;
|
|
167
|
-
case TooltipPlacements.RightStart:
|
|
168
|
-
placement = "right-start";
|
|
169
|
-
break;
|
|
170
|
-
// Top
|
|
171
|
-
case TooltipPlacements.Top:
|
|
172
|
-
placement = "top";
|
|
173
|
-
break;
|
|
174
|
-
case TooltipPlacements.TopEnd:
|
|
175
|
-
placement = "top-end";
|
|
176
|
-
break;
|
|
177
|
-
case TooltipPlacements.TopStart:
|
|
178
|
-
placement = "top-start";
|
|
179
|
-
break;
|
|
180
|
-
// Default - Auto
|
|
181
|
-
default:
|
|
182
|
-
placement = "top";
|
|
183
|
-
break;
|
|
184
|
-
}
|
|
185
105
|
// Set the theme
|
|
186
106
|
var theme = null;
|
|
187
107
|
switch (this.props.type) {
|
|
@@ -287,44 +207,47 @@ var _Tooltip = /** @class */ (function (_super) {
|
|
|
287
207
|
}
|
|
288
208
|
break;
|
|
289
209
|
}
|
|
290
|
-
// Set the
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
interactive: false,
|
|
299
|
-
placement: placement,
|
|
300
|
-
plugins: [tippy_js_1.animateFill, tippy_js_1.followCursor, tippy_js_1.inlinePositioning, tippy_js_1.sticky],
|
|
301
|
-
theme: theme
|
|
302
|
-
}, this.props.options);
|
|
303
|
-
// Create the tooltip content element
|
|
304
|
-
this._elContent = document.createElement("div");
|
|
305
|
-
this._elContent.classList.add("tooltip-content");
|
|
306
|
-
(0, common_1.appendContent)(this._elContent, options.content);
|
|
307
|
-
options.content = this._elContent;
|
|
210
|
+
// Set the tooltip content element
|
|
211
|
+
if (typeof (this.props.content) === "string") {
|
|
212
|
+
this._elContent = document.createElement("div");
|
|
213
|
+
this._elContent.innerHTML = this.props.content;
|
|
214
|
+
}
|
|
215
|
+
else {
|
|
216
|
+
this._elContent = this.props.content;
|
|
217
|
+
}
|
|
308
218
|
// Set the on create event
|
|
309
|
-
|
|
219
|
+
/*
|
|
220
|
+
options["onCreate"] = (tippyObj) => {
|
|
310
221
|
// Get the content element
|
|
311
|
-
|
|
222
|
+
let elContent = tippyObj.popper.querySelector(".tippy-content") as HTMLElement;
|
|
312
223
|
if (elContent) {
|
|
313
224
|
// Set the class
|
|
314
225
|
elContent.classList.add("bs");
|
|
226
|
+
|
|
315
227
|
// Get the custom class name(s)
|
|
316
|
-
|
|
317
|
-
for (
|
|
318
|
-
|
|
228
|
+
let custom = (this.props.className || "").trim().split(" ");
|
|
229
|
+
for (let i = 0; i < custom.length; i++) {
|
|
230
|
+
let className = custom[i];
|
|
231
|
+
|
|
319
232
|
// Add the custom class name
|
|
320
233
|
className ? elContent.classList.add(custom[i]) : null;
|
|
321
234
|
}
|
|
322
235
|
}
|
|
236
|
+
|
|
323
237
|
// Call the custom event if it's defined
|
|
324
|
-
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
|
|
238
|
+
this.props.options && this.props.options.onCreate ? this.props.options.onCreate(tippyObj) : null;
|
|
239
|
+
}
|
|
240
|
+
*/
|
|
241
|
+
// Create the floating ui
|
|
242
|
+
this._floatingUI = (0, floating_ui_1.FloatingUI)({
|
|
243
|
+
className: "floating-tooltip",
|
|
244
|
+
elContent: this._elContent,
|
|
245
|
+
elTarget: this.el,
|
|
246
|
+
options: __assign({ arrow: true, flip: true, shift: { padding: 5 } }, this.props.options),
|
|
247
|
+
show: this.props.show,
|
|
248
|
+
placement: this.props.placement,
|
|
249
|
+
theme: this.props.type
|
|
250
|
+
});
|
|
328
251
|
};
|
|
329
252
|
Object.defineProperty(_Tooltip.prototype, "button", {
|
|
330
253
|
/**
|
|
@@ -357,25 +280,25 @@ var _Tooltip = /** @class */ (function (_super) {
|
|
|
357
280
|
_Tooltip.prototype.hide = function () {
|
|
358
281
|
// See if it's visible
|
|
359
282
|
if (this.isVisible) {
|
|
360
|
-
this.
|
|
283
|
+
this._floatingUI.hide();
|
|
361
284
|
}
|
|
362
285
|
};
|
|
363
286
|
Object.defineProperty(_Tooltip.prototype, "isVisible", {
|
|
364
287
|
// Determines if the tooltip is visible
|
|
365
|
-
get: function () { return this.
|
|
288
|
+
get: function () { return this._floatingUI.isVisible; },
|
|
366
289
|
enumerable: false,
|
|
367
290
|
configurable: true
|
|
368
291
|
});
|
|
369
|
-
Object.defineProperty(_Tooltip.prototype, "
|
|
370
|
-
// The
|
|
371
|
-
get: function () { return this.
|
|
292
|
+
Object.defineProperty(_Tooltip.prototype, "floatingUI", {
|
|
293
|
+
// The floating ui instance
|
|
294
|
+
get: function () { return this._floatingUI; },
|
|
372
295
|
enumerable: false,
|
|
373
296
|
configurable: true
|
|
374
297
|
});
|
|
375
298
|
// Sets the tippy content
|
|
376
299
|
_Tooltip.prototype.setContent = function (content) {
|
|
377
300
|
// Set the tippy content
|
|
378
|
-
this.
|
|
301
|
+
this._floatingUI.setContent(content);
|
|
379
302
|
// See if the content is a string
|
|
380
303
|
if (typeof (content) === "string") {
|
|
381
304
|
// Update the content
|
|
@@ -387,7 +310,7 @@ var _Tooltip = /** @class */ (function (_super) {
|
|
|
387
310
|
_Tooltip.prototype.show = function () {
|
|
388
311
|
// See if it's hidden
|
|
389
312
|
if (!this.isVisible) {
|
|
390
|
-
this.
|
|
313
|
+
this._floatingUI.show();
|
|
391
314
|
}
|
|
392
315
|
};
|
|
393
316
|
// Toggles the tooltip
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
class BSElement extends HTMLElement {
|
|
2
|
+
constructor() { super(); }
|
|
3
|
+
connectedCallback() {
|
|
4
|
+
if (this.nodeName == "BS-PAGING") {
|
|
5
|
+
setTimeout(() => { new GD.Components.CustomElement(this); });
|
|
6
|
+
} else {
|
|
7
|
+
// Wait for the children elements to render
|
|
8
|
+
const observer = new MutationObserver(() => {
|
|
9
|
+
setTimeout(() => { new GD.Components.CustomElement(this); });
|
|
10
|
+
observer.disconnect();
|
|
11
|
+
});
|
|
12
|
+
observer.observe(this, { childList: true, subtree: true });
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
customElements.define("bs-accordion", class Accordion extends BSElement { });
|
|
17
|
+
customElements.define("bs-alert", class Alert extends BSElement { });
|
|
18
|
+
customElements.define("bs-badge", class Badge extends BSElement { });
|
|
19
|
+
customElements.define("bs-breadcrumb", class Breadcrumb extends BSElement { });
|
|
20
|
+
customElements.define("bs-button", class Button extends BSElement { });
|
|
21
|
+
customElements.define("bs-button-group", class ButtonGroup extends BSElement { });
|
|
22
|
+
customElements.define("bs-collapse", class Collapse extends BSElement { });
|
|
23
|
+
customElements.define("bs-card", class Card extends BSElement { });
|
|
24
|
+
customElements.define("bs-card-group", class CardGroup extends BSElement { });
|
|
25
|
+
customElements.define("bs-carousel", class Carousel extends BSElement { });
|
|
26
|
+
customElements.define("bs-checkbox-group", class CheckboxGroup extends BSElement { });
|
|
27
|
+
customElements.define("bs-dropdown", class Dropdown extends BSElement { });
|
|
28
|
+
customElements.define("bs-form", class Form extends BSElement { });
|
|
29
|
+
customElements.define("bs-form-control", class FormControl extends BSElement { });
|
|
30
|
+
customElements.define("bs-icon-link", class IconLink extends BSElement { });
|
|
31
|
+
customElements.define("bs-input-group", class InputGroup extends BSElement { });
|
|
32
|
+
customElements.define("bs-list-box", class ListBox extends BSElement { });
|
|
33
|
+
customElements.define("bs-list-group", class ListGroup extends BSElement { });
|
|
34
|
+
customElements.define("bs-modal", class Modal extends BSElement { });
|
|
35
|
+
customElements.define("bs-nav", class Nav extends BSElement { });
|
|
36
|
+
customElements.define("bs-navbar", class Navbar extends BSElement { });
|
|
37
|
+
customElements.define("bs-offcanvas", class Offcanvas extends BSElement { });
|
|
38
|
+
customElements.define("bs-paging", class Paging extends BSElement { });
|
|
39
|
+
customElements.define("bs-popover", class Popover extends BSElement { });
|
|
40
|
+
customElements.define("bs-progress", class Progress extends BSElement { });
|
|
41
|
+
customElements.define("bs-progress-group", class ProgressGroup extends BSElement { });
|
|
42
|
+
customElements.define("bs-spinner", class Spinner extends BSElement { });
|
|
43
|
+
customElements.define("bs-table", class Table extends BSElement { });
|
|
44
|
+
customElements.define("bs-toast", class Toast extends BSElement { });
|
|
45
|
+
customElements.define("bs-toolbar", class Toolbar extends BSElement { });
|
|
46
|
+
customElements.define("bs-tooltip", class Tooltip extends BSElement { });
|
package/build/index-icons.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.IconTypes = exports.Icons = exports.
|
|
3
|
+
exports.IconTypes = exports.Icons = exports.render = exports.Components = void 0;
|
|
4
4
|
// Bootstrap styles
|
|
5
5
|
require("./bs");
|
|
6
6
|
// Import the IE fix
|
|
@@ -8,13 +8,13 @@ require("./ie");
|
|
|
8
8
|
// Bootstrap Components
|
|
9
9
|
var Components = require("./components");
|
|
10
10
|
exports.Components = Components;
|
|
11
|
-
//
|
|
12
|
-
var
|
|
13
|
-
exports
|
|
11
|
+
// Render method
|
|
12
|
+
var render_1 = require("./render");
|
|
13
|
+
Object.defineProperty(exports, "render", { enumerable: true, get: function () { return render_1.render; } });
|
|
14
14
|
// Icons
|
|
15
15
|
var icons_1 = require("./icons");
|
|
16
16
|
Object.defineProperty(exports, "Icons", { enumerable: true, get: function () { return icons_1.Icons; } });
|
|
17
17
|
Object.defineProperty(exports, "IconTypes", { enumerable: true, get: function () { return icons_1.IconTypes; } });
|
|
18
18
|
// Bootstrap Global library
|
|
19
|
-
var BS = { Components: Components, Icons: icons_1.Icons, IconTypes: icons_1.IconTypes,
|
|
19
|
+
var BS = { Components: Components, Icons: icons_1.Icons, IconTypes: icons_1.IconTypes, render: render_1.render };
|
|
20
20
|
window["GD"] = window["GD"] || BS;
|
package/build/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.render = exports.Components = void 0;
|
|
4
4
|
// Bootstrap styles
|
|
5
5
|
require("./bs");
|
|
6
6
|
// Import the IE fix
|
|
@@ -8,9 +8,9 @@ require("./ie");
|
|
|
8
8
|
// Bootstrap Components
|
|
9
9
|
var Components = require("./components");
|
|
10
10
|
exports.Components = Components;
|
|
11
|
-
//
|
|
12
|
-
var
|
|
13
|
-
exports
|
|
11
|
+
// Render method
|
|
12
|
+
var render_1 = require("./render");
|
|
13
|
+
Object.defineProperty(exports, "render", { enumerable: true, get: function () { return render_1.render; } });
|
|
14
14
|
// Bootstrap Global library
|
|
15
|
-
var BS = { Components: Components,
|
|
15
|
+
var BS = { Components: Components, render: render_1.render };
|
|
16
16
|
window["GD"] = window["GD"] || BS;
|