@lesterarte/sefin-ui 0.0.72 → 0.0.74
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.
|
@@ -902,11 +902,11 @@ class IconComponent {
|
|
|
902
902
|
return token ?? trimmed;
|
|
903
903
|
}
|
|
904
904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconComponent, isStandalone: true, selector: "sefin-icon", inputs: { name: "name", size: "size", color: "color", rotate: "rotate", flipH: "flipH", flipV: "flipV", class: "class" }, ngImport: i0, template: "<span\n [class]=\"iconClasses\"\n [attr.aria-hidden]=\"true\"\n role=\"img\"\n
|
|
905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconComponent, isStandalone: true, selector: "sefin-icon", inputs: { name: "name", size: "size", color: "color", rotate: "rotate", flipH: "flipH", flipV: "flipV", class: "class" }, ngImport: i0, template: "<span\n [class]=\"iconClasses\"\n [attr.aria-hidden]=\"true\"\n role=\"img\"\n>\n <span class=\"sefin-icon__svg-wrap\" [innerHTML]=\"iconSvgHtml\"></span>\n</span>\n\n", styles: [".sefin-icon{display:flex;align-items:center;justify-content:center;width:100%;flex-shrink:0;vertical-align:middle;box-sizing:border-box;color:currentColor;line-height:1}.sefin-icon--xs{width:var(--sefin-icon-size-xs);height:var(--sefin-icon-size-xs);font-size:var(--sefin-icon-size-xs)}.sefin-icon--xs ::ng-deep svg{width:var(--sefin-icon-size-xs);height:var(--sefin-icon-size-xs)}.sefin-icon--sm{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm);font-size:16px}.sefin-icon--sm ::ng-deep svg{width:16px;height:16px}.sefin-icon--md{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg);font-size:var(--sefin-icon-size-lg)}.sefin-icon--md ::ng-deep svg{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-icon--lg{width:var(--sefin-icon-size-xl);height:var(--sefin-icon-size-xl);font-size:32px}.sefin-icon--lg ::ng-deep svg{width:32px;height:32px}.sefin-icon--xl{width:var(--sefin-icon-size-2xl);height:var(--sefin-icon-size-2xl);font-size:var(--sefin-icon-size-2xl)}.sefin-icon--xl ::ng-deep svg{width:var(--sefin-icon-size-2xl);height:var(--sefin-icon-size-2xl)}.sefin-icon--rotate{transform:rotate(180deg)}.sefin-icon--flip-h{transform:scaleX(-1)}.sefin-icon--flip-v{transform:scaleY(-1)}.sefin-icon--flip-h.sefin-icon--flip-v{transform:scale(-1)}.sefin-icon__svg-wrap{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.sefin-icon ::ng-deep svg{display:block!important;width:100%!important;height:100%!important;max-width:100%;max-height:100%;flex-shrink:0}.sefin-icon>*{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
906
906
|
}
|
|
907
907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconComponent, decorators: [{
|
|
908
908
|
type: Component,
|
|
909
|
-
args: [{ selector: 'sefin-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [class]=\"iconClasses\"\n [attr.aria-hidden]=\"true\"\n role=\"img\"\n
|
|
909
|
+
args: [{ selector: 'sefin-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [class]=\"iconClasses\"\n [attr.aria-hidden]=\"true\"\n role=\"img\"\n>\n <span class=\"sefin-icon__svg-wrap\" [innerHTML]=\"iconSvgHtml\"></span>\n</span>\n\n", styles: [".sefin-icon{display:flex;align-items:center;justify-content:center;width:100%;flex-shrink:0;vertical-align:middle;box-sizing:border-box;color:currentColor;line-height:1}.sefin-icon--xs{width:var(--sefin-icon-size-xs);height:var(--sefin-icon-size-xs);font-size:var(--sefin-icon-size-xs)}.sefin-icon--xs ::ng-deep svg{width:var(--sefin-icon-size-xs);height:var(--sefin-icon-size-xs)}.sefin-icon--sm{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm);font-size:16px}.sefin-icon--sm ::ng-deep svg{width:16px;height:16px}.sefin-icon--md{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg);font-size:var(--sefin-icon-size-lg)}.sefin-icon--md ::ng-deep svg{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-icon--lg{width:var(--sefin-icon-size-xl);height:var(--sefin-icon-size-xl);font-size:32px}.sefin-icon--lg ::ng-deep svg{width:32px;height:32px}.sefin-icon--xl{width:var(--sefin-icon-size-2xl);height:var(--sefin-icon-size-2xl);font-size:var(--sefin-icon-size-2xl)}.sefin-icon--xl ::ng-deep svg{width:var(--sefin-icon-size-2xl);height:var(--sefin-icon-size-2xl)}.sefin-icon--rotate{transform:rotate(180deg)}.sefin-icon--flip-h{transform:scaleX(-1)}.sefin-icon--flip-v{transform:scaleY(-1)}.sefin-icon--flip-h.sefin-icon--flip-v{transform:scale(-1)}.sefin-icon__svg-wrap{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.sefin-icon ::ng-deep svg{display:block!important;width:100%!important;height:100%!important;max-width:100%;max-height:100%;flex-shrink:0}.sefin-icon>*{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
|
|
910
910
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { name: [{
|
|
911
911
|
type: Input
|
|
912
912
|
}], size: [{
|
|
@@ -1237,11 +1237,11 @@ class IconButtonComponent {
|
|
|
1237
1237
|
.join(' ');
|
|
1238
1238
|
}
|
|
1239
1239
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1240
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconButtonComponent, isStandalone: true, selector: "sefin-icon-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", borderRadius: "borderRadius", rounded: "rounded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button
|
|
1240
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconButtonComponent, isStandalone: true, selector: "sefin-icon-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", borderRadius: "borderRadius", rounded: "rounded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [type]=\"type\"\n [disabled]=\"disabled\"\n [class]=\"buttonClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <span class=\"sefin-icon-button__icon\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out}.sefin-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;max-width:100%;max-height:100%}.sefin-icon-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-icon-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-icon-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-icon-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-icon-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-icon-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-icon-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-icon-button{cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-sizing:border-box}.sefin-icon-button:focus-visible{outline:none}.sefin-icon-button--sm{width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);min-width:var(--sefin-component-height-sm);min-height:var(--sefin-component-height-sm)}.sefin-icon-button--md{width:var(--sefin-component-height-md);height:var(--sefin-component-height-md);min-width:var(--sefin-component-height-md);min-height:var(--sefin-component-height-md)}.sefin-icon-button--lg{width:var(--sefin-component-height-lg);height:var(--sefin-component-height-lg);min-width:var(--sefin-component-height-lg);min-height:var(--sefin-component-height-lg)}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:var(--sefin-color-brand-white)}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:var(--sefin-color-brand-white)}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button__icon svg{display:block;flex-shrink:0}.sefin-icon-button--sm .sefin-icon-button__icon svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-icon-button--md .sefin-icon-button__icon svg{width:var(--sefin-icon-size-md);height:var(--sefin-icon-size-md)}.sefin-icon-button--lg .sefin-icon-button__icon svg{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-icon-button:not(.sefin-icon-button--sm):not(.sefin-icon-button--md):not(.sefin-icon-button--lg) .sefin-icon-button__icon svg{width:1em;height:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1241
1241
|
}
|
|
1242
1242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
1243
1243
|
type: Component,
|
|
1244
|
-
args: [{ selector: 'sefin-icon-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button
|
|
1244
|
+
args: [{ selector: 'sefin-icon-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [type]=\"type\"\n [disabled]=\"disabled\"\n [class]=\"buttonClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <span class=\"sefin-icon-button__icon\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out}.sefin-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;max-width:100%;max-height:100%}.sefin-icon-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-icon-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-icon-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-icon-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-icon-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-icon-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-icon-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-icon-button{cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-sizing:border-box}.sefin-icon-button:focus-visible{outline:none}.sefin-icon-button--sm{width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);min-width:var(--sefin-component-height-sm);min-height:var(--sefin-component-height-sm)}.sefin-icon-button--md{width:var(--sefin-component-height-md);height:var(--sefin-component-height-md);min-width:var(--sefin-component-height-md);min-height:var(--sefin-component-height-md)}.sefin-icon-button--lg{width:var(--sefin-component-height-lg);height:var(--sefin-component-height-lg);min-width:var(--sefin-component-height-lg);min-height:var(--sefin-component-height-lg)}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:var(--sefin-color-brand-white)}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:var(--sefin-color-brand-white)}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button__icon svg{display:block;flex-shrink:0}.sefin-icon-button--sm .sefin-icon-button__icon svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-icon-button--md .sefin-icon-button__icon svg{width:var(--sefin-icon-size-md);height:var(--sefin-icon-size-md)}.sefin-icon-button--lg .sefin-icon-button__icon svg{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-icon-button:not(.sefin-icon-button--sm):not(.sefin-icon-button--md):not(.sefin-icon-button--lg) .sefin-icon-button__icon svg{width:1em;height:1em}\n"] }]
|
|
1245
1245
|
}], propDecorators: { variant: [{
|
|
1246
1246
|
type: Input
|
|
1247
1247
|
}], size: [{
|
|
@@ -2496,8 +2496,11 @@ class TooltipComponent {
|
|
|
2496
2496
|
tooltipContent;
|
|
2497
2497
|
tooltipTrigger;
|
|
2498
2498
|
isVisible = false;
|
|
2499
|
+
/** Fixed position in viewport; set when visible so tooltip escapes parent stacking context */
|
|
2500
|
+
fixedPosition = null;
|
|
2499
2501
|
showTimeout;
|
|
2500
2502
|
hideTimeout;
|
|
2503
|
+
positionScheduled = false;
|
|
2501
2504
|
constructor(cdr) {
|
|
2502
2505
|
this.cdr = cdr;
|
|
2503
2506
|
}
|
|
@@ -2506,6 +2509,44 @@ class TooltipComponent {
|
|
|
2506
2509
|
document.addEventListener('click', this.handleOutsideClick);
|
|
2507
2510
|
}
|
|
2508
2511
|
}
|
|
2512
|
+
ngAfterViewChecked() {
|
|
2513
|
+
if (this.positionScheduled && this.isVisible && this.tooltipTrigger?.nativeElement && this.tooltipContent?.nativeElement) {
|
|
2514
|
+
this.positionScheduled = false;
|
|
2515
|
+
this.updateFixedPosition();
|
|
2516
|
+
}
|
|
2517
|
+
}
|
|
2518
|
+
/** Position tooltip with fixed coordinates so it is not clipped by parent stacking context (e.g. table, drawer). */
|
|
2519
|
+
updateFixedPosition() {
|
|
2520
|
+
const trigger = this.tooltipTrigger.nativeElement.getBoundingClientRect();
|
|
2521
|
+
const tooltipEl = this.tooltipContent.nativeElement;
|
|
2522
|
+
const tooltipRect = tooltipEl.getBoundingClientRect();
|
|
2523
|
+
const gap = 8;
|
|
2524
|
+
let top;
|
|
2525
|
+
let left;
|
|
2526
|
+
switch (this.position) {
|
|
2527
|
+
case 'top':
|
|
2528
|
+
top = trigger.top - tooltipRect.height - gap;
|
|
2529
|
+
left = trigger.left + (trigger.width - tooltipRect.width) / 2;
|
|
2530
|
+
break;
|
|
2531
|
+
case 'bottom':
|
|
2532
|
+
top = trigger.bottom + gap;
|
|
2533
|
+
left = trigger.left + (trigger.width - tooltipRect.width) / 2;
|
|
2534
|
+
break;
|
|
2535
|
+
case 'left':
|
|
2536
|
+
top = trigger.top + (trigger.height - tooltipRect.height) / 2;
|
|
2537
|
+
left = trigger.left - tooltipRect.width - gap;
|
|
2538
|
+
break;
|
|
2539
|
+
case 'right':
|
|
2540
|
+
top = trigger.top + (trigger.height - tooltipRect.height) / 2;
|
|
2541
|
+
left = trigger.right + gap;
|
|
2542
|
+
break;
|
|
2543
|
+
default:
|
|
2544
|
+
top = trigger.top - tooltipRect.height - gap;
|
|
2545
|
+
left = trigger.left + (trigger.width - tooltipRect.width) / 2;
|
|
2546
|
+
}
|
|
2547
|
+
this.fixedPosition = { top, left };
|
|
2548
|
+
this.cdr.markForCheck();
|
|
2549
|
+
}
|
|
2509
2550
|
ngOnDestroy() {
|
|
2510
2551
|
this.clearTimeouts();
|
|
2511
2552
|
if (this.trigger === 'click') {
|
|
@@ -2542,6 +2583,8 @@ class TooltipComponent {
|
|
|
2542
2583
|
this.clearTimeouts();
|
|
2543
2584
|
this.showTimeout = setTimeout(() => {
|
|
2544
2585
|
this.isVisible = true;
|
|
2586
|
+
this.fixedPosition = null;
|
|
2587
|
+
this.positionScheduled = true;
|
|
2545
2588
|
this.cdr.markForCheck();
|
|
2546
2589
|
}, this.delay);
|
|
2547
2590
|
}
|
|
@@ -2549,6 +2592,8 @@ class TooltipComponent {
|
|
|
2549
2592
|
this.clearTimeouts();
|
|
2550
2593
|
this.hideTimeout = setTimeout(() => {
|
|
2551
2594
|
this.isVisible = false;
|
|
2595
|
+
this.fixedPosition = null;
|
|
2596
|
+
this.positionScheduled = false;
|
|
2552
2597
|
this.cdr.markForCheck();
|
|
2553
2598
|
}, 50);
|
|
2554
2599
|
}
|
|
@@ -2585,17 +2630,18 @@ class TooltipComponent {
|
|
|
2585
2630
|
`sefin-tooltip--${this.position}`,
|
|
2586
2631
|
`sefin-tooltip--radius-${this.borderRadius}`,
|
|
2587
2632
|
this.isVisible ? 'sefin-tooltip--visible' : '',
|
|
2633
|
+
this.fixedPosition !== null ? 'sefin-tooltip--fixed' : '',
|
|
2588
2634
|
this.class,
|
|
2589
2635
|
]
|
|
2590
2636
|
.filter(Boolean)
|
|
2591
2637
|
.join(' ');
|
|
2592
2638
|
}
|
|
2593
2639
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2594
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "sefin-tooltip", inputs: { text: "text", position: "position", trigger: "trigger", delay: "delay", disabled: "disabled", borderRadius: "borderRadius", class: "class" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "click": "onClick($event)", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: ["tooltipTrigger"], descendants: true }], ngImport: i0, template: "<div\n #tooltipTrigger\n class=\"sefin-tooltip__wrapper\"\n [class.sefin-tooltip__wrapper--active]=\"isVisible\"\n>\n <ng-content></ng-content>\n
|
|
2640
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "sefin-tooltip", inputs: { text: "text", position: "position", trigger: "trigger", delay: "delay", disabled: "disabled", borderRadius: "borderRadius", class: "class" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "click": "onClick($event)", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: ["tooltipTrigger"], descendants: true }], ngImport: i0, template: "<div\n #tooltipTrigger\n class=\"sefin-tooltip__wrapper\"\n [class.sefin-tooltip__wrapper--active]=\"isVisible\"\n>\n <ng-content></ng-content>\n<div\n #tooltipContent\n [class]=\"tooltipClasses\"\n [style.top.px]=\"fixedPosition?.top\"\n [style.left.px]=\"fixedPosition?.left\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n>\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:block;width:100%;position:relative;box-sizing:border-box}.sefin-tooltip__wrapper--active{z-index:var(--sefin-z-index-tooltip, 99999)}.sefin-tooltip{position:absolute;z-index:var(--sefin-z-index-tooltip, 99999);pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--fixed{position:fixed;z-index:var(--sefin-z-index-tooltip, 99999);bottom:auto;right:auto}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-md, 0 4px 6px rgba(0, 0, 0, .1));max-width:200px;white-space:normal;word-wrap:break-word;box-sizing:border-box}.sefin-tooltip--radius-none .sefin-tooltip__content{border-radius:var(--sefin-radius-none)}.sefin-tooltip--radius-sm .sefin-tooltip__content{border-radius:var(--sefin-radius-sm)}.sefin-tooltip--radius-md .sefin-tooltip__content{border-radius:var(--sefin-radius-md)}.sefin-tooltip--radius-lg .sefin-tooltip__content{border-radius:var(--sefin-radius-lg)}.sefin-tooltip--radius-xl .sefin-tooltip__content{border-radius:var(--sefin-radius-xl)}.sefin-tooltip--radius-2xl .sefin-tooltip__content{border-radius:var(--sefin-radius-2xl)}.sefin-tooltip--radius-full .sefin-tooltip__content{border-radius:var(--sefin-radius-full)}.sefin-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.sefin-tooltip--fixed.sefin-tooltip--top,.sefin-tooltip--fixed.sefin-tooltip--bottom,.sefin-tooltip--fixed.sefin-tooltip--left,.sefin-tooltip--fixed.sefin-tooltip--right{inset:auto;transform:scale(.95)}.sefin-tooltip--fixed.sefin-tooltip--top.sefin-tooltip--visible,.sefin-tooltip--fixed.sefin-tooltip--bottom.sefin-tooltip--visible,.sefin-tooltip--fixed.sefin-tooltip--left.sefin-tooltip--visible,.sefin-tooltip--fixed.sefin-tooltip--right.sefin-tooltip--visible{transform:scale(1)}.sefin-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--top.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--top .sefin-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--sefin-color-surface-inverse, #333) transparent transparent transparent}.sefin-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--bottom.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--bottom .sefin-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--sefin-color-surface-inverse, #333) transparent}.sefin-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--left.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--left .sefin-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--sefin-color-surface-inverse, #333)}.sefin-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--right.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--right .sefin-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--sefin-color-surface-inverse, #333) transparent transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2595
2641
|
}
|
|
2596
2642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
2597
2643
|
type: Component,
|
|
2598
|
-
args: [{ selector: 'sefin-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #tooltipTrigger\n class=\"sefin-tooltip__wrapper\"\n [class.sefin-tooltip__wrapper--active]=\"isVisible\"\n>\n <ng-content></ng-content>\n
|
|
2644
|
+
args: [{ selector: 'sefin-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #tooltipTrigger\n class=\"sefin-tooltip__wrapper\"\n [class.sefin-tooltip__wrapper--active]=\"isVisible\"\n>\n <ng-content></ng-content>\n<div\n #tooltipContent\n [class]=\"tooltipClasses\"\n [style.top.px]=\"fixedPosition?.top\"\n [style.left.px]=\"fixedPosition?.left\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n>\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:block;width:100%;position:relative;box-sizing:border-box}.sefin-tooltip__wrapper--active{z-index:var(--sefin-z-index-tooltip, 99999)}.sefin-tooltip{position:absolute;z-index:var(--sefin-z-index-tooltip, 99999);pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--fixed{position:fixed;z-index:var(--sefin-z-index-tooltip, 99999);bottom:auto;right:auto}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-md, 0 4px 6px rgba(0, 0, 0, .1));max-width:200px;white-space:normal;word-wrap:break-word;box-sizing:border-box}.sefin-tooltip--radius-none .sefin-tooltip__content{border-radius:var(--sefin-radius-none)}.sefin-tooltip--radius-sm .sefin-tooltip__content{border-radius:var(--sefin-radius-sm)}.sefin-tooltip--radius-md .sefin-tooltip__content{border-radius:var(--sefin-radius-md)}.sefin-tooltip--radius-lg .sefin-tooltip__content{border-radius:var(--sefin-radius-lg)}.sefin-tooltip--radius-xl .sefin-tooltip__content{border-radius:var(--sefin-radius-xl)}.sefin-tooltip--radius-2xl .sefin-tooltip__content{border-radius:var(--sefin-radius-2xl)}.sefin-tooltip--radius-full .sefin-tooltip__content{border-radius:var(--sefin-radius-full)}.sefin-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.sefin-tooltip--fixed.sefin-tooltip--top,.sefin-tooltip--fixed.sefin-tooltip--bottom,.sefin-tooltip--fixed.sefin-tooltip--left,.sefin-tooltip--fixed.sefin-tooltip--right{inset:auto;transform:scale(.95)}.sefin-tooltip--fixed.sefin-tooltip--top.sefin-tooltip--visible,.sefin-tooltip--fixed.sefin-tooltip--bottom.sefin-tooltip--visible,.sefin-tooltip--fixed.sefin-tooltip--left.sefin-tooltip--visible,.sefin-tooltip--fixed.sefin-tooltip--right.sefin-tooltip--visible{transform:scale(1)}.sefin-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--top.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--top .sefin-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--sefin-color-surface-inverse, #333) transparent transparent transparent}.sefin-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--bottom.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--bottom .sefin-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--sefin-color-surface-inverse, #333) transparent}.sefin-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--left.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--left .sefin-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--sefin-color-surface-inverse, #333)}.sefin-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--right.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--right .sefin-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--sefin-color-surface-inverse, #333) transparent transparent}\n"] }]
|
|
2599
2645
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{
|
|
2600
2646
|
type: Input
|
|
2601
2647
|
}], position: [{
|