feat(bootstrap): add addons to select (#1381)

fix #1380

Author: aitboudad

src/bootstrap/addons/index.ts

@@ -0,0 +1 @@
+export * from './src/public_api';

src/bootstrap/addons/package.json

@@ -0,0 +1,3 @@
+{
+  "ngPackage": {}
+}

src/bootstrap/src/lib/extension/addon.ts renamed to src/bootstrap/addons/src/addon.extension.ts

@@ -0,0 +1,15 @@
+<div class="input-group">
+  <div class="input-group-prepend" *ngIf="to.addonLeft" [ngStyle]="{cursor: to.addonLeft.onClick ? 'pointer' : 'inherit'}"
+    (click)="addonLeftClick($event)">
+    <i class="input-group-text" [ngClass]="to.addonLeft.class" *ngIf="to.addonLeft.class"></i>
+    <span *ngIf="to.addonLeft.text" class="input-group-text">{{ to.addonLeft.text }}</span>
+  </div>
+  <div class="input-addons">
+    <ng-container #fieldComponent></ng-container>
+  </div>
+  <div class="input-group-append" *ngIf="to.addonRight" [ngStyle]="{cursor: to.addonRight.onClick ? 'pointer' : 'inherit'}"
+    (click)="addonRightClick($event)">
+    <i class="input-group-text" [ngClass]="to.addonRight.class" *ngIf="to.addonRight.class"></i>
+    <span *ngIf="to.addonRight.text" class="input-group-text">{{ to.addonRight.text }}</span>
+  </div>
+</div>

src/bootstrap/addons/src/addons.component.html

@@ -0,0 +1,16 @@
+:host ::ng-deep .input-group> {
+  :not(:first-child) .form-control {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  :not(:last-child) .form-control {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .input-addons {
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    margin-bottom: 0;
+  }
+}

src/bootstrap/addons/src/addons.component.scss

@@ -0,0 +1,23 @@
+import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { FieldWrapper } from '@ngx-formly/core';
+
+@Component({
+  selector: 'formly-wrapper-addons',
+  templateUrl: './addons.component.html',
+  styleUrls: ['./addons.component.scss'],
+})
+export class FormlyWrapperAddons extends FieldWrapper {
+  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent!: ViewContainerRef;
+
+  addonRightClick($event: any) {
+    if (this.to.addonRight.onClick) {
+      this.to.addonRight.onClick(this.to, this, $event);
+    }
+  }
+
+  addonLeftClick($event: any) {
+    if (this.to.addonLeft.onClick) {
+      this.to.addonLeft.onClick(this.to, this, $event);
+    }
+  }
+}

src/bootstrap/addons/src/addons.component.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormlyModule } from '@ngx-formly/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { FormlyWrapperAddons } from './addons.component';
+import { addonsExtension } from './addon.extension';
+
+@NgModule({
+  declarations: [FormlyWrapperAddons],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+
+    FormlyModule.forChild({
+      wrappers: [
+        { name: 'addons', component: FormlyWrapperAddons },
+      ],
+      extensions: [
+        { name: 'addons', extension: { postPopulate: addonsExtension } },
+      ],
+    }),
+  ],
+})
+export class FormlyBootstrapAddonsModule { }

src/bootstrap/addons/src/addons.module.ts

@@ -0,0 +1 @@
+export { FormlyBootstrapAddonsModule } from './addons.module';

src/bootstrap/addons/src/public_api.ts

@@ -4,6 +4,7 @@
   "deleteDestPath": false,
   "lib": {
     "entryFile": "src/public_api.ts",
+    "addons": [{ "path": "addons" }],
     "externals": {
       "@ngx-formly/core": "@ngx-formly/core"
     }

src/bootstrap/ng-package.json

@@ -7,11 +7,7 @@ import {
   FormlyFieldTextArea,
   FormlyFieldMultiCheckbox,
 } from './types/types';
-import {
-  FormlyWrapperAddons,
-  FormlyWrapperFormField,
-} from './wrappers/wrappers';
-import { addonsExtension } from './extension/addon';
+import { FormlyWrapperFormField } from './wrappers/wrappers';
 
 export const FIELD_TYPE_COMPONENTS = [
   // types
@@ -23,7 +19,6 @@ export const FIELD_TYPE_COMPONENTS = [
   FormlyFieldMultiCheckbox,
 
   // wrappers
-  FormlyWrapperAddons,
   FormlyWrapperFormField,
 ];
 
@@ -61,10 +56,6 @@ export const BOOTSTRAP_FORMLY_CONFIG: ConfigOption = {
     },
   ],
   wrappers: [
-    {name: 'addons', component: FormlyWrapperAddons},
-    {name: 'form-field', component: FormlyWrapperFormField},
-  ],
-  extensions: [
-    { name: 'addons', extension: { onPopulate: addonsExtension } },
+    {name: 'form-field', component: FormlyWrapperFormField },
   ],
 };