integra-ng 21.0.10 → 21.0.11
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/fesm2022/integra-ng.mjs +14 -2
- package/fesm2022/integra-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/types/integra-ng.d.ts +10 -0
package/fesm2022/integra-ng.mjs
CHANGED
|
@@ -453,7 +453,7 @@ class TooltipComponent {
|
|
|
453
453
|
{{ text }}
|
|
454
454
|
<div class="i-tooltip__arrow"></div>
|
|
455
455
|
</div>
|
|
456
|
-
`, isInline: true, styles: [".i-tooltip{background-color:var(--color-component-background-solid);color:var(--color-text-contrast)}.i-tooltip--above .i-tooltip__arrow{border-top-color:var(--color-component-background-solid)}.i-tooltip--below .i-tooltip__arrow{border-bottom-color:var(--color-component-background-solid)}.i-tooltip--left .i-tooltip__arrow{border-left-color:var(--color-component-background-solid)}.i-tooltip--right .i-tooltip__arrow{border-right-color:var(--color-component-background-solid)}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:.9em;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:
|
|
456
|
+
`, isInline: true, styles: [".i-tooltip{background-color:var(--color-component-background-solid);color:var(--color-text-contrast)}.i-tooltip--above .i-tooltip__arrow{border-top-color:var(--color-component-background-solid)}.i-tooltip--below .i-tooltip__arrow{border-bottom-color:var(--color-component-background-solid)}.i-tooltip--left .i-tooltip__arrow{border-left-color:var(--color-component-background-solid)}.i-tooltip--right .i-tooltip__arrow{border-right-color:var(--color-component-background-solid)}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:.9em;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:10000;opacity:0;animation:fadeIn .2s ease-in-out forwards}.i-tooltip__arrow{position:absolute;width:0;height:0;border:6px solid transparent}.i-tooltip--above .i-tooltip__arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none}.i-tooltip--below .i-tooltip__arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none}.i-tooltip--left .i-tooltip__arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none}.i-tooltip--right .i-tooltip__arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}\n"] });
|
|
457
457
|
}
|
|
458
458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
459
459
|
type: Component,
|
|
@@ -468,13 +468,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
468
468
|
{{ text }}
|
|
469
469
|
<div class="i-tooltip__arrow"></div>
|
|
470
470
|
</div>
|
|
471
|
-
`, styles: [".i-tooltip{background-color:var(--color-component-background-solid);color:var(--color-text-contrast)}.i-tooltip--above .i-tooltip__arrow{border-top-color:var(--color-component-background-solid)}.i-tooltip--below .i-tooltip__arrow{border-bottom-color:var(--color-component-background-solid)}.i-tooltip--left .i-tooltip__arrow{border-left-color:var(--color-component-background-solid)}.i-tooltip--right .i-tooltip__arrow{border-right-color:var(--color-component-background-solid)}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:.9em;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:
|
|
471
|
+
`, styles: [".i-tooltip{background-color:var(--color-component-background-solid);color:var(--color-text-contrast)}.i-tooltip--above .i-tooltip__arrow{border-top-color:var(--color-component-background-solid)}.i-tooltip--below .i-tooltip__arrow{border-bottom-color:var(--color-component-background-solid)}.i-tooltip--left .i-tooltip__arrow{border-left-color:var(--color-component-background-solid)}.i-tooltip--right .i-tooltip__arrow{border-right-color:var(--color-component-background-solid)}.i-tooltip{position:relative;padding:8px 12px;border-radius:4px;font-size:.9em;line-height:1.4;white-space:nowrap;max-width:200px;word-wrap:break-word;white-space:normal;z-index:10000;opacity:0;animation:fadeIn .2s ease-in-out forwards}.i-tooltip__arrow{position:absolute;width:0;height:0;border:6px solid transparent}.i-tooltip--above .i-tooltip__arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none}.i-tooltip--below .i-tooltip__arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none}.i-tooltip--left .i-tooltip__arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none}.i-tooltip--right .i-tooltip__arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
472
472
|
}], propDecorators: { text: [{
|
|
473
473
|
type: Input
|
|
474
474
|
}], position: [{
|
|
475
475
|
type: Input
|
|
476
476
|
}] } });
|
|
477
477
|
|
|
478
|
+
/**
|
|
479
|
+
* Tooltip Directive
|
|
480
|
+
*
|
|
481
|
+
* Displays contextual tooltips on hover or focus.
|
|
482
|
+
* Tooltips are appended to document.body with z-index: 10000 to ensure
|
|
483
|
+
* they appear above all other elements including dialogs (z-index: 1000).
|
|
484
|
+
*
|
|
485
|
+
* @example
|
|
486
|
+
* <button iTooltip="Click to save" tooltipPosition="above">Save</button>
|
|
487
|
+
*/
|
|
478
488
|
class TooltipDirective {
|
|
479
489
|
elementRef;
|
|
480
490
|
renderer;
|
|
@@ -628,9 +638,11 @@ class TooltipDirective {
|
|
|
628
638
|
top = viewportHeight - tooltipRect.height - gap + scrollY;
|
|
629
639
|
}
|
|
630
640
|
// Apply final position and make visible
|
|
641
|
+
// Use z-index 10000 to ensure tooltips appear above dialogs (z-index: 1000)
|
|
631
642
|
this.renderer.setStyle(tooltipElement, 'position', 'absolute');
|
|
632
643
|
this.renderer.setStyle(tooltipElement, 'top', `${top}px`);
|
|
633
644
|
this.renderer.setStyle(tooltipElement, 'left', `${left}px`);
|
|
645
|
+
this.renderer.setStyle(tooltipElement, 'z-index', '10000');
|
|
634
646
|
this.renderer.setStyle(tooltipElement, 'visibility', 'visible');
|
|
635
647
|
}
|
|
636
648
|
destroyTooltip() {
|