refactor(core)!: replace TUI_DATE_FORMAT, TUI_DATE_SEPARATOR with single observable token

projects/cdk/abstract/control.ts

@@ -1,6 +1,13 @@
 /// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
 import type {OnDestroy, OnInit, Provider, Type} from '@angular/core';
-import {ChangeDetectorRef, Directive, HostBinding, inject, Input} from '@angular/core';
+import {
+    ChangeDetectorRef,
+    DestroyRef,
+    Directive,
+    HostBinding,
+    inject,
+    Input,
+} from '@angular/core';
 import type {AbstractControl, ControlValueAccessor} from '@angular/forms';
 import {NgControl, NgModel} from '@angular/forms';
 import {EMPTY_FUNCTION} from '@taiga-ui/cdk/constants';
@@ -43,7 +50,9 @@ export abstract class AbstractTuiControl<T>
     protected onTouched = EMPTY_FUNCTION;
     protected onChange = EMPTY_FUNCTION;
     protected readonly fallbackValue = this.getFallbackValue();
+    // TODO: remove after migrating to takeUntilDestroyed()
     protected readonly destroy$ = new Subject<void>();
+    protected destroyRef = inject(DestroyRef);
     protected readonly cdr = inject(ChangeDetectorRef);
     protected readonly valueTransformer = inject<TuiControlValueTransformer<T>>(
         AbstractTuiValueTransformer,

projects/cdk/date-time/index.ts

@@ -1,7 +1,5 @@
 export * from './date-clamp';
 export * from './date-fillers';
-export * from './date-format';
-export * from './date-separator';
 export * from './date-time';
 export * from './day';
 export * from './day-range';

projects/cdk/date-time/date-separator.ts → projects/cdk/utils/miscellaneous/change-date-separator.ts

@@ -1,10 +1,4 @@
-import {tuiCreateToken} from '@taiga-ui/cdk/utils';
-
-/**
- * Date separator for Taiga UI components
- */
-export const TUI_DATE_SEPARATOR = tuiCreateToken('.');
-
+/* internal */
 export const changeDateSeparator = (
     dateString: string,
     newDateSeparator: string,

projects/cdk/utils/miscellaneous/index.ts

@@ -1,6 +1,7 @@
 export * from './array-remove';
 export * from './array-shallow-equals';
 export * from './array-toggle';
+export * from './change-date-separator';
 export * from './clean-object';
 export * from './create-options';
 export * from './create-token';

projects/core/constants/default-date-format.ts

@@ -0,0 +1,6 @@
+import type {TuiDateFormatSettings} from '@taiga-ui/core/interfaces';
+
+export const TUI_DEFAULT_DATE_FORMAT: TuiDateFormatSettings = {
+    mode: 'DMY',
+    separator: '.',
+};

projects/core/constants/index.ts

@@ -1,5 +1,6 @@
 export * from './cache-basting-payload';
 export * from './decimal-symbols';
+export * from './default-date-format';
 export * from './default-icons-path';
 export * from './default-marker-handler';
 export * from './default-number-format';

projects/core/directives/date-format/date-format.directive.ts

@@ -0,0 +1,32 @@
+import {Directive, forwardRef, inject, Input} from '@angular/core';
+import type {TuiDateFormatSettings} from '@taiga-ui/core/interfaces';
+import {TUI_DATE_FORMAT} from '@taiga-ui/core/tokens';
+import {combineLatest, map, Observable, ReplaySubject} from 'rxjs';
+
+@Directive({
+    standalone: true,
+    selector: '[tuiDateFormat]',
+    providers: [
+        {
+            provide: TUI_DATE_FORMAT,
+            useExisting: forwardRef(() => TuiDateFormatDirective),
+        },
+    ],
+})
+export class TuiDateFormatDirective extends Observable<TuiDateFormatSettings> {
+    private readonly settings = new ReplaySubject<Partial<TuiDateFormatSettings>>(1);
+    private readonly parent = inject(TUI_DATE_FORMAT, {skipSelf: true});
+
+    constructor() {
+        super(subscriber =>
+            combineLatest([this.parent, this.settings])
+                .pipe(map(([parent, settings]) => ({...parent, ...settings})))
+                .subscribe(subscriber),
+        );
+    }
+
+    @Input()
+    public set tuiDateFormat(format: Partial<TuiDateFormatSettings>) {
+        this.settings.next(format);
+    }
+}

projects/core/directives/date-format/index.ts

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

projects/core/directives/date-format/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/core/directives/index.ts

@@ -1,4 +1,5 @@
 export * from '@taiga-ui/core/directives/appearance';
+export * from '@taiga-ui/core/directives/date-format';
 export * from '@taiga-ui/core/directives/dropdown';
 export * from '@taiga-ui/core/directives/hint';
 export * from '@taiga-ui/core/directives/icons';

projects/core/directives/number-format/index.ts

@@ -1,2 +1 @@
 export * from './number-format.directive';
-export * from './number-format.module';

projects/core/directives/number-format/number-format.directive.ts

@@ -4,6 +4,7 @@ import {TUI_NUMBER_FORMAT} from '@taiga-ui/core/tokens';
 import {combineLatest, map, Observable, ReplaySubject} from 'rxjs';
 
 @Directive({
+    standalone: true,
     selector: '[tuiNumberFormat]',
     providers: [
         {

projects/core/interfaces/date-format-settings.ts

@@ -0,0 +1,16 @@
+import type {TuiDateMode} from '@taiga-ui/cdk';
+
+/**
+ * Formatting configuration for displayed dates
+ */
+export interface TuiDateFormatSettings {
+    /**
+     * Date format mode.
+     */
+    readonly mode: TuiDateMode;
+    /**
+     * Separator between date segments
+     * @example 10.02 ('.' by default)
+     */
+    readonly separator: string;
+}

projects/core/interfaces/index.ts

@@ -1,5 +1,6 @@
 export * from './data-list-accessor';
 export * from './data-list-host';
+export * from './date-format-settings';
 export * from './icon-error';
 export * from './media';
 export * from './number-format-settings';

projects/core/tokens/date-format.ts

@@ -0,0 +1,26 @@
+import type {InjectionToken, Provider} from '@angular/core';
+import {Optional, SkipSelf} from '@angular/core';
+import {tuiCreateToken} from '@taiga-ui/cdk';
+import {TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core/constants';
+import type {TuiDateFormatSettings} from '@taiga-ui/core/interfaces';
+import type {Observable} from 'rxjs';
+import {map, of} from 'rxjs';
+
+/**
+ * Formatting configuration for displayed dates
+ */
+export const TUI_DATE_FORMAT: InjectionToken<Observable<TuiDateFormatSettings>> =
+    tuiCreateToken(of(TUI_DEFAULT_DATE_FORMAT));
+
+export function tuiDateFormatProvider(options: Partial<TuiDateFormatSettings>): Provider {
+    return {
+        provide: TUI_DATE_FORMAT,
+        deps: [[new Optional(), new SkipSelf(), TUI_DATE_FORMAT]],
+        useFactory: (
+            parent: Observable<TuiDateFormatSettings> | null,
+        ): Observable<TuiDateFormatSettings> =>
+            (parent || of(TUI_DEFAULT_DATE_FORMAT)).pipe(
+                map(format => ({...format, ...options})),
+            ),
+    };
+}

projects/core/tokens/index.ts

@@ -3,6 +3,7 @@ export * from './assert-enabled';
 export * from './common-icon';
 export * from './data-list-accessor';
 export * from './data-list-host';
+export * from './date-format';
 export * from './day-type-handler';
 export * from './document-or-shadow-root';
 export * from './element-ref';

projects/demo/src/modules/app/app.routes.ts

@@ -618,15 +618,11 @@ export const ROUTES: Routes = [
             title: 'Input',
         },
     },
-    {
+    route({
         path: 'components/input-date',
-        loadChildren: async () =>
-            (await import('../components/input-date/input-date.module'))
-                .ExampleTuiInputDateModule,
-        data: {
-            title: 'InputDate',
-        },
-    },
+        title: 'InputDate',
+        loadComponent: async () => import('../components/input-date'),
+    }),
     {
         path: 'components/input-date-multi',
         loadChildren: async () =>
@@ -1781,8 +1777,12 @@ export const ROUTES: Routes = [
     route({
         path: 'directives/number-format',
         title: 'NumberFormat',
-        loadComponent: async () =>
-            import('../directives/number-format/number-format.component'),
+        loadComponent: async () => import('../directives/number-format'),
+    }),
+    route({
+        path: 'directives/date-format',
+        title: 'NumberFormat',
+        loadComponent: async () => import('../directives/date-format'),
     }),
 
     // UTILS

projects/demo/src/modules/app/pages.ts

@@ -1346,6 +1346,13 @@ export const pages: TuiDocPages = [
                 keywords: 'number, format, число, separator, precision, rounding, формат',
                 route: '/directives/number-format',
             },
+            {
+                section: 'Tools',
+                title: 'DateFormat',
+                keywords:
+                    'date, format, дата, separator, год, year, month, месяц, день, day, формат',
+                route: '/directives/date-format',
+            },
             {
                 section: 'Tools',
                 title: 'Touchable',

projects/demo/src/modules/components/abstract/number-format-documentation/number-format-documentation.template.html

@@ -17,7 +17,7 @@ <h6 class="tui-text_h6">
 </p>
 <p>
     Requires you to import
-    <code>TuiNumberFormatModule</code>
+    <code>TuiNumberFormatDirective</code>
     .
 </p>
 

projects/demo/src/modules/components/dialog/dialog.module.ts

@@ -17,7 +17,7 @@ import {
     TuiLinkModule,
     TuiLoaderModule,
     TuiNotificationModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -73,7 +73,7 @@ import {TuiDialogExampleComponent10} from './examples/10';
         PayExampleModalModule,
         TuiTextfieldControllerModule,
         TuiTextCodeModule,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
     ],
     declarations: [
         ExampleTuiDialogComponent,

projects/demo/src/modules/components/input-date-range/examples/3/index.ts

@@ -2,17 +2,15 @@ import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TUI_DATE_FORMAT, TUI_DATE_SEPARATOR, TuiDay, TuiDayRange} from '@taiga-ui/cdk';
+import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
+import {tuiDateFormatProvider} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-input-date-range-example-3',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [
-        {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
-        {provide: TUI_DATE_SEPARATOR, useValue: '/'},
-    ],
+    providers: [tuiDateFormatProvider({mode: 'YMD', separator: '/'})],
 })
 export class TuiInputDateRangeExample3 {
     protected readonly control = new FormControl(

projects/demo/src/modules/components/input-date-range/input-date-range.template.html

@@ -9,21 +9,17 @@
             is a field to input a range of dates.
         </p>
 
-        <h3>DI-tokens for date localization:</h3>
-        <dl>
-            <dt>
-                <code>TUI_DATE_FORMAT</code>
-            </dt>
-            <dd class="tui-space_bottom-5">
-                active date format (
-                <code>'DMY' | 'MDY' | 'YMD'</code>
-                )
-            </dd>
-            <dt>
-                <code>TUI_DATE_SEPARATOR</code>
-            </dt>
-            <dd>single-character date's separator (dot, slash etc.)</dd>
-        </dl>
+        <p>
+            Date formatting can be customized with
+            <a
+                fragment="date-format"
+                routerLink="/utils/tokens"
+                tuiLink
+            >
+                TUI_DATE_FORMAT
+            </a>
+            token.
+        </p>
         <p class="tui-space_bottom-9">
             <a
                 fragment="date-localization"

projects/demo/src/modules/components/input-date-time/examples/3/index.ts

@@ -2,17 +2,15 @@ import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TUI_DATE_FORMAT, TUI_DATE_SEPARATOR, TuiDay, TuiTime} from '@taiga-ui/cdk';
+import {TuiDay, TuiTime} from '@taiga-ui/cdk';
+import {tuiDateFormatProvider} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-input-date-time-example-3',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [
-        {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
-        {provide: TUI_DATE_SEPARATOR, useValue: '/'},
-    ],
+    providers: [tuiDateFormatProvider({mode: 'YMD', separator: '/'})],
 })
 export class TuiInputDateTimeExample3 {
     protected readonly control = new FormControl([

projects/demo/src/modules/components/input-date-time/input-date-time.template.html

@@ -9,21 +9,17 @@
             allows to input date and time
         </div>
 
-        <h3>DI-tokens for date localization:</h3>
-        <dl>
-            <dt>
-                <code>TUI_DATE_FORMAT</code>
-            </dt>
-            <dd class="tui-space_bottom-5">
-                active date format (
-                <code>'DMY' | 'MDY' | 'YMD'</code>
-                )
-            </dd>
-            <dt>
-                <code>TUI_DATE_SEPARATOR</code>
-            </dt>
-            <dd>single-character date's separator (dot, slash etc.)</dd>
-        </dl>
+        <p>
+            Date formatting can be customized with
+            <a
+                fragment="date-format"
+                routerLink="/utils/tokens"
+                tuiLink
+            >
+                TUI_DATE_FORMAT
+            </a>
+            token.
+        </p>
         <p class="tui-space_bottom-9">
             <a
                 fragment="date-localization"