feat(kit): create TUI_TIME_VALUE_TRANSFORMER for tui-input-time component

projects/core/tokens/data-list-host.ts

@@ -8,7 +8,7 @@ export const TUI_DATA_LIST_HOST = new InjectionToken<TuiDataListHost<unknown>>(
     '[TUI_DATA_LIST_HOST]',
 );
 
-export function tuiAsDataListHost(useExisting: Type<TuiDataListHost<unknown>>): Provider {
+export function tuiAsDataListHost<T>(useExisting: Type<TuiDataListHost<T>>): Provider {
     return {
         provide: TUI_DATA_LIST_HOST,
         useExisting,

projects/demo/src/modules/components/input-time/examples/6/index.html

@@ -1,39 +1,11 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
+<tui-input-time
+    [formControl]="control"
+    [items]="items"
 >
-    <tui-input-time
-        formControlName="testValue"
-        class="tui-space_bottom-3"
-        [tuiTextfieldCleaner]="true"
-    >
-        Choose a time
-    </tui-input-time>
+    Input time
+</tui-input-time>
 
-    <tui-input-time
-        formControlName="testValue2"
-        mode="HH:MM:SS"
-        class="tui-space_bottom-3"
-        [tuiTextfieldCleaner]="true"
-    >
-        Choose a time
-    </tui-input-time>
-
-    <tui-input-time
-        formControlName="testValue3"
-        class="tui-space_bottom-3"
-        [items]="items"
-        [tuiTextfieldCleaner]="true"
-    >
-        Choose a time
-    </tui-input-time>
-
-    <tui-input-time
-        formControlName="testValue4"
-        mode="HH:MM:SS"
-        [items]="items"
-        [tuiTextfieldCleaner]="true"
-    >
-        Choose a time
-    </tui-input-time>
-</form>
+<p>Stringified control value:</p>
+<p>
+    <code>{{ control.value }}</code>
+</p>

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

@@ -1,28 +1,36 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiTime} from '@taiga-ui/cdk';
-import {tuiCreateTimePeriods, tuiInputTimeOptionsProvider} from '@taiga-ui/kit';
+import {AbstractTuiValueTransformer, TuiTime} from '@taiga-ui/cdk';
+import {TUI_TIME_VALUE_TRANSFORMER, tuiCreateTimePeriods} from '@taiga-ui/kit';
+
+class ExampleTimeTransformer extends AbstractTuiValueTransformer<
+    TuiTime | null,
+    string | null
+> {
+    fromControlValue(controlValue: string): TuiTime | null {
+        return controlValue ? TuiTime.fromString(controlValue) : null;
+    }
+
+    toControlValue(time: TuiTime | null): string {
+        return time ? time.toString() : '';
+    }
+}
 
 @Component({
     selector: 'tui-input-time-example-6',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [
-        tuiInputTimeOptionsProvider({
-            nativePicker: true,
-        }),
+        {
+            provide: TUI_TIME_VALUE_TRANSFORMER,
+            useClass: ExampleTimeTransformer,
+        },
     ],
 })
 export class TuiInputTimeExample6 {
-    readonly testForm = new FormGroup({
-        testValue: new FormControl(new TuiTime(10, 30)),
-        testValue2: new FormControl(new TuiTime(10, 30, 0)),
-        testValue3: new FormControl(new TuiTime(14, 30)),
-        testValue4: new FormControl(new TuiTime(10, 30, 0)),
-    });
-
-    readonly items = tuiCreateTimePeriods(14, 16, [0, 30]);
+    readonly control = new FormControl('');
+    readonly items = tuiCreateTimePeriods();
 }

projects/demo/src/modules/components/input-time/examples/7/index.html

@@ -0,0 +1,39 @@
+<form
+    class="b-form"
+    [formGroup]="testForm"
+>
+    <tui-input-time
+        formControlName="testValue"
+        class="tui-space_bottom-3"
+        [tuiTextfieldCleaner]="true"
+    >
+        Choose a time
+    </tui-input-time>
+
+    <tui-input-time
+        formControlName="testValue2"
+        mode="HH:MM:SS"
+        class="tui-space_bottom-3"
+        [tuiTextfieldCleaner]="true"
+    >
+        Choose a time
+    </tui-input-time>
+
+    <tui-input-time
+        formControlName="testValue3"
+        class="tui-space_bottom-3"
+        [items]="items"
+        [tuiTextfieldCleaner]="true"
+    >
+        Choose a time
+    </tui-input-time>
+
+    <tui-input-time
+        formControlName="testValue4"
+        mode="HH:MM:SS"
+        [items]="items"
+        [tuiTextfieldCleaner]="true"
+    >
+        Choose a time
+    </tui-input-time>
+</form>

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

@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTime} from '@taiga-ui/cdk';
+import {tuiCreateTimePeriods, tuiInputTimeOptionsProvider} from '@taiga-ui/kit';
+
+@Component({
+    selector: 'tui-input-time-example-7',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+    providers: [
+        tuiInputTimeOptionsProvider({
+            nativePicker: true,
+        }),
+    ],
+})
+export class TuiInputTimeExample7 {
+    readonly testForm = new FormGroup({
+        testValue: new FormControl(new TuiTime(10, 30)),
+        testValue2: new FormControl(new TuiTime(10, 30, 0)),
+        testValue3: new FormControl(new TuiTime(14, 30)),
+        testValue4: new FormControl(new TuiTime(10, 30, 0)),
+    });
+
+    readonly items = tuiCreateTimePeriods(14, 16, [0, 30]);
+}

projects/demo/src/modules/components/input-time/input-time.component.ts

@@ -65,6 +65,11 @@ export class ExampleTuiInputTimeComponent extends AbstractExampleTuiControl {
         HTML: import('./examples/6/index.html?raw'),
     };
 
+    readonly example7: TuiDocExample = {
+        TypeScript: import('./examples/7/index.ts?raw'),
+        HTML: import('./examples/7/index.html?raw'),
+    };
+
     override cleaner = false;
 
     control = new FormControl(new TuiTime(15, 30), Validators.required);

projects/demo/src/modules/components/input-time/input-time.module.ts

@@ -24,6 +24,7 @@ import {TuiInputTimeExample3} from './examples/3';
 import {TuiInputTimeExample4} from './examples/4';
 import {TuiInputTimeExample5} from './examples/5';
 import {TuiInputTimeExample6} from './examples/6';
+import {TuiInputTimeExample7} from './examples/7';
 import {ExampleTuiInputTimeComponent} from './input-time.component';
 
 @NgModule({
@@ -52,6 +53,7 @@ import {ExampleTuiInputTimeComponent} from './input-time.component';
         TuiInputTimeExample4,
         TuiInputTimeExample5,
         TuiInputTimeExample6,
+        TuiInputTimeExample7,
     ],
     exports: [ExampleTuiInputTimeComponent],
 })

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

@@ -4,10 +4,32 @@
     type="components"
 >
     <ng-template pageTab>
-        <p>
+        <div class="tui-space_bottom-9">
             <code>InputTime</code>
             allows input time in HH:MM format
-        </p>
+        </div>
+
+        <h3>DI-tokens for input-configurations:</h3>
+        <dl>
+            <dt>
+                <code>TUI_TIME_VALUE_TRANSFORMER</code>
+            </dt>
+            <dd>
+                custom format of control output (
+                <code>TuiTime | null</code>
+                is default).
+                <p>
+                    <a
+                        fragment="string-control-output"
+                        routerLink="."
+                        tuiLink
+                    >
+                        See example
+                    </a>
+                    with string as control's output.
+                </p>
+            </dd>
+        </dl>
 
         <tui-doc-example
             id="base"
@@ -50,10 +72,18 @@
             <tui-input-time-example-5></tui-input-time-example-5>
         </tui-doc-example>
 
+        <tui-doc-example
+            id="string-control-output"
+            heading="With control's output as string"
+            [content]="example6"
+        >
+            <tui-input-time-example-6></tui-input-time-example-6>
+        </tui-doc-example>
+
         <tui-doc-example
             id="native"
             heading="Native input time"
-            [content]="example6"
+            [content]="example7"
         >
             <tui-notification class="tui-space_bottom-5">
                 Please note that iOS Safari doesn't support native picker in modes other than HH:MM

projects/kit/components/input-time/input-time.component.ts

@@ -15,6 +15,7 @@ import {MaskitoOptions} from '@maskito/core';
 import {maskitoTimeOptionsGenerator} from '@maskito/kit';
 import {
     AbstractTuiNullableControl,
+    AbstractTuiValueTransformer,
     ALWAYS_FALSE_HANDLER,
     TUI_IS_IOS,
     TUI_IS_MOBILE,
@@ -23,6 +24,7 @@ import {
     tuiAsFocusableItemAccessor,
     TuiBooleanHandler,
     TuiFocusableElementAccessor,
+    TuiIdentityMatcher,
     tuiIsElement,
     tuiIsInput,
     tuiIsNativeFocused,
@@ -43,7 +45,7 @@ import {
 } from '@taiga-ui/core';
 import {TUI_SELECT_OPTION} from '@taiga-ui/kit/components/select-option';
 import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
-import {TUI_TIME_TEXTS} from '@taiga-ui/kit/tokens';
+import {TUI_TIME_TEXTS, TUI_TIME_VALUE_TRANSFORMER} from '@taiga-ui/kit/tokens';
 import {Observable, timer} from 'rxjs';
 import {map, takeUntil} from 'rxjs/operators';
 
@@ -104,8 +106,11 @@ export class TuiInputTimeComponent
         @Inject(TUI_IS_IOS) private readonly isIos: boolean,
         @Inject(TUI_TEXTFIELD_SIZE)
         private readonly textfieldSize: TuiTextfieldSizeDirective,
+        @Optional()
+        @Inject(TUI_TIME_VALUE_TRANSFORMER)
+        override readonly valueTransformer: AbstractTuiValueTransformer<TuiTime | null> | null,
     ) {
-        super(control, cdr);
+        super(control, cdr, valueTransformer);
     }
 
     @HostBinding('attr.data-size')
@@ -190,6 +195,13 @@ export class TuiInputTimeComponent
         this.open = !this.open;
     }
 
+    readonly identityMatcher: TuiIdentityMatcher<TuiTime> = (
+        controlValue: TuiTime,
+        dropdownValue: TuiTime,
+    ) =>
+        controlValue instanceof TuiTime &&
+        controlValue.valueOf() === dropdownValue.valueOf();
+
     onValueChange(value: string): void {
         this.open = !!this.items.length;