cps-ui-kit 0.28.0 → 0.30.0
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/README.md +2 -1
- package/assets/icons.svg +139 -323
- package/esm2020/lib/components/cps-icon/cps-icon.component.mjs +2 -1
- package/esm2020/lib/components/cps-info-circle/cps-info-circle.component.mjs +24 -0
- package/esm2020/lib/components/cps-tag/cps-tag.component.mjs +3 -3
- package/esm2020/lib/directives/cps-tooltip.directive.mjs +34 -14
- package/esm2020/public-api.mjs +3 -2
- package/fesm2015/cps-ui-kit.mjs +244 -203
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +242 -201
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-info-circle/cps-info-circle.component.d.ts +10 -0
- package/lib/directives/cps-tooltip.directive.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -1
- package/styles/cps-tooltip-style.scss +2 -0
package/fesm2015/cps-ui-kit.mjs
CHANGED
|
@@ -146,6 +146,7 @@ const iconNames = [
|
|
|
146
146
|
'heart',
|
|
147
147
|
'help-circle',
|
|
148
148
|
'home',
|
|
149
|
+
'info-circle',
|
|
149
150
|
'insight',
|
|
150
151
|
'issues',
|
|
151
152
|
'jpeg',
|
|
@@ -2266,6 +2267,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2266
2267
|
args: ['treeAutocompleteList']
|
|
2267
2268
|
}] } });
|
|
2268
2269
|
|
|
2270
|
+
class CpsTooltipDirective {
|
|
2271
|
+
// eslint-disable-next-line no-useless-constructor
|
|
2272
|
+
constructor(_elementRef) {
|
|
2273
|
+
this._elementRef = _elementRef;
|
|
2274
|
+
this.tooltipOpenDelay = 300;
|
|
2275
|
+
this.tooltipCloseDelay = 300;
|
|
2276
|
+
this.tooltipOpenOn = 'hover';
|
|
2277
|
+
this.tooltipPosition = 'top';
|
|
2278
|
+
this.tooltipPersistent = false;
|
|
2279
|
+
this.tooltipDisabled = false;
|
|
2280
|
+
this.tooltipMaxWidth = '100%';
|
|
2281
|
+
this.tooltipContentClass = 'cps-tooltip-content';
|
|
2282
|
+
this._createTooltip = () => {
|
|
2283
|
+
if (this._popup)
|
|
2284
|
+
return;
|
|
2285
|
+
if (this.tooltipDisabled)
|
|
2286
|
+
return;
|
|
2287
|
+
this._popup = document.createElement('div');
|
|
2288
|
+
this._constructElement(this._popup);
|
|
2289
|
+
if (this.tooltipPersistent)
|
|
2290
|
+
this._popup.addEventListener('click', this._destroyTooltip);
|
|
2291
|
+
window.addEventListener('scroll', this._destroyTooltip, true);
|
|
2292
|
+
};
|
|
2293
|
+
this._destroyTooltip = (event = undefined) => {
|
|
2294
|
+
const removeFromDOM = () => {
|
|
2295
|
+
var _a;
|
|
2296
|
+
(_a = this._popup) === null || _a === void 0 ? void 0 : _a.remove();
|
|
2297
|
+
this._popup = undefined;
|
|
2298
|
+
};
|
|
2299
|
+
window.removeEventListener('scroll', this._destroyTooltip, true);
|
|
2300
|
+
if (!this._popup)
|
|
2301
|
+
return;
|
|
2302
|
+
this._popup.removeEventListener('click', this._destroyTooltip);
|
|
2303
|
+
const noAnimation = ['scroll', 'resize'].includes(event === null || event === void 0 ? void 0 : event.type);
|
|
2304
|
+
if (noAnimation) {
|
|
2305
|
+
removeFromDOM();
|
|
2306
|
+
}
|
|
2307
|
+
else {
|
|
2308
|
+
const popup = this._popup;
|
|
2309
|
+
requestAnimationFrame(function () {
|
|
2310
|
+
popup.style.opacity = '0';
|
|
2311
|
+
});
|
|
2312
|
+
setTimeout(() => {
|
|
2313
|
+
removeFromDOM();
|
|
2314
|
+
}, 200);
|
|
2315
|
+
}
|
|
2316
|
+
};
|
|
2317
|
+
}
|
|
2318
|
+
ngOnDestroy() {
|
|
2319
|
+
this._destroyTooltip();
|
|
2320
|
+
}
|
|
2321
|
+
_constructElement(popup) {
|
|
2322
|
+
const popupContent = document.createElement('div');
|
|
2323
|
+
popupContent.innerHTML = this.tooltip || 'Add your text to this tooltip';
|
|
2324
|
+
popupContent.classList.add(this.tooltipContentClass);
|
|
2325
|
+
popup.appendChild(popupContent);
|
|
2326
|
+
popup.classList.add('cps-tooltip');
|
|
2327
|
+
popup.style.maxWidth = convertSize(this.tooltipMaxWidth);
|
|
2328
|
+
document.body.appendChild(popup);
|
|
2329
|
+
requestAnimationFrame(function () {
|
|
2330
|
+
popup.style.opacity = '1';
|
|
2331
|
+
});
|
|
2332
|
+
const coords = this._getCoords();
|
|
2333
|
+
if (!coords) {
|
|
2334
|
+
this._destroyTooltip();
|
|
2335
|
+
throw new Error('Not enough space on the screen for the tooltip!');
|
|
2336
|
+
}
|
|
2337
|
+
popup.style.left = coords.left.toString() + 'px';
|
|
2338
|
+
popup.style.top = coords.top.toString() + 'px';
|
|
2339
|
+
}
|
|
2340
|
+
_getCoords() {
|
|
2341
|
+
function isInsideScreen(coords) {
|
|
2342
|
+
return (coords.top >= 0 &&
|
|
2343
|
+
coords.left >= 0 &&
|
|
2344
|
+
coords.left + popupRect.width <= window.innerWidth &&
|
|
2345
|
+
coords.top + popupRect.height <= window.innerHeight);
|
|
2346
|
+
}
|
|
2347
|
+
let positions = ['top', 'bottom', 'left', 'right'];
|
|
2348
|
+
positions = positions.filter((item) => item !== this.tooltipPosition);
|
|
2349
|
+
positions.unshift(this.tooltipPosition);
|
|
2350
|
+
const targetEl = this._elementRef.nativeElement;
|
|
2351
|
+
const targetElRect = targetEl.getBoundingClientRect();
|
|
2352
|
+
const popupRect = this._popup.getBoundingClientRect();
|
|
2353
|
+
for (const pos of positions) {
|
|
2354
|
+
const coords = this._getCoordsForPosition(pos, targetEl, targetElRect, popupRect);
|
|
2355
|
+
if (isInsideScreen(coords)) {
|
|
2356
|
+
return coords;
|
|
2357
|
+
}
|
|
2358
|
+
}
|
|
2359
|
+
return undefined;
|
|
2360
|
+
}
|
|
2361
|
+
_getCoordsForPosition(position, targetEl, targetElRect, popupRect) {
|
|
2362
|
+
switch (position) {
|
|
2363
|
+
case 'bottom':
|
|
2364
|
+
return {
|
|
2365
|
+
left: targetElRect.left +
|
|
2366
|
+
window.scrollX +
|
|
2367
|
+
(targetEl.offsetWidth - popupRect.width) / 2,
|
|
2368
|
+
top: targetElRect.bottom + window.scrollY + 8
|
|
2369
|
+
};
|
|
2370
|
+
case 'left':
|
|
2371
|
+
return {
|
|
2372
|
+
left: targetElRect.left - window.scrollX - popupRect.width - 8,
|
|
2373
|
+
top: targetElRect.top +
|
|
2374
|
+
window.scrollY +
|
|
2375
|
+
(targetEl.offsetHeight - popupRect.height) / 2
|
|
2376
|
+
};
|
|
2377
|
+
case 'right':
|
|
2378
|
+
return {
|
|
2379
|
+
left: targetElRect.right + window.scrollX + 8,
|
|
2380
|
+
top: targetElRect.top +
|
|
2381
|
+
window.scrollY +
|
|
2382
|
+
(targetEl.offsetHeight - popupRect.height) / 2
|
|
2383
|
+
};
|
|
2384
|
+
default:
|
|
2385
|
+
return {
|
|
2386
|
+
left: targetElRect.left +
|
|
2387
|
+
window.scrollX +
|
|
2388
|
+
(targetEl.offsetWidth - popupRect.width) / 2,
|
|
2389
|
+
top: targetElRect.top + window.scrollY - popupRect.height - 8
|
|
2390
|
+
};
|
|
2391
|
+
}
|
|
2392
|
+
}
|
|
2393
|
+
onMouseEnter() {
|
|
2394
|
+
if (this.tooltipOpenOn === 'hover') {
|
|
2395
|
+
clearTimeout(this._hideTimeout);
|
|
2396
|
+
this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
|
|
2397
|
+
}
|
|
2398
|
+
}
|
|
2399
|
+
onMouseLeave() {
|
|
2400
|
+
clearTimeout(this._showTimeout);
|
|
2401
|
+
if (!this.tooltipPersistent) {
|
|
2402
|
+
this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
|
|
2403
|
+
}
|
|
2404
|
+
}
|
|
2405
|
+
onFocus() {
|
|
2406
|
+
if (this.tooltipOpenOn === 'focus') {
|
|
2407
|
+
clearTimeout(this._hideTimeout);
|
|
2408
|
+
this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
|
|
2409
|
+
}
|
|
2410
|
+
}
|
|
2411
|
+
onBlur() {
|
|
2412
|
+
clearTimeout(this._showTimeout);
|
|
2413
|
+
if (!this.tooltipPersistent && this.tooltipOpenOn === 'focus') {
|
|
2414
|
+
this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
|
|
2415
|
+
}
|
|
2416
|
+
}
|
|
2417
|
+
onClick() {
|
|
2418
|
+
if (this.tooltipOpenOn === 'click') {
|
|
2419
|
+
clearTimeout(this._hideTimeout);
|
|
2420
|
+
this._showTimeout = setTimeout(this._createTooltip, 0);
|
|
2421
|
+
}
|
|
2422
|
+
}
|
|
2423
|
+
onDocumentClick(target) {
|
|
2424
|
+
var _a, _b;
|
|
2425
|
+
if (this.tooltipPersistent && this._popup) {
|
|
2426
|
+
if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
|
|
2427
|
+
return;
|
|
2428
|
+
}
|
|
2429
|
+
const clickedInside = (_b = (_a = this._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.contains(target);
|
|
2430
|
+
if (!clickedInside) {
|
|
2431
|
+
this._destroyTooltip();
|
|
2432
|
+
}
|
|
2433
|
+
}
|
|
2434
|
+
}
|
|
2435
|
+
onPageResize(event) {
|
|
2436
|
+
if (this._popup)
|
|
2437
|
+
this._destroyTooltip(event);
|
|
2438
|
+
}
|
|
2439
|
+
}
|
|
2440
|
+
CpsTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2441
|
+
CpsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: ["cpsTooltip", "tooltip"], tooltipOpenDelay: "tooltipOpenDelay", tooltipCloseDelay: "tooltipCloseDelay", tooltipOpenOn: "tooltipOpenOn", tooltipPosition: "tooltipPosition", tooltipPersistent: "tooltipPersistent", tooltipDisabled: "tooltipDisabled", tooltipMaxWidth: "tooltipMaxWidth", tooltipContentClass: "tooltipContentClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize($event)" } }, ngImport: i0 });
|
|
2442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, decorators: [{
|
|
2443
|
+
type: Directive,
|
|
2444
|
+
args: [{
|
|
2445
|
+
selector: '[cpsTooltip]',
|
|
2446
|
+
standalone: true
|
|
2447
|
+
}]
|
|
2448
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tooltip: [{
|
|
2449
|
+
type: Input,
|
|
2450
|
+
args: ['cpsTooltip']
|
|
2451
|
+
}], tooltipOpenDelay: [{
|
|
2452
|
+
type: Input
|
|
2453
|
+
}], tooltipCloseDelay: [{
|
|
2454
|
+
type: Input
|
|
2455
|
+
}], tooltipOpenOn: [{
|
|
2456
|
+
type: Input
|
|
2457
|
+
}], tooltipPosition: [{
|
|
2458
|
+
type: Input
|
|
2459
|
+
}], tooltipPersistent: [{
|
|
2460
|
+
type: Input
|
|
2461
|
+
}], tooltipDisabled: [{
|
|
2462
|
+
type: Input
|
|
2463
|
+
}], tooltipMaxWidth: [{
|
|
2464
|
+
type: Input
|
|
2465
|
+
}], tooltipContentClass: [{
|
|
2466
|
+
type: Input
|
|
2467
|
+
}], onMouseEnter: [{
|
|
2468
|
+
type: HostListener,
|
|
2469
|
+
args: ['mouseenter']
|
|
2470
|
+
}], onMouseLeave: [{
|
|
2471
|
+
type: HostListener,
|
|
2472
|
+
args: ['mouseleave']
|
|
2473
|
+
}], onFocus: [{
|
|
2474
|
+
type: HostListener,
|
|
2475
|
+
args: ['focus']
|
|
2476
|
+
}], onBlur: [{
|
|
2477
|
+
type: HostListener,
|
|
2478
|
+
args: ['blur']
|
|
2479
|
+
}], onClick: [{
|
|
2480
|
+
type: HostListener,
|
|
2481
|
+
args: ['click']
|
|
2482
|
+
}], onDocumentClick: [{
|
|
2483
|
+
type: HostListener,
|
|
2484
|
+
args: ['document:click', ['$event.target']]
|
|
2485
|
+
}], onPageResize: [{
|
|
2486
|
+
type: HostListener,
|
|
2487
|
+
args: ['window:resize', ['$event']]
|
|
2488
|
+
}] } });
|
|
2489
|
+
|
|
2490
|
+
class CpsInfoCircleComponent {
|
|
2491
|
+
constructor() {
|
|
2492
|
+
this.size = 'small';
|
|
2493
|
+
this.tooltipText = '';
|
|
2494
|
+
this.tooltipPosition = 'top';
|
|
2495
|
+
}
|
|
2496
|
+
}
|
|
2497
|
+
CpsInfoCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInfoCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2498
|
+
CpsInfoCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInfoCircleComponent, isStandalone: true, selector: "cps-info-circle", inputs: { size: "size", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<cps-icon\n icon=\"info-circle\"\n [size]=\"size\"\n color=\"info\"\n [cpsTooltip]=\"tooltipText\"\n tooltipOpenDelay=\"0\"\n tooltipCloseDelay=\"100\"\n [tooltipPosition]=\"tooltipPosition\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
|
|
2499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInfoCircleComponent, decorators: [{
|
|
2500
|
+
type: Component,
|
|
2501
|
+
args: [{ selector: 'cps-info-circle', standalone: true, imports: [CpsIconComponent, CpsTooltipDirective], template: "<cps-icon\n icon=\"info-circle\"\n [size]=\"size\"\n color=\"info\"\n [cpsTooltip]=\"tooltipText\"\n tooltipOpenDelay=\"0\"\n tooltipCloseDelay=\"100\"\n [tooltipPosition]=\"tooltipPosition\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"] }]
|
|
2502
|
+
}], propDecorators: { size: [{
|
|
2503
|
+
type: Input
|
|
2504
|
+
}], tooltipText: [{
|
|
2505
|
+
type: Input
|
|
2506
|
+
}], tooltipPosition: [{
|
|
2507
|
+
type: Input
|
|
2508
|
+
}] } });
|
|
2509
|
+
|
|
2269
2510
|
class CpsProgressCircularComponent {
|
|
2270
2511
|
constructor() {
|
|
2271
2512
|
this.diameter = 40;
|
|
@@ -2911,10 +3152,10 @@ class CpsTagComponent {
|
|
|
2911
3152
|
}
|
|
2912
3153
|
}
|
|
2913
3154
|
CpsTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2914
|
-
CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:
|
|
3155
|
+
CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2915
3156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, decorators: [{
|
|
2916
3157
|
type: Component,
|
|
2917
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:
|
|
3158
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
|
|
2918
3159
|
}], ctorParameters: function () {
|
|
2919
3160
|
return [{ type: i1.NgControl, decorators: [{
|
|
2920
3161
|
type: Self
|
|
@@ -3434,206 +3675,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3434
3675
|
type: Output
|
|
3435
3676
|
}] } });
|
|
3436
3677
|
|
|
3437
|
-
class CpsTooltipDirective {
|
|
3438
|
-
// eslint-disable-next-line no-useless-constructor
|
|
3439
|
-
constructor(_elementRef) {
|
|
3440
|
-
this._elementRef = _elementRef;
|
|
3441
|
-
this.tooltipOpenDelay = 300;
|
|
3442
|
-
this.tooltipCloseDelay = 300;
|
|
3443
|
-
this.tooltipOpenOn = 'hover';
|
|
3444
|
-
this.tooltipPosition = 'top';
|
|
3445
|
-
this.tooltipPersistent = false;
|
|
3446
|
-
this.tooltipDisabled = false;
|
|
3447
|
-
this.tooltipMaxWidth = '100%';
|
|
3448
|
-
this.tooltipContentClass = 'cps-tooltip-content';
|
|
3449
|
-
this._createTooltip = () => {
|
|
3450
|
-
if (this._popup)
|
|
3451
|
-
this._destroyTooltip();
|
|
3452
|
-
if (this.tooltipDisabled)
|
|
3453
|
-
return;
|
|
3454
|
-
this._popup = document.createElement('div');
|
|
3455
|
-
this._constructElement(this._popup);
|
|
3456
|
-
if (this.tooltipPersistent)
|
|
3457
|
-
this._popup.addEventListener('click', this._destroyTooltip);
|
|
3458
|
-
window.addEventListener('scroll', this._destroyTooltip, true);
|
|
3459
|
-
};
|
|
3460
|
-
this._destroyTooltip = () => {
|
|
3461
|
-
var _a, _b;
|
|
3462
|
-
window.removeEventListener('scroll', this._destroyTooltip, true);
|
|
3463
|
-
(_a = this._popup) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this._destroyTooltip);
|
|
3464
|
-
(_b = this._popup) === null || _b === void 0 ? void 0 : _b.remove();
|
|
3465
|
-
this._popup = undefined;
|
|
3466
|
-
};
|
|
3467
|
-
}
|
|
3468
|
-
ngOnDestroy() {
|
|
3469
|
-
this._destroyTooltip();
|
|
3470
|
-
}
|
|
3471
|
-
_constructElement(popup) {
|
|
3472
|
-
const popupContent = document.createElement('div');
|
|
3473
|
-
popupContent.innerHTML = this.tooltip || 'Add your text to this tooltip';
|
|
3474
|
-
popupContent.classList.add(this.tooltipContentClass);
|
|
3475
|
-
popup.appendChild(popupContent);
|
|
3476
|
-
popup.classList.add('cps-tooltip');
|
|
3477
|
-
popup.style.maxWidth = convertSize(this.tooltipMaxWidth);
|
|
3478
|
-
document.body.appendChild(popup);
|
|
3479
|
-
const coords = this._getCoords();
|
|
3480
|
-
if (!coords) {
|
|
3481
|
-
this._destroyTooltip();
|
|
3482
|
-
throw new Error('Not enough space on the screen for the tooltip!');
|
|
3483
|
-
}
|
|
3484
|
-
popup.style.left = coords.left.toString() + 'px';
|
|
3485
|
-
popup.style.top = coords.top.toString() + 'px';
|
|
3486
|
-
}
|
|
3487
|
-
_getCoords() {
|
|
3488
|
-
function isInsideScreen(coords) {
|
|
3489
|
-
return (coords.top >= 0 &&
|
|
3490
|
-
coords.left >= 0 &&
|
|
3491
|
-
coords.left + popupRect.width <= window.innerWidth &&
|
|
3492
|
-
coords.top + popupRect.height <= window.innerHeight);
|
|
3493
|
-
}
|
|
3494
|
-
let positions = ['top', 'bottom', 'left', 'right'];
|
|
3495
|
-
positions = positions.filter((item) => item !== this.tooltipPosition);
|
|
3496
|
-
positions.unshift(this.tooltipPosition);
|
|
3497
|
-
const targetEl = this._elementRef.nativeElement;
|
|
3498
|
-
const targetElRect = targetEl.getBoundingClientRect();
|
|
3499
|
-
const popupRect = this._popup.getBoundingClientRect();
|
|
3500
|
-
for (const pos of positions) {
|
|
3501
|
-
const coords = this._getCoordsForPosition(pos, targetEl, targetElRect, popupRect);
|
|
3502
|
-
if (isInsideScreen(coords)) {
|
|
3503
|
-
return coords;
|
|
3504
|
-
}
|
|
3505
|
-
}
|
|
3506
|
-
return undefined;
|
|
3507
|
-
}
|
|
3508
|
-
_getCoordsForPosition(position, targetEl, targetElRect, popupRect) {
|
|
3509
|
-
switch (position) {
|
|
3510
|
-
case 'bottom':
|
|
3511
|
-
return {
|
|
3512
|
-
left: targetElRect.left +
|
|
3513
|
-
window.scrollX +
|
|
3514
|
-
(targetEl.offsetWidth - popupRect.width) / 2,
|
|
3515
|
-
top: targetElRect.bottom + window.scrollY + 8
|
|
3516
|
-
};
|
|
3517
|
-
case 'left':
|
|
3518
|
-
return {
|
|
3519
|
-
left: targetElRect.left - window.scrollX - popupRect.width - 8,
|
|
3520
|
-
top: targetElRect.top +
|
|
3521
|
-
window.scrollY +
|
|
3522
|
-
(targetEl.offsetHeight - popupRect.height) / 2
|
|
3523
|
-
};
|
|
3524
|
-
case 'right':
|
|
3525
|
-
return {
|
|
3526
|
-
left: targetElRect.right + window.scrollX + 8,
|
|
3527
|
-
top: targetElRect.top +
|
|
3528
|
-
window.scrollY +
|
|
3529
|
-
(targetEl.offsetHeight - popupRect.height) / 2
|
|
3530
|
-
};
|
|
3531
|
-
default:
|
|
3532
|
-
return {
|
|
3533
|
-
left: targetElRect.left +
|
|
3534
|
-
window.scrollX +
|
|
3535
|
-
(targetEl.offsetWidth - popupRect.width) / 2,
|
|
3536
|
-
top: targetElRect.top + window.scrollY - popupRect.height - 8
|
|
3537
|
-
};
|
|
3538
|
-
}
|
|
3539
|
-
}
|
|
3540
|
-
onMouseEnter() {
|
|
3541
|
-
if (this.tooltipOpenOn === 'hover') {
|
|
3542
|
-
clearTimeout(this._hideTimeout);
|
|
3543
|
-
this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
|
|
3544
|
-
}
|
|
3545
|
-
}
|
|
3546
|
-
onMouseLeave() {
|
|
3547
|
-
clearTimeout(this._showTimeout);
|
|
3548
|
-
if (!this.tooltipPersistent) {
|
|
3549
|
-
this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
|
|
3550
|
-
}
|
|
3551
|
-
}
|
|
3552
|
-
onFocus() {
|
|
3553
|
-
if (this.tooltipOpenOn === 'focus') {
|
|
3554
|
-
clearTimeout(this._hideTimeout);
|
|
3555
|
-
this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
|
|
3556
|
-
}
|
|
3557
|
-
}
|
|
3558
|
-
onBlur() {
|
|
3559
|
-
clearTimeout(this._showTimeout);
|
|
3560
|
-
if (!this.tooltipPersistent && this.tooltipOpenOn === 'focus') {
|
|
3561
|
-
this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
|
|
3562
|
-
}
|
|
3563
|
-
}
|
|
3564
|
-
onClick() {
|
|
3565
|
-
if (this.tooltipOpenOn === 'click') {
|
|
3566
|
-
clearTimeout(this._hideTimeout);
|
|
3567
|
-
this._showTimeout = setTimeout(this._createTooltip, 0);
|
|
3568
|
-
}
|
|
3569
|
-
}
|
|
3570
|
-
onPageResize() {
|
|
3571
|
-
if (this._popup)
|
|
3572
|
-
this._destroyTooltip();
|
|
3573
|
-
}
|
|
3574
|
-
onDocumentClick(target) {
|
|
3575
|
-
var _a, _b;
|
|
3576
|
-
if (this.tooltipPersistent && this._popup) {
|
|
3577
|
-
if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
|
|
3578
|
-
return;
|
|
3579
|
-
}
|
|
3580
|
-
const clickedInside = (_b = (_a = this._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.contains(target);
|
|
3581
|
-
if (!clickedInside) {
|
|
3582
|
-
this._destroyTooltip();
|
|
3583
|
-
}
|
|
3584
|
-
}
|
|
3585
|
-
}
|
|
3586
|
-
}
|
|
3587
|
-
CpsTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3588
|
-
CpsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: ["cpsTooltip", "tooltip"], tooltipOpenDelay: "tooltipOpenDelay", tooltipCloseDelay: "tooltipCloseDelay", tooltipOpenOn: "tooltipOpenOn", tooltipPosition: "tooltipPosition", tooltipPersistent: "tooltipPersistent", tooltipDisabled: "tooltipDisabled", tooltipMaxWidth: "tooltipMaxWidth", tooltipContentClass: "tooltipContentClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "window:resize": "onPageResize()", "document:click": "onDocumentClick($event.target)" } }, ngImport: i0 });
|
|
3589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, decorators: [{
|
|
3590
|
-
type: Directive,
|
|
3591
|
-
args: [{
|
|
3592
|
-
selector: '[cpsTooltip]',
|
|
3593
|
-
standalone: true
|
|
3594
|
-
}]
|
|
3595
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tooltip: [{
|
|
3596
|
-
type: Input,
|
|
3597
|
-
args: ['cpsTooltip']
|
|
3598
|
-
}], tooltipOpenDelay: [{
|
|
3599
|
-
type: Input
|
|
3600
|
-
}], tooltipCloseDelay: [{
|
|
3601
|
-
type: Input
|
|
3602
|
-
}], tooltipOpenOn: [{
|
|
3603
|
-
type: Input
|
|
3604
|
-
}], tooltipPosition: [{
|
|
3605
|
-
type: Input
|
|
3606
|
-
}], tooltipPersistent: [{
|
|
3607
|
-
type: Input
|
|
3608
|
-
}], tooltipDisabled: [{
|
|
3609
|
-
type: Input
|
|
3610
|
-
}], tooltipMaxWidth: [{
|
|
3611
|
-
type: Input
|
|
3612
|
-
}], tooltipContentClass: [{
|
|
3613
|
-
type: Input
|
|
3614
|
-
}], onMouseEnter: [{
|
|
3615
|
-
type: HostListener,
|
|
3616
|
-
args: ['mouseenter']
|
|
3617
|
-
}], onMouseLeave: [{
|
|
3618
|
-
type: HostListener,
|
|
3619
|
-
args: ['mouseleave']
|
|
3620
|
-
}], onFocus: [{
|
|
3621
|
-
type: HostListener,
|
|
3622
|
-
args: ['focus']
|
|
3623
|
-
}], onBlur: [{
|
|
3624
|
-
type: HostListener,
|
|
3625
|
-
args: ['blur']
|
|
3626
|
-
}], onClick: [{
|
|
3627
|
-
type: HostListener,
|
|
3628
|
-
args: ['click']
|
|
3629
|
-
}], onPageResize: [{
|
|
3630
|
-
type: HostListener,
|
|
3631
|
-
args: ['window:resize']
|
|
3632
|
-
}], onDocumentClick: [{
|
|
3633
|
-
type: HostListener,
|
|
3634
|
-
args: ['document:click', ['$event.target']]
|
|
3635
|
-
}] } });
|
|
3636
|
-
|
|
3637
3678
|
class CpsButtonToggleComponent {
|
|
3638
3679
|
set value(value) {
|
|
3639
3680
|
this._value = value;
|
|
@@ -3751,5 +3792,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3751
3792
|
* Generated bundle index. Do not edit.
|
|
3752
3793
|
*/
|
|
3753
3794
|
|
|
3754
|
-
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
|
|
3795
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
|
|
3755
3796
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|