MRK-5063: Компоненты: Новые стили чипсов в ките (evo-chip) (v7)

projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html

@@ -1,48 +1,42 @@
 <label class="chip" [evoUiClass]="classes">
     <ng-container [ngSwitch]="type">
         <input
-            *ngSwitchCase="templateVariables?.chipTypes.checkbox"
+            *ngSwitchCase="EvoChipType.checkbox"
             type="checkbox"
+            class="chip__input"
             [disabled]="disabled"
+            [name]="name"
             [ngModel]="value"
             [value]="inheritedValue"
             (ngModelChange)="onInputChange($event)"
-            [name]="name"
         />
         <input
-            *ngSwitchCase="templateVariables?.chipTypes.radio"
+            *ngSwitchCase="EvoChipType.radio"
             type="radio"
+            class="chip__input"
             [disabled]="disabled"
+            [name]="name"
             [ngModel]="value"
             [value]="inheritedValue"
             (ngModelChange)="onInputChange($event)"
-            [name]="name"
         />
     </ng-container>
-    <div
-        class="chip__label"
-        [evoUiClass]="{'disabled': disabled}"
-    >
+    <div class="chip__label" [evoUiClass]="{'disabled': disabled}">
         <span class="chip__text">
             <ng-content></ng-content>
         </span>
-        <div
-            class="chip__counter"
-            *ngIf="(type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined"
-        >
-            <span class="chip__counter-value">
-                {{ counter }}
-            </span>
-        </div>
+
+        <div *ngIf="hasCounter" class="chip__counter">{{ counter }}</div>
+
         <button
-            class="chip__close"
             *ngIf="closable"
+            type="button"
+            class="chip__close"
             [disabled]="disabled"
             [title]="closeTitle"
             (click)="onCloseClick($event)"
-            type="button"
         >
-            <evo-icon shape="decline"></evo-icon>
+            <evo-icon shape="close" class="chip__close-icon"></evo-icon>
         </button>
     </div>
 </label>

projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts

@@ -137,6 +137,30 @@ describe('EvoChipsComponent', () => {
         expect(chipWrapperElement).toHaveClass('chip_theme-grey');
     });
 
+    it('should have class chip_size-normal when size is not passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+    });
+
+    it('should have class chip_size-normal when size=normal is passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" size="normal" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+    });
+
+    it('should have class chip_size-large when size=large is passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" size="large" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-large');
+    });
+
     it('should be disabled and non-clickable if disabled param is passed', fakeAsync(() => {
         createHostByTemplate(`
             <evo-chip theme="grey" name="myChip" value="1">ENABLED</evo-chip>

projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts

@@ -1,12 +1,12 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     EventEmitter,
     forwardRef,
     Injector,
     Input,
-    OnInit,
     OnDestroy,
     Output,
 } from '@angular/core';
@@ -27,6 +27,8 @@ export enum EvoChipTheme {
     white = 'white',
 }
 
+export type EvoChipSize = 'normal' | 'large';
+
 @Component({
     selector: 'evo-chip',
     templateUrl: 'evo-chip.component.html',
@@ -38,55 +40,56 @@ export enum EvoChipTheme {
             multi: true,
         },
     ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
-    @Input() type: EvoChipType | string;
-    @Input() theme: EvoChipTheme | string;
+export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    @Input() type: EvoChipType | string = EvoChipType.radio;
+    @Input() theme: EvoChipTheme | string = EvoChipTheme.grey;
+    @Input() size: EvoChipSize = 'normal';
     @Input() counter: number;
     @Input() disabled: boolean;
     @Input() name: string;
     @Input() closable: boolean;
     @Input() closeTitle = '';
 
-    @Input('value') set setInitialValue(value: any) {
-        this.inheritedValue = value;
-    }
-
+    // eslint-disable-next-line @angular-eslint/no-output-native
     @Output() close = new EventEmitter<Event>();
 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    readonly EvoChipType = EvoChipType;
+
     inheritedValue: any;
     value: any;
 
-    templateVariables = {
-        chipTypes: EvoChipType,
-        chipThemes: EvoChipTheme,
-    };
-
     private readonly destroy$ = new Subject<void>();
 
     constructor(protected injector: Injector, private readonly cdr: ChangeDetectorRef) {
         super(injector);
     }
 
+    @Input('value') set setInitialValue(value: any) {
+        this.inheritedValue = value;
+    }
+
     get classes(): string[] {
         const states = {
             touched: this.control?.touched,
             valid: this.currentState[EvoControlStates.valid],
             invalid: this.currentState[EvoControlStates.invalid],
-            disabled: this.control?.disabled,
+            disabled: this.disabled,
         };
 
         const result = Object.keys(states).filter((key: string) => states[key]);
 
         result.push(`theme-${this.theme || EvoChipTheme.grey}`);
-
-        result.push(`type-${this.type}`);
+        result.push(`type-${this.type || EvoChipType.radio}`);
+        result.push(`size-${this.size || 'normal'}`);
 
         return result;
     }
 
-    ngOnInit(): void {
-        this.initDefaultParams();
+    get hasCounter(): boolean {
+        return (this.type !== EvoChipType.label || !this.closable) && this.counter !== undefined;
     }
 
     ngAfterViewInit(): void {
@@ -104,42 +107,34 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
 
     writeValue(value: any): void {
         this.value = value;
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
 
-    registerOnChange(fn: any): void {
+    registerOnChange(fn: (_: any) => void): void {
         this.onChange = fn;
     }
 
-    registerOnTouched(fn: any): void {
+    registerOnTouched(fn: () => void): void {
         this.onTouched = fn;
     }
 
     setDisabledState(state: boolean): void {
         this.disabled = state;
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
 
     onInputChange(value: any): void {
         this.value = value;
         this.onChange(value);
         this.onTouched();
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
 
     onCloseClick(e: Event): void {
         this.close.emit(e);
     }
 
-    private initDefaultParams(): void {
-        if (!this.type) {
-            this.type = EvoChipType.radio;
-        }
-        if (!this.theme) {
-            this.theme = EvoChipTheme.grey;
-        }
-    }
-
     private onChange(_value: any): void {}
+
     private onTouched(): void {}
 }

projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.module.ts

@@ -1,25 +1,28 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EvoChipComponent } from './evo-chip.component';
-import { FormsModule } from '@angular/forms';
-import { EvoUiKitModule } from '../../evo-ui-kit.module';
-import { EvoIconModule } from '../evo-icon';
-import { iconDecline } from '@evotor-dev/ui-kit/icons/system';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {EvoChipComponent} from './evo-chip.component';
+import {FormsModule} from '@angular/forms';
+import {EvoUiKitModule} from '../../evo-ui-kit.module';
+import {EvoIconModule} from '../evo-icon';
+import {iconClose} from "@evotor-dev/ui-kit/icons/header";
+import {EvoCounterModule} from "../evo-counter";
 
 @NgModule({
     declarations: [EvoChipComponent],
     imports: [
         CommonModule,
         FormsModule,
         EvoUiKitModule,
-        EvoIconModule.forRoot([{
-            name: 'system',
-            shapes: {
-                'decline': iconDecline,
-            }
-        }]),
+        EvoIconModule.forRoot([
+            {
+                name: 'system',
+                shapes: {
+                    close: iconClose,
+                },
+            },
+        ]),
+        EvoCounterModule,
     ],
     exports: [EvoChipComponent],
 })
-export class EvoChipModule {
-}
+export class EvoChipModule {}