feat(core): Tooltip add directive, move component to legacy (#7810)

Signed-off-by: waterplea <alexander@inkin.ru>
Co-authored-by: taiga-family-bot <taiga-family-bot@users.noreply.github.com>

projects/addon-commerce/components/thumbnail-card/thumbnail-card.component.ts

@@ -8,21 +8,19 @@ import {
 } from '@angular/core';
 import {TUI_PAYMENT_SYSTEM_ICONS} from '@taiga-ui/addon-commerce/tokens';
 import type {TuiPaymentSystem} from '@taiga-ui/addon-commerce/types';
-import type {TuiStringHandler} from '@taiga-ui/cdk';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
-import {TUI_ICON_RESOLVER, TuiIcon} from '@taiga-ui/core';
+import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
     selector: 'tui-thumbnail-card',
-    imports: [TuiIcon, NgIf],
+    imports: [TuiIcon, NgIf, TuiIconPipe],
     templateUrl: './thumbnail-card.template.html',
     styleUrls: ['./thumbnail-card.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiThumbnailCard {
     protected readonly paymentIcons = inject(TUI_PAYMENT_SYSTEM_ICONS);
-    protected readonly resolver = inject<TuiStringHandler<string>>(TUI_ICON_RESOLVER);
 
     @Input()
     @HostBinding('attr.data-size')

projects/addon-commerce/components/thumbnail-card/thumbnail-card.template.html

@@ -28,7 +28,7 @@
             <img
                 class="t-logo"
                 [alt]="paymentSystem"
-                [src]="resolver(paymentIcons[paymentSystem]).replace('Outline', '')"
+                [src]="paymentIcons[paymentSystem] | tuiIcon"
             />
         </ng-template>
     </ng-container>

projects/core/components/data-list/with-data-list.directive.ts

@@ -1,7 +1,7 @@
 import type {WritableSignal} from '@angular/core';
 import {ContentChild, Directive, TemplateRef} from '@angular/core';
 import {tuiDirectiveBinding} from '@taiga-ui/cdk';
-import {TuiDropdownDirective} from '@taiga-ui/core/directives';
+import {TuiDropdownDirective} from '@taiga-ui/core/directives/dropdown';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 
 import {TuiDataListDirective} from './data-list.directive';

projects/core/components/icon/icon.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import type {TuiStringHandler} from '@taiga-ui/cdk';
-import {TUI_ICON_RESOLVER} from '@taiga-ui/core/tokens';
+import {TUI_ICON, TUI_ICON_RESOLVER} from '@taiga-ui/core/tokens';
 
 @Component({
     standalone: true,
@@ -9,18 +9,16 @@ import {TUI_ICON_RESOLVER} from '@taiga-ui/core/tokens';
     host: {
         '[class._duo]': 'background',
         '[style.--t-mask]': '"url(" + resolver(icon) + ")"',
-        // TODO: remove Outline hack in 4.0
-        '[style.--t-mask-bg]':
-            'background ? "url(" + resolver(background).replace("Outline", "") + ")" : null',
+        '[style.--t-mask-bg]': 'background ? "url(" + resolver(background) + ")" : null',
     },
     styleUrls: ['./icon.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiIcon {
-    protected readonly resolver = inject<TuiStringHandler<string>>(TUI_ICON_RESOLVER);
+    protected readonly resolver: TuiStringHandler<string> = inject(TUI_ICON_RESOLVER);
 
     @Input()
-    public icon = '';
+    public icon = inject(TUI_ICON);
 
     @Input()
     public background = '';

projects/core/components/index.ts

@@ -15,4 +15,3 @@ export * from '@taiga-ui/core/components/root';
 export * from '@taiga-ui/core/components/scrollbar';
 export * from '@taiga-ui/core/components/spin-button';
 export * from '@taiga-ui/core/components/textfield';
-export * from '@taiga-ui/core/components/tooltip';

projects/core/components/label/label.directive.ts

@@ -27,7 +27,7 @@ class TuiLabelStyles {}
     standalone: true,
     selector: 'label[tuiLabel]',
     host: {
-        '[attr.for]': 'el.htmlFor || parent?.input.id',
+        '[attr.for]': 'el.htmlFor || parent?.id',
         '[class._textfield]': 'textfield',
     },
 })

projects/core/components/textfield/textfield.component.ts

@@ -105,6 +105,10 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
         return this.el.nativeElement;
     }
 
+    public get id(): string {
+        return this.el?.nativeElement.id || '';
+    }
+
     // TODO: Do not change to `this.input`, will be refactored
     public get focused(): boolean {
         return !!this.dropdown?.dropdown || tuiIsNativeFocused(this.el?.nativeElement);

projects/core/components/textfield/textfield.style.less

@@ -166,7 +166,7 @@
             & ~ .t-content {
                 opacity: var(--tui-disabled-opacity);
 
-                tui-tooltip {
+                [tuiTooltip] {
                     display: none;
                 }
             }

projects/core/components/textfield/textfield.template.html

@@ -18,7 +18,7 @@
         (click)="directive?.setValue('')"
         (pointerdown.silent.prevent)="input.focus()"
     ></button>
-    <ng-content select="tui-tooltip" />
+    <ng-content select="[tuiTooltip]" />
 </span>
 <span class="t-template">
     <ng-container *polymorpheusOutlet="content as text; context: {$implicit: control?.value, active: focused}">

projects/core/directives/hint/hint-describe.directive.ts

@@ -1,5 +1,4 @@
 import {DOCUMENT} from '@angular/common';
-import type {OnChanges} from '@angular/core';
 import {Directive, inject, Input, NgZone} from '@angular/core';
 import {
     tuiIfMap,
@@ -12,13 +11,13 @@ import {
 } from '@taiga-ui/cdk';
 import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/classes';
 import {
+    BehaviorSubject,
     debounce,
     distinctUntilChanged,
     fromEvent,
     map,
     merge,
     of,
-    ReplaySubject,
     skip,
     startWith,
     switchMap,
@@ -30,12 +29,12 @@ import {
     selector: '[tuiHintDescribe]',
     providers: [tuiAsDriver(TuiHintDescribe)],
 })
-export class TuiHintDescribe extends TuiDriver implements OnChanges {
-    private readonly zone = inject(NgZone);
+export class TuiHintDescribe extends TuiDriver {
     private readonly doc = inject(DOCUMENT);
     private readonly el = tuiInjectElement();
-    private readonly id$ = new ReplaySubject(1);
+    private readonly id$ = new BehaviorSubject('');
     private readonly stream$ = this.id$.pipe(
+        distinctUntilChanged(),
         tuiIfMap(() => fromEvent(this.doc, 'keydown', {capture: true}), tuiIsPresent),
         switchMap(() =>
             this.focused
@@ -49,25 +48,23 @@ export class TuiHintDescribe extends TuiDriver implements OnChanges {
         startWith(false),
         distinctUntilChanged(),
         skip(1),
-        tuiZoneOptimized(this.zone),
+        tuiZoneOptimized(inject(NgZone)),
     );
 
-    @Input()
-    public tuiHintDescribe?: string | null = '';
-
     public readonly type = 'hint';
 
     constructor() {
         super(subscriber => this.stream$.subscribe(subscriber));
     }
 
-    public ngOnChanges(): void {
-        this.id$.next(this.tuiHintDescribe);
+    @Input()
+    public set tuiHintDescribe(id: string | null | undefined) {
+        this.id$.next(id || '');
     }
 
     @tuiPure
     private get element(): HTMLElement {
-        return this.doc.getElementById(this.tuiHintDescribe || '') || this.el;
+        return this.doc.getElementById(this.id$.value || '') || this.el;
     }
 
     private get focused(): boolean {

projects/core/directives/hint/hint-options.directive.ts

@@ -37,7 +37,7 @@ export interface TuiHintOptions {
     readonly appearance: string;
     readonly direction: TuiHintDirection;
     readonly hideDelay: number;
-    readonly icon: PolymorpheusContent;
+    readonly icon: string;
     readonly showDelay: number;
 }
 

projects/core/directives/icons/icons.directive.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import type {TuiStringHandler} from '@taiga-ui/cdk';
 import {tuiWithStyles} from '@taiga-ui/cdk';
-import {TUI_ICON_RESOLVER} from '@taiga-ui/core/tokens';
+import {TUI_ICON, TUI_ICON_RESOLVER} from '@taiga-ui/core/tokens';
 
 @Component({
     standalone: true,
@@ -38,7 +38,7 @@ export class TuiIcons {
     protected readonly resolver = inject<TuiStringHandler<string>>(TUI_ICON_RESOLVER);
 
     @Input()
-    public iconLeft = '';
+    public iconLeft = inject(TUI_ICON);
 
     @Input()
     public iconRight = '';

projects/core/directives/index.ts

@@ -6,3 +6,4 @@ export * from '@taiga-ui/core/directives/icons';
 export * from '@taiga-ui/core/directives/number-format';
 export * from '@taiga-ui/core/directives/surface';
 export * from '@taiga-ui/core/directives/title';
+export * from '@taiga-ui/core/directives/tooltip';

projects/core/directives/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip.directive';

projects/core/directives/tooltip/tooltip.directive.ts

@@ -0,0 +1,107 @@
+import type {DoCheck, Signal} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Directive,
+    HostListener,
+    inject,
+    ViewEncapsulation,
+} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {TUI_IS_MOBILE, tuiDirectiveBinding, tuiWatch, tuiWithStyles} from '@taiga-ui/cdk';
+import {TuiTextfieldComponent} from '@taiga-ui/core/components/textfield';
+import {
+    TUI_APPEARANCE_OPTIONS,
+    TuiAppearance,
+} from '@taiga-ui/core/directives/appearance';
+import {
+    TUI_HINT_OPTIONS,
+    TuiHintDescribe,
+    TuiHintDirective,
+    TuiHintHoverDirective,
+} from '@taiga-ui/core/directives/hint';
+import {TUI_ICON} from '@taiga-ui/core/tokens';
+import type {TuiInteractiveState} from '@taiga-ui/core/types';
+import {map} from 'rxjs';
+
+@Component({
+    standalone: true,
+    template: '',
+    styleUrls: ['./tooltip.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-tooltip',
+    },
+})
+class TuiTooltipStyles {}
+
+@Directive({
+    standalone: true,
+    selector: 'tui-icon[tuiTooltip]',
+    providers: [
+        {
+            provide: TUI_APPEARANCE_OPTIONS,
+            useValue: {appearance: 'icon'},
+        },
+        {
+            provide: TUI_ICON,
+            useFactory: () => inject(TUI_HINT_OPTIONS).icon,
+        },
+    ],
+    hostDirectives: [
+        {
+            directive: TuiAppearance,
+            inputs: ['tuiAppearance: appearance'],
+        },
+        {
+            directive: TuiHintDescribe,
+            inputs: ['tuiHintDescribe'],
+        },
+        {
+            directive: TuiHintDirective,
+            inputs: ['tuiHint: tuiTooltip', 'tuiHintAppearance', 'tuiHintContext'],
+        },
+    ],
+    host: {tuiTooltip: ''},
+})
+export class TuiTooltip implements DoCheck {
+    private readonly textfield = inject(TuiTextfieldComponent, {optional: true});
+    private readonly isMobile = inject(TUI_IS_MOBILE);
+    private readonly describe = inject(TuiHintDescribe);
+    private readonly driver = inject(TuiHintHoverDirective);
+
+    protected readonly nothing = tuiWithStyles(TuiTooltipStyles);
+    protected readonly state = bindAppearanceState();
+
+    public ngDoCheck(): void {
+        if (this.textfield?.id) {
+            this.describe.tuiHintDescribe = this.textfield.id;
+        }
+    }
+
+    @HostListener('mousedown', ['$event'])
+    protected stopOnMobile(event: MouseEvent): void {
+        if (this.isMobile) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        this.driver.toggle();
+    }
+}
+
+function bindAppearanceState(): Signal<TuiInteractiveState | null> {
+    return tuiDirectiveBinding(
+        TuiAppearance,
+        'tuiAppearanceState',
+        toSignal(
+            inject(TuiHintHoverDirective).pipe(
+                map(hover => (hover ? 'hover' : null)),
+                tuiWatch(inject(ChangeDetectorRef)),
+            ),
+            {initialValue: null},
+        ),
+    );
+}

projects/core/directives/tooltip/tooltip.style.less

@@ -0,0 +1,6 @@
+[tuiTooltip] {
+    border: 0.25rem solid transparent;
+    border-radius: 100%;
+    cursor: pointer;
+    pointer-events: auto;
+}

projects/core/pipes/flag/flag.pipe.ts

@@ -20,6 +20,6 @@ export class TuiFlagPipe implements PipeTransform {
             return null;
         }
 
-        return `${this.staticPath}flags/${countryIsoCode}.svg`;
+        return `${this.staticPath}/icons/flags/${countryIsoCode}.svg`;
     }
 }

projects/core/pipes/flag/test/flag.pipe.spec.ts

@@ -6,7 +6,7 @@ describe('tuiFlagPipe', () => {
 
     beforeEach(() => {
         TestBed.overrideProvider(TUI_ASSETS_PATH, {
-            useValue: 'path/',
+            useValue: 'path',
         }).runInInjectionContext(() => {
             pipe = new TuiFlagPipe();
         });
@@ -17,10 +17,10 @@ describe('tuiFlagPipe', () => {
     });
 
     it('calculates flag path from TUI_SVG_OPTIONS & isoCode', () => {
-        expect(pipe.transform('RU')).toBe('path/flags/RU.svg');
+        expect(pipe.transform('RU')).toBe('path/icons/flags/RU.svg');
     });
 
     it('calculates flag path from isoCode', () => {
-        expect(pipe.transform('AD')).toBe('path/flags/AD.svg');
+        expect(pipe.transform('AD')).toBe('path/icons/flags/AD.svg');
     });
 });

projects/core/tokens/assets-path.ts

@@ -1,7 +1,7 @@
 import type {ValueProvider} from '@angular/core';
 import {tuiCreateToken} from '@taiga-ui/cdk';
 
-export const TUI_ASSETS_PATH = tuiCreateToken('assets/taiga-ui/icons/');
+export const TUI_ASSETS_PATH = tuiCreateToken('assets/taiga-ui');
 
 export function tuiAssetsPathProvider(useValue: string): ValueProvider {
     return {