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.
@@ -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:hover: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"] }] });
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:hover: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"] }]
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