feat(experimental): Radio add identityMatcher support (#6929)

taiga-family · Mar 4, 2024 · 6ca6efd · 6ca6efd
1 parent 936a14b
commit 6ca6efd
Show file tree

Hide file tree

Showing 21 changed files with 144 additions and 48 deletions.
diff --git a/projects/addon-charts/components/legend-item/legend-item.template.html b/projects/addon-charts/components/legend-item/legend-item.template.html
@@ -7,7 +7,7 @@
     [pseudoHover]="active || null"
 >
     <div class="t-wrapper">
-        <ng-content select="tui-primitive-checkbox"></ng-content>
+        <ng-content select="[tuiCheckbox]"></ng-content>
         <span
             class="t-dot"
             [style.backgroundColor]="color || 'var(--tui-primary)'"

diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts
@@ -30,7 +30,7 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
     },
     {
         from: {name: 'TuiRadioModule', moduleSpecifier: '@taiga-ui/experimental'},
-        to: {name: 'TuiRadioModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: {name: 'TuiRadioComponent', moduleSpecifier: '@taiga-ui/kit'},
     },
     {
         from: {name: 'TuiAvatarModule', moduleSpecifier: '@taiga-ui/experimental'},

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-radio.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-radio.spec.ts
@@ -25,12 +25,12 @@ import { TuiRadioModule } from "@taiga-ui/experimental";
 export class TestComponent {
 }`;
 
-const COMPONENT_AFTER = `import { TuiRadioModule } from "@taiga-ui/kit";
+const COMPONENT_AFTER = `import { TuiRadioComponent } from "@taiga-ui/kit";
 
 @Component({
     standalone: true,
     templateUrl: './test.template.html',
-    imports: [TuiRadioModule]
+    imports: [TuiRadioComponent]
 })
 export class TestComponent {
 }`;

diff --git a/projects/demo/src/modules/charts/legend-item/examples/2/index.html b/projects/demo/src/modules/charts/legend-item/examples/2/index.html
@@ -21,7 +21,12 @@
             (click)="onClick(index)"
             (keydown.delete)="toggle(index)"
         >
-            <tui-primitive-checkbox [value]="!item.disabled"></tui-primitive-checkbox>
+            <input
+                size="s"
+                tuiCheckbox
+                type="checkbox"
+                [checked]="!item.disabled"
+            />
             <span>{{ data[index] | tuiAmount: 'RUB' | async }}</span>
             <tui-svg
                 src="tuiIconClose"

diff --git a/projects/demo/src/modules/charts/legend-item/legend-item.module.ts b/projects/demo/src/modules/charts/legend-item/legend-item.module.ts
@@ -5,11 +5,8 @@ import {TuiLegendItemModule, TuiRingChartModule} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHoveredModule} from '@taiga-ui/cdk';
-import {
-    TuiNotificationModule,
-    TuiPrimitiveCheckboxModule,
-    TuiSvgModule,
-} from '@taiga-ui/core';
+import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiCheckboxModule} from '@taiga-ui/experimental';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiLegendItemExample1} from './examples/1';
@@ -21,14 +18,14 @@ import {ExampleTuiLegendItemComponent} from './legend-item.component';
         CommonModule,
         TuiLegendItemModule,
         TuiRingChartModule,
-        TuiPrimitiveCheckboxModule,
         TuiSvgModule,
         TuiNotificationModule,
         PolymorpheusModule,
         TuiHoveredModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLegendItemComponent)),
         TuiAmountPipe,
+        TuiCheckboxModule,
     ],
     declarations: [
         ExampleTuiLegendItemComponent,

diff --git a/projects/demo/src/modules/components/block/block.module.ts b/projects/demo/src/modules/components/block/block.module.ts
@@ -7,7 +7,7 @@ import {TuiGroupDirective, TuiTooltipModule} from '@taiga-ui/core';
 import {
     TuiCheckboxModule,
     TuiIconModule,
-    TuiRadioModule,
+    TuiRadioComponent,
     TuiTitleModule,
     TuiToggleModule,
 } from '@taiga-ui/experimental';
@@ -28,7 +28,7 @@ import {TuiBlockExample3} from './examples/3';
         TuiAvatarComponent,
         TuiTooltipModule,
         TuiCheckboxModule,
-        TuiRadioModule,
+        TuiRadioComponent,
         TuiFadeDirective,
         TuiTitleModule,
         TuiToggleModule,

diff --git a/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.component.less b/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.component.less
@@ -17,11 +17,6 @@
                 letter-spacing: 0.1px;
             }
         }
-
-        tui-primitive-checkbox tui-wrapper {
-            color: #313132 !important;
-            background: #f6f7f8 !important;
-        }
     }
 }
 

diff --git a/projects/demo/src/modules/components/group/group.module.ts b/projects/demo/src/modules/components/group/group.module.ts
@@ -12,7 +12,7 @@ import {
     TuiModeModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiButtonModule, TuiRadioModule, TuiTitleModule} from '@taiga-ui/experimental';
+import {TuiButtonModule, TuiRadioComponent, TuiTitleModule} from '@taiga-ui/experimental';
 import {
     TuiBadgeDirective,
     TuiBlockDirective,
@@ -56,7 +56,7 @@ import {ExampleTuiGroupComponent} from './group.component';
         TuiHintModule,
         TuiMultiSelectModule,
         TuiBlockDirective,
-        TuiRadioModule,
+        TuiRadioComponent,
         tuiGetDocModules(ExampleTuiGroupComponent),
         TuiTitleModule,
     ],

diff --git a/projects/demo/src/modules/experimental/label/label.module.ts b/projects/demo/src/modules/experimental/label/label.module.ts
@@ -8,7 +8,7 @@ import {
     TuiCheckboxModule,
     TuiIconModule,
     TuiLabelDirective,
-    TuiRadioModule,
+    TuiRadioComponent,
     TuiTextfieldComponent,
     TuiTextfieldDirective,
     TuiTitleModule,
@@ -32,7 +32,7 @@ import {ExampleTuiLabelComponent} from './label.component';
         TuiCheckboxModule,
         TuiTitleModule,
         TuiExamplePipe,
-        TuiRadioModule,
+        TuiRadioComponent,
         TuiSetupComponent,
         tuiGetDocModules(ExampleTuiLabelComponent),
         TuiToggleModule,

diff --git a/projects/demo/src/modules/experimental/radio/examples/2/index.html b/projects/demo/src/modules/experimental/radio/examples/2/index.html
@@ -0,0 +1,45 @@
+<button
+    tuiButton
+    (click)="value = {test: 'value'}"
+>
+    Set copy
+</button>
+<p>
+    <label tuiLabel>
+        <input
+            name="test"
+            tuiRadio
+            type="radio"
+            [identityMatcher]="identityMatcher"
+            [value]="{test: 'value'}"
+            [(ngModel)]="value"
+        />
+        value
+    </label>
+</p>
+<p>
+    <label tuiLabel>
+        <input
+            name="test"
+            tuiRadio
+            type="radio"
+            [identityMatcher]="identityMatcher"
+            [value]="{test: 'test'}"
+            [(ngModel)]="value"
+        />
+        test
+    </label>
+</p>
+<p>
+    <label tuiLabel>
+        <input
+            name="test"
+            tuiRadio
+            type="radio"
+            [identityMatcher]="identityMatcher"
+            [value]="{test: 'item'}"
+            [(ngModel)]="value"
+        />
+        item
+    </label>
+</p>
diff --git a/projects/demo/src/modules/experimental/radio/examples/2/index.ts b/projects/demo/src/modules/experimental/radio/examples/2/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-radio-example-2',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiRadioExample2 {
+    protected value: any = null;
+    protected identityMatcher = (a: any, b: any): boolean => a?.test === b?.test;
+}
diff --git a/projects/demo/src/modules/experimental/radio/examples/import/import-module.md b/projects/demo/src/modules/experimental/radio/examples/import/import-module.md
@@ -1,12 +1,12 @@
 ```ts
 import {NgModule} from '@angular/core';
-import {TuiRadioModule} from '@taiga-ui/experimental';
+import {TuiRadioComponent} from '@taiga-ui/experimental';
 // ...
 
 @NgModule({
   imports: [
     // ...
-    TuiRadioModule,
+    TuiRadioComponent,
   ],
 })
 export class MyModule {}

diff --git a/projects/demo/src/modules/experimental/radio/radio.component.ts b/projects/demo/src/modules/experimental/radio/radio.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-radio',
@@ -15,9 +15,4 @@ export class ExampleTuiRadioComponent {
     protected readonly exampleHtml: TuiRawLoaderContent = import(
         './examples/import/insert-template.md?raw'
     );
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
 }
diff --git a/projects/demo/src/modules/experimental/radio/radio.module.ts b/projects/demo/src/modules/experimental/radio/radio.module.ts
@@ -1,12 +1,19 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiExamplePipe} from '@demo/utils';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiPlatformModule} from '@taiga-ui/cdk';
 import {TuiNotificationModule} from '@taiga-ui/core';
-import {TuiRadioModule} from '@taiga-ui/experimental';
+import {
+    TuiButtonModule,
+    TuiLabelDirective,
+    TuiRadioComponent,
+    TuiRadioDirective,
+} from '@taiga-ui/experimental';
 
 import {TuiRadioExample1} from './examples/1';
+import {TuiRadioExample2} from './examples/2';
 import {ExampleTuiRadioComponent} from './radio.component';
 
 @NgModule({
@@ -16,10 +23,14 @@ import {ExampleTuiRadioComponent} from './radio.component';
         CommonModule,
         TuiNotificationModule,
         TuiPlatformModule,
-        TuiRadioModule,
+        TuiRadioComponent,
         tuiGetDocModules(ExampleTuiRadioComponent),
+        TuiButtonModule,
+        TuiExamplePipe,
+        TuiLabelDirective,
+        TuiRadioDirective,
     ],
-    declarations: [ExampleTuiRadioComponent, TuiRadioExample1],
+    declarations: [ExampleTuiRadioComponent, TuiRadioExample1, TuiRadioExample2],
     exports: [ExampleTuiRadioComponent],
 })
 export class ExampleTuiRadioModule {}
diff --git a/projects/demo/src/modules/experimental/radio/radio.template.html b/projects/demo/src/modules/experimental/radio/radio.template.html
@@ -1,7 +1,7 @@
 <tui-doc-page
     header="Radio"
     package="EXPERIMENTAL"
-    type="components"
+    type="experimental"
 >
     <ng-template pageTab>
         <tui-notification status="warning">
@@ -12,10 +12,19 @@
 
         <p>A radio component that is able to imitate native control on mobile platforms.</p>
 
+        <tui-notification status="warning">
+            Due to internal Angular implementation of radio buttons, you are required to add
+            <code>name</code>
+            attribute to your
+            <code>input</code>
+            tag, unless you are using
+            <code>formControlName</code>
+        </tui-notification>
+
         <tui-doc-example
             id="platforms"
             heading="Platforms"
-            [content]="example1"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 Use
@@ -24,6 +33,14 @@
             </tui-notification>
             <tui-radio-example-1></tui-radio-example-1>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="identity"
+            heading="Identity matcher"
+            [content]="2 | tuiExample: 'html,ts'"
+        >
+            <tui-radio-example-2></tui-radio-example-2>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab="Setup">

diff --git a/projects/demo/src/modules/markup/form/form.module.ts b/projects/demo/src/modules/markup/form/form.module.ts
@@ -14,7 +14,7 @@ import {
 import {
     TuiCheckboxModule,
     TuiLabelDirective,
-    TuiRadioModule,
+    TuiRadioComponent,
 } from '@taiga-ui/experimental';
 import {
     TuiBlockDirective,
@@ -69,7 +69,7 @@ import {FormComponent} from './form.component';
         TuiHintModule,
         TuiDataListModule,
         TuiDataListWrapperModule,
-        TuiRadioModule,
+        TuiRadioComponent,
         tuiGetDocModules(FormComponent),
         TuiCheckboxModule,
         TuiLabelDirective,

diff --git a/projects/demo/src/utils/example.pipe.ts b/projects/demo/src/utils/example.pipe.ts
@@ -24,7 +24,7 @@ export class TuiExamplePipe implements PipeTransform {
             formats
                 .split(',')
                 .map(format => [
-                    format.toUpperCase(),
+                    format === 'ts' ? 'TypeScript' : format.toUpperCase(),
                     import(
                         `../modules/${this.docPage.type}/${toKebab(this.docPage.header)}/examples/${index}/index.${format}?raw`
                     ),

diff --git a/projects/experimental/components/radio/index.ts b/projects/experimental/components/radio/index.ts
@@ -1,3 +1,3 @@
 export * from './radio.component';
-export * from './radio.module';
+export * from './radio.directive';
 export * from './radio.options';
diff --git a/projects/experimental/components/radio/radio.component.ts b/projects/experimental/components/radio/radio.component.ts
@@ -13,6 +13,7 @@ import {TuiAppearanceDirective, TuiSizeS} from '@taiga-ui/core';
 import {TUI_RADIO_OPTIONS} from './radio.options';
 
 @Component({
+    standalone: true,
     selector: 'input[type="radio"][tuiRadio]',
     template: '',
     styleUrls: ['./radio.style.less'],

diff --git a/projects/experimental/components/radio/radio.directive.ts b/projects/experimental/components/radio/radio.directive.ts
@@ -0,0 +1,25 @@
+import {Directive, inject, Input} from '@angular/core';
+import {RadioControlValueAccessor} from '@angular/forms';
+import {TUI_DEFAULT_IDENTITY_MATCHER, TuiIdentityMatcher} from '@taiga-ui/cdk';
+
+@Directive({
+    standalone: true,
+    selector: 'input[type="radio"][tuiRadio][identityMatcher]',
+})
+export class TuiRadioDirective<T> {
+    @Input()
+    public identityMatcher: TuiIdentityMatcher<T> = TUI_DEFAULT_IDENTITY_MATCHER;
+
+    constructor() {
+        const accessor = inject(RadioControlValueAccessor);
+        const writeValue = accessor.writeValue.bind(accessor);
+
+        accessor.writeValue = (value: T) => {
+            if (this.identityMatcher(value, accessor.value)) {
+                writeValue(accessor.value);
+            } else {
+                writeValue(value);
+            }
+        };
+    }
+}
diff --git a/projects/experimental/components/radio/radio.module.ts b/projects/experimental/components/radio/radio.module.ts