Zhylka/legacy chips rewriting

src/app/shared/modules/material.module.ts

@@ -11,7 +11,7 @@ import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/m
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

src/app/shared/styles/create-form.scss

@@ -108,11 +108,11 @@ button:focus {
   height: auto;
 }
 
-.mat-chip-list ::ng-deep .mat-chip-list-wrapper {
+.mat-set ::ng-deep .mat-chip-set-wrapper {
   padding-right: 10px;
 }
 
-.mat-chip-list ::ng-deep .mat-chip {
+.mat-chip-set ::ng-deep .mat-chip {
   span {
     overflow: hidden;
     text-overflow: ellipsis;

src/app/shell/admin-tools/data/directions-wrapper/directions-institution-hierarchies-edit-form/directions-institution-hierarchies-edit-form.component.html

@@ -38,13 +38,13 @@ <h3 class="wrapper-title">{{ 'TITLES.EDIT_INSTITUTION_HIERARCHY_FORM_TITLE' | tr
             [compareWith]="compareItems"
             [formControl]="this.directionsControl">
             <mat-select-trigger>
-              <mat-chip-list #chipList>
+              <mat-chip-set #chipSet>
                 <mat-chip *ngFor="let direction of this.directionsControl.value" (removed)="onRemoveItem(direction)">
                   <img class="min-logo" src="../../assets/icons/icon_painting.svg" alt="Link" />
                   <span>{{ direction.title }}</span>
                   <mat-icon matChipRemove>cancel</mat-icon>
                 </mat-chip>
-              </mat-chip-list>
+              </mat-chip-set>
             </mat-select-trigger>
             <mat-option class="dropdown-option" *ngFor="let direction of directions$ | async" [value]="direction">
               {{ direction.title }}

src/app/shell/personal-cabinet/parent/create-child/child-form/child-form.component.html

@@ -68,12 +68,12 @@
       [compareWith]="compareSocialGroups"
       [formControl]="socialGroupControl">
       <mat-select-trigger>
-        <mat-chip-list #chipList>
+        <mat-chip-set #chipSet>
           <mat-chip *ngFor="let group of socialGroupControl.value" (removed)="onRemoveItem(group)">
             <span>{{ group.name }}</span>
             <mat-icon matChipRemove>cancel</mat-icon>
           </mat-chip>
-        </mat-chip-list>
+        </mat-chip-set>
       </mat-select-trigger>
       <mat-option class="dropdown-option" *ngFor="let group of socialGroups" [value]="group" [disabled]="checkDisabled(group)">
         {{ group.name }}

src/app/shell/personal-cabinet/parent/create-child/child-form/child-form.component.spec.ts

@@ -10,7 +10,7 @@ import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatRadioModule } from '@angular/material/radio';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NgxsModule } from '@ngxs/store';
 
 import { KeyFilterDirective } from 'shared/directives/key-filter.directive';
@@ -19,6 +19,7 @@ import { ChildFormComponent } from './child-form.component';
 describe('ChildFormComponent', () => {
   let component: ChildFormComponent;
   let fixture: ComponentFixture<ChildFormComponent>;
+  let translate: TranslateService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -56,13 +57,23 @@ describe('ChildFormComponent', () => {
       placeOfLiving: new FormControl(''),
       certificateOfBirth: new FormControl('')
     });
-
+    translate = TestBed.inject(TranslateService);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should remove all chips when language changes', () => {
+    const mockChip = { remove: jest.fn() };
+
+    (component as any).chipSet = { _chips: [mockChip] };
+
+    translate.use('uk');
+
+    expect(mockChip.remove).toHaveBeenCalled();
+  });
 });
 
 @Component({

src/app/shell/personal-cabinet/parent/create-child/child-form/child-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
-import { MatLegacyChipList as MatChipList } from '@angular/material/legacy-chips';
+import { MatChipSet } from '@angular/material/chips';
 import { MatLegacyOption as MatOption } from '@angular/material/legacy-core';
 import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
 import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
@@ -34,8 +34,9 @@ export class ChildFormComponent implements OnInit, OnDestroy {
 
   @ViewChild('select')
   private select: MatSelect;
-  @ViewChild('chipList')
-  private chipList: MatChipList;
+
+  @ViewChild('chipSet')
+  private chipSet: MatChipSet;
 
   public readonly validationConstants = ValidationConstants;
 
@@ -63,7 +64,9 @@ export class ChildFormComponent implements OnInit, OnDestroy {
 
     this.translateService.onLangChange.pipe(takeUntil(this.destroy$)).subscribe(({ lang }: LangChangeEvent) => {
       this.store.dispatch(new GetSocialGroup(lang));
-      this.chipList.chips.forEach((chip) => chip.remove());
+      this.chipSet._chips.forEach((chip) => {
+        chip.remove();
+      });
     });
   }
 

src/app/shell/personal-cabinet/provider/create-achievement/create-achievement.component.html

@@ -45,7 +45,7 @@ <h3 class="wrapper-title">{{ 'FORMS.HEADERS.ADD_ACHIEVEMENT' | translate }}</h3>
                 placeholder="{{ 'FORMS.PLACEHOLDERS.CHILDREN' | translate }}"
                 [compareWith]="compareEntities">
                 <mat-select-trigger>
-                  <mat-chip-list>
+                  <mat-chip-set>
                     <mat-chip
                       *ngFor="let child of childrenFormControl.value"
                       [removable]="true"
@@ -60,7 +60,7 @@ <h3 class="wrapper-title">{{ 'FORMS.HEADERS.ADD_ACHIEVEMENT' | translate }}</h3>
                       </div>
                       <mat-icon matChipRemove>cancel</mat-icon>
                     </mat-chip>
-                  </mat-chip-list>
+                  </mat-chip-set>
                 </mat-select-trigger>
                 <mat-option *ngFor="let child of approvedChildren.entities" [value]="child" class="dropdown-option">
                   <div
@@ -105,7 +105,7 @@ <h3 class="wrapper-title">{{ 'FORMS.HEADERS.ADD_ACHIEVEMENT' | translate }}</h3>
               placeholder="{{ 'FORMS.PLACEHOLDERS.SELECT_TEACHER' | translate }}"
               [compareWith]="compareEntities">
               <mat-select-trigger>
-                <mat-chip-list #chipList>
+                <mat-chip-set #chipSet>
                   <mat-chip *ngFor="let teacher of teachersFormControl.value" (removed)="onRemoveItem(teacher, 'teachers')">
                     <div
                       class="truncated-text"
@@ -117,7 +117,7 @@ <h3 class="wrapper-title">{{ 'FORMS.HEADERS.ADD_ACHIEVEMENT' | translate }}</h3>
                     </div>
                     <mat-icon matChipRemove>cancel</mat-icon>
                   </mat-chip>
-                </mat-chip-list>
+                </mat-chip-set>
               </mat-select-trigger>
               <ng-container *ngIf="workshop">
                 <mat-option *ngFor="let teacher of workshop.teachers" [value]="teacher" class="dropdown-option">

src/app/shell/personal-cabinet/provider/create-workshop/create-description-form/create-description-form.component.html

@@ -60,7 +60,7 @@
       >{{ 'FORMS.PLACEHOLDERS.KEYWORDS_START' | translate }} {{ validationConstants.MAX_KEYWORDS_LENGTH }}
       {{ 'FORMS.PLACEHOLDERS.KEYWORDS_END' | translate }}</span
     >
-    <mat-chip-list #chipList>
+    <mat-chip-grid #chipGrid>
       <mat-chip *ngFor="let keyWord of keyWords" (removed)="onRemoveKeyWord(keyWord)" class="keyWordChip">
         <div [matTooltip]="keyWord" showTooltipIfTruncated matTooltipClass="tooltip" class="chip-text">
           {{ keyWord }}
@@ -73,11 +73,11 @@
         #keyWordsInput
         (focusout)="onKeyWordsInput()"
         [formControl]="keyWordsCtrl"
-        [matChipInputFor]="chipList"
+        [matChipInputFor]="chipGrid"
         (keyup.enter)="onKeyWordsInput()"
         [(ngModel)]="keyWord"
         autocomplete="off"
         appTrimValue />
-    </mat-chip-list>
+    </mat-chip-grid>
   </div>
 </form>

src/app/shell/personal-cabinet/provider/create-workshop/create-description-form/create-description-form.component.spec.ts

@@ -4,7 +4,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatRadioModule } from '@angular/material/radio';