@klippa/ngx-enhancy-forms 14.18.0 → 14.19.0
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 +12 -7
- package/fesm2015/klippa-ngx-enhancy-forms.mjs +10 -6
- package/fesm2015/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/fesm2020/klippa-ngx-enhancy-forms.mjs +10 -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,15 @@ 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)) {
|
|
2369
2373
|
return;
|
|
2370
2374
|
}
|
|
2371
2375
|
if (getComputedStyle(el.nativeElement).position === 'static') {
|
|
@@ -2373,7 +2377,7 @@ class WithTooltipDirective {
|
|
|
2373
2377
|
}
|
|
2374
2378
|
this.div = document.createElement('div');
|
|
2375
2379
|
this.div.style.zIndex = '2';
|
|
2376
|
-
this.div.style.color =
|
|
2380
|
+
this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
|
|
2377
2381
|
this.div.style.position = 'fixed';
|
|
2378
2382
|
this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
|
|
2379
2383
|
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
|
|
@@ -2381,8 +2385,8 @@ class WithTooltipDirective {
|
|
|
2381
2385
|
this.div.style.maxWidth = '200px';
|
|
2382
2386
|
this.div.style.whiteSpace = 'break-spaces';
|
|
2383
2387
|
this.div.style.backgroundColor = 'white';
|
|
2384
|
-
this.div.style.border =
|
|
2385
|
-
this.div.style.boxShadow = `2px 3px 10px 0px
|
|
2388
|
+
this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2389
|
+
this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2386
2390
|
this.div.style.padding = '0.3rem 0.5rem';
|
|
2387
2391
|
this.div.style.boxSizing = 'border-box';
|
|
2388
2392
|
this.div.style.borderRadius = '3px';
|
|
@@ -2398,7 +2402,7 @@ class WithTooltipDirective {
|
|
|
2398
2402
|
this.triangle.style.height = '0';
|
|
2399
2403
|
this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
|
|
2400
2404
|
this.triangle.style.borderRight = `${triangleSize} solid transparent`;
|
|
2401
|
-
this.triangle.style.borderTop = `${triangleSize} solid
|
|
2405
|
+
this.triangle.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].withAlpha}`;
|
|
2402
2406
|
el.nativeElement.prepend(this.triangle);
|
|
2403
2407
|
this.triangleWhite = document.createElement('div');
|
|
2404
2408
|
this.triangleWhite.style.zIndex = '3';
|