@klippa/ngx-enhancy-forms 18.22.5 → 18.23.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.
|
@@ -2512,143 +2512,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2512
2512
|
const triangleSize = '12px';
|
|
2513
2513
|
const zIndexStart = 99999999;
|
|
2514
2514
|
const colors = {
|
|
2515
|
-
orange: { noAlpha: 'rgb(255, 128, 0)', withAlpha: 'rgba(255, 128, 0, 0.1254901961)' },
|
|
2516
|
-
black: { noAlpha: 'rgb(40, 40, 40)', withAlpha: 'rgba(40, 40, 40, 0.1254901961)' },
|
|
2515
|
+
orange: { noAlpha: 'rgb(255, 128, 0)', withAlpha: 'rgba(255, 128, 0, 0.1254901961)', background: 'rgb(255, 255, 255)' },
|
|
2516
|
+
black: { noAlpha: 'rgb(40, 40, 40)', withAlpha: 'rgba(40, 40, 40, 0.1254901961)', background: 'rgb(255, 255, 255)' },
|
|
2517
|
+
whiteOnBlack: { noAlpha: 'rgb(255, 255, 255)', withAlpha: 'rgba(255, 255, 255, 0.1254901961)', background: 'rgba(12, 17, 29)' },
|
|
2517
2518
|
};
|
|
2518
2519
|
class WithTooltipDirective {
|
|
2519
|
-
constructor(el, appRef) {
|
|
2520
|
+
constructor(el, appRef, ngZone) {
|
|
2520
2521
|
this.el = el;
|
|
2521
2522
|
this.appRef = appRef;
|
|
2523
|
+
this.ngZone = ngZone;
|
|
2522
2524
|
this.klpWithTooltip = 'orange';
|
|
2523
2525
|
this.position = 'top';
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
this.
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
}
|
|
2535
|
-
if (!stringIsSetAndFilled(textToDisplay) && !this.tooltipTemplate) {
|
|
2536
|
-
return;
|
|
2537
|
-
}
|
|
2538
|
-
if (stringIsSetAndFilled(this.tooltipText)) {
|
|
2539
|
-
if (this.tooltipText === el.nativeElement.innerText) {
|
|
2526
|
+
this.ngZone.runOutsideAngular(() => {
|
|
2527
|
+
el.nativeElement.addEventListener('mouseenter', () => {
|
|
2528
|
+
if (this.tooltipTemplate) {
|
|
2529
|
+
this.hookUpTemplate();
|
|
2530
|
+
}
|
|
2531
|
+
let textToDisplay;
|
|
2532
|
+
if (!this.templateInstance) {
|
|
2533
|
+
textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
|
|
2534
|
+
}
|
|
2535
|
+
if (!stringIsSetAndFilled(this.klpWithTooltip)) {
|
|
2540
2536
|
return;
|
|
2541
2537
|
}
|
|
2542
|
-
|
|
2543
|
-
else if (this.tooltipTemplate) {
|
|
2544
|
-
// no need to check here, just render the template
|
|
2545
|
-
}
|
|
2546
|
-
else {
|
|
2547
|
-
if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
|
|
2538
|
+
if (!stringIsSetAndFilled(textToDisplay) && !this.tooltipTemplate) {
|
|
2548
2539
|
return;
|
|
2549
2540
|
}
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
this.
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
this.div.style.
|
|
2581
|
-
this.div.
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
this.
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
this.
|
|
2617
|
-
this.
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
this.
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
this.
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2541
|
+
if (stringIsSetAndFilled(this.tooltipText)) {
|
|
2542
|
+
if (this.tooltipText === el.nativeElement.innerText) {
|
|
2543
|
+
return;
|
|
2544
|
+
}
|
|
2545
|
+
}
|
|
2546
|
+
else if (this.tooltipTemplate) {
|
|
2547
|
+
// no need to check here, just render the template
|
|
2548
|
+
}
|
|
2549
|
+
else {
|
|
2550
|
+
if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
|
|
2551
|
+
return;
|
|
2552
|
+
}
|
|
2553
|
+
}
|
|
2554
|
+
if (getComputedStyle(el.nativeElement).position === 'static') {
|
|
2555
|
+
el.nativeElement.style.position = 'relative';
|
|
2556
|
+
}
|
|
2557
|
+
this.div = document.createElement('div');
|
|
2558
|
+
this.div.style.zIndex = `${zIndexStart + 2}`;
|
|
2559
|
+
this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
|
|
2560
|
+
this.div.style.backgroundColor = `${colors[this.klpWithTooltip].background}`;
|
|
2561
|
+
this.div.style.position = 'fixed';
|
|
2562
|
+
this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
|
|
2563
|
+
if (this.position === 'top') {
|
|
2564
|
+
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
|
|
2565
|
+
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
|
|
2566
|
+
}
|
|
2567
|
+
else if (this.position === 'bottom') {
|
|
2568
|
+
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
|
|
2569
|
+
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
|
|
2570
|
+
}
|
|
2571
|
+
this.div.style.maxWidth = '200px';
|
|
2572
|
+
this.div.style.whiteSpace = 'break-spaces';
|
|
2573
|
+
this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2574
|
+
this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2575
|
+
this.div.style.padding = '0.3rem 0.5rem';
|
|
2576
|
+
this.div.style.boxSizing = 'border-box';
|
|
2577
|
+
this.div.style.borderRadius = '3px';
|
|
2578
|
+
if (stringIsSetAndFilled(textToDisplay)) {
|
|
2579
|
+
this.div.textContent = textToDisplay;
|
|
2580
|
+
}
|
|
2581
|
+
else if (this.templateInstance) {
|
|
2582
|
+
this.div.style.maxWidth = 'none';
|
|
2583
|
+
this.div.style.visibility = 'hidden';
|
|
2584
|
+
this.div.appendChild(this.templateInstance);
|
|
2585
|
+
setTimeout(() => {
|
|
2586
|
+
const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
|
|
2587
|
+
this.div.style.backgroundColor = color;
|
|
2588
|
+
this.div.style.visibility = 'visible';
|
|
2589
|
+
});
|
|
2590
|
+
}
|
|
2591
|
+
el.nativeElement.prepend(this.div);
|
|
2592
|
+
this.triangle = document.createElement('div');
|
|
2593
|
+
this.triangle.style.zIndex = `${zIndexStart + 1}`;
|
|
2594
|
+
this.triangle.style.position = 'fixed';
|
|
2595
|
+
this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 0.8rem)`;
|
|
2596
|
+
if (this.position === 'top') {
|
|
2597
|
+
this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
|
|
2598
|
+
this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
|
|
2599
|
+
}
|
|
2600
|
+
else if (this.position === 'bottom') {
|
|
2601
|
+
this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
|
|
2602
|
+
this.triangle.style.transform = `translate(-50%, 0rem) rotate(180deg)`;
|
|
2603
|
+
}
|
|
2604
|
+
this.triangle.style.width = '0';
|
|
2605
|
+
this.triangle.style.height = '0';
|
|
2606
|
+
this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
|
|
2607
|
+
this.triangle.style.borderRight = `${triangleSize} solid transparent`;
|
|
2608
|
+
this.triangle.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2609
|
+
el.nativeElement.prepend(this.triangle);
|
|
2610
|
+
this.triangleWhite = document.createElement('div');
|
|
2611
|
+
this.triangleWhite.style.zIndex = `${zIndexStart + 3}`;
|
|
2612
|
+
this.triangleWhite.style.position = 'fixed';
|
|
2613
|
+
this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 0.8rem)`;
|
|
2614
|
+
if (this.position === 'top') {
|
|
2615
|
+
this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
|
|
2616
|
+
this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
|
|
2617
|
+
}
|
|
2618
|
+
else if (this.position === 'bottom') {
|
|
2619
|
+
this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
|
|
2620
|
+
this.triangleWhite.style.transform = `translate(-50%, -2px) rotate(180deg)`;
|
|
2621
|
+
}
|
|
2622
|
+
this.triangleWhite.style.width = '0';
|
|
2623
|
+
this.triangleWhite.style.height = '0';
|
|
2624
|
+
this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
|
|
2625
|
+
this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;
|
|
2626
|
+
if (stringIsSetAndFilled(textToDisplay)) {
|
|
2627
|
+
this.triangleWhite.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].background}`;
|
|
2628
|
+
}
|
|
2629
|
+
else if (this.templateInstance) {
|
|
2630
|
+
this.div.style.visibility = 'hidden';
|
|
2631
|
+
setTimeout(() => {
|
|
2632
|
+
const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
|
|
2633
|
+
this.triangleWhite.style.borderTop = `${triangleSize} solid ${color}`;
|
|
2634
|
+
this.div.style.visibility = 'visible';
|
|
2635
|
+
});
|
|
2636
|
+
}
|
|
2637
|
+
el.nativeElement.prepend(this.triangleWhite);
|
|
2638
|
+
});
|
|
2639
|
+
el.nativeElement.addEventListener('mouseleave', () => {
|
|
2640
|
+
if (this.tooltipTemplate) {
|
|
2641
|
+
this.cleanUpTemplate();
|
|
2642
|
+
}
|
|
2643
|
+
try {
|
|
2644
|
+
el.nativeElement.removeChild(this.div);
|
|
2645
|
+
}
|
|
2646
|
+
catch (ex) { }
|
|
2647
|
+
try {
|
|
2648
|
+
el.nativeElement.removeChild(this.triangle);
|
|
2649
|
+
}
|
|
2650
|
+
catch (ex) { }
|
|
2651
|
+
try {
|
|
2652
|
+
el.nativeElement.removeChild(this.triangleWhite);
|
|
2653
|
+
}
|
|
2654
|
+
catch (ex) { }
|
|
2655
|
+
});
|
|
2652
2656
|
});
|
|
2653
2657
|
}
|
|
2654
2658
|
hookUpTemplate() {
|
|
@@ -2660,7 +2664,7 @@ class WithTooltipDirective {
|
|
|
2660
2664
|
this.appRef.detachView(this.viewRefForTemplate);
|
|
2661
2665
|
this.viewRefForTemplate.destroy();
|
|
2662
2666
|
}
|
|
2663
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2667
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2664
2668
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText", tooltipTemplate: "tooltipTemplate", position: "position" }, ngImport: i0 }); }
|
|
2665
2669
|
}
|
|
2666
2670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: WithTooltipDirective, decorators: [{
|
|
@@ -2668,7 +2672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2668
2672
|
args: [{
|
|
2669
2673
|
selector: '[klpWithTooltip]'
|
|
2670
2674
|
}]
|
|
2671
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }], propDecorators: { klpWithTooltip: [{
|
|
2675
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.NgZone }], propDecorators: { klpWithTooltip: [{
|
|
2672
2676
|
type: Input
|
|
2673
2677
|
}], tooltipText: [{
|
|
2674
2678
|
type: Input
|