feat(kit): TUI_AVATAR_OPTIONS default options configuration for Avatar

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

@@ -9,6 +9,10 @@ import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
     changeDetection,
 })
 export class ExampleTuiAvatarComponent {
+    readonly exampleOptions: RawLoaderContent = import(
+        '!!raw-loader!./examples/import/define-options.md'
+    );
+
     readonly exampleModule: RawLoaderContent = import(
         '!!raw-loader!./examples/import/import-module.md'
     );
@@ -27,6 +31,11 @@ export class ExampleTuiAvatarComponent {
         HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+    };
+
     readonly avatarUrlVariants: readonly string[] = [
         'https://ng-web-apis.github.io/dist/assets/images/web-api.svg',
     ];

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

@@ -9,6 +9,7 @@ import {TuiAvatarModule, TuiRadioListModule} from '@taiga-ui/kit';
 import {ExampleTuiAvatarComponent} from './avatar.component';
 import {TuiAvatarExample1} from './examples/1';
 import {TuiAvatarExample2} from './examples/2';
+import {TuiAvatarExample3} from './examples/3';
 
 @NgModule({
     imports: [
@@ -21,7 +22,12 @@ import {TuiAvatarExample2} from './examples/2';
         ReactiveFormsModule,
         RouterModule.forChild(generateRoutes(ExampleTuiAvatarComponent)),
     ],
-    declarations: [ExampleTuiAvatarComponent, TuiAvatarExample1, TuiAvatarExample2],
+    declarations: [
+        ExampleTuiAvatarComponent,
+        TuiAvatarExample1,
+        TuiAvatarExample2,
+        TuiAvatarExample3,
+    ],
     exports: [ExampleTuiAvatarComponent],
 })
 export class ExampleTuiAvatarModule {}

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

@@ -26,6 +26,15 @@
         >
             <tui-avatar-example-2></tui-avatar-example-2>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="options"
+            i18n-heading
+            heading="Options"
+            [content]="example3"
+        >
+            <tui-avatar-example-3></tui-avatar-example-3>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
@@ -116,6 +125,20 @@
                     [code]="exampleHtml"
                 ></tui-doc-code>
             </li>
+
+            <li>
+                <p i18n>
+                    Optionally use the
+                    <code>TUI_AVATAR_OPTIONS</code>
+                    injection token to override the default options for the
+                    component.
+                </p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleOptions"
+                ></tui-doc-code>
+            </li>
         </ol>
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/components/avatar/examples/3/index.html

@@ -0,0 +1,4 @@
+<tui-avatar
+    text="yuliya tsareva"
+    class="tui-space_top-1"
+></tui-avatar>

projects/demo/src/modules/components/avatar/examples/3/index.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {tuiAvatarOptionsProvider} from '@taiga-ui/kit';
+
+@Component({
+    selector: 'tui-avatar-example-3',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+    providers: [
+        tuiAvatarOptionsProvider({
+            size: 'l',
+            autoColor: true,
+            rounded: true,
+        }),
+    ],
+})
+export class TuiAvatarExample3 {}

projects/demo/src/modules/components/avatar/examples/import/define-options.md

@@ -0,0 +1,15 @@
+```ts
+import {tuiAvatarOptionsProvider} from '@taiga-ui/kit';
+// ...
+
+@NgModule({
+  providers: [
+    tuiAvatarOptionsProvider({
+      size: 'l',
+      autoColor: true,
+      rounded: true,
+    }),
+  ],
+})
+export class MyModule {}
+```

projects/kit/components/avatar/avatar-options.ts

@@ -0,0 +1,29 @@
+import {InjectionToken, ValueProvider} from '@angular/core';
+import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
+
+export interface TuiAvatarOptions {
+    readonly size: TuiSizeXS | TuiSizeXXL;
+    readonly autoColor: boolean;
+    readonly rounded: boolean;
+}
+
+/** Default values for the avatar options. */
+export const TUI_AVATAR_DEFAULT_OPTIONS: TuiAvatarOptions = {
+    size: 'm',
+    autoColor: false,
+    rounded: false,
+};
+
+export const TUI_AVATAR_OPTIONS = new InjectionToken<TuiAvatarOptions>(
+    'Default parameters for avatar component',
+    {
+        factory: () => TUI_AVATAR_DEFAULT_OPTIONS,
+    },
+);
+
+export const tuiAvatarOptionsProvider: (
+    options: Partial<TuiAvatarOptions>,
+) => ValueProvider = (options: Partial<TuiAvatarOptions>) => ({
+    provide: TUI_AVATAR_OPTIONS,
+    useValue: {...TUI_AVATAR_DEFAULT_OPTIONS, ...options},
+});

projects/kit/components/avatar/avatar.component.ts

@@ -1,8 +1,16 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostBinding,
+    Inject,
+    Input,
+} from '@angular/core';
 import {tuiDefaultProp, tuiRequiredSetter} from '@taiga-ui/cdk';
-import {sizeBigger, TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
+import {sizeBigger} from '@taiga-ui/core';
 import {stringHashToHsl} from '@taiga-ui/kit/utils/format';
 
+import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar-options';
+
 @Component({
     selector: 'tui-avatar',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -13,7 +21,7 @@ export class TuiAvatarComponent {
     @Input()
     @HostBinding('attr.data-size')
     @tuiDefaultProp()
-    size: TuiSizeXS | TuiSizeXXL = 'm';
+    size = this.options.size;
 
     @Input('avatarUrl')
     @tuiRequiredSetter()
@@ -28,17 +36,19 @@ export class TuiAvatarComponent {
 
     @Input()
     @tuiDefaultProp()
-    autoColor = false;
+    autoColor: boolean = this.options.autoColor;
 
     @Input()
     @HostBinding('class._rounded')
     @tuiDefaultProp()
-    rounded = false;
+    rounded: boolean = this.options.rounded;
 
     avatarUrl: string | null = null;
 
     isUrlValid = false;
 
+    constructor(@Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions) {}
+
     @HostBinding('style.background')
     get bgColor(): string {
         return this.autoColor ? stringHashToHsl(this.text) : '';

projects/kit/components/avatar/index.ts

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

projects/kit/components/avatar/tests/avatar-options.spec.ts

@@ -0,0 +1,45 @@
+import {Component, ViewChild} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {TuiAvatarComponent} from '../avatar.component';
+import {TuiAvatarModule} from '../avatar.module';
+import {tuiAvatarOptionsProvider} from '../avatar-options';
+
+describe('Avatar component options', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let testComponent: TestComponent;
+
+    @Component({
+        template: `
+            <tui-avatar></tui-avatar>
+        `,
+    })
+    class TestComponent {
+        @ViewChild(TuiAvatarComponent, {static: true})
+        component!: TuiAvatarComponent;
+    }
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [TuiAvatarModule],
+            declarations: [TestComponent],
+            providers: [
+                tuiAvatarOptionsProvider({
+                    size: 'l',
+                    autoColor: true,
+                    rounded: true,
+                }),
+            ],
+        });
+
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('override by custom options', () => {
+        expect(testComponent.component.size).toEqual('l');
+        expect(testComponent.component.autoColor).toEqual(true);
+        expect(testComponent.component.rounded).toEqual(true);
+    });
+});