@klippa/ngx-enhancy-forms 14.22.5 → 14.22.6

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

@@ -2447,6 +2447,7 @@ class WithTooltipDirective {
         this.el = el;
         this.appRef = appRef;
         this.klpWithTooltip = 'orange';
+        this.position = 'top';
         el.nativeElement.addEventListener('mouseenter', () => {
             let textToDisplay;
             if (!this.templateInstance) {
@@ -2479,8 +2480,14 @@ class WithTooltipDirective {
             this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
             this.div.style.position = 'fixed';
             this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
-            this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
-            this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
+            if (this.position === 'top') {
+                this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+                this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
+            }
+            else if (this.position === 'bottom') {
+                this.div.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
+                this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
+            }
             this.div.style.maxWidth = '200px';
             this.div.style.whiteSpace = 'break-spaces';
             this.div.style.backgroundColor = 'white';
@@ -2507,8 +2514,14 @@ class WithTooltipDirective {
             this.triangle.style.zIndex = `${zIndexStart + 1}`;
             this.triangle.style.position = 'fixed';
             this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
-            this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
-            this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
+            if (this.position === 'top') {
+                this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+                this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
+            }
+            else if (this.position === 'bottom') {
+                this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
+                this.triangle.style.transform = `translate(-50%, 0rem) rotate(180deg)`;
+            }
             this.triangle.style.width = '0';
             this.triangle.style.height = '0';
             this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
@@ -2519,8 +2532,14 @@ class WithTooltipDirective {
             this.triangleWhite.style.zIndex = `${zIndexStart + 3}`;
             this.triangleWhite.style.position = 'fixed';
             this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
-            this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
-            this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
+            if (this.position === 'top') {
+                this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+                this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
+            }
+            else if (this.position === 'bottom') {
+                this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
+                this.triangleWhite.style.transform = `translate(-50%, -2px) rotate(180deg)`;
+            }
             this.triangleWhite.style.width = '0';
             this.triangleWhite.style.height = '0';
             this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
@@ -2562,7 +2581,7 @@ class WithTooltipDirective {
     }
 }
 WithTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], 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", tooltipTemplate: "tooltipTemplate" }, usesOnChanges: true, 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", position: "position" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2574,6 +2593,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], tooltipTemplate: [{
                 type: Input
+            }], position: [{
+                type: Input
             }] } });
 
 class NgxEnhancyFormsModule {