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

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

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,34 @@
+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: 'tuiIconChevronUp',
+                    down: 'tuiIconChevronDown',
+                },
+                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,20 @@
+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: 'tuiIconChevronUp',
+                down: 'tuiIconChevronDown',
+            },
+            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

@@ -32,6 +32,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>
@@ -147,6 +156,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,40 @@
+import {InjectionToken} from '@angular/core';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+export interface InputCountOptions {
+    readonly icons: Readonly<{
+        up: PolymorpheusContent<{}>;
+        down: PolymorpheusContent<{}>;
+    }>;
+    readonly appearance: string;
+    readonly hideButtons: boolean;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly postfix: string;
+}
+
+// TODO: remove in ivy compilation
+export const PASSWORD_ICON_UP = 'tuiIconPlus';
+export const PASSWORD_ICON_DOWN = 'tuiIconMinus';
+
+/** Default values for the input count 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

@@ -29,7 +29,6 @@ import {
     TUI_NUMBER_FORMAT,
     TUI_TEXTFIELD_APPEARANCE,
     TUI_TEXTFIELD_SIZE,
-    TuiAppearance,
     tuiCreateNumberMask,
     TuiPrimitiveTextfieldComponent,
     TuiSizeL,
@@ -39,7 +38,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({
@@ -59,23 +60,24 @@ 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()
+    @HostBinding('class._hide-buttons')
     @tuiDefaultProp()
-    hideButtons = false;
+    hideButtons = this.options.hideButtons;
 
     @Input()
     @tuiDefaultProp()
-    postfix = '';
+    postfix = this.options.postfix;
 
     @tuiPure
     getMask(allowNegative: boolean): TuiTextMaskOptions {
@@ -98,19 +100,27 @@ 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)
         readonly minusTexts$: Observable<[string, string]>,
         @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean,
+        @Inject(TUI_INPUT_COUNT_OPTIONS)
+        public readonly options: InputCountOptions,
         @Inject(TUI_NUMBER_FORMAT)
         private readonly numberFormat: NumberFormatSettings,
     ) {
         super(control, changeDetectorRef);
     }
 
+    get iconUp(): PolymorpheusContent<{}> {
+        return this.options.icons.up;
+    }
+
+    get iconDown(): PolymorpheusContent<{}> {
+        return this.options.icons.down;
+    }
+
     get nativeFocusableElement(): HTMLInputElement | null {
         return !this.primitiveTextfield || this.computedDisabled
             ? null
@@ -126,11 +136,6 @@ export class TuiInputCountComponent
         return isNativeFocused(this.nativeFocusableElement);
     }
 
-    @HostBinding('class._has-buttons')
-    get hasButtons(): boolean {
-        return !this.hideButtons && this.appearance !== TuiAppearance.Table;
-    }
-
     get exampleText(): string {
         return String(this.min);
     }

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);
@@ -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;
     }