fix(jss): add clearable and searchvalue support to select

vcl · Jul 14, 2022 · af58c12 · af58c12
1 parent 3b1d59f
commit af58c12
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/demo/app/demos/jss-form/hero.ts b/demo/app/demos/jss-form/hero.ts
@@ -372,6 +372,7 @@ export function buildHeroSchema(config: HeroSchemaConfig, disabled: boolean, emp
         name: 'perks',
         label: 'Perks',
         params: {
+          clearable: true,
           placeholder: 'Select perks',
           selectionMode: 'multiple',
           search: true,

diff --git a/lib/ng-vcl/src/jss-form/fields/select.ts b/lib/ng-vcl/src/jss-form/fields/select.ts
@@ -12,6 +12,9 @@ export class FormFieldSelect extends FormFieldControl<VCLFormFieldSchemaSelect,
   get search()  {
     return this.params.search || false;
   }
+  get searchValue()  {
+    return this.params.searchValue || false;
+  }
   get maxHeight()  {
     return this.params.maxHeight || undefined;
   }
@@ -21,6 +24,9 @@ export class FormFieldSelect extends FormFieldControl<VCLFormFieldSchemaSelect,
   get options()  {
     return this.params.options || [];
   }
+  get clearable()  {
+    return this.params.clearable || false;
+  }
   protected createDefaultValue() {
     return this.selectionMode === 'single' ? null : [];
   }
@@ -40,11 +46,11 @@ export class EmptyDirective {
   <vcl-form-control-group [errorStateAgent]="field.errorStateAgent" *ngIf="field.visible">
     <vcl-label *ngIf="!!field.label">{{field.label}}</vcl-label>
     <vcl-jss-form-input-wrapper>
-      <vcl-select [placeholder]="field.placeholder" [search]="field.search" [maxHeight]="field.maxHeight">
+      <vcl-select [placeholder]="field.placeholder" [search]="field.search" [maxHeight]="field.maxHeight" [clearable]="field.clearable">
         <ng-container empty #empty>
           <ng-template vclEmptyHost></ng-template>
         </ng-container>
-        <vcl-select-list [formControl]="field.control" [selectionMode]="field.selectionMode">
+        <vcl-select-list [formControl]="field.control" [selectionMode]="field.selectionMode" [searchValue]="field.searchValue">
           <vcl-select-list-item *ngFor="let option of field.options" [value]="option.value">
             <vcl-label>{{option.label}}</vcl-label>
             <vcl-sub-label *ngIf="option.sublabel">{{option.sublabel}}</vcl-sub-label>

diff --git a/lib/ng-vcl/src/jss-form/schemas.ts b/lib/ng-vcl/src/jss-form/schemas.ts
@@ -93,8 +93,10 @@ export interface VCLFormFieldSchemaSelectParams<T = any> {
   options: VCLFormFieldSchemaOptions[];
   placeholder?: string;
   search?: boolean;
+  searchValue?: boolean;
   maxHeight?: number;
   emptyComponent?: EmptyComponent<T> | (new() => object);
+  clearable?: boolean;
 }
 
 export interface VCLFormFieldSchemaSelect extends VCLFormFieldControlSchema {