fix(addon-charts): make hint properties dynamic (#2774)

package.json

@@ -24,6 +24,8 @@
     "scripts": {
         "postinstall": "ts-node ./scripts/postinstall.ts",
         "start": "nx serve",
+        "start:default": "nx serve-default demo",
+        "start:shadow": "nx serve-shadow demo",
         "build:ssr": "nx build && nx run demo:server:production",
         "prerender": "nx run demo:prerender",
         "i18n": "nx xi18n --output-path src/locale",

projects/addon-charts/components/bar-chart/bar-chart.component.ts

@@ -16,7 +16,13 @@ import {
     tuiPure,
     tuiSum,
 } from '@taiga-ui/cdk';
-import {TuiDriver, TuiHintOptionsDirective, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {
+    TuiDriver,
+    TuiHintOptionsDirective,
+    tuiHintOptionsProvider,
+    TuiSizeL,
+    TuiSizeS,
+} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 
@@ -33,6 +39,7 @@ const VALUE_ERROR = `All arrays must be of the same length`;
     templateUrl: `./bar-chart.template.html`,
     styleUrls: [`./bar-chart.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    viewProviders: [tuiHintOptionsProvider({direction: `top`})],
 })
 export class TuiBarChartComponent {
     private readonly autoIdString: string;

projects/addon-charts/components/bar-chart/bar-chart.template.html

@@ -1,6 +1,5 @@
 <div
     *ngFor="let set of transposed; let index = index"
-    tuiHintDirection="top"
     class="t-wrapper"
     [class.t-wrapper_hoverable]="!!hintContent"
     [class.t-wrapper_hovered]="drivers.get(index) | async"

projects/addon-charts/components/line-chart/line-chart.component.ts

@@ -22,7 +22,12 @@ import {
     TuiStringHandler,
     tuiZoneOptimized,
 } from '@taiga-ui/cdk';
-import {TuiDriver, TuiHintOptionsDirective, TuiPoint} from '@taiga-ui/core';
+import {
+    TuiDriver,
+    TuiHintOptionsDirective,
+    tuiHintOptionsProvider,
+    TuiPoint,
+} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable, Subject} from 'rxjs';
 import {distinctUntilChanged} from 'rxjs/operators';
@@ -34,6 +39,7 @@ import {TuiLineChartHintDirective} from './line-chart-hint.directive';
     templateUrl: `./line-chart.template.html`,
     styleUrls: [`./line-chart.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    viewProviders: [tuiHintOptionsProvider({direction: `top`})],
 })
 export class TuiLineChartComponent {
     private readonly _hovered$ = new Subject<number>();

projects/addon-charts/components/line-chart/line-chart.template.html

@@ -54,7 +54,6 @@
             <!-- TODO: Fix hint type -->
             <div
                 *ngIf="value.length > 1 || dots"
-                tuiHintDirection="top"
                 class="t-column"
                 [class.t-column_hovered]="hovered === index"
                 [class.t-column_hint_hovered]="drivers.get(index) | async"

projects/addon-charts/components/pie-chart/pie-chart.component.ts

@@ -17,7 +17,12 @@ import {
     tuiPure,
     tuiSum,
 } from '@taiga-ui/cdk';
-import {TuiHintOptionsDirective, TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
+import {
+    TuiHintOptionsDirective,
+    tuiHintOptionsProvider,
+    TuiSizeXL,
+    TuiSizeXS,
+} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 const RADII = {
@@ -40,6 +45,9 @@ const TRANSFORM = {
     templateUrl: `./pie-chart.template.html`,
     styleUrls: [`./pie-chart.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    viewProviders: [
+        tuiHintOptionsProvider({direction: `top-right`, appearance: `onDark`}),
+    ],
 })
 export class TuiPieChartComponent {
     private readonly autoIdString: string;

projects/addon-charts/components/pie-chart/pie-chart.template.html

@@ -34,8 +34,6 @@
             fill="currentColor"
             automation-id="tui-pie-chart__segment"
             tuiHintPointer
-            tuiHintAppearance="onDark"
-            tuiHintDirection="top-right"
             d=""
             class="t-segment"
             [attr.transform]="getTransform(index)"

projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html

@@ -25,6 +25,7 @@
                 type="text"
                 automation-id="tui-input-card-grouped__card"
                 inputmode="numeric"
+                translate="no"
                 class="t-input t-input_card"
                 [class.t-input_inert]="cardPrefilled"
                 [class.t-input_hidden]="!card.length && focused"
@@ -41,6 +42,7 @@
                 (focus)="(0)"
             />
             <span
+                translate="no"
                 aria-hidden="true"
                 class="t-collapsed"
                 [attr.data-before]="masked"
@@ -74,6 +76,7 @@
                 placeholder="00/00"
                 automation-id="tui-input-card-grouped__expire"
                 inputmode="numeric"
+                translate="no"
                 class="t-input"
                 [class.t-input_inert]="!expireFocusable"
                 [attr.id]="idExpire"
@@ -105,6 +108,7 @@
                 type="text"
                 automation-id="tui-input-card-grouped__cvc"
                 inputmode="numeric"
+                translate="no"
                 class="t-input"
                 [class.t-input_prefilled]="cvcPrefilled"
                 [placeholder]="cvcPrefilled ? '•••' : exampleTextCVC"

projects/addon-commerce/components/input-cvc/input-cvc.template.html

@@ -19,7 +19,7 @@
     <input
         tuiTextfield
         inputmode="numeric"
-        [attr.autocomplete]="autocomplete"
-        [attr.placeholder]="computedPlaceholder"
+        [autocomplete]="autocomplete"
+        [placeholder]="computedPlaceholder"
     />
 </tui-primitive-textfield>

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

@@ -14,6 +14,7 @@ import {
     TuiHorizontalDirection,
     TuiVerticalDirection,
 } from '@taiga-ui/core/types';
+import {tuiOverrideOptions} from '@taiga-ui/core/utils';
 
 /**
  * Safe space around host and screen edges
@@ -52,19 +53,7 @@ export const tuiDropdownOptionsProvider: (
         [new Optional(), TuiDropdownOptionsDirective],
         [new SkipSelf(), TUI_DROPDOWN_OPTIONS],
     ],
-    useFactory: (
-        directive: TuiDropdownOptionsDirective | null,
-        options: TuiDropdownOptions,
-    ): TuiDropdownOptions => {
-        const result = directive || {...options};
-
-        Object.keys(override).forEach(key => {
-            // Update directive props with new defaults before inputs are processed
-            (result as any)[key] = override[key as keyof TuiDropdownOptions];
-        });
-
-        return result;
-    },
+    useFactory: tuiOverrideOptions(override),
 });
 
 @Directive({

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

@@ -4,7 +4,7 @@ import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract';
 import {merge, Observable, of, Subject} from 'rxjs';
 import {delay, switchMap} from 'rxjs/operators';
 
-import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options';
+import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options.directive';
 
 @Directive({
     selector: `[tuiHint]:not(ng-container)`,

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

@@ -1,8 +1,52 @@
-import {Directive, forwardRef, Inject, Input, SkipSelf} from '@angular/core';
+import {
+    Directive,
+    FactoryProvider,
+    forwardRef,
+    Inject,
+    InjectionToken,
+    Input,
+    Optional,
+    SkipSelf,
+} from '@angular/core';
 import {AbstractTuiController, tuiDefaultProp} from '@taiga-ui/cdk';
+import {TuiHintDirection} from '@taiga-ui/core/types';
+import {tuiOverrideOptions} from '@taiga-ui/core/utils';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options';
+export interface TuiHintOptions {
+    readonly direction: TuiHintDirection;
+    readonly showDelay: number;
+    readonly hideDelay: number;
+    readonly appearance: string;
+    readonly icon: PolymorpheusContent;
+}
+
+/** Default values for hint options */
+export const TUI_HINT_DEFAULT_OPTIONS: TuiHintOptions = {
+    direction: `bottom-left`,
+    showDelay: 500,
+    hideDelay: 200,
+    appearance: ``,
+    icon: `tuiIconTooltipLarge`,
+};
+
+export const TUI_HINT_OPTIONS = new InjectionToken<TuiHintOptions>(
+    `[TUI_HINT_OPTIONS] Default parameters for hint directive`,
+    {
+        factory: () => TUI_HINT_DEFAULT_OPTIONS,
+    },
+);
+
+export const tuiHintOptionsProvider: (
+    options: Partial<TuiHintOptions>,
+) => FactoryProvider = (override: Partial<TuiHintOptions>) => ({
+    provide: TUI_HINT_OPTIONS,
+    deps: [
+        [new Optional(), TuiHintOptionsDirective],
+        [new SkipSelf(), TUI_HINT_OPTIONS],
+    ],
+    useFactory: tuiOverrideOptions(override),
+});
 
 @Directive({
     selector: `[tuiHintContent]`,

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

@@ -9,7 +9,7 @@ import {
 import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core/constants';
 import {TuiHintDirection, TuiPoint} from '@taiga-ui/core/types';
 
-import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options';
+import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options.directive';
 
 const OFFSET = 8;
 const ARROW_OFFSET = 22;

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

@@ -20,7 +20,7 @@ import {TuiHintService} from '@taiga-ui/core/services';
 import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 import {TUI_HINT_COMPONENT} from './hint.providers';
-import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options';
+import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options.directive';
 
 @Directive({
     selector: `[tuiHint]:not(ng-container)`,
@@ -44,9 +44,9 @@ export class TuiHintDirective<C>
     @Input(`tuiHintContext`)
     context?: C;
 
-    @Input(`tuiHintAppearance`)
+    @Input()
     @tuiDefaultProp()
-    appearance = this.options.appearance;
+    tuiHintAppearance: string | null = null;
 
     constructor(
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
@@ -59,6 +59,10 @@ export class TuiHintDirective<C>
         readonly activeZone?: TuiActiveZoneDirective | null,
     ) {}
 
+    get appearance(): string {
+        return this.tuiHintAppearance ?? this.options.appearance;
+    }
+
     ngOnChanges(): void {
         if (!this.content) {
             this.toggle(false);

projects/core/directives/hint/index.ts

@@ -7,7 +7,6 @@ export * from './hint-driver.directive';
 export * from './hint-host.directive';
 export * from './hint-hover.directive';
 export * from './hint-manual.directive';
-export * from './hint-options';
 export * from './hint-options.directive';
 export * from './hint-pointer.directive';
 export * from './hint-position.directive';

projects/core/utils/miscellaneous/index.ts

@@ -2,4 +2,5 @@ export * from './get-border';
 export * from './icons-path-factory';
 export * from './is-editing-key';
 export * from './is-presumed-html-string';
+export * from './override-options';
 export * from './size-bigger';

projects/core/utils/miscellaneous/override-options.ts

@@ -0,0 +1,14 @@
+export function tuiOverrideOptions<T>(
+    override: Partial<T>,
+): (directive: T | null, options: T) => T {
+    return (directive, options) => {
+        const result = directive || {...options};
+
+        Object.keys(override).forEach(key => {
+            // Update directive props with new defaults before inputs are processed
+            (result as any)[key] = override[key as keyof T];
+        });
+
+        return result;
+    };
+}

projects/demo-integrations/cypress/tests/kit/input/input.cy.ts

@@ -48,7 +48,7 @@ describe(`Input`, () => {
         it(`input overflow due to placeholder`, () => {
             cy.viewport(400, 812);
             cy.tuiVisit(
-                `${INPUT_PAGE_URL}/API?tuiMode=null&icon=tuiIconSearch&iconAlign=left&pseudoFocused=true&attr.placeholder=Lorem%20ipsum%20dolor%20sit%20amet,%20consectetur%20adipiscing%20elit,%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore`,
+                `${INPUT_PAGE_URL}/API?tuiMode=null&icon=tuiIconSearch&iconAlign=left&pseudoFocused=true&placeholder=Lorem%20ipsum%20dolor%20sit%20amet,%20consectetur%20adipiscing%20elit,%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore`,
             );
 
             cy.get(`.t-input-wrapper`)
@@ -69,7 +69,7 @@ describe(`Input`, () => {
         const characters = `big, placeholder, qwerty, jackson, yellow and more`;
 
         cy.viewport(450, 300).tuiVisit(
-            `components/input/API?tuiMode=null&pseudoFocused=true&attr.placeholder=${characters}`,
+            `components/input/API?tuiMode=null&pseudoFocused=true&placeholder=${characters}`,
         );
 
         cy.get(`#demoContent`)

projects/demo/src/modules/charts/bar-chart/bar-chart.module.ts

@@ -1,10 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAxesModule, TuiBarChartModule} from '@taiga-ui/addon-charts';
 import {TuiMoneyModule} from '@taiga-ui/addon-commerce';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHintModule, TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiDataListWrapperModule, TuiSelectModule} from '@taiga-ui/kit';
 
 import {ExampleTuiBarChartComponent} from './bar-chart.component';
 import {TuiBarChartExample1} from './examples/1';
@@ -13,13 +15,15 @@ import {TuiBarChartExample2} from './examples/2';
 @NgModule({
     imports: [
         CommonModule,
-        RouterModule,
+        FormsModule,
         TuiAxesModule,
         TuiBarChartModule,
         TuiHintModule,
         TuiNotificationModule,
         TuiLinkModule,
         TuiMoneyModule,
+        TuiSelectModule,
+        TuiDataListWrapperModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBarChartComponent)),
     ],