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

projects/evo-ui-kit/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [6.22.2](https://github.com/evotor/Evo-UI-Kit/compare/v6.22.1...v6.22.2) (2026-02-03)
+
+
+### Bug Fixes
+
+* **icons:** add kuper logos ([35d99e1](https://github.com/evotor/Evo-UI-Kit/commit/35d99e1882fbb131042d7a2dd7f064bf38ed639f))
+
 ## [6.22.1](https://github.com/evotor/Evo-UI-Kit/compare/v6.22.0...v6.22.1) (2026-02-03)
 
 

projects/evo-ui-kit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evotor-dev/ui-kit",
-    "version": "6.22.1",
+    "version": "6.22.2",
     "homepage": "https://evotor.github.io/Evo-UI-Kit",
     "repository": {
         "type": "git",

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

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

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

@@ -1,11 +1,11 @@
 import {createHostFactory, SpectatorHost} from '@ngneat/spectator';
 import {EvoChipComponent, EvoChipTheme, EvoChipType} from './evo-chip.component';
 import {FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {Component, QueryList, ViewChildren} from '@angular/core';
+import {Component, DebugElement, QueryList, ViewChildren} from '@angular/core';
 import {EvoUiClassDirective} from '../../directives';
 import {fakeAsync, tick} from '@angular/core/testing';
-import {EvoIconModule} from '../evo-icon';
-import {icons} from '../../../../icons';
+import {EvoCounterComponent, EvoCounterModule} from '../evo-counter';
+import {By} from '@angular/platform-browser';
 
 @Component({selector: 'evo-host-component', template: ''})
 class TestHostComponent {
@@ -24,7 +24,7 @@ class TestHostComponent {
 const createHost = createHostFactory({
     component: EvoChipComponent,
     declarations: [EvoUiClassDirective],
-    imports: [FormsModule, ReactiveFormsModule, EvoIconModule.forRoot([...icons])],
+    imports: [FormsModule, ReactiveFormsModule, EvoCounterModule],
     host: TestHostComponent,
 });
 
@@ -113,28 +113,52 @@ describe('EvoChipsComponent', () => {
         expect(inputElement === null).toBeTruthy();
     });
 
-    it('should have class chip_theme-grey when theme is not passed', () => {
+    it('should have class chip_theme_grey when theme is not passed', () => {
         createHostByTemplate(`
             <evo-chip name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-grey');
+        expect(chipWrapperElement).toHaveClass('chip_theme_grey');
     });
 
-    it('should have class chip_theme-white when theme is passed', () => {
+    it('should have class chip_theme_white when theme is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="white" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-white');
+        expect(chipWrapperElement).toHaveClass('chip_theme_white');
     });
 
-    it('should have class chip_theme-grey when theme is passed', () => {
+    it('should have class chip_theme_grey when theme is 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_theme-grey');
+        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(() => {
@@ -182,7 +206,7 @@ describe('EvoChipsComponent', () => {
         evoChipComponents.forEach((chip: EvoChipComponent, index: number) => {
             chipElements[index].querySelector('label').dispatchEvent(new MouseEvent('click'));
             host.detectChanges();
-            expect(chip.value === host.hostComponent.values[index]).toBeTruthy();
+            expect(chip.currentValue === host.hostComponent.values[index]).toBeTruthy();
         });
     });
 
@@ -226,7 +250,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
         const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
         chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeFalsy();
+            expect(chip.querySelector('.chip__close-btn') === null).toBeFalsy();
         });
     });
 
@@ -238,10 +262,11 @@ describe('EvoChipsComponent', () => {
         `);
 
         host.detectChanges();
-        const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
-        chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeTruthy();
-            expect(chip.querySelector('.chip__counter') === null).toBeFalsy();
+        const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));
+
+        chipDebugElements.forEach((chipDebug: DebugElement) => {
+            expect(chipDebug.query(By.css('.chip__close-btn'))).toBeFalsy();
+            expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeTruthy();
         });
     });
 
@@ -253,10 +278,10 @@ describe('EvoChipsComponent', () => {
         `);
 
         host.detectChanges();
-        const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
-        chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeFalsy();
-            expect(chip.querySelector('.chip__counter') === null).toBeTruthy();
+        const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));
+        chipDebugElements.forEach((chipDebug: DebugElement) => {
+            expect(chipDebug.query(By.css('.chip__close-btn'))).toBeTruthy();
+            expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeFalsy();
         });
     });
 
@@ -272,7 +297,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
         const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
         const e = new MouseEvent('click');
-        chipElement.querySelector('.chip__close').dispatchEvent(e);
+        chipElement.querySelector('.chip__close-btn').dispatchEvent(e);
         expect(host.hostComponent.onCloseClick).toHaveBeenCalledWith(e);
     }));
 
@@ -287,7 +312,7 @@ describe('EvoChipsComponent', () => {
 
         host.detectChanges();
         const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
-        chipElement.querySelector('.chip__close').click();
+        chipElement.querySelector('.chip__close-btn').click();
         expect(host.hostComponent.onCloseClick).not.toHaveBeenCalled();
     }));
 
@@ -308,7 +333,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
 
         expect(onChangeSpy).not.toHaveBeenCalled();
-        expect(chipComponent.value).toBe(true);
+        expect(chipComponent.currentValue).toBe(true);
 
         // Сбрасываем spy
         onChangeSpy.calls.reset();