Merge pull request #397 from analyst-one/fix/396-clearbutton-template

fix(#396): support clear button template

Author: nzbin

package.json

@@ -48,7 +48,7 @@
     "@angular/platform-browser": "^19.0.4",
     "@angular/platform-browser-dynamic": "^19.0.4",
     "@angular/router": "^19.0.4",
-    "@ng-select/ng-select": "^14.1.0",
+    "@ng-select/ng-select": "^14.2.2",
     "@ngx-translate/core": "^16.0.0",
     "@ngx-translate/http-loader": "^16.0.0",
     "date-fns": "^4.1.0",

projects/dev-app/src/app/select/select-demo.component.html

@@ -182,6 +182,37 @@ <h2>Test Templates</h2>
   <mat-error>Please choose a food</mat-error>
 </mat-form-field>
 
+<mat-form-field>
+  <mtx-select
+    [(ngModel)]="selectedAccount"
+    [items]="accounts"
+    bindLabel="name"
+    bindValue="name"
+    groupBy="country"
+    [disabled]="disabled"
+    [readonly]="readonly"
+    [multiple]="multipleSelect"
+    [closeOnSelect]="closeOnSelect"
+    [deselectOnClick]="deselectOnClick"
+  >
+    <ng-template ng-clearbutton-tmp>
+      <button
+        class="clearbutton"
+        mat-icon-button
+        tabindex="0"
+        aria-label="clear all"
+        [disabled]="disabled"
+        (click)="selectedAccount = ''"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </ng-template>
+  </mtx-select>
+
+  <mat-hint>Choose your favorite food</mat-hint>
+  <mat-error>Please choose a food</mat-error>
+</mat-form-field>
+
 <h2>Test Events</h2>
 
 <mat-form-field>

projects/dev-app/src/app/select/select-demo.component.scss

@@ -1,3 +1,16 @@
 mat-form-field {
   vertical-align: middle;
 }
+
+.clearbutton {
+  --mdc-icon-button-icon-size: 14px;
+  --mdc-icon-button-state-layer-size: 20px;
+
+  margin-right: 3px;
+
+  .mat-icon {
+    font-size: var(--mdc-icon-button-icon-size, 10px);
+    height: var(--mdc-icon-button-icon-size, 10px);
+    width: var(--mdc-icon-button-icon-size, 10px);
+  }
+}

projects/extensions/package.json

@@ -67,7 +67,7 @@
     }
   },
   "dependencies": {
-    "@ng-select/ng-select": "^14.1.0",
+    "@ng-select/ng-select": "^14.2.0",
     "ngx-color": "^9.0.0",
     "photoviewer": "^3.10.0",
     "tslib": "^2.4.0"

projects/extensions/select/select-module.ts

@@ -17,6 +17,7 @@ import {
   MtxSelectPlaceholderTemplate,
   MtxSelectTagTemplate,
   MtxSelectTypeToSearchTemplate,
+  MtxSelectClearbuttonTemplate,
 } from './templates';
 import { MtxOption } from './option';
 
@@ -40,6 +41,7 @@ import { MtxOption } from './option';
     MtxSelectTagTemplate,
     MtxSelectLoadingSpinnerTemplate,
     MtxSelectPlaceholderTemplate,
+    MtxSelectClearbuttonTemplate,
   ],
   exports: [
     MtxSelect,
@@ -56,6 +58,7 @@ import { MtxOption } from './option';
     MtxSelectTagTemplate,
     MtxSelectLoadingSpinnerTemplate,
     MtxSelectPlaceholderTemplate,
+    MtxSelectClearbuttonTemplate,
   ],
 })
 export class MtxSelectModule {}

projects/extensions/select/select.html

@@ -147,4 +147,10 @@
     </ng-template>
   }
 
-</ng-select>
+  @if (clearbuttonTemplate) {
+    <ng-template ng-clearbutton-tmp>
+      <ng-template [ngTemplateOutlet]="clearbuttonTemplate"></ng-template>
+    </ng-template>
+  }
+  
+</ng-select>

projects/extensions/select/select.ts

@@ -51,6 +51,7 @@ import {
   MtxSelectPlaceholderTemplate,
   MtxSelectTagTemplate,
   MtxSelectTypeToSearchTemplate,
+  MtxSelectClearbuttonTemplate,
 } from './templates';
 
 export type DropdownPosition = 'bottom' | 'top' | 'auto';
@@ -166,6 +167,8 @@ export class MtxSelect
   loadingSpinnerTemplate!: TemplateRef<any>;
   @ContentChild(MtxSelectPlaceholderTemplate, { read: TemplateRef })
   placeholderTemplate!: TemplateRef<any>;
+  @ContentChild(MtxSelectClearbuttonTemplate, { read: TemplateRef })
+  clearbuttonTemplate!: TemplateRef<any>;
 
   @ContentChildren(MtxOption, { descendants: true })
   mtxOptions!: QueryList<MtxOption>;

projects/extensions/select/templates.ts

@@ -59,3 +59,8 @@ export class MtxSelectLoadingSpinnerTemplate {
 export class MtxSelectPlaceholderTemplate {
   template = inject<TemplateRef<any>>(TemplateRef);
 }
+
+@Directive({ selector: '[ng-clearbutton-tmp]' })
+export class MtxSelectClearbuttonTemplate {
+  template = inject<TemplateRef<any>>(TemplateRef);
+}

yarn.lock

@@ -2244,10 +2244,10 @@
     "@napi-rs/nice-win32-ia32-msvc" "1.0.1"
     "@napi-rs/nice-win32-x64-msvc" "1.0.1"
 
-"@ng-select/ng-select@^14.1.0":
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/@ng-select/ng-select/-/ng-select-14.1.0.tgz#f90a8cd5a90c8644a8d0208e293ee97db3d96e94"
-  integrity sha512-cE/e7WIqLAgUF83mpmDWbgmy7OvzWTjCTjtcIzhabRbhN0RDqp7u39noC12kSN+viAfYnA1TS7rBru+IouNt1g==
+"@ng-select/ng-select@^14.2.2":
+  version "14.2.2"
+  resolved "https://registry.yarnpkg.com/@ng-select/ng-select/-/ng-select-14.2.2.tgz#31a8c6adea192388ab0a8cb0a33be5dd046e13e9"
+  integrity sha512-K7AAeaVpWiwkkWXQFb4+ywoSRDMazCcqptAtpVnJ5+A1W/RJsYOZwf0xLR2Lqe/8PykbQg5+fw6pVve+FFv6eg==
   dependencies:
     tslib "^2.3.1"