feat(core): allow configuration of default button options

projects/core/components/button/button-options.ts

@@ -0,0 +1,27 @@
+import {InjectionToken} from '@angular/core';
+import {TuiAppearance} from '@taiga-ui/core/enums';
+import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core/types';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+export interface ButtonOptions {
+    readonly size: TuiSizeXS | TuiSizeXL;
+    readonly appearance: TuiAppearance | string;
+    readonly shape: 'square' | 'rounded' | null;
+    readonly icon: PolymorpheusContent;
+    readonly iconRight: PolymorpheusContent;
+}
+
+export const TUI_BUTTON_DEFAULT_OPTIONS: ButtonOptions = {
+    size: 'l',
+    shape: null,
+    appearance: TuiAppearance.Primary,
+    icon: '',
+    iconRight: '',
+};
+
+export const TUI_BUTTON_OPTIONS = new InjectionToken<ButtonOptions>(
+    'Default parameters for button component',
+    {
+        factory: () => TUI_BUTTON_DEFAULT_OPTIONS,
+    },
+);

projects/core/components/button/button.component.ts

@@ -22,11 +22,10 @@ import {
     TuiHoveredService,
     watch,
 } from '@taiga-ui/cdk';
-import {TuiAppearance} from '@taiga-ui/core/enums';
-import {TuiSizeS, TuiSizeXL, TuiSizeXS} from '@taiga-ui/core/types';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {TuiSizeS} from '@taiga-ui/core/types';
 import {Observable} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
+import {ButtonOptions, TUI_BUTTON_OPTIONS} from './button-options';
 
 @Component({
     selector: 'button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]',
@@ -49,24 +48,24 @@ export class TuiButtonComponent
     @Input()
     @HostBinding('attr.data-appearance')
     @tuiDefaultProp()
-    appearance: TuiAppearance | string = TuiAppearance.Primary;
+    appearance = this.options.appearance;
 
     @Input()
     @tuiDefaultProp()
     disabled = false;
 
     @Input()
     @tuiDefaultProp()
-    icon: PolymorpheusContent = '';
+    icon = this.options.icon;
 
     @Input()
     @tuiDefaultProp()
-    iconRight: PolymorpheusContent = '';
+    iconRight = this.options.iconRight;
 
     @Input()
     @HostBinding('attr.data-tui-host-shape')
     @tuiDefaultProp()
-    shape: 'square' | 'rounded' | null = null;
+    shape = this.options.shape;
 
     @Input()
     @HostBinding('class._loading')
@@ -76,7 +75,7 @@ export class TuiButtonComponent
     @Input()
     @HostBinding('attr.data-tui-host-size')
     @tuiDefaultProp()
-    size: TuiSizeXS | TuiSizeXL = 'l';
+    size = this.options.size;
 
     constructor(
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
@@ -86,6 +85,7 @@ export class TuiButtonComponent
         @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
         @Inject(TUI_TAKE_ONLY_TRUSTED_EVENTS)
         private readonly takeOnlyTrustedEvents: boolean,
+        @Inject(TUI_BUTTON_OPTIONS) private readonly options: ButtonOptions,
     ) {
         super();
 

projects/core/components/button/index.ts

@@ -1,2 +1,3 @@
 export * from './button.component';
 export * from './button.module';
+export * from './button-options';

projects/demo/src/modules/components/button/button.component.ts

@@ -8,7 +8,10 @@ import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
 import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
 import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
 import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
+import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
+import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
 
+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';
 
@@ -56,8 +59,14 @@ export class ExampleTuiButtonComponent extends AbstractExampleTuiInteractive {
         LESS: example4Less,
     };
 
+    readonly example5: FrontEndExample = {
+        TypeScript: example5Ts,
+        HTML: example5Html,
+    };
+
     readonly exampleImportModule = exampleImportModule;
     readonly exampleInsertTemplate = exampleInsertTemplate;
+    readonly exampleDefineOptions = exampleDefineOptions;
 
     disabled = false;
 

projects/demo/src/modules/components/button/button.module.ts

@@ -19,6 +19,7 @@ import {TuiButtonExample1} from './examples/1';
 import {TuiButtonExample2} from './examples/2';
 import {TuiButtonExample3} from './examples/3';
 import {TuiButtonExample4} from './examples/4';
+import {TuiButtonExample5} from './examples/5';
 
 @NgModule({
     imports: [
@@ -44,6 +45,7 @@ import {TuiButtonExample4} from './examples/4';
         TuiButtonExample2,
         TuiButtonExample3,
         TuiButtonExample4,
+        TuiButtonExample5,
     ],
     exports: [ExampleTuiButtonComponent],
 })

projects/demo/src/modules/components/button/button.template.html

@@ -61,6 +61,15 @@
         >
             <tui-button-example-4></tui-button-example-4>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="options"
+            i18n-heading
+            heading="Options"
+            [content]="example5"
+        >
+            <tui-button-example-5></tui-button-example-5>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
@@ -205,6 +214,20 @@
                     [code]="exampleInsertTemplate"
                 ></tui-doc-code>
             </li>
+
+            <li>
+                <p i18n>
+                    Optionally use the
+                    <code>TUI_BUTTON_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/demo/src/modules/components/button/examples/5/index.html

@@ -0,0 +1 @@
+<button tuiButton>Default options</button>

projects/demo/src/modules/components/button/examples/5/index.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {TUI_BUTTON_OPTIONS, TuiAppearance} from '@taiga-ui/core';
+import {changeDetection} from '../../../../../change-detection-strategy';
+
+@Component({
+    selector: 'tui-button-example-5',
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_BUTTON_OPTIONS,
+            useValue: {
+                iconRight: 'tuiIconCheckCircleLarge',
+                appearance: TuiAppearance.Outline,
+                size: 'm',
+            },
+        },
+    ],
+})
+export class TuiButtonExample5 {}

projects/demo/src/modules/components/button/examples/import/define-options.txt

@@ -0,0 +1,16 @@
+import {TUI_BUTTON_OPTIONS} from '@taiga-ui/core';
+
+...
+
+@NgModule({
+    providers: [
+        {
+            provide: TUI_BUTTON_OPTIONS,
+            useValue: {
+                icon: 'tuiIconCheckCircleLarge',
+                appearance: 'flat',
+                itemSize: 'm',
+            },
+        },
+    ]
+...