feat(addon-commerce): use pipe instead getter for improve performance

projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts

@@ -242,15 +242,6 @@ export class TuiInputCardGroupedComponent
         return !!this.value?.card?.trim();
     }
 
-    get formattedCard(): string {
-        return this.value && !this.cardPrefilled
-            ? this.value.card
-                  .split('')
-                  .map((char, index) => (index && index % 4 === 0 ? ` ${char}` : char))
-                  .join('')
-            : '';
-    }
-
     get idCard(): string {
         return `${this.id}_card`;
     }

projects/addon-commerce/components/input-card-grouped/input-card-grouped.module.ts

@@ -1,11 +1,13 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {TuiFormatCardModule} from '@taiga-ui/addon-commerce/pipes';
 import {
     TuiActiveZoneModule,
     TuiFocusableModule,
     TuiHoveredModule,
     TuiInputModeModule,
+    TuiLetModule,
     TuiMapperPipeModule,
     TuiPreventDefaultModule,
 } from '@taiga-ui/cdk';
@@ -30,6 +32,8 @@ import {TuiInputCardGroupedComponent} from './input-card-grouped.component';
         TuiDropdownModule,
         TuiPreventDefaultModule,
         PolymorpheusModule,
+        TuiLetModule,
+        TuiFormatCardModule,
     ],
     declarations: [TuiInputCardGroupedComponent],
     exports: [TuiInputCardGroupedComponent],

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

@@ -15,7 +15,10 @@
     (mousedown)="onMouseDown($event)"
 >
     <div class="t-wrapper">
-        <label tuiPreventDefault="click">
+        <label
+            *tuiLet="value?.card | tuiFormatCard: cardPrefilled as formattedCard"
+            tuiPreventDefault="click"
+        >
             <input
                 #inputCard
                 type="text"

projects/addon-commerce/pipes/format-card/format-card.module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+
+import {TuiFormatCardPipe} from './format-card.pipe';
+
+@NgModule({
+    declarations: [TuiFormatCardPipe],
+    exports: [TuiFormatCardPipe],
+})
+export class TuiFormatCardModule {}

projects/addon-commerce/pipes/format-card/format-card.pipe.ts

@@ -0,0 +1,13 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'tuiFormatCard'})
+export class TuiFormatCardPipe implements PipeTransform {
+    transform(value: string | null = '', cardPrefilled: boolean = false): string {
+        return value && !cardPrefilled
+            ? value
+                  .split('')
+                  .map((char, index) => (index && index % 4 === 0 ? ` ${char}` : char))
+                  .join('')
+            : '';
+    }
+}

projects/addon-commerce/pipes/format-card/tests/format-card.pipe.spec.ts

@@ -0,0 +1,28 @@
+import {TuiFormatCardPipe} from '@taiga-ui/addon-commerce/pipes';
+
+describe('TuiFormatCardPipe', () => {
+    const pipe = new TuiFormatCardPipe();
+
+    it('value is empty', () => {
+        expect(pipe.transform()).toEqual('');
+        expect(pipe.transform(undefined)).toEqual('');
+        expect(pipe.transform(null)).toEqual('');
+        expect(pipe.transform(null, true)).toEqual('');
+        expect(pipe.transform(undefined, true)).toEqual('');
+        expect(pipe.transform(null, true)).toEqual('');
+    });
+
+    it('value has card', () => {
+        expect(pipe.transform('1234')).toEqual('1234');
+        expect(pipe.transform('123456')).toEqual('1234 56');
+        expect(pipe.transform('1234567891011111')).toEqual('1234 5678 9101 1111');
+    });
+
+    it('card value has whitespaces', () => {
+        expect(pipe.transform('1234 5678 9101')).toEqual('1234  567 8 91 01');
+        expect(pipe.transform('1234 5678 9101 1111')).toEqual('1234  567 8 91 01 1 111');
+        expect(pipe.transform('1234 56 78 9101 11 11')).toEqual(
+            '1234  56  78 9 101  11 1 1',
+        );
+    });
+});

projects/addon-commerce/pipes/index.ts

@@ -1,2 +1,4 @@
-export * from './currency.module';
-export * from './currency.pipe';
+export * from './currency/currency.module';
+export * from './currency/currency.pipe';
+export * from './format-card/format-card.module';
+export * from './format-card/format-card.pipe';

projects/demo-integrations/cypress/tests/addon-commerce/input-card-grouped.spec.ts

@@ -0,0 +1,22 @@
+describe('InputCardGrouped', () => {
+    beforeEach(() => {
+        cy.viewport('macbook-13');
+        cy.tuiVisit('components/input-card-grouped/API?tuiMode=null');
+        cy.get('#demoContent').as('wrapper');
+    });
+
+    it('set value and clear after', () => {
+        cy.get('@wrapper')
+            .findByAutomationId('tui-input-card-grouped__card')
+            .type('1234 4567 8910 1112')
+            .wait(5000); // waiting before closing toast for skip flaky test
+
+        cy.matchImageSnapshot('01-input-card-grouped-filled', {capture: 'viewport'});
+
+        cy.get('@wrapper').find('[src="tuiIconCloseLarge"]').click({force: true});
+        cy.matchImageSnapshot('02-input-card-grouped-cleared', {capture: 'viewport'});
+
+        cy.get('@wrapper').click({force: true});
+        cy.matchImageSnapshot('03-input-card-grouped-unfocused', {capture: 'viewport'});
+    });
+});