feat(icons): make the rest of components icons customizable (#5046)

Co-authored-by: tinkoff-bot <[email protected]>
Co-authored-by: Nikita Barsukov <[email protected]>

projects/addon-commerce/components/card/card.component.ts

@@ -1,15 +1,17 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostBinding,
+    Inject,
+    Input,
+} from '@angular/core';
+import {
+    TUI_INPUT_CARD_OPTIONS,
+    TuiInputCardOptions,
+} from '@taiga-ui/addon-commerce/components/input-card';
 import {TuiPaymentSystem} from '@taiga-ui/addon-commerce/types';
-import {TUI_PAYMENT_SYSTEM_ICONS} from '@taiga-ui/addon-commerce/utils';
 import {TuiSizeS} from '@taiga-ui/core';
 
-const icons: Record<TuiPaymentSystem, string> = {
-    ...TUI_PAYMENT_SYSTEM_ICONS,
-    mir: 'tuiIconMirMono',
-    visa: 'tuiIconVisaMono',
-    electron: 'tuiIconElectronMono',
-};
-
 @Component({
     selector: 'tui-card',
     templateUrl: './card.template.html',
@@ -34,11 +36,15 @@ export class TuiCardComponent {
     @HostBinding('attr.data-size')
     size: TuiSizeS = 'm';
 
+    constructor(
+        @Inject(TUI_INPUT_CARD_OPTIONS) private readonly options: TuiInputCardOptions,
+    ) {}
+
     get hasBrandLogo(): boolean {
         return !!this.brandLogo && this.size === 'm';
     }
 
     get paymentSystemLogo(): string {
-        return this.paymentSystem ? icons[this.paymentSystem] : '';
+        return this.paymentSystem ? this.options.icons[this.paymentSystem] : '';
     }
 }

projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts

@@ -36,17 +36,20 @@ import {
 import {
     MODE_PROVIDER,
     TEXTFIELD_CONTROLLER_PROVIDER,
+    TUI_COMMON_ICONS,
     TUI_DIGIT_REGEXP,
     TUI_MODE,
     TUI_NON_DIGIT_REGEXP,
     TUI_TEXTFIELD_WATCHED_CONTROLLER,
     tuiAsDataListHost,
     TuiBrightness,
+    TuiCommonIcons,
     TuiDataListComponent,
     TuiDataListDirective,
     TuiDataListHost,
     TuiTextfieldController,
 } from '@taiga-ui/core';
+import {TUI_ARROW_OPTIONS, TuiArrowOptions} from '@taiga-ui/kit';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 
@@ -154,6 +157,8 @@ export class TuiInputCardGroupedComponent
         readonly cardGroupedTexts$: Observable<TuiCardGroupedTexts>,
         @Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER)
         readonly controller: TuiTextfieldController,
+        @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons,
+        @Inject(TUI_ARROW_OPTIONS) readonly arrowOptions: TuiArrowOptions,
         @Inject(TUI_INPUT_CARD_GROUPED_OPTIONS) options: TuiInputCardGroupedOptions,
     ) {
         super(control, cdr, options);

projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less

@@ -66,6 +66,8 @@
     width: 2rem;
     height: 2rem;
     margin-right: 0.5rem;
+    // Visa logo color
+    color: #1434cb;
 }
 
 .t-collapsed {

projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html

@@ -155,17 +155,17 @@
             *ngIf="hasCleaner"
             tuiWrapper
             appearance="icon"
-            src="tuiIconCloseLarge"
             class="t-icon"
+            [src]="icons.close"
             (click)="clear()"
         ></tui-svg>
         <tui-svg
             *ngIf="hasDropdown"
             tuiWrapper
             appearance="icon"
-            src="tuiIconChevronDownLarge"
             class="t-icon"
             [class.t-icon_rotated]="open"
+            [src]="arrowOptions.iconLarge"
             (click)="toggle()"
         ></tui-svg>
     </div>

projects/addon-commerce/components/input-card-grouped/test/input-card-grouped.component.spec.ts

@@ -213,8 +213,8 @@ describe(`InputCardGrouped`, () => {
 
         it(`input-card-grouped have a default icon`, () => {
             expect(testComponent.control.valid).toEqual(true);
-            expect(testComponent.component.defaultIcon).toEqual(`tuiIconVisa`);
-            expect(testComponent.component.icon).toEqual(`tuiIconVisa`);
+            expect(testComponent.component.defaultIcon).toEqual(`tuiIconVisaMono`);
+            expect(testComponent.component.icon).toEqual(`tuiIconVisaMono`);
             expect(testComponent.control.value).toEqual({card: `4111 1111 1111 1111`});
 
             expect(expectCardOutlet()).toBeFalsy();
@@ -226,7 +226,7 @@ describe(`InputCardGrouped`, () => {
             testComponent.component.cardSrc = `tuiIconMastercard`;
 
             expect(testComponent.control.valid).toEqual(true);
-            expect(testComponent.component.defaultIcon).toEqual(`tuiIconVisa`);
+            expect(testComponent.component.defaultIcon).toEqual(`tuiIconVisaMono`);
             expect(testComponent.component.icon).toEqual(`tuiIconMastercard`);
             expect(testComponent.control.value).toEqual({card: `4111 1111 1111 1111`});
 
@@ -240,7 +240,7 @@ describe(`InputCardGrouped`, () => {
                 fixture.componentInstance.customIconTemplate;
 
             expect(testComponent.control.valid).toEqual(true);
-            expect(testComponent.component.defaultIcon).toEqual(`tuiIconVisa`);
+            expect(testComponent.component.defaultIcon).toEqual(`tuiIconVisaMono`);
             expect(testComponent.component.icon).toBeInstanceOf(TemplateRef);
             expect(testComponent.control.value).toEqual({card: `4111 1111 1111 1111`});
 

projects/addon-commerce/components/input-card/abstract-input-card.ts

@@ -63,6 +63,7 @@ export abstract class AbstractTuiInputCard<
         return this.getPaymentSystem(this.card);
     }
 
+    /** @deprecated remove in 4.0 */
     get icon(): PolymorpheusContent {
         return this.cardSrc || this.defaultIcon;
     }

projects/addon-commerce/components/input-card/input-card.module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {MaskitoModule} from '@maskito/angular';
 import {
     TuiPrimitiveTextfieldModule,
+    TuiSvgModule,
     TuiTextfieldComponent,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -16,6 +17,7 @@ import {TuiInputCardDirective} from './input-card.directive';
         TuiPrimitiveTextfieldModule,
         TuiTextfieldControllerModule,
         TuiValueAccessorModule,
+        TuiSvgModule,
     ],
     declarations: [TuiInputCardComponent, TuiInputCardDirective],
     exports: [TuiInputCardComponent, TuiInputCardDirective, TuiTextfieldComponent],

projects/addon-commerce/components/input-card/input-card.options.ts

@@ -17,6 +17,7 @@ export interface TuiInputCardOptions {
     >;
 }
 
+// TODO: Move payment system icons into its own token in 4.0
 export const TUI_INPUT_CARD_DEFAULT_OPTIONS: TuiInputCardOptions = {
     icons: TUI_PAYMENT_SYSTEM_ICONS,
     cardSrc: ``,

projects/addon-commerce/components/input-card/input-card.style.less

@@ -10,3 +10,10 @@
     border-radius: inherit;
     text-align: inherit;
 }
+
+.t-payment-system {
+    width: 2rem;
+    height: 2rem;
+    // Visa logo color
+    color: #1434cb;
+}

projects/addon-commerce/components/input-card/input-card.template.html

@@ -1,7 +1,7 @@
 <tui-primitive-textfield
     tuiValueAccessor
     class="t-input"
-    [tuiTextfieldCustomContent]="icon"
+    [tuiTextfieldCustomContent]="cardSrc || (defaultIcon && logo)"
     [readOnly]="readOnly"
     [disabled]="disabled"
     [focusable]="focusable"
@@ -21,3 +21,9 @@
         ngProjectAs="input"
     ></ng-content>
 </tui-primitive-textfield>
+<ng-template #logo>
+    <tui-svg
+        class="t-payment-system"
+        [src]="defaultIcon"
+    ></tui-svg>
+</ng-template>

projects/addon-commerce/components/input-card/test/input-card.component.spec.ts

@@ -206,7 +206,7 @@ describe(`InputCard`, () => {
 
         it(`input-card component has a default icon`, () => {
             expect(testComponent.control.valid).toEqual(true);
-            expect(testComponent.component.icon).toEqual(`tuiIconVisa`);
+            expect(testComponent.component.icon).toEqual(`tuiIconVisaMono`);
             expect(testComponent.control.value).toEqual(`4111 1111 1111 1111`);
         });
 

projects/addon-commerce/package.json

@@ -24,6 +24,7 @@
         "@taiga-ui/cdk": ">=3.39.1",
         "@taiga-ui/core": ">=3.39.1",
         "@taiga-ui/i18n": ">=3.39.1",
+        "@taiga-ui/kit": ">=3.39.1",
         "@tinkoff/ng-polymorpheus": ">=4.0.0",
         "rxjs": ">=6.0.0",
         "tslib": ">=2.0.0"

projects/addon-commerce/utils/payment-system-icons.ts

@@ -1,9 +1,10 @@
 import {TuiPaymentSystem} from '@taiga-ui/addon-commerce/types';
 
+// TODO: Make it a token in 4.0, think about mono icons for card component
 export const TUI_PAYMENT_SYSTEM_ICONS: Record<TuiPaymentSystem, string> = {
     mir: `tuiIconMir`,
-    visa: `tuiIconVisa`,
-    electron: `tuiIconElectron`,
+    visa: `tuiIconVisaMono`,
+    electron: `tuiIconElectronMono`,
     mastercard: `tuiIconMastercard`,
     maestro: `tuiIconMaestro`,
     amex: `tuiIconAmex`,

projects/addon-doc/components/demo/demo.component.ts

@@ -30,6 +30,7 @@ import {
     tuiToInteger,
 } from '@taiga-ui/cdk';
 import {TuiBrightness, TuiModeDirective} from '@taiga-ui/core';
+import {TUI_ARROW_OPTIONS, TuiArrowOptions} from '@taiga-ui/kit';
 import {Subject} from 'rxjs';
 
 const MIN_WIDTH = 160;
@@ -83,6 +84,7 @@ export class TuiDocDemoComponent implements OnInit {
     readonly items: readonly TuiBrightness[] = ['onLight', 'onDark'];
 
     constructor(
+        @Inject(TUI_ARROW_OPTIONS) readonly options: TuiArrowOptions,
         @Inject(TUI_IS_MOBILE) readonly isMobile: boolean,
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
         @Inject(Location) private readonly locationRef: Location,

projects/addon-doc/components/demo/demo.template.html

@@ -116,9 +116,9 @@
                 </button>
                 <ng-template #icon>
                     <tui-svg
-                        src="tuiIconChevronDown"
                         class="t-icon"
                         [class.t-icon_rotated]="expanded"
+                        [src]="options.iconSmall"
                     ></tui-svg>
                 </ng-template>
                 <tui-expand

projects/addon-doc/components/example/example.component.ts

@@ -93,7 +93,7 @@ export class TuiDocExampleComponent {
         @Inject(Router) private readonly router: Router,
         @Inject(ActivatedRoute) private readonly route: ActivatedRoute,
         @Inject(NgLocation) private readonly ngLocation: NgLocation,
-        @Inject(TUI_DOC_EXAMPLE_OPTIONS) private readonly options: TuiDocExampleOptions,
+        @Inject(TUI_DOC_EXAMPLE_OPTIONS) readonly options: TuiDocExampleOptions,
     ) {}
 
     readonly visible = (files: Record<string, string>): boolean =>

projects/addon-doc/components/example/example.options.ts

@@ -7,6 +7,7 @@ export interface TuiDocExampleOptions {
     codeEditorVisibilityHandler: TuiBooleanHandler<Record<string, string>>;
     tabTitles: Map<unknown, PolymorpheusContent>;
     fullsize: boolean;
+    linkIcon: string;
 }
 
 export const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS: TuiDocExampleOptions = {
@@ -17,6 +18,7 @@ export const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS: TuiDocExampleOptions = {
         ),
     tabTitles: new Map(),
     fullsize: true,
+    linkIcon: `tuiIconLink`,
 };
 
 /**

projects/addon-doc/components/example/example.template.html

@@ -11,9 +11,9 @@
         tuiIconButton
         type="button"
         size="xs"
-        icon="tuiIconLink"
         appearance="icon"
         class="t-link-icon"
+        [icon]="options.linkIcon"
         [title]="copy$ | async"
         (click)="copyExampleLink()"
     ></button>

projects/addon-doc/components/internal/header/header.component.ts

@@ -1,6 +1,11 @@
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {Router} from '@angular/router';
-import {TUI_DOC_LOGO, TUI_DOC_MENU_TEXT} from '@taiga-ui/addon-doc/tokens';
+import {
+    TUI_DOC_ICONS,
+    TUI_DOC_LOGO,
+    TUI_DOC_MENU_TEXT,
+    TuiDocIcons,
+} from '@taiga-ui/addon-doc/tokens';
 import {ALWAYS_FALSE_HANDLER, TuiSwipeService} from '@taiga-ui/cdk';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {merge, Subject} from 'rxjs';
@@ -25,6 +30,7 @@ export class TuiDocHeaderComponent {
     ).pipe(startWith(false), distinctUntilChanged());
 
     constructor(
+        @Inject(TUI_DOC_ICONS) readonly icons: TuiDocIcons,
         @Inject(TUI_DOC_LOGO) readonly logo: PolymorpheusContent,
         @Inject(TUI_DOC_MENU_TEXT) readonly menu: string,
         @Inject(Router) private readonly router: Router,

projects/addon-doc/components/internal/header/header.template.html

@@ -1,9 +1,9 @@
 <button
     tuiIconButton
-    icon="tuiIconMenuLarge"
     appearance="icon"
     type="button"
     class="t-menu"
+    [icon]="icons.menu"
     [title]="menu"
     (click)="onClick()"
     (tuiActiveZoneChange)="onActiveZone($event)"

projects/addon-doc/components/internal/source-code/source-code.component.ts

@@ -1,6 +1,11 @@
 import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
 import {TuiDocSourceCodePathOptions} from '@taiga-ui/addon-doc/interfaces';
-import {TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT} from '@taiga-ui/addon-doc/tokens';
+import {
+    TUI_DOC_ICONS,
+    TUI_DOC_SOURCE_CODE,
+    TUI_DOC_SOURCE_CODE_TEXT,
+    TuiDocIcons,
+} from '@taiga-ui/addon-doc/tokens';
 import {tuiPure} from '@taiga-ui/cdk';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
@@ -23,6 +28,7 @@ export class TuiDocSourceCodeComponent {
     path = '';
 
     constructor(
+        @Inject(TUI_DOC_ICONS) readonly icons: TuiDocIcons,
         @Inject(TUI_DOC_SOURCE_CODE)
         readonly sourceCode: PolymorpheusContent<TuiDocSourceCodePathOptions>,
         @Inject(TUI_DOC_SOURCE_CODE_TEXT) readonly text: string,

projects/addon-doc/components/internal/source-code/source-code.template.html

@@ -2,10 +2,10 @@
     *polymorpheusOutlet="sourceCode as link; context: pathOptions"
     tuiIconButton
     type="button"
-    icon="tuiIconCode"
     appearance="icon"
     target="_blank"
     size="s"
+    [icon]="icons.code"
     [title]="text"
     [href]="link"
 ></a>

projects/addon-doc/components/main/main.component.ts

@@ -7,6 +7,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import {TuiThemeNightService, TuiThemeService} from '@taiga-ui/addon-doc/services';
+import {TUI_DOC_ICONS, TuiDocIcons} from '@taiga-ui/addon-doc/tokens';
 import {TuiSwipeService} from '@taiga-ui/cdk';
 import {TuiBrightness, TuiModeDirective} from '@taiga-ui/core';
 import {distinctUntilChanged, map, share, startWith} from 'rxjs/operators';
@@ -38,6 +39,7 @@ export class TuiDocMainComponent {
     );
 
     constructor(
+        @Inject(TUI_DOC_ICONS) private readonly icons: TuiDocIcons,
         @Inject(TuiThemeService) readonly theme: TuiThemeService,
         @Inject(TuiThemeNightService) readonly night: TuiThemeNightService,
     ) {}
@@ -46,4 +48,8 @@ export class TuiDocMainComponent {
     get mode(): TuiBrightness | null {
         return this.night.value ? 'onDark' : null;
     }
+
+    get icon(): string {
+        return this.night.value ? this.icons.day : this.icons.night;
+    }
 }

projects/addon-doc/components/main/main.template.html

@@ -18,7 +18,7 @@
             shape="rounded"
             type="button"
             class="tui-doc-night-mode-switch"
-            [icon]="night.value ? 'tuiIconSun' : 'tuiIconMoon'"
+            [icon]="icon"
             (click)="night.toggle()"
         ></button>
     </header>