From 385b80da3573c43f3a02388a2755054107ac7f95 Mon Sep 17 00:00:00 2001
From: Dima Karimov <d.karimov@aitarget.com>
Date: Tue, 7 Sep 2021 00:49:19 +0300
Subject: [PATCH 1/9] feat(kit): allow configuration of default options for
 input-count

---
 .../input-count/examples/3/index.html         |  21 ++++
 .../input-count/examples/3/index.ts           |  38 +++++++
 .../examples/import/define-options.txt        |  24 +++++
 .../input-count/input-count.component.ts      |  10 ++
 .../input-count/input-count.module.ts         |   2 +
 .../input-count/input-count.template.html     |  22 ++++
 projects/kit/components/input-count/index.ts  |   1 +
 .../input-count/input-count-options.ts        |  42 ++++++++
 .../input-count/input-count.component.ts      |  23 +++-
 .../input-count/input-count.module.ts         |   2 +
 .../input-count/input-count.style.less        |  13 ++-
 .../input-count/input-count.template.html     |  74 ++++++++-----
 .../test/input-count.component.spec.ts        | 101 ++++++++++++++++++
 13 files changed, 337 insertions(+), 36 deletions(-)
 create mode 100644 projects/demo/src/modules/components/input-count/examples/3/index.html
 create mode 100644 projects/demo/src/modules/components/input-count/examples/3/index.ts
 create mode 100644 projects/demo/src/modules/components/input-count/examples/import/define-options.txt
 create mode 100644 projects/kit/components/input-count/input-count-options.ts

diff --git a/projects/demo/src/modules/components/input-count/examples/3/index.html b/projects/demo/src/modules/components/input-count/examples/3/index.html
new file mode 100644
index 000000000000..613d1a5d6b45
--- /dev/null
+++ b/projects/demo/src/modules/components/input-count/examples/3/index.html
@@ -0,0 +1,21 @@
+<form class="b-form" [formGroup]="testForm">
+    <label tuiLabel i18n-label label="With custom options">
+        <tui-input-count
+            formControlName="testValue1"
+            [tuiTextfieldLabelOutside]="true"
+        ></tui-input-count>
+    </label>
+
+    <label
+        tuiLabel
+        class="tui-space_top-4"
+        i18n-label
+        label="With custom options and medium size"
+    >
+        <tui-input-count
+            formControlName="testValue2"
+            tuiTextfieldSize="m"
+            [tuiTextfieldLabelOutside]="true"
+        ></tui-input-count>
+    </label>
+</form>
diff --git a/projects/demo/src/modules/components/input-count/examples/3/index.ts b/projects/demo/src/modules/components/input-count/examples/3/index.ts
new file mode 100644
index 000000000000..d9179ee38fa1
--- /dev/null
+++ b/projects/demo/src/modules/components/input-count/examples/3/index.ts
@@ -0,0 +1,38 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {TUI_INPUT_COUNT_DEFAULT_OPTIONS, TUI_INPUT_COUNT_OPTIONS} from '@taiga-ui/kit';
+import {changeDetection} from '../../../../../change-detection-strategy';
+import {encapsulation} from '../../../../../view-encapsulation';
+
+@Component({
+    selector: 'tui-input-count-example-3',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+    providers: [
+        {
+            provide: TUI_INPUT_COUNT_OPTIONS,
+            useValue: {
+                ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
+                icons: {
+                    up: ({$implicit}: any) =>
+                        $implicit === 'm' ? 'tuiIconChevronUp' : 'tuiIconChevronUpLarge',
+                    down: ({$implicit}: any) =>
+                        $implicit === 'm'
+                            ? 'tuiIconChevronDown'
+                            : 'tuiIconChevronDownLarge',
+                },
+                appearance: 'secondary',
+                step: 10,
+                min: 10,
+                max: 100,
+            },
+        },
+    ],
+})
+export class TuiInputCountExample3 {
+    testForm = new FormGroup({
+        testValue1: new FormControl(10, Validators.required),
+        testValue2: new FormControl(10, Validators.required),
+    });
+}
diff --git a/projects/demo/src/modules/components/input-count/examples/import/define-options.txt b/projects/demo/src/modules/components/input-count/examples/import/define-options.txt
new file mode 100644
index 000000000000..ee74fd560c00
--- /dev/null
+++ b/projects/demo/src/modules/components/input-count/examples/import/define-options.txt
@@ -0,0 +1,24 @@
+import {TUI_INPUT_COUNT_OPTIONS, TUI_INPUT_COUNT_DEFAULT_OPTIONS} from '@taiga-ui/kit';
+
+...
+
+@NgModule({
+    providers: [{
+        provide: TUI_INPUT_COUNT_OPTIONS,
+        useValue: {
+            ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
+            icons: {
+                up: ({$implicit}: any) =>
+                    $implicit === 'm' ? 'tuiIconChevronUp' : 'tuiIconChevronUpLarge',
+                down: ({$implicit}: any) =>
+                    $implicit === 'm'
+                        ? 'tuiIconChevronDown'
+                        : 'tuiIconChevronDownLarge',
+            },
+            appearance: 'secondary',
+            step: 10,
+            min: 10,
+            max: 100,
+        },
+    }],
+...
diff --git a/projects/demo/src/modules/components/input-count/input-count.component.ts b/projects/demo/src/modules/components/input-count/input-count.component.ts
index bbd09bbcd395..58333c0ebfeb 100644
--- a/projects/demo/src/modules/components/input-count/input-count.component.ts
+++ b/projects/demo/src/modules/components/input-count/input-count.component.ts
@@ -4,7 +4,11 @@ import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
 import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
 import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
 
+import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
+import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
+
 import {default as exampleDeclareForm} from '!!raw-loader!./examples/import/declare-form.txt';
+import {default as exampleDefineOptions} from '!!raw-loader!./examples/import/define-options.txt';
 import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt';
 import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';
 
@@ -31,6 +35,7 @@ export class ExampleTuiInputCountComponent extends AbstractExampleTuiControl {
     readonly exampleDeclareForm = exampleDeclareForm;
     readonly exampleImportModule = exampleImportModule;
     readonly exampleInsertTemplate = exampleInsertTemplate;
+    readonly exampleDefineOptions = exampleDefineOptions;
 
     readonly example1: FrontEndExample = {
         HTML: example1Html,
@@ -42,6 +47,11 @@ export class ExampleTuiInputCountComponent extends AbstractExampleTuiControl {
         TypeScript: example2Ts,
     };
 
+    readonly example3: FrontEndExample = {
+        HTML: example3Html,
+        TypeScript: example3Ts,
+    };
+
     min = 0;
     max = 999;
 
diff --git a/projects/demo/src/modules/components/input-count/input-count.module.ts b/projects/demo/src/modules/components/input-count/input-count.module.ts
index 14c684e4e34d..d4354ddd20dc 100644
--- a/projects/demo/src/modules/components/input-count/input-count.module.ts
+++ b/projects/demo/src/modules/components/input-count/input-count.module.ts
@@ -12,6 +12,7 @@ import {TuiInputCountModule} from '@taiga-ui/kit';
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TuiInputCountExample1} from './examples/1';
 import {TuiInputCountExample2} from './examples/2';
+import {TuiInputCountExample3} from './examples/3';
 import {ExampleTuiInputCountComponent} from './input-count.component';
 
 @NgModule({
@@ -31,6 +32,7 @@ import {ExampleTuiInputCountComponent} from './input-count.component';
         ExampleTuiInputCountComponent,
         TuiInputCountExample1,
         TuiInputCountExample2,
+        TuiInputCountExample3,
     ],
     exports: [ExampleTuiInputCountComponent],
 })
diff --git a/projects/demo/src/modules/components/input-count/input-count.template.html b/projects/demo/src/modules/components/input-count/input-count.template.html
index 2738b41c7842..d97ff119d172 100644
--- a/projects/demo/src/modules/components/input-count/input-count.template.html
+++ b/projects/demo/src/modules/components/input-count/input-count.template.html
@@ -27,6 +27,15 @@
         >
             <tui-input-count-example-2></tui-input-count-example-2>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="options"
+            i18n-heading
+            heading="Options"
+            [content]="example3"
+        >
+            <tui-input-count-example-3></tui-input-count-example-3>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
@@ -142,6 +151,19 @@
                     [code]="exampleInsertTemplate"
                 ></tui-doc-code>
             </li>
+
+            <li>
+                <p i18n>
+                    Optionally use the
+                    <code>TUI_INPUT_COUNT_OPTIONS</code> injection token to
+                    override the default options for the component.
+                </p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleDefineOptions"
+                ></tui-doc-code>
+            </li>
         </ol>
     </ng-template>
 </tui-doc-page>
diff --git a/projects/kit/components/input-count/index.ts b/projects/kit/components/input-count/index.ts
index 2dedc9354c8e..f85add12b36d 100644
--- a/projects/kit/components/input-count/index.ts
+++ b/projects/kit/components/input-count/index.ts
@@ -1,2 +1,3 @@
 export * from './input-count.component';
 export * from './input-count.module';
+export * from './input-count-options';
diff --git a/projects/kit/components/input-count/input-count-options.ts b/projects/kit/components/input-count/input-count-options.ts
new file mode 100644
index 000000000000..041b519b16e7
--- /dev/null
+++ b/projects/kit/components/input-count/input-count-options.ts
@@ -0,0 +1,42 @@
+import {InjectionToken} from '@angular/core';
+import {TuiContextWithImplicit} from '@taiga-ui/cdk';
+import {TuiSizeL} from '@taiga-ui/core';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+export interface InputCountOptions {
+    readonly icons: Readonly<{
+        up: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
+        down: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
+    }>;
+    appearance: string;
+    hideButtons: boolean;
+    min: number;
+    max: number;
+    step: number;
+    postfix: string;
+}
+
+// TODO: remove in ivy compilation
+export const PASSWORD_ICON_UP = 'tuiIconPlus';
+export const PASSWORD_ICON_DOWN = 'tuiIconMinus';
+
+/** Default values for the input password options. */
+export const TUI_INPUT_COUNT_DEFAULT_OPTIONS: InputCountOptions = {
+    icons: {
+        up: PASSWORD_ICON_UP,
+        down: PASSWORD_ICON_DOWN,
+    },
+    appearance: 'textfield',
+    hideButtons: false,
+    min: 0,
+    max: Infinity,
+    step: 1,
+    postfix: '',
+};
+
+export const TUI_INPUT_COUNT_OPTIONS = new InjectionToken<InputCountOptions>(
+    'Default parameters for input count component',
+    {
+        factory: () => TUI_INPUT_COUNT_DEFAULT_OPTIONS,
+    },
+);
diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
index db9802e3c01b..6d698fbaeaf8 100644
--- a/projects/kit/components/input-count/input-count.component.ts
+++ b/projects/kit/components/input-count/input-count.component.ts
@@ -20,6 +20,7 @@ import {
     setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TUI_IS_MOBILE,
+    TuiContextWithImplicit,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
     tuiPure,
@@ -38,7 +39,9 @@ import {
     TuiWithOptionalMinMax,
 } from '@taiga-ui/core';
 import {TUI_PLUS_MINUS_TEXTS} from '@taiga-ui/kit/tokens';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
+import {InputCountOptions, TUI_INPUT_COUNT_OPTIONS} from './input-count-options';
 
 // @dynamic
 @Component({
@@ -58,23 +61,23 @@ export class TuiInputCountComponent
     implements TuiWithOptionalMinMax<number>, TuiFocusableElementAccessor {
     @Input()
     @tuiDefaultProp()
-    step = 1;
+    step = this.options.step;
 
     @Input()
     @tuiDefaultProp()
-    min = 0;
+    min = this.options.min;
 
     @Input()
     @tuiDefaultProp()
-    max = Infinity;
+    max = this.options.max;
 
     @Input()
     @tuiDefaultProp()
-    hideButtons = false;
+    hideButtons = this.options.hideButtons;
 
     @Input()
     @tuiDefaultProp()
-    postfix = '';
+    postfix = this.options.postfix;
 
     @tuiPure
     getMask(allowNegative: boolean): TuiTextMaskOptions {
@@ -97,10 +100,20 @@ export class TuiInputCountComponent
         @Inject(TUI_PLUS_MINUS_TEXTS)
         readonly minusTexts$: Observable<[string, string]>,
         @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean,
+        @Inject(TUI_INPUT_COUNT_OPTIONS)
+        public readonly options: InputCountOptions,
     ) {
         super(control, changeDetectorRef);
     }
 
+    get iconUp(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+        return this.options.icons.up;
+    }
+
+    get iconDown(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+        return this.options.icons.down;
+    }
+
     get nativeFocusableElement(): HTMLInputElement | null {
         return !this.primitiveTextfield || this.computedDisabled
             ? null
diff --git a/projects/kit/components/input-count/input-count.module.ts b/projects/kit/components/input-count/input-count.module.ts
index e47403aab230..8e8091310b03 100644
--- a/projects/kit/components/input-count/input-count.module.ts
+++ b/projects/kit/components/input-count/input-count.module.ts
@@ -6,6 +6,7 @@ import {
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
 import {TuiValueAccessorModule} from '@taiga-ui/kit/directives';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 import {TextMaskModule} from 'angular2-text-mask';
 import {TuiInputCountComponent} from './input-count.component';
 
@@ -17,6 +18,7 @@ import {TuiInputCountComponent} from './input-count.component';
         TuiPrimitiveTextfieldModule,
         TuiTextfieldControllerModule,
         TuiValueAccessorModule,
+        PolymorpheusModule,
     ],
     declarations: [TuiInputCountComponent],
     exports: [TuiInputCountComponent],
diff --git a/projects/kit/components/input-count/input-count.style.less b/projects/kit/components/input-count/input-count.style.less
index 60cfeb0fbec1..a68600f094c7 100644
--- a/projects/kit/components/input-count/input-count.style.less
+++ b/projects/kit/components/input-count/input-count.style.less
@@ -1,8 +1,8 @@
 @import 'taiga-ui-local';
 
 :host {
-    font: var(--tui-font-text-s);
     display: flex;
+    font: var(--tui-font-text-s);
     border-radius: var(--tui-radius-m);
     height: var(--tui-height-m);
     color: var(--tui-text-01);
@@ -39,10 +39,9 @@
 .buttons .button {
     display: flex;
     width: calc(var(--tui-height-m) * 0.75);
-    height: calc(50% - 0.0625rem);
+    height: 100%;
 
     &_plus {
-        margin-bottom: 0.125rem;
         border-radius: 0 var(--tui-radius-m) 0 0;
     }
 
@@ -54,3 +53,11 @@
         width: calc(var(--tui-height-l) * 0.75);
     }
 }
+
+.button-wrapper {
+    height: calc(50% - 0.0625rem);
+
+    &_plus {
+        margin-bottom: 0.125rem;
+    }
+}
diff --git a/projects/kit/components/input-count/input-count.template.html b/projects/kit/components/input-count/input-count.template.html
index 1a5b5503c199..e2b910244ecf 100644
--- a/projects/kit/components/input-count/input-count.template.html
+++ b/projects/kit/components/input-count/input-count.template.html
@@ -25,33 +25,51 @@
 </tui-primitive-textfield>
 <ng-container *ngIf="hasButtons && (minusTexts$ | async) as texts">
     <section class="buttons">
-        <button
-            tuiIconButton
-            type="button"
-            automation-id="tui-input-count__plus-button"
-            size="s"
-            icon="tuiIconPlus"
-            class="button button_plus"
-            appearance="textfield"
-            [title]="texts[0]"
-            [disabled]="plusButtonDisabled"
-            [focusable]="false"
-            (mousedown)="onButtonMouseDown($event, plusButtonDisabled)"
-            (click)="increaseValue()"
-        ></button>
-        <button
-            tuiIconButton
-            type="button"
-            automation-id="tui-input-count__minus-button"
-            size="s"
-            icon="tuiIconMinus"
-            class="button button_minus"
-            appearance="textfield"
-            [disabled]="minusButtonDisabled"
-            [focusable]="false"
-            [title]="texts[1]"
-            (mousedown)="onButtonMouseDown($event, minusButtonDisabled)"
-            (click)="decreaseValue()"
-        ></button>
+        <span
+            class="button-wrapper button-wrapper_plus"
+            polymorpheus-outlet
+            [content]="iconUp"
+            [context]="{ $implicit: size }"
+        >
+            <ng-template let-icon>
+                <button
+                    tuiIconButton
+                    type="button"
+                    automation-id="tui-input-count__plus-button"
+                    size="s"
+                    [icon]="icon"
+                    class="button button_plus"
+                    [appearance]="options.appearance"
+                    [title]="texts[0]"
+                    [disabled]="plusButtonDisabled"
+                    [focusable]="false"
+                    (mousedown)="onButtonMouseDown($event, plusButtonDisabled)"
+                    (click)="increaseValue()"
+                ></button>
+            </ng-template>
+        </span>
+        <span
+            class="button-wrapper"
+            polymorpheus-outlet
+            [content]="iconDown"
+            [context]="{ $implicit: size }"
+        >
+            <ng-template let-icon>
+                <button
+                    tuiIconButton
+                    type="button"
+                    automation-id="tui-input-count__minus-button"
+                    size="s"
+                    [icon]="icon"
+                    class="button button_minus"
+                    [appearance]="options.appearance"
+                    [disabled]="minusButtonDisabled"
+                    [focusable]="false"
+                    [title]="texts[1]"
+                    (mousedown)="onButtonMouseDown($event, minusButtonDisabled)"
+                    (click)="decreaseValue()"
+                ></button>
+            </ng-template>
+        </span>
     </section>
 </ng-container>
diff --git a/projects/kit/components/input-count/test/input-count.component.spec.ts b/projects/kit/components/input-count/test/input-count.component.spec.ts
index 5ff6862b381c..0acc578ed077 100644
--- a/projects/kit/components/input-count/test/input-count.component.spec.ts
+++ b/projects/kit/components/input-count/test/input-count.component.spec.ts
@@ -3,6 +3,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {NativeInputPO, PageObject} from '@taiga-ui/testing';
 import {configureTestSuite} from 'ng-bullet';
+import {
+    TUI_INPUT_COUNT_DEFAULT_OPTIONS,
+    TUI_INPUT_COUNT_OPTIONS,
+} from '../input-count-options';
 import {TuiInputCountComponent} from '../input-count.component';
 import {TuiInputCountModule} from '../input-count.module';
 
@@ -404,3 +408,100 @@ describe('InputCount', () => {
         return pageObject.getByAutomationId(`${testContext.prefix}minus-button`);
     }
 });
+
+describe('InputCount with TUI_INPUT_COUNT_OPTIONS', () => {
+    @Component({
+        template: `
+            <tui-input-count
+                [formControl]="control"
+                [readOnly]="readOnly"
+            ></tui-input-count>
+        `,
+    })
+    class TestComponent {
+        @ViewChild(TuiInputCountComponent)
+        component: TuiInputCountComponent;
+
+        control = new FormControl();
+    }
+
+    let fixture: ComponentFixture<TestComponent>;
+    let testComponent: TestComponent;
+    let inputPO: NativeInputPO;
+
+    const min = 0;
+    const max = 12;
+    const step = 5;
+
+    configureTestSuite(() => {
+        TestBed.configureTestingModule({
+            imports: [ReactiveFormsModule, TuiInputCountModule],
+            declarations: [TestComponent],
+            providers: [
+                {
+                    provide: TUI_INPUT_COUNT_OPTIONS,
+                    useValue: {
+                        ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
+                        icons: {
+                            up: ({$implicit}: any) =>
+                                $implicit === 'm'
+                                    ? 'tuiIconChevronUp'
+                                    : 'tuiIconChevronUpLarge',
+                            down: ({$implicit}: any) =>
+                                $implicit === 'm'
+                                    ? 'tuiIconChevronDown'
+                                    : 'tuiIconChevronDownLarge',
+                        },
+                        step,
+                        min,
+                        max,
+                    },
+                },
+            ],
+        });
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+
+        inputPO = new NativeInputPO(fixture, `tui-primitive-textfield__native-input`);
+    });
+
+    describe('A step other than 1 is set', () => {
+        beforeEach(() => {
+            testComponent.control.setValue(6);
+            fixture.detectChanges();
+        });
+
+        it('Increase the value by the specified step', () => {
+            testComponent.component.increaseValue();
+
+            expect(inputPO.value).toBe('11');
+            expect(testComponent.control.value).toBe(11);
+        });
+
+        it('Decrease the value by a given step', () => {
+            testComponent.component.decreaseValue();
+
+            expect(inputPO.value).toBe('1');
+            expect(testComponent.control.value).toBe(1);
+        });
+
+        it('Cannot make value greater than maxValue', () => {
+            testComponent.component.increaseValue(); // the new value is 11
+            testComponent.component.increaseValue(); // the new value would be 16, but it is greater than maxValue
+
+            expect(inputPO.value).toBe(max.toString());
+            expect(testComponent.control.value).toBe(max);
+        });
+
+        it('Cannot make value less than min', () => {
+            testComponent.component.decreaseValue(); // value became === 1
+            testComponent.component.decreaseValue(); // the new value would be -4, but it's less than min
+
+            expect(inputPO.value).toBe(min.toString());
+            expect(testComponent.control.value).toBe(min);
+        });
+    });
+});

From 729143ccfb0cc303570c663fbf26129723a72911 Mon Sep 17 00:00:00 2001
From: Dima Karimov <d.karimov@aitarget.com>
Date: Thu, 9 Sep 2021 01:24:22 +0300
Subject: [PATCH 2/9] fix(kit): implement review notes

---
 .../table/providers/table.providers.ts        | 12 ++-
 .../input-count/examples/3/index.ts           |  8 +-
 .../examples/import/define-options.txt        |  8 +-
 .../input-count/input-count-options.ts        | 18 ++---
 .../input-count/input-count.component.ts      | 11 +--
 .../input-count/input-count.style.less        | 11 +--
 .../input-count/input-count.template.html     | 74 +++++++------------
 .../test/input-count.component.spec.ts        | 10 +--
 8 files changed, 58 insertions(+), 94 deletions(-)

diff --git a/projects/addon-table/components/table/providers/table.providers.ts b/projects/addon-table/components/table/providers/table.providers.ts
index ba957dcc7a45..0a5a827830d5 100644
--- a/projects/addon-table/components/table/providers/table.providers.ts
+++ b/projects/addon-table/components/table/providers/table.providers.ts
@@ -1,4 +1,4 @@
-import {forwardRef} from '@angular/core';
+import {forwardRef, SkipSelf} from '@angular/core';
 import {
     INTERSECTION_ROOT_MARGIN,
     INTERSECTION_THRESHOLD,
@@ -10,6 +10,7 @@ import {
     TUI_TEXTFIELD_LABEL_OUTSIDE,
     TUI_TEXTFIELD_SIZE,
 } from '@taiga-ui/core';
+import {InputCountOptions, TUI_INPUT_COUNT_OPTIONS} from '@taiga-ui/kit';
 import {TuiTableDirective} from '../directives/table.directive';
 import {TUI_STUCK_PROVIDER} from './stuck.provider';
 
@@ -19,6 +20,10 @@ export const TABLE_LABEL = {
     labelOutside: true,
 };
 
+export function inputCountOptionsFactory(options: InputCountOptions): InputCountOptions {
+    return {...options, hideButtons: true};
+}
+
 export const TUI_TABLE_PROVIDERS = [
     {
         provide: INTERSECTION_ROOT_MARGIN,
@@ -37,6 +42,11 @@ export const TUI_TABLE_PROVIDERS = [
         provide: TUI_TEXTFIELD_LABEL_OUTSIDE,
         useValue: TABLE_LABEL,
     },
+    {
+        provide: TUI_INPUT_COUNT_OPTIONS,
+        deps: [[new SkipSelf(), TUI_INPUT_COUNT_OPTIONS]],
+        useFactory: inputCountOptionsFactory,
+    },
     {
         provide: TUI_TEXTFIELD_SIZE,
         useExisting: forwardRef(() => TuiTableDirective),
diff --git a/projects/demo/src/modules/components/input-count/examples/3/index.ts b/projects/demo/src/modules/components/input-count/examples/3/index.ts
index d9179ee38fa1..cdf093839223 100644
--- a/projects/demo/src/modules/components/input-count/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-count/examples/3/index.ts
@@ -15,12 +15,8 @@ import {encapsulation} from '../../../../../view-encapsulation';
             useValue: {
                 ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
                 icons: {
-                    up: ({$implicit}: any) =>
-                        $implicit === 'm' ? 'tuiIconChevronUp' : 'tuiIconChevronUpLarge',
-                    down: ({$implicit}: any) =>
-                        $implicit === 'm'
-                            ? 'tuiIconChevronDown'
-                            : 'tuiIconChevronDownLarge',
+                    up: 'tuiIconChevronUp',
+                    down: 'tuiIconChevronDown',
                 },
                 appearance: 'secondary',
                 step: 10,
diff --git a/projects/demo/src/modules/components/input-count/examples/import/define-options.txt b/projects/demo/src/modules/components/input-count/examples/import/define-options.txt
index ee74fd560c00..8044f2a3ed92 100644
--- a/projects/demo/src/modules/components/input-count/examples/import/define-options.txt
+++ b/projects/demo/src/modules/components/input-count/examples/import/define-options.txt
@@ -8,12 +8,8 @@ import {TUI_INPUT_COUNT_OPTIONS, TUI_INPUT_COUNT_DEFAULT_OPTIONS} from '@taiga-u
         useValue: {
             ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
             icons: {
-                up: ({$implicit}: any) =>
-                    $implicit === 'm' ? 'tuiIconChevronUp' : 'tuiIconChevronUpLarge',
-                down: ({$implicit}: any) =>
-                    $implicit === 'm'
-                        ? 'tuiIconChevronDown'
-                        : 'tuiIconChevronDownLarge',
+                up: 'tuiIconChevronUp',
+                down: 'tuiIconChevronDown',
             },
             appearance: 'secondary',
             step: 10,
diff --git a/projects/kit/components/input-count/input-count-options.ts b/projects/kit/components/input-count/input-count-options.ts
index 041b519b16e7..5dd8d8f83107 100644
--- a/projects/kit/components/input-count/input-count-options.ts
+++ b/projects/kit/components/input-count/input-count-options.ts
@@ -1,19 +1,17 @@
 import {InjectionToken} from '@angular/core';
-import {TuiContextWithImplicit} from '@taiga-ui/cdk';
-import {TuiSizeL} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 export interface InputCountOptions {
     readonly icons: Readonly<{
-        up: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
-        down: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
+        up: PolymorpheusContent<{}>;
+        down: PolymorpheusContent<{}>;
     }>;
-    appearance: string;
-    hideButtons: boolean;
-    min: number;
-    max: number;
-    step: number;
-    postfix: string;
+    readonly appearance: string;
+    readonly hideButtons: boolean;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly postfix: string;
 }
 
 // TODO: remove in ivy compilation
diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
index 6d698fbaeaf8..23892cfa1913 100644
--- a/projects/kit/components/input-count/input-count.component.ts
+++ b/projects/kit/components/input-count/input-count.component.ts
@@ -20,16 +20,13 @@ import {
     setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TUI_IS_MOBILE,
-    TuiContextWithImplicit,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
     tuiPure,
 } from '@taiga-ui/cdk';
 import {
     formatNumber,
-    TUI_TEXTFIELD_APPEARANCE,
     TUI_TEXTFIELD_SIZE,
-    TuiAppearance,
     tuiCreateNumberMask,
     TuiPrimitiveTextfieldComponent,
     TuiSizeL,
@@ -93,8 +90,6 @@ export class TuiInputCountComponent
         @Inject(NgControl)
         control: NgControl | null,
         @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
-        @Inject(TUI_TEXTFIELD_APPEARANCE)
-        private readonly appearance: string,
         @Inject(TUI_TEXTFIELD_SIZE)
         private readonly textfieldSize: TuiTextfieldSizeDirective,
         @Inject(TUI_PLUS_MINUS_TEXTS)
@@ -106,11 +101,11 @@ export class TuiInputCountComponent
         super(control, changeDetectorRef);
     }
 
-    get iconUp(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+    get iconUp(): PolymorpheusContent<{}> {
         return this.options.icons.up;
     }
 
-    get iconDown(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+    get iconDown(): PolymorpheusContent<{}> {
         return this.options.icons.down;
     }
 
@@ -131,7 +126,7 @@ export class TuiInputCountComponent
 
     @HostBinding('class._has-buttons')
     get hasButtons(): boolean {
-        return !this.hideButtons && this.appearance !== TuiAppearance.Table;
+        return !this.hideButtons;
     }
 
     get exampleText(): string {
diff --git a/projects/kit/components/input-count/input-count.style.less b/projects/kit/components/input-count/input-count.style.less
index a68600f094c7..1beb82e2d541 100644
--- a/projects/kit/components/input-count/input-count.style.less
+++ b/projects/kit/components/input-count/input-count.style.less
@@ -39,9 +39,10 @@
 .buttons .button {
     display: flex;
     width: calc(var(--tui-height-m) * 0.75);
-    height: 100%;
+    height: calc(50% - 0.0625rem);
 
     &_plus {
+        margin-bottom: 0.125rem;
         border-radius: 0 var(--tui-radius-m) 0 0;
     }
 
@@ -53,11 +54,3 @@
         width: calc(var(--tui-height-l) * 0.75);
     }
 }
-
-.button-wrapper {
-    height: calc(50% - 0.0625rem);
-
-    &_plus {
-        margin-bottom: 0.125rem;
-    }
-}
diff --git a/projects/kit/components/input-count/input-count.template.html b/projects/kit/components/input-count/input-count.template.html
index e2b910244ecf..eff6b6c6d79c 100644
--- a/projects/kit/components/input-count/input-count.template.html
+++ b/projects/kit/components/input-count/input-count.template.html
@@ -25,51 +25,33 @@
 </tui-primitive-textfield>
 <ng-container *ngIf="hasButtons && (minusTexts$ | async) as texts">
     <section class="buttons">
-        <span
-            class="button-wrapper button-wrapper_plus"
-            polymorpheus-outlet
-            [content]="iconUp"
-            [context]="{ $implicit: size }"
-        >
-            <ng-template let-icon>
-                <button
-                    tuiIconButton
-                    type="button"
-                    automation-id="tui-input-count__plus-button"
-                    size="s"
-                    [icon]="icon"
-                    class="button button_plus"
-                    [appearance]="options.appearance"
-                    [title]="texts[0]"
-                    [disabled]="plusButtonDisabled"
-                    [focusable]="false"
-                    (mousedown)="onButtonMouseDown($event, plusButtonDisabled)"
-                    (click)="increaseValue()"
-                ></button>
-            </ng-template>
-        </span>
-        <span
-            class="button-wrapper"
-            polymorpheus-outlet
-            [content]="iconDown"
-            [context]="{ $implicit: size }"
-        >
-            <ng-template let-icon>
-                <button
-                    tuiIconButton
-                    type="button"
-                    automation-id="tui-input-count__minus-button"
-                    size="s"
-                    [icon]="icon"
-                    class="button button_minus"
-                    [appearance]="options.appearance"
-                    [disabled]="minusButtonDisabled"
-                    [focusable]="false"
-                    [title]="texts[1]"
-                    (mousedown)="onButtonMouseDown($event, minusButtonDisabled)"
-                    (click)="decreaseValue()"
-                ></button>
-            </ng-template>
-        </span>
+        <button
+            tuiIconButton
+            type="button"
+            automation-id="tui-input-count__plus-button"
+            size="s"
+            [icon]="iconUp"
+            class="button button_plus"
+            [appearance]="options.appearance"
+            [title]="texts[0]"
+            [disabled]="plusButtonDisabled"
+            [focusable]="false"
+            (mousedown)="onButtonMouseDown($event, plusButtonDisabled)"
+            (click)="increaseValue()"
+        ></button>
+        <button
+            tuiIconButton
+            type="button"
+            automation-id="tui-input-count__minus-button"
+            size="s"
+            [icon]="iconDown"
+            class="button button_minus"
+            [appearance]="options.appearance"
+            [disabled]="minusButtonDisabled"
+            [focusable]="false"
+            [title]="texts[1]"
+            (mousedown)="onButtonMouseDown($event, minusButtonDisabled)"
+            (click)="decreaseValue()"
+        ></button>
     </section>
 </ng-container>
diff --git a/projects/kit/components/input-count/test/input-count.component.spec.ts b/projects/kit/components/input-count/test/input-count.component.spec.ts
index 0acc578ed077..f248d483c206 100644
--- a/projects/kit/components/input-count/test/input-count.component.spec.ts
+++ b/projects/kit/components/input-count/test/input-count.component.spec.ts
@@ -443,14 +443,8 @@ describe('InputCount with TUI_INPUT_COUNT_OPTIONS', () => {
                     useValue: {
                         ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
                         icons: {
-                            up: ({$implicit}: any) =>
-                                $implicit === 'm'
-                                    ? 'tuiIconChevronUp'
-                                    : 'tuiIconChevronUpLarge',
-                            down: ({$implicit}: any) =>
-                                $implicit === 'm'
-                                    ? 'tuiIconChevronDown'
-                                    : 'tuiIconChevronDownLarge',
+                            up: 'tuiIconChevronUp',
+                            down: 'tuiIconChevronDown',
                         },
                         step,
                         min,

From b9bc31c372cff0f7ba088a435f09cb86e53a7db9 Mon Sep 17 00:00:00 2001
From: Dima Karimov <d.karimov@aitarget.com>
Date: Thu, 9 Sep 2021 15:25:37 +0300
Subject: [PATCH 3/9] fix(kit): implement review notes

---
 projects/kit/components/input-count/input-count-options.ts  | 2 +-
 .../kit/components/input-count/input-count.component.ts     | 6 +-----
 projects/kit/components/input-count/input-count.style.less  | 2 +-
 .../kit/components/input-count/input-count.template.html    | 2 +-
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/projects/kit/components/input-count/input-count-options.ts b/projects/kit/components/input-count/input-count-options.ts
index 5dd8d8f83107..7841e0814b47 100644
--- a/projects/kit/components/input-count/input-count-options.ts
+++ b/projects/kit/components/input-count/input-count-options.ts
@@ -18,7 +18,7 @@ export interface InputCountOptions {
 export const PASSWORD_ICON_UP = 'tuiIconPlus';
 export const PASSWORD_ICON_DOWN = 'tuiIconMinus';
 
-/** Default values for the input password options. */
+/** Default values for the input count options. */
 export const TUI_INPUT_COUNT_DEFAULT_OPTIONS: InputCountOptions = {
     icons: {
         up: PASSWORD_ICON_UP,
diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
index 23892cfa1913..d76d99046d1d 100644
--- a/projects/kit/components/input-count/input-count.component.ts
+++ b/projects/kit/components/input-count/input-count.component.ts
@@ -69,6 +69,7 @@ export class TuiInputCountComponent
     max = this.options.max;
 
     @Input()
+    @HostBinding('class._hide-buttons')
     @tuiDefaultProp()
     hideButtons = this.options.hideButtons;
 
@@ -124,11 +125,6 @@ export class TuiInputCountComponent
         return isNativeFocused(this.nativeFocusableElement);
     }
 
-    @HostBinding('class._has-buttons')
-    get hasButtons(): boolean {
-        return !this.hideButtons;
-    }
-
     get exampleText(): string {
         return String(this.min);
     }
diff --git a/projects/kit/components/input-count/input-count.style.less b/projects/kit/components/input-count/input-count.style.less
index 1beb82e2d541..51a35c4be75c 100644
--- a/projects/kit/components/input-count/input-count.style.less
+++ b/projects/kit/components/input-count/input-count.style.less
@@ -23,7 +23,7 @@
     flex-grow: 1;
     min-width: 0;
 
-    :host._has-buttons & {
+    :host:not(._hide-buttons) & {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
diff --git a/projects/kit/components/input-count/input-count.template.html b/projects/kit/components/input-count/input-count.template.html
index eff6b6c6d79c..e7eb7b047c5f 100644
--- a/projects/kit/components/input-count/input-count.template.html
+++ b/projects/kit/components/input-count/input-count.template.html
@@ -23,7 +23,7 @@
 >
     <ng-content></ng-content>
 </tui-primitive-textfield>
-<ng-container *ngIf="hasButtons && (minusTexts$ | async) as texts">
+<ng-container *ngIf="!hideButtons && (minusTexts$ | async) as texts">
     <section class="buttons">
         <button
             tuiIconButton

From 47cfec7ffc97946a74584faa9e09d259583121cc Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Fri, 10 Sep 2021 11:37:46 +0300
Subject: [PATCH 4/9] chore(build): fix

---
 projects/kit/components/input-count/input-count.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
index 58bc8d2806be..76b420f10139 100644
--- a/projects/kit/components/input-count/input-count.component.ts
+++ b/projects/kit/components/input-count/input-count.component.ts
@@ -27,7 +27,6 @@ import {
     formatNumber,
     NumberFormatSettings,
     TUI_NUMBER_FORMAT,
-    TUI_TEXTFIELD_APPEARANCE,
     TUI_TEXTFIELD_SIZE,
     tuiCreateNumberMask,
     TuiPrimitiveTextfieldComponent,

From be66cf19fa433ccdab883cdbf3dbff4b342bc87d Mon Sep 17 00:00:00 2001
From: Dima Karimov <d.karimov@aitarget.com>
Date: Fri, 10 Sep 2021 15:54:50 +0300
Subject: [PATCH 5/9] fix(kit): implement review notes

---
 .../directives/table-mode/table-mode.directive.ts   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/projects/core/directives/table-mode/table-mode.directive.ts b/projects/core/directives/table-mode/table-mode.directive.ts
index e1fc78f04573..2b7a379b475e 100644
--- a/projects/core/directives/table-mode/table-mode.directive.ts
+++ b/projects/core/directives/table-mode/table-mode.directive.ts
@@ -1,5 +1,7 @@
-import {Directive} from '@angular/core';
+import {Directive, SkipSelf} from '@angular/core';
 import {TUI_TEXTFIELD_APPEARANCE} from '@taiga-ui/core/tokens';
+import {TUI_INPUT_COUNT_OPTIONS} from '@taiga-ui/kit/components/input-count/input-count-options';
+import {InputCountOptions} from '@taiga-ui/kit';
 
 @Directive({
     selector: '[tuiTableMode]',
@@ -9,6 +11,15 @@ import {TUI_TEXTFIELD_APPEARANCE} from '@taiga-ui/core/tokens';
             // TODO: remove in ivy compilation
             useValue: 'table', // TuiAppearance.Table
         },
+        {
+            provide: TUI_INPUT_COUNT_OPTIONS,
+            deps: [[new SkipSelf(), TUI_INPUT_COUNT_OPTIONS]],
+            useFactory: inputCountOptionsFactory,
+        },
     ],
 })
 export class TuiTableModeDirective {}
+
+export function inputCountOptionsFactory(options: InputCountOptions): InputCountOptions {
+    return {...options, hideButtons: true};
+}

From 17074da5f9d90f5426fdae396f5c3ab9d5bb5138 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Fri, 10 Sep 2021 19:06:38 +0300
Subject: [PATCH 6/9] chore(core): deprecate `TableModeDirective`

---
 .../table-mode/table-mode.directive.ts        |  17 +-
 .../components/group/examples/1/index.html    |  60 +------
 .../components/group/examples/1/index.ts      |   8 -
 .../modules/components/group/group.module.ts  |   2 -
 .../components/input/examples/6/style.less    |  37 +---
 .../components/input/examples/6/template.html | 170 +++++++-----------
 .../modules/components/input/input.module.ts  |   4 +-
 .../input-count/input-count.component.ts      |  10 +-
 .../input-count/input-count.template.html     |   2 +-
 9 files changed, 87 insertions(+), 223 deletions(-)

diff --git a/projects/core/directives/table-mode/table-mode.directive.ts b/projects/core/directives/table-mode/table-mode.directive.ts
index 2b7a379b475e..9cc960d7d582 100644
--- a/projects/core/directives/table-mode/table-mode.directive.ts
+++ b/projects/core/directives/table-mode/table-mode.directive.ts
@@ -1,8 +1,10 @@
-import {Directive, SkipSelf} from '@angular/core';
+import {Directive} from '@angular/core';
 import {TUI_TEXTFIELD_APPEARANCE} from '@taiga-ui/core/tokens';
-import {TUI_INPUT_COUNT_OPTIONS} from '@taiga-ui/kit/components/input-count/input-count-options';
-import {InputCountOptions} from '@taiga-ui/kit';
 
+/**
+ * TODO: Remove in v.3
+ * @deprecated use @taiga-ui/addon-table
+ */
 @Directive({
     selector: '[tuiTableMode]',
     providers: [
@@ -11,15 +13,6 @@ import {InputCountOptions} from '@taiga-ui/kit';
             // TODO: remove in ivy compilation
             useValue: 'table', // TuiAppearance.Table
         },
-        {
-            provide: TUI_INPUT_COUNT_OPTIONS,
-            deps: [[new SkipSelf(), TUI_INPUT_COUNT_OPTIONS]],
-            useFactory: inputCountOptionsFactory,
-        },
     ],
 })
 export class TuiTableModeDirective {}
-
-export function inputCountOptionsFactory(options: InputCountOptions): InputCountOptions {
-    return {...options, hideButtons: true};
-}
diff --git a/projects/demo/src/modules/components/group/examples/1/index.html b/projects/demo/src/modules/components/group/examples/1/index.html
index eead515a4bf8..57bad5d6fdcd 100644
--- a/projects/demo/src/modules/components/group/examples/1/index.html
+++ b/projects/demo/src/modules/components/group/examples/1/index.html
@@ -18,7 +18,7 @@
                 tuiTextfieldExampleText="House building"
                 tuiHintContent="Write house building"
             >
-                House building
+                Building
             </tui-input>
             <tui-field-error formControlName="testValue2"></tui-field-error>
         </div>
@@ -26,64 +26,12 @@
             <tui-input
                 class="tui-group__inherit-item"
                 formControlName="testValue3"
-                tuiTextfieldExampleText="Apartament number"
-                tuiHintContent="Write an apartament number only"
+                tuiTextfieldExampleText="Apartment number"
+                tuiHintContent="Write an apartment number only"
             >
-                Apartament
+                Apartment
             </tui-input>
             <tui-field-error formControlName="testValue3"></tui-field-error>
         </div>
     </div>
-    <p i18n class="tui-space_top-8">
-        If you have nested components, it would be better to use
-        <code><strong>tuiProjectClassDirective</strong></code> that projects
-        classes from parent to host element
-    </p>
-    <div tuiGroup tuiTableMode class="group" [collapsed]="true">
-        <div [tuiProjectClass]="classNames">
-            <div>
-                <div>
-                    <tui-combo-box
-                        formControlName="combo"
-                        [tuiTextfieldLabelOutside]="true"
-                    >
-                        How much?
-                        <tui-data-list-wrapper
-                            *tuiDataList
-                            [items]="items"
-                        ></tui-data-list-wrapper>
-                    </tui-combo-box>
-                </div>
-            </div>
-        </div>
-        <div [tuiProjectClass]="classNames">
-            <div>
-                <div>
-                    <tui-input-number
-                        formControlName="money"
-                        [tuiTextfieldLabelOutside]="true"
-                        [postfix]="'USD' | tuiCurrency"
-                    >
-                        How much?
-                    </tui-input-number>
-                </div>
-            </div>
-        </div>
-        <div [tuiProjectClass]="classNames">
-            <div>
-                <div>
-                    <tui-select
-                        formControlName="select"
-                        [tuiTextfieldLabelOutside]="true"
-                    >
-                        How much?
-                        <tui-data-list-wrapper
-                            *tuiDataList
-                            [items]="items"
-                        ></tui-data-list-wrapper>
-                    </tui-select>
-                </div>
-            </div>
-        </div>
-    </div>
 </form>
diff --git a/projects/demo/src/modules/components/group/examples/1/index.ts b/projects/demo/src/modules/components/group/examples/1/index.ts
index 8a4ba3dc1ab0..c9758d3fa40c 100644
--- a/projects/demo/src/modules/components/group/examples/1/index.ts
+++ b/projects/demo/src/modules/components/group/examples/1/index.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {GROUP_CLASS_NAMES} from '@taiga-ui/kit';
 import {changeDetection} from '../../../../../change-detection-strategy';
 import {encapsulation} from '../../../../../view-encapsulation';
 
@@ -16,12 +15,5 @@ export class TuiGroupExample1 {
         testValue: new FormControl('', Validators.required),
         testValue2: new FormControl('', Validators.required),
         testValue3: new FormControl('', Validators.required),
-        combo: new FormControl(null, Validators.required),
-        money: new FormControl(null, Validators.required),
-        select: new FormControl(null, Validators.required),
     });
-
-    items = [1, 2, 3, 4, 5, 6];
-
-    classNames = GROUP_CLASS_NAMES;
 }
diff --git a/projects/demo/src/modules/components/group/group.module.ts b/projects/demo/src/modules/components/group/group.module.ts
index c23761539790..b4ef2226cbc7 100644
--- a/projects/demo/src/modules/components/group/group.module.ts
+++ b/projects/demo/src/modules/components/group/group.module.ts
@@ -13,7 +13,6 @@ import {
     TuiModeModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiTableModeModule} from '@taiga-ui/core/directives/table-mode';
 import {
     TuiBadgeModule,
     TuiComboBoxModule,
@@ -46,7 +45,6 @@ import {ExampleTuiGroupComponent} from './group.component';
         TuiCurrencyPipeModule,
         TuiInputNumberModule,
         TuiModeModule,
-        TuiTableModeModule,
         TuiDataListModule,
         TuiDataListWrapperModule,
         CommonModule,
diff --git a/projects/demo/src/modules/components/input/examples/6/style.less b/projects/demo/src/modules/components/input/examples/6/style.less
index 27372e948ecb..4564e4e4e8c4 100644
--- a/projects/demo/src/modules/components/input/examples/6/style.less
+++ b/projects/demo/src/modules/components/input/examples/6/style.less
@@ -1,40 +1,9 @@
 @import 'taiga-ui-local';
 
-.form {
-    .createStackingContext();
-}
-
 .table {
-    width: 51.5rem;
-}
-
-.row {
-    position: static;
-    margin-top: -0.0625rem;
+    width: 40rem;
 }
 
-.cell {
-    padding: 0;
-
-    &_date {
-        width: 9.0625rem;
-        flex: 0 0 9.0625rem;
-    }
-
-    &_color {
-        width: 6.25rem;
-        flex: 0 0 6.25rem;
-    }
-
-    &_quantity {
-        width: 5.625rem;
-        flex: 0 0 5.625rem;
-        text-align: right;
-    }
-
-    &_sum {
-        width: 9.375rem;
-        flex: 0 0 9.375rem;
-        text-align: right;
-    }
+.name {
+    width: 10rem;
 }
diff --git a/projects/demo/src/modules/components/input/examples/6/template.html b/projects/demo/src/modules/components/input/examples/6/template.html
index 63ee6b124adb..cfc7d4c344fc 100644
--- a/projects/demo/src/modules/components/input/examples/6/template.html
+++ b/projects/demo/src/modules/components/input/examples/6/template.html
@@ -1,116 +1,72 @@
 <p i18n>
-    <code>tuiTableMode</code> directive from
-    <code>TuiTableModeModule</code>
+    <code>tuiTable</code> directive from <code>@taiga-ui/addon-table</code>
 </p>
 
-<form tuiTableMode [formGroup]="form">
-    <table class="tui-table table">
+<form [formGroup]="form">
+    <table tuiTable class="table">
         <thead>
             <tr>
-                <th class="tui-table__th cell_name">Name</th>
-                <th class="tui-table__th cell_date">Date</th>
-                <th class="tui-table__th cell_gender">Gender</th>
-                <th class="tui-table__th cell_quantity">Quantity</th>
-                <th class="tui-table__th cell_sum">Sum, $</th>
+                <th tuiTh class="name">Name</th>
+                <th tuiTh>Date</th>
+                <th tuiTh>Gender</th>
+                <th tuiTh>Quantity</th>
+                <th tuiTh>Sum, $</th>
             </tr>
         </thead>
+        <tbody>
+            <tr>
+                <td tuiTd>
+                    <tui-input
+                        tuiTextfieldSize="m"
+                        tuiTextfieldExampleText="Ivan Ivanov"
+                        formControlName="name"
+                        [tuiTextfieldLabelOutside]="true"
+                    >
+                        Name
+                    </tui-input>
+                </td>
+                <td tuiTd>
+                    <tui-input-date
+                        tuiTextfieldSize="m"
+                        formControlName="date"
+                        [tuiTextfieldLabelOutside]="true"
+                    >
+                        Date
+                    </tui-input-date>
+                </td>
+                <td tuiTd>
+                    <tui-select
+                        formControlName="color"
+                        tuiTextfieldSize="m"
+                        [tuiTextfieldLabelOutside]="true"
+                    >
+                        Color
+                        <tui-data-list-wrapper
+                            *tuiDataList
+                            [items]="items"
+                        ></tui-data-list-wrapper>
+                    </tui-select>
+                </td>
+                <td tuiTd>
+                    <tui-input-count
+                        tuiTextfieldSize="m"
+                        formControlName="quantity"
+                        [tuiTextfieldLabelOutside]="true"
+                    >
+                        Quantity
+                    </tui-input-count>
+                </td>
+                <td tuiTd>
+                    <tui-input-number
+                        tuiTextfieldSize="m"
+                        formControlName="sum"
+                        [tuiTextfieldLabelOutside]="true"
+                        [readOnly]="true"
+                    >
+                        Sum
+                    </tui-input-number>
+                </td>
+            </tr>
+        </tbody>
     </table>
-    <div class="table">
-        <div tuiGroup class="row" [collapsed]="true">
-            <tui-input
-                class="cell cell_name"
-                tuiTextfieldSize="m"
-                tuiTextfieldExampleText="Ivan Ivanov"
-                formControlName="name"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Name
-            </tui-input>
-            <tui-input-date
-                class="cell cell_date"
-                tuiTextfieldSize="m"
-                formControlName="date"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Date
-            </tui-input-date>
-            <tui-select
-                class="cell cell_color"
-                formControlName="color"
-                tuiTextfieldSize="m"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Color
-                <tui-data-list-wrapper
-                    *tuiDataList
-                    [items]="items"
-                ></tui-data-list-wrapper>
-            </tui-select>
-            <tui-input-count
-                class="cell cell_quantity"
-                tuiTextfieldSize="m"
-                formControlName="quantity"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Quantity
-            </tui-input-count>
-            <tui-input-number
-                class="cell cell_sum"
-                tuiTextfieldSize="m"
-                formControlName="sum"
-                [tuiTextfieldLabelOutside]="true"
-                [readOnly]="true"
-            >
-                Sum
-            </tui-input-number>
-        </div>
-        <div tuiGroup class="row" [collapsed]="true">
-            <tui-input
-                class="cell cell_name"
-                tuiTextfieldSize="m"
-                tuiTextfieldExampleText="Ivan Ivanov"
-                formControlName="name"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Name
-            </tui-input>
-            <tui-input-date
-                class="cell cell_date"
-                tuiTextfieldSize="m"
-                formControlName="date"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Date
-            </tui-input-date>
-            <tui-select
-                class="cell cell_color"
-                formControlName="color"
-                tuiTextfieldSize="m"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Color
-                <tui-data-list-wrapper
-                    *tuiDataList
-                    [items]="items"
-                ></tui-data-list-wrapper>
-            </tui-select>
-            <tui-input-count
-                class="cell cell_quantity"
-                tuiTextfieldSize="m"
-                formControlName="quantity"
-                [tuiTextfieldLabelOutside]="true"
-            >
-                Quantity
-            </tui-input-count>
-            <tui-input-number
-                class="cell cell_sum"
-                tuiTextfieldSize="m"
-                formControlName="sum"
-                [tuiTextfieldLabelOutside]="true"
-                [readOnly]="true"
-            >
-                Sum
-            </tui-input-number>
-        </div>
-    </div>
 </form>
diff --git a/projects/demo/src/modules/components/input/input.module.ts b/projects/demo/src/modules/components/input/input.module.ts
index e57f53eaf659..26c7632c94c1 100644
--- a/projects/demo/src/modules/components/input/input.module.ts
+++ b/projects/demo/src/modules/components/input/input.module.ts
@@ -4,6 +4,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiInputCardModule, TuiMoneyModule} from '@taiga-ui/addon-commerce';
 import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
+import {TuiTableModule} from '@taiga-ui/addon-table';
 import {TuiLetModule, TuiMapperPipeModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
@@ -16,7 +17,6 @@ import {
     TuiNotificationModule,
     TuiPrimitiveTextfieldModule,
     TuiSvgModule,
-    TuiTableModeModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
 import {
@@ -58,7 +58,7 @@ import {ExampleTuiInputComponent} from './input.component';
         TuiMoneyModule,
         TuiLinkModule,
         TuiModeModule,
-        TuiTableModeModule,
+        TuiTableModule,
         TuiInputDateModule,
         TuiNotificationModule,
         TuiRepeatTimesModule,
diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
index 76b420f10139..5ce26a2b0ea0 100644
--- a/projects/kit/components/input-count/input-count.component.ts
+++ b/projects/kit/components/input-count/input-count.component.ts
@@ -27,6 +27,7 @@ import {
     formatNumber,
     NumberFormatSettings,
     TUI_NUMBER_FORMAT,
+    TUI_TEXTFIELD_APPEARANCE,
     TUI_TEXTFIELD_SIZE,
     tuiCreateNumberMask,
     TuiPrimitiveTextfieldComponent,
@@ -70,7 +71,6 @@ export class TuiInputCountComponent
     max = this.options.max;
 
     @Input()
-    @HostBinding('class._hide-buttons')
     @tuiDefaultProp()
     hideButtons = this.options.hideButtons;
 
@@ -99,6 +99,8 @@ export class TuiInputCountComponent
         @Inject(NgControl)
         control: NgControl | null,
         @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
+        @Inject(TUI_TEXTFIELD_APPEARANCE)
+        private readonly appearance: string,
         @Inject(TUI_TEXTFIELD_SIZE)
         private readonly textfieldSize: TuiTextfieldSizeDirective,
         @Inject(TUI_PLUS_MINUS_TEXTS)
@@ -112,6 +114,12 @@ export class TuiInputCountComponent
         super(control, changeDetectorRef);
     }
 
+    // TODO: Remove in v.3
+    @HostBinding('class._has-buttons')
+    get buttonsHidden(): boolean {
+        return !this.hideButtons && this.appearance !== 'table';
+    }
+
     get iconUp(): PolymorpheusContent<{}> {
         return this.options.icons.up;
     }
diff --git a/projects/kit/components/input-count/input-count.template.html b/projects/kit/components/input-count/input-count.template.html
index e7eb7b047c5f..03ccc5986940 100644
--- a/projects/kit/components/input-count/input-count.template.html
+++ b/projects/kit/components/input-count/input-count.template.html
@@ -23,7 +23,7 @@
 >
     <ng-content></ng-content>
 </tui-primitive-textfield>
-<ng-container *ngIf="!hideButtons && (minusTexts$ | async) as texts">
+<ng-container *ngIf="buttonsHidden && (minusTexts$ | async) as texts">
     <section class="buttons">
         <button
             tuiIconButton

From 8e0eb4880aa9238a04f227f790dc1275ce09d64e Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Fri, 10 Sep 2021 19:10:30 +0300
Subject: [PATCH 7/9] chore(kit): fix class

---
 projects/kit/components/input-count/input-count.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
index 5ce26a2b0ea0..2ba17cefaf13 100644
--- a/projects/kit/components/input-count/input-count.component.ts
+++ b/projects/kit/components/input-count/input-count.component.ts
@@ -115,9 +115,9 @@ export class TuiInputCountComponent
     }
 
     // TODO: Remove in v.3
-    @HostBinding('class._has-buttons')
+    @HostBinding('class._hide-buttons')
     get buttonsHidden(): boolean {
-        return !this.hideButtons && this.appearance !== 'table';
+        return this.hideButtons || this.appearance !== 'table';
     }
 
     get iconUp(): PolymorpheusContent<{}> {

From cfc4153ec6bb56e9c2ee84516c5af945a6d93166 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Fri, 10 Sep 2021 22:51:32 +0300
Subject: [PATCH 8/9] chore(kit): fix condition

---
 projects/kit/components/input-count/input-count.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
index 2ba17cefaf13..9b169388d3a8 100644
--- a/projects/kit/components/input-count/input-count.component.ts
+++ b/projects/kit/components/input-count/input-count.component.ts
@@ -117,7 +117,7 @@ export class TuiInputCountComponent
     // TODO: Remove in v.3
     @HostBinding('class._hide-buttons')
     get buttonsHidden(): boolean {
-        return this.hideButtons || this.appearance !== 'table';
+        return this.hideButtons || this.appearance === 'table';
     }
 
     get iconUp(): PolymorpheusContent<{}> {

From 4b13a609395c7bb25fff8fb8d6c2871a9f4b5dd5 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Fri, 10 Sep 2021 23:03:10 +0300
Subject: [PATCH 9/9] chore(kit): fix condition

---
 projects/kit/components/input-count/input-count.template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/kit/components/input-count/input-count.template.html b/projects/kit/components/input-count/input-count.template.html
index 03ccc5986940..fb59ebef32c3 100644
--- a/projects/kit/components/input-count/input-count.template.html
+++ b/projects/kit/components/input-count/input-count.template.html
@@ -23,7 +23,7 @@
 >
     <ng-content></ng-content>
 </tui-primitive-textfield>
-<ng-container *ngIf="buttonsHidden && (minusTexts$ | async) as texts">
+<ng-container *ngIf="!buttonsHidden && (minusTexts$ | async) as texts">
     <section class="buttons">
         <button
             tuiIconButton