feat(core): Hint support 12 directions

taiga-family · Aug 1, 2022 · adbbc9d · adbbc9d
1 parent 330dd3f
commit adbbc9d
Show file tree

Hide file tree

Showing 104 changed files with 857 additions and 1,401 deletions.
diff --git a/projects/addon-charts/components/bar-chart/bar-chart.component.ts b/projects/addon-charts/components/bar-chart/bar-chart.component.ts
@@ -67,13 +67,6 @@ export class TuiBarChartComponent {
         return this.max || this.getMax(this.value, this.collapsed);
     }
 
-    @tuiPure
-    getContentContext(index: number): TuiContextWithImplicit<number> {
-        return {
-            $implicit: index,
-        };
-    }
-
     readonly percentMapper: TuiMapper<readonly number[], number> = (
         set,
         collapsed: boolean,

diff --git a/projects/addon-charts/components/bar-chart/bar-chart.style.less b/projects/addon-charts/components/bar-chart/bar-chart.style.less
@@ -40,7 +40,3 @@
         box-shadow: 0 0 0 2px var(--tui-focus);
     }
 }
-
-.t-text {
-    white-space: pre-wrap;
-}
diff --git a/projects/addon-charts/components/bar-chart/bar-chart.template.html b/projects/addon-charts/components/bar-chart/bar-chart.template.html
@@ -29,10 +29,9 @@
         #hint="polymorpheus"
         polymorpheus
     >
-        <div
-            *polymorpheusOutlet="hintContent as text; context: getContentContext(index)"
-            class="t-text"
-            [textContent]="text"
-        ></div>
+        <!-- TODO: Consider adding context to Hint directive -->
+        <ng-container *polymorpheusOutlet="hintContent as text; context: {$implicit: index}">
+            {{ text }}
+        </ng-container>
     </ng-template>
 </div>
diff --git a/projects/addon-charts/components/line-chart/line-chart.style.less b/projects/addon-charts/components/line-chart/line-chart.style.less
@@ -77,10 +77,6 @@
     }
 }
 
-.t-text {
-    white-space: pre-wrap;
-}
-
 .t-hint {
     .shadow();
     position: absolute;

diff --git a/projects/addon-charts/components/line-chart/line-chart.template.html b/projects/addon-charts/components/line-chart/line-chart.template.html
@@ -82,20 +82,21 @@
                 [style.bottom.%]="getBottom(point[1])"
             ></div>
             <ng-template #hint>
+                <!-- TODO: Consider adding context to Hint directive -->
                 <ng-container *ngIf="hintDirective; else single">
-                    <div
+                    <ng-container
                         *polymorpheusOutlet="hintDirective.hint as text; context: getContentContext(point, index)"
-                        class="t-text"
-                        [textContent]="text"
-                    ></div>
+                    >
+                        {{ text }}
+                    </ng-container>
                 </ng-container>
                 <ng-template #single>
                     <!-- TODO: Polymorpheus fix type -->
-                    <div
+                    <ng-container
                         *polymorpheusOutlet="$any(hintContent) as text; context: {$implicit: point, index: index}"
-                        class="t-text"
-                        [textContent]="text"
-                    ></div>
+                    >
+                        {{ text }}
+                    </ng-container>
                 </ng-template>
             </ng-template>
         </ng-container>

diff --git a/projects/addon-charts/components/pie-chart/pie-chart.module.ts b/projects/addon-charts/components/pie-chart/pie-chart.module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiHoveredModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
-import {TuiPointerHintModule} from '@taiga-ui/core';
+import {TuiHintModule} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiPieChartComponent} from './pie-chart.component';
@@ -13,7 +13,7 @@ import {TuiPieChartDirective} from './pie-chart.directive';
         TuiRepeatTimesModule,
         TuiHoveredModule,
         PolymorpheusModule,
-        TuiPointerHintModule,
+        TuiHintModule,
     ],
     declarations: [TuiPieChartComponent, TuiPieChartDirective],
     exports: [TuiPieChartComponent],

diff --git a/projects/addon-charts/components/pie-chart/pie-chart.style.less b/projects/addon-charts/components/pie-chart/pie-chart.style.less
@@ -54,7 +54,3 @@
 .t-placeholder {
     fill: var(--tui-base-03);
 }
-
-.t-text {
-    white-space: pre-wrap;
-}
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.template.html b/projects/addon-charts/components/pie-chart/pie-chart.template.html
@@ -33,14 +33,15 @@
             *tuiRepeatTimes="let index of segments.length"
             fill="currentColor"
             automation-id="tui-pie-chart__segment"
+            tuiHintPointer
             tuiHintMode="onDark"
             tuiHintDirection="top-right"
             d=""
             class="t-segment"
             [attr.transform]="getTransform(index)"
             [style.color]="getColor(index)"
             [tuiPieChart]="segments[index]"
-            [tuiPointerHint]="getHint(hint)"
+            [tuiHint]="getHint(hint)"
             (tuiHoveredChange)="onHovered($event, index)"
         >
             <ng-template #hint>
@@ -56,9 +57,8 @@
     #template
     let-index
 >
-    <div
-        *polymorpheusOutlet="hintContent as text; context: {$implicit: index}"
-        class="t-text"
-        [textContent]="text"
-    ></div>
+    <!-- TODO: Consider adding context to Hint directive -->
+    <ng-container *polymorpheusOutlet="hintContent as text; context: {$implicit: index}">
+        {{ text }}
+    </ng-container>
 </ng-template>
diff --git a/projects/addon-preview/components/preview/preview.module.ts b/projects/addon-preview/components/preview/preview.module.ts
@@ -8,7 +8,6 @@ import {
     TuiButtonModule,
     TuiHintModule,
     TuiLoaderModule,
-    TuiManualHintModule,
     TuiSvgModule,
 } from '@taiga-ui/core';
 import {TuiSliderModule} from '@taiga-ui/kit';
@@ -31,7 +30,6 @@ import {TuiPreviewZoomComponent} from './zoom/preview-zoom.component';
         TuiSliderModule,
         TuiHintModule,
         TuiDragModule,
-        TuiManualHintModule,
         TuiResizeModule,
         TuiSvgModule,
         TuiLoaderModule,

diff --git a/projects/addon-preview/components/preview/zoom/preview-zoom.template.html b/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
@@ -13,8 +13,8 @@
             <div
                 tuiHintMode="onDark"
                 tuiHintDirection="top-right"
-                [tuiManualHint]="hint"
-                [tuiManualHintShow]="!!(hintShow$ | async)"
+                [tuiHint]="hint"
+                [tuiHintManual]="!!(hintShow$ | async)"
             ></div>
 
             <ng-template #hint>

diff --git a/projects/core/abstract/abstract-driver.directive.ts b/projects/core/abstract/abstract-driver.directive.ts
@@ -0,0 +1,20 @@
+import {Directive, Inject, Self} from '@angular/core';
+import {TuiDestroyService} from '@taiga-ui/cdk';
+import {Observable} from 'rxjs';
+import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
+
+import {TuiDriver} from './driver';
+import {TuiVehicle} from './vehicle';
+
+@Directive()
+export class AbstractTuiDriverDirective {
+    constructor(
+        @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,
+        @Inject(TuiDriver) driver$: Observable<boolean>,
+        @Inject(TuiVehicle) vehicle: TuiVehicle,
+    ) {
+        driver$.pipe(distinctUntilChanged(), takeUntil(destroy$)).subscribe(value => {
+            vehicle.toggle(value);
+        });
+    }
+}
diff --git a/projects/core/abstract/abstract-hint-options.ts b/projects/core/abstract/abstract-hint-options.ts
diff --git a/projects/core/abstract/abstract-hint.ts b/projects/core/abstract/abstract-hint.ts
diff --git a/projects/core/abstract/driver.ts b/projects/core/abstract/driver.ts
@@ -0,0 +1,11 @@
+import {ExistingProvider, Type} from '@angular/core';
+import {Observable} from 'rxjs';
+
+export abstract class TuiDriver extends Observable<boolean> {}
+
+export function tuiAsDriver(useExisting: Type<TuiDriver>): ExistingProvider {
+    return {
+        provide: TuiDriver,
+        useExisting,
+    };
+}
diff --git a/projects/core/abstract/index.ts b/projects/core/abstract/index.ts
@@ -1,4 +1,7 @@
+export * from './abstract-driver.directive';
 export * from './abstract-dropdown';
-export * from './abstract-hint';
-export * from './abstract-hint-options';
 export * from './abstract-textfield-host';
+export * from './driver';
+export * from './position-accessor';
+export * from './rect-accessor';
+export * from './vehicle';
diff --git a/projects/core/abstract/position-accessor.ts b/projects/core/abstract/position-accessor.ts
@@ -0,0 +1,15 @@
+import {ExistingProvider, Type} from '@angular/core';
+import {TuiPoint} from '@taiga-ui/core/types';
+
+export abstract class TuiPositionAccessor {
+    abstract getPosition(rect: ClientRect): TuiPoint;
+}
+
+export function tuiAsPositionAccessor(
+    useExisting: Type<TuiPositionAccessor>,
+): ExistingProvider {
+    return {
+        provide: TuiPositionAccessor,
+        useExisting,
+    };
+}
diff --git a/projects/core/abstract/rect-accessor.ts b/projects/core/abstract/rect-accessor.ts
@@ -0,0 +1,12 @@
+import {ExistingProvider, Type} from '@angular/core';
+
+export abstract class TuiRectAccessor {
+    abstract getClientRect(): ClientRect;
+}
+
+export function tuiAsRectAccessor(useExisting: Type<TuiRectAccessor>): ExistingProvider {
+    return {
+        provide: TuiRectAccessor,
+        useExisting,
+    };
+}
diff --git a/projects/core/abstract/vehicle.ts b/projects/core/abstract/vehicle.ts
@@ -0,0 +1,12 @@
+import {ExistingProvider, Type} from '@angular/core';
+
+export abstract class TuiVehicle {
+    abstract toggle(value: boolean): void;
+}
+
+export function tuiAsVehicle(useExisting: Type<TuiVehicle>): ExistingProvider {
+    return {
+        provide: TuiVehicle,
+        useExisting,
+    };
+}