@klippa/ngx-enhancy-forms 14.22.5 → 14.22.7

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

@@ -668,20 +668,33 @@ class FormElementComponent {
         return this.getErrorToShow() === error && !this.customErrorHandlers.some((e) => e.error === error);
     }
     getScrollableParent(node) {
-        if (node == null) {
-            return null;
+        if (node === window.document.documentElement) {
+            return window.document.documentElement;
         }
-        if (node.scrollHeight > node.clientHeight) {
+        const overflowY = getComputedStyle(node).overflowY;
+        if (node.clientHeight < node.scrollHeight && (overflowY === 'auto' || overflowY === 'scroll')) {
             return node;
         }
         else {
             return this.getScrollableParent(node.parentNode);
         }
     }
+    getPageOffset(elem) {
+        let topOffset = elem.getBoundingClientRect().top;
+        while (elem !== document.documentElement) {
+            elem = elem.parentElement;
+            topOffset += elem.scrollTop;
+        }
+        return topOffset;
+    }
     scrollTo() {
-        this.internalComponentRef.nativeElement.scrollIntoView(true);
-        // to give some breathing room, we scroll 100px more to the top
-        this.getScrollableParent(this.internalComponentRef.nativeElement)?.scrollBy(0, -100);
+        const parent = this.getScrollableParent(this.internalComponentRef.nativeElement);
+        const pageOffsetElement = this.getPageOffset(this.internalComponentRef.nativeElement);
+        const pageOffsetParent = parent === window.document.documentElement ? 0 : this.getPageOffset(parent);
+        parent.scrollTo({
+            top: pageOffsetElement - pageOffsetParent - 30,
+            behavior: 'smooth'
+        });
     }
     isRequired() {
         if (isValueSet(this.input)) {
@@ -2447,6 +2460,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 +2493,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 +2527,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 +2545,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 +2594,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 +2606,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], tooltipTemplate: [{
                 type: Input
+            }], position: [{
+                type: Input
             }] } });
 
 class NgxEnhancyFormsModule {