feat(kit): allow configuration of default options for input-count

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>

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),
+    });
+}

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,
+        },
+    }],
+...

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;
 

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],
 })

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>

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';

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,
+    },
+);

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

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],

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;
+    }
+}