@klippa/ngx-enhancy-forms 14.18.0 → 14.19.1
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.
- package/esm2020/lib/withTooltip.component.mjs +19 -7
- package/fesm2015/klippa-ngx-enhancy-forms.mjs +17 -6
- package/fesm2015/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/fesm2020/klippa-ngx-enhancy-forms.mjs +17 -6
- package/fesm2020/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/lib/withTooltip.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2361,11 +2361,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
2361
2361
|
}] } });
|
|
2362
2362
|
|
|
2363
2363
|
const triangleSize = '12px';
|
|
2364
|
+
const colors = {
|
|
2365
|
+
orange: { noAlpha: 'rgb(255, 128, 0)', withAlpha: 'rgba(255, 128, 0, 0.1254901961)' },
|
|
2366
|
+
black: { noAlpha: 'rgb(40, 40, 40)', withAlpha: 'rgba(40, 40, 40, 0.1254901961)' },
|
|
2367
|
+
};
|
|
2364
2368
|
class WithTooltipDirective {
|
|
2365
2369
|
constructor(el) {
|
|
2366
|
-
this.klpWithTooltip =
|
|
2370
|
+
this.klpWithTooltip = 'orange';
|
|
2367
2371
|
el.nativeElement.addEventListener('mouseenter', () => {
|
|
2368
|
-
if (!this.klpWithTooltip) {
|
|
2372
|
+
if (!stringIsSetAndFilled(this.klpWithTooltip)) {
|
|
2373
|
+
return;
|
|
2374
|
+
}
|
|
2375
|
+
if (el.nativeElement.innerText.trim().length < 1) {
|
|
2376
|
+
return;
|
|
2377
|
+
}
|
|
2378
|
+
console.log(el.nativeElement.offsetWidth, el.nativeElement.scrollWidth);
|
|
2379
|
+
if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
|
|
2369
2380
|
return;
|
|
2370
2381
|
}
|
|
2371
2382
|
if (getComputedStyle(el.nativeElement).position === 'static') {
|
|
@@ -2373,7 +2384,7 @@ class WithTooltipDirective {
|
|
|
2373
2384
|
}
|
|
2374
2385
|
this.div = document.createElement('div');
|
|
2375
2386
|
this.div.style.zIndex = '2';
|
|
2376
|
-
this.div.style.color =
|
|
2387
|
+
this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
|
|
2377
2388
|
this.div.style.position = 'fixed';
|
|
2378
2389
|
this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
|
|
2379
2390
|
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
|
|
@@ -2381,8 +2392,8 @@ class WithTooltipDirective {
|
|
|
2381
2392
|
this.div.style.maxWidth = '200px';
|
|
2382
2393
|
this.div.style.whiteSpace = 'break-spaces';
|
|
2383
2394
|
this.div.style.backgroundColor = 'white';
|
|
2384
|
-
this.div.style.border =
|
|
2385
|
-
this.div.style.boxShadow = `2px 3px 10px 0px
|
|
2395
|
+
this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2396
|
+
this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2386
2397
|
this.div.style.padding = '0.3rem 0.5rem';
|
|
2387
2398
|
this.div.style.boxSizing = 'border-box';
|
|
2388
2399
|
this.div.style.borderRadius = '3px';
|
|
@@ -2398,7 +2409,7 @@ class WithTooltipDirective {
|
|
|
2398
2409
|
this.triangle.style.height = '0';
|
|
2399
2410
|
this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
|
|
2400
2411
|
this.triangle.style.borderRight = `${triangleSize} solid transparent`;
|
|
2401
|
-
this.triangle.style.borderTop = `${triangleSize} solid
|
|
2412
|
+
this.triangle.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2402
2413
|
el.nativeElement.prepend(this.triangle);
|
|
2403
2414
|
this.triangleWhite = document.createElement('div');
|
|
2404
2415
|
this.triangleWhite.style.zIndex = '3';
|