Merge pull request #6129 from abpframework/feat/6128

feat: add multiselect to extensible form props

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -38,8 +38,27 @@
       <option
         *ngFor="let option of options$ | async; trackBy: track.by('value')"
         [ngValue]="option.value"
-        >{{ option.key }}</option
       >
+        {{ option.key }}
+      </option>
+    </select>
+  </ng-template>
+
+  <ng-template ngSwitchCase="multiselect">
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
+    <select
+      [id]="prop.id"
+      [formControlName]="prop.name"
+      [abpDisabled]="disabled"
+      multiple="multiple"
+      class="custom-select form-control"
+    >
+      <option
+        *ngFor="let option of options$ | async; trackBy: track.by('value')"
+        [ngValue]="option.value"
+      >
+        {{ option.key }}
+      </option>
     </select>
   </ng-template>
 

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -53,7 +53,7 @@ export class ExtensibleFormPropComponent implements OnChanges {
   }
 
   getComponent(prop: FormProp): string {
-    if (prop.options) return 'select';
+    if (prop.options && prop.type !== ePropType.MultiSelect) return 'select';
 
     switch (prop.type) {
       case ePropType.Boolean:
@@ -66,6 +66,8 @@ export class ExtensibleFormPropComponent implements OnChanges {
         return 'textarea';
       case ePropType.Time:
         return 'time';
+      case ePropType.MultiSelect:
+        return 'multiselect';
       default:
         return 'input';
     }

npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts

@@ -9,4 +9,5 @@ export const enum ePropType {
   String = 'string',
   Text = 'text',
   Time = 'time',
+  MultiSelect = 'multiselect',
 }