Make ChipList component generic

sha4be · sha4be · commit 127ca949a7f3 · 2025-11-27T19:23:06.000+01:00
diff --git a/libs/schematic/generators/ng-generate/components/card/generators/components/card/files/__name@dasherize__.component.html.template b/libs/schematic/generators/ng-generate/components/card/generators/components/card/files/__name@dasherize__.component.html.template
@@ -10,7 +10,7 @@
     <% } %>
 
     <% if (options.hasFilters) { %>
-        <<%= dasherize(name) %>-chip-list (removeFilter)="removeFilter($event)"></<%= dasherize(name) %>-chip-list>
+        <esmf-chip-list [activeFilters]="filterService.activeFilters" (removeFilter)="removeFilter($event)"></esmf-chip-list>
     <% } %>
 
   <mat-card class="data-card"
diff --git a/libs/schematic/generators/ng-generate/components/card/generators/components/card/index.ts b/libs/schematic/generators/ng-generate/components/card/generators/components/card/index.ts
@@ -14,7 +14,7 @@
 import {apply, applyTemplates, chain, MergeStrategy, mergeWith, move, Rule, SchematicContext, Tree, url} from '@angular-devkit/schematics';
 import {strings} from '@angular-devkit/core';
 import {Property} from '@esmf/aspect-model-loader';
-import {generateChipList, generateCommandBar} from '../../../../shared/generators/index';
+import {generateCommandBar} from '../../../../shared/generators/index';
 import {getEnumProperties, getEnumPropertyDefinitions} from '../../../../shared/utils';
 import {Schema} from '../../../../shared/schema';
 import {templateInclude} from '../../../../shared/include';
@@ -27,7 +27,6 @@ export function generateCardComponent(options: any): Rule {
     allProps = options.listAllProperties;
 
     return chain([
-      ...(options.hasFilters ? [generateChipList(options)] : []),
       ...(options.addCommandBar ? [generateCommandBar(options, allProps)] : []),
       generateCard(options, _context),
     ])(tree, _context);
diff --git a/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/files/__name@dasherize__-chip-list.component.html.template b/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/files/__name@dasherize__-chip-list.component.html.template
diff --git a/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/files/__name@dasherize__-chip-list.component.scss.template b/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/files/__name@dasherize__-chip-list.component.scss.template
diff --git a/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/files/__name@dasherize__-chip-list.component.ts.template b/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/files/__name@dasherize__-chip-list.component.ts.template
diff --git a/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/index.ts b/libs/schematic/generators/ng-generate/components/shared/generators/components/chip-list/index.ts
diff --git a/libs/schematic/generators/ng-generate/components/shared/generators/components/index.ts b/libs/schematic/generators/ng-generate/components/shared/generators/components/index.ts
@@ -11,5 +11,5 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export * from './chip-list/index';
+
 export * from './command-bar/index';
diff --git a/libs/schematic/generators/ng-generate/components/shared/generators/services/filter/files/__name@dasherize__-filter.service.ts.template b/libs/schematic/generators/ng-generate/components/shared/generators/services/filter/files/__name@dasherize__-filter.service.ts.template
@@ -18,6 +18,9 @@
 <% } %>
 
 <% if (options.hasSearchBar || options.isDateQuickFilter) { %>import { TranslocoService } from '@jsverse/transloco';<% } %>
+<% if (options.hasSearchBar || options.isEnumQuickFilter || options.isDateQuickFilter) { %>
+  import {FilterEnums, FilterType} from '@esmf/semantic-ui-schematic';
+<% } %>
 
 import {AbstractControl, FormControl, ValidationErrors, ValidatorFn} from '@angular/forms';
 import {Injectable<% if (options.isDateQuickFilter) { %>, Inject<% } %>} from '@angular/core';
@@ -39,22 +42,6 @@ import {<%= classify(options.selectedModelTypeName) %>
 
 } from '<%= options.typePath %>';
 
-<% if (options.hasSearchBar || options.isEnumQuickFilter || options.isDateQuickFilter) { %>
-    export enum FilterEnums {
-        Date,
-        Search,
-        Enum,
-    }
-
-    export type FilterType = {
-        type: FilterEnums;
-        label: string;
-        prop: string|null;
-        filterValue?:string;
-        removable?: boolean;
-    };
-<% } %>
-
 <% if (options.componentType === 'card') { %>
     export enum SortCard {
       ASCENDING,
diff --git a/libs/schematic/generators/ng-generate/components/shared/generators/styles/general/files/__name@dasherize__.component.scss.template b/libs/schematic/generators/ng-generate/components/shared/generators/styles/general/files/__name@dasherize__.component.scss.template
@@ -110,31 +110,6 @@ $gray-300: #e0e0e0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  ::ng-deep .mat-chip-list-wrapper {
-    margin: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-
-    .mat-mdc-chip {
-      flex: 0 0 auto;
-    }
-  }
-
-  .scrollable-chips-container {
-    display: flex;
-    align-content: center;
-    position: relative;
-    overflow-x: auto;
-
-    .chip-list-container {
-      display: flex;
-      overflow: hidden;
-      scroll-behavior: smooth;
-    }
-  }
 }
 
 .resizing {
diff --git a/libs/schematic/generators/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.html.template b/libs/schematic/generators/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.html.template
@@ -35,7 +35,7 @@
     <ng-container *ngTemplateOutlet="loadCustomTemplate()"></ng-container>
   </ng-container>
   <% if (options.hasFilters) { %>
-    <<%= dasherize(name) %>-chip-list (removeFilter)="removeFilter($event)"></<%= dasherize(name) %>-chip-list>
+    <esmf-chip-list [activeFilters]="filterService.activeFilters" (removeFilter)="removeFilter($event)"></esmf-chip-list>
   <% } %>
 
   <%= options.include('/generation/extended-table.html.template') %>
diff --git a/libs/schematic/generators/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template b/libs/schematic/generators/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template
@@ -32,6 +32,7 @@ import { MatTable } from '@angular/material/table';
 
 <% if (options.hasFilters || options.hasSearchBar) { %>
     import { FilterEnums, <%= options.filterServiceName %>} from './<%= cmpFileName %>-filter.service';
+    import {EsmfChipListComponent} from '@esmf/semantic-ui-schematic';
 <% } %>
 
 <% if (options.addCommandBar) { %>
@@ -123,14 +124,14 @@ export const NON_DATA_COLUMNS: <%= tableColumnsEnumName %>[] = [
 
 @Component({
     selector: '<%= options.selector %>',
+    imports: [EsmfChipListComponent],
     templateUrl: './<%= cmpFileName %>.component.html',
     styleUrls: ['./<%= cmpFileName %>.component.<%= options.style %>'],
     providers: [
       <%= tableServiceName %>
     ],
-    standalone: false
-    <% if (options.changeDetection) { %>, changeDetection: ChangeDetectionStrategy.<%= options.changeDetection %><% } %>
-    <% if (options.viewEncapsulation) { %>,encapsulation: ViewEncapsulation.<%= options.viewEncapsulation %><% } else { %>,encapsulation: ViewEncapsulation.None<% } %>
+    <% if (options.changeDetection) { %>changeDetection: ChangeDetectionStrategy.<%= options.changeDetection %>,<% } %>
+    <% if (options.viewEncapsulation) { %>encapsulation: ViewEncapsulation.<%= options.viewEncapsulation %>,<% } else { %>encapsulation: ViewEncapsulation.None,<% } %>
 })
 export class <%= classify(name) %>Component implements OnInit, AfterViewInit, AfterViewChecked, OnChanges<% if (options.hasSearchBar || options.enableRemoteDataHandling) { %>, OnDestroy<% } %> {
   private tableService = inject(<%= tableServiceName %><<%= options.aspectModelTypeName %>>);
diff --git a/libs/schematic/generators/ng-generate/components/table/generators/components/table/index.ts b/libs/schematic/generators/ng-generate/components/table/generators/components/table/index.ts
@@ -15,7 +15,7 @@ import {apply, applyTemplates, chain, MergeStrategy, mergeWith, move, Rule, Sche
 import {strings} from '@angular-devkit/core';
 import {camelize, classify, dasherize} from '@angular-devkit/core/src/utils/strings';
 import {getAllEnumProps} from '../../../../../../utils/aspect-model';
-import {generateChipList, generateCommandBar} from '../../../../shared/generators/index';
+import {generateCommandBar} from '../../../../shared/generators/index';
 import {
   getCustomRowActions,
   getEnumProperties,
@@ -39,7 +39,6 @@ export function generateTableComponent(options: TableSchema): Rule {
     sharedOptions['getCustomRowActions'] = getCustomRowActions;
 
     return chain([
-      ...(options.hasFilters ? [generateChipList(sharedOptions)] : []),
       ...(options.addCommandBar ? [generateCommandBar(sharedOptions, sharedOptions.allProps)] : []),
       generateHtml(options, _context),
     ])(tree, _context);
diff --git a/libs/schematic/src/index.ts b/libs/schematic/src/index.ts
@@ -1,4 +1,7 @@
+export * from './lib/components/chip-list/chip-list.component';
 
 export * from './lib/services/paginator-select-config.provider';
 export * from './lib/services/remote-table.service';
 export * from './lib/services/static-table.service';
+
+export * from './lib/models/filter.definition';
diff --git a/libs/schematic/src/lib/components/chip-list/chip-list.component.html b/libs/schematic/src/lib/components/chip-list/chip-list.component.html
@@ -0,0 +1,59 @@
+<ng-container *transloco="let t">
+  @if (activeFilters().length) {
+    <div class="scrollable-chips-container">
+      @if (chipsScrollEl.scrollable) {
+        <button
+          data-test="scroll-left-button"
+          mat-mini-fab
+          class="mat-elevation-z0"
+          [disabled]="chipsScrollEl.disableLeftBtn"
+          (click)="chipsScrollEl.scrollChipList('left')"
+        >
+          <mat-icon data-test="scroll-left-icon" class="material-icons" [matTooltip]="t('scroll.left')">
+            chevron_left
+          </mat-icon>
+        </button>
+      }
+      <div
+        class="chip-list-container"
+        data-test="chip-list-container"
+        esmfHorizontalOverflow
+        #chipsScrollEl="horizontalOverflow"
+        #chipList
+        [chipsObj]="chips"
+      >
+        <mat-chip-listbox data-test="chip-list" #chips>
+          @for (filter of activeFilters(); track filter) {
+            <mat-chip-option
+              data-test="chip"
+              [removable]="filter.removable"
+              (removed)="triggerRemoveFilter(filter)"
+            >
+              <div data-test="chip-text" class="chip-text" matTooltip="{{ chipListValue(filter) }}">
+                {{ chipListValue(filter) }}
+              </div>
+              @if (filter.removable) {
+                <button matChipRemove data-test="mat-chip-remove">
+                  <mat-icon class="material-icons" data-test="remove-chip">cancel</mat-icon>
+                </button>
+              }
+            </mat-chip-option>
+          }
+        </mat-chip-listbox>
+      </div>
+      @if (chipsScrollEl.scrollable) {
+        <button
+          data-test="scroll-right-button"
+          mat-mini-fab
+          class="mat-elevation-z0"
+          [disabled]="chipsScrollEl.disableRightBtn"
+          (click)="chipsScrollEl.scrollChipList('right')"
+        >
+          <mat-icon data-test="scroll-right-icon" class="material-icons" [matTooltip]="t('scroll.left')">
+            chevron_right
+          </mat-icon>
+        </button>
+      }
+    </div>
+  }
+</ng-container>
diff --git a/libs/schematic/src/lib/components/chip-list/chip-list.component.scss b/libs/schematic/src/lib/components/chip-list/chip-list.component.scss
@@ -0,0 +1,25 @@
+.esmf-chip-list {
+  .scrollable-chips-container {
+    display: flex;
+    align-content: center;
+    position: relative;
+
+    .chip-list-container {
+      display: flex;
+      overflow: hidden;
+      scroll-behavior: smooth;
+
+      .mat-mdc-chip-set .mdc-evolution-chip-set__chips {
+        margin: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+
+        .mat-mdc-chip {
+          flex: 0 0 auto;
+        }
+      }
+    }
+  }
+}
diff --git a/libs/schematic/src/lib/components/chip-list/chip-list.component.ts b/libs/schematic/src/lib/components/chip-list/chip-list.component.ts
@@ -0,0 +1,36 @@
+import {Component, EventEmitter, input, Output, ViewEncapsulation} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
+import {MatTooltip} from '@angular/material/tooltip';
+import {FilterEnums, FilterType} from '../../models/filter.definition';
+import {MatMiniFabButton} from '@angular/material/button';
+import {MatChipListbox, MatChipOption} from '@angular/material/chips';
+import {HorizontalOverflowDirective} from '../../directives/horizontal-overflow.directive';
+
+@Component({
+  selector: 'esmf-chip-list',
+  templateUrl: './chip-list.component.html',
+  imports: [MatIcon, MatTooltip, MatMiniFabButton, MatChipListbox, MatChipOption, HorizontalOverflowDirective],
+  styleUrls: ['./chip-list.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'esmf-chip-list' }
+})
+export class EsmfChipListComponent {
+  activeFilters = input.required<FilterType[]>();
+  @Output() removeFilter = new EventEmitter<FilterType>();
+
+  triggerRemoveFilter(filter: FilterType): void {
+    this.removeFilter.emit(filter);
+  }
+
+  chipListValue(filter: FilterType): string {
+    if (filter.type === FilterEnums.Search) {
+      return `${filter.filterValue}: ${filter.label}`;
+    }
+
+    if (filter.type === FilterEnums.Date) {
+      return filter.label;
+    }
+
+    return `${filter.prop}: ${filter.label}`;
+  }
+}
diff --git a/libs/schematic/src/lib/directives/horizontal-overflow.directive.ts b/libs/schematic/src/lib/directives/horizontal-overflow.directive.ts
diff --git a/libs/schematic/src/lib/models/filter.definition.ts b/libs/schematic/src/lib/models/filter.definition.ts
