@klippa/ngx-enhancy-forms 20.0.5 → 20.0.6
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.
|
@@ -2951,25 +2951,23 @@ class WithTooltipDirective {
|
|
|
2951
2951
|
this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
|
|
2952
2952
|
this.div.style.backgroundColor = `${colors[this.klpWithTooltip].background}`;
|
|
2953
2953
|
this.div.style.position = 'fixed';
|
|
2954
|
-
this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
|
|
2955
2954
|
if (this.position === 'top') {
|
|
2956
|
-
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
|
|
2957
2955
|
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
|
|
2958
2956
|
}
|
|
2959
2957
|
else if (this.position === 'bottom') {
|
|
2960
|
-
this.div.style.
|
|
2961
|
-
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
|
|
2958
|
+
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem)) translateY(${el.nativeElement.getBoundingClientRect().height}px)`;
|
|
2962
2959
|
}
|
|
2963
2960
|
if (this.tooltipMinWidth > 0) {
|
|
2964
2961
|
this.div.style.minWidth = `${this.tooltipMinWidth}px`;
|
|
2965
2962
|
}
|
|
2963
|
+
this.div.style.width = 'max-content';
|
|
2966
2964
|
this.div.style.maxWidth = `${this.tooltipMaxWidth}px`;
|
|
2967
2965
|
this.div.style.whiteSpace = 'break-spaces';
|
|
2968
2966
|
this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2969
2967
|
this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2970
2968
|
this.div.style.padding = '0.3rem 0.5rem';
|
|
2971
2969
|
this.div.style.boxSizing = 'border-box';
|
|
2972
|
-
this.div.style.borderRadius = '
|
|
2970
|
+
this.div.style.borderRadius = '8px';
|
|
2973
2971
|
this.div.style.wordBreak = 'break-word';
|
|
2974
2972
|
if (stringIsSetAndFilled(textToDisplay)) {
|
|
2975
2973
|
this.div.textContent = textToDisplay;
|
|
@@ -2988,14 +2986,11 @@ class WithTooltipDirective {
|
|
|
2988
2986
|
this.triangle = document.createElement('div');
|
|
2989
2987
|
this.triangle.style.zIndex = `${zIndexStart + 1}`;
|
|
2990
2988
|
this.triangle.style.position = 'fixed';
|
|
2991
|
-
this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 0.8rem)`;
|
|
2992
2989
|
if (this.position === 'top') {
|
|
2993
|
-
this.triangle.style.
|
|
2994
|
-
this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
|
|
2990
|
+
this.triangle.style.transform = `translate(${el.nativeElement.getBoundingClientRect().width}px) translate(-100%, calc(-100% + 0.1rem))`;
|
|
2995
2991
|
}
|
|
2996
2992
|
else if (this.position === 'bottom') {
|
|
2997
|
-
this.triangle.style.
|
|
2998
|
-
this.triangle.style.transform = `translate(-50%, 0rem) rotate(180deg)`;
|
|
2993
|
+
this.triangle.style.transform = `translate(${el.nativeElement.getBoundingClientRect().width}px) translateY(${el.nativeElement.getBoundingClientRect().height}px) translate(-100%, 0rem) rotate(180deg)`;
|
|
2999
2994
|
}
|
|
3000
2995
|
this.triangle.style.width = '0';
|
|
3001
2996
|
this.triangle.style.height = '0';
|
|
@@ -3006,14 +3001,11 @@ class WithTooltipDirective {
|
|
|
3006
3001
|
this.triangleWhite = document.createElement('div');
|
|
3007
3002
|
this.triangleWhite.style.zIndex = `${zIndexStart + 3}`;
|
|
3008
3003
|
this.triangleWhite.style.position = 'fixed';
|
|
3009
|
-
this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 0.8rem)`;
|
|
3010
3004
|
if (this.position === 'top') {
|
|
3011
|
-
this.triangleWhite.style.
|
|
3012
|
-
this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
|
|
3005
|
+
this.triangleWhite.style.transform = `translate(${el.nativeElement.getBoundingClientRect().width}px) translate(-100%, calc(-100% + 0.1rem - 2px))`;
|
|
3013
3006
|
}
|
|
3014
3007
|
else if (this.position === 'bottom') {
|
|
3015
|
-
this.triangleWhite.style.
|
|
3016
|
-
this.triangleWhite.style.transform = `translate(-50%, -2px) rotate(180deg)`;
|
|
3008
|
+
this.triangleWhite.style.transform = `translate(${el.nativeElement.getBoundingClientRect().width}px) translateY(${el.nativeElement.getBoundingClientRect().height}px) translate(-100%, -2px) rotate(180deg)`;
|
|
3017
3009
|
}
|
|
3018
3010
|
this.triangleWhite.style.width = '0';
|
|
3019
3011
|
this.triangleWhite.style.height = '0';
|