@klippa/ngx-enhancy-forms 14.21.0 → 14.22.0

package/fesm2020/klippa-ngx-enhancy-forms.mjs

@@ -2426,13 +2426,17 @@ const colors = {
 };
 class WithTooltipDirective {
     constructor(el) {
+        this.el = el;
         this.klpWithTooltip = 'orange';
         el.nativeElement.addEventListener('mouseenter', () => {
-            const textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
+            let textToDisplay;
+            if (!this.templateInstance) {
+                textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
+            }
             if (!stringIsSetAndFilled(this.klpWithTooltip)) {
                 return;
             }
-            if (textToDisplay.length < 1) {
+            if (!stringIsSetAndFilled(textToDisplay) && !this.tooltipTemplate) {
                 return;
             }
             if (stringIsSetAndFilled(this.tooltipText)) {
@@ -2440,6 +2444,9 @@ class WithTooltipDirective {
                     return;
                 }
             }
+            else if (this.tooltipTemplate) {
+                // no need to check here, just render the template
+            }
             else {
                 if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
                     return;
@@ -2463,7 +2470,18 @@ class WithTooltipDirective {
             this.div.style.padding = '0.3rem 0.5rem';
             this.div.style.boxSizing = 'border-box';
             this.div.style.borderRadius = '3px';
-            this.div.textContent = textToDisplay;
+            if (stringIsSetAndFilled(textToDisplay)) {
+                this.div.textContent = textToDisplay;
+            }
+            else if (this.templateInstance) {
+                this.div.style.visibility = 'hidden';
+                this.div.appendChild(this.templateInstance);
+                setTimeout(() => {
+                    const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
+                    this.div.style.backgroundColor = color;
+                    this.div.style.visibility = 'visible';
+                });
+            }
             el.nativeElement.prepend(this.div);
             this.triangle = document.createElement('div');
             this.triangle.style.zIndex = `${zIndexStart + 1}`;
@@ -2487,7 +2505,17 @@ class WithTooltipDirective {
             this.triangleWhite.style.height = '0';
             this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
             this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;
-            this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
+            if (stringIsSetAndFilled(textToDisplay)) {
+                this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
+            }
+            else if (this.templateInstance) {
+                this.div.style.visibility = 'hidden';
+                setTimeout(() => {
+                    const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
+                    this.triangleWhite.style.borderTop = `${triangleSize} solid ${color}`;
+                    this.div.style.visibility = 'visible';
+                });
+            }
             el.nativeElement.prepend(this.triangleWhite);
         });
         el.nativeElement.addEventListener('mouseleave', () => {
@@ -2505,9 +2533,15 @@ class WithTooltipDirective {
             catch (ex) { }
         });
     }
+    ngOnChanges(simpleChanges) {
+        if (simpleChanges.tooltipTemplate?.currentValue) {
+            const viewRef = this.tooltipTemplate.createEmbeddedView(null);
+            this.templateInstance = viewRef.rootNodes[0];
+        }
+    }
 }
 WithTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-WithTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText" }, ngImport: i0 });
+WithTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText", tooltipTemplate: "tooltipTemplate" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2517,6 +2551,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], tooltipText: [{
                 type: Input
+            }], tooltipTemplate: [{
+                type: Input
             }] } });
 
 class NgxEnhancyFormsModule {