docs: add custom select for demo

packages/integration/src/app/app.module.ts

@@ -12,13 +12,14 @@ import scss from 'highlight.js/lib/languages/scss';
 import typescript from 'highlight.js/lib/languages/typescript';
 import { AppTemplateDrivenUseCaseComponent } from './template-driven/use-case.component';
 import { AppReactiveDrivenUseCaseComponent } from './reactive-driven/use-case.component';
+import { CustomSelectComponent } from './custom-select/custom-select.component';
 
 export function hljsLanguages() {
     return [{ name: 'typescript', func: typescript }, { name: 'scss', func: scss }, { name: 'xml', func: xml }];
 }
 
 @NgModule({
-    declarations: [AppComponent, AppTemplateDrivenUseCaseComponent, AppReactiveDrivenUseCaseComponent],
+    declarations: [AppComponent, AppTemplateDrivenUseCaseComponent, AppReactiveDrivenUseCaseComponent, CustomSelectComponent],
     imports: [
         BrowserModule,
         FormsModule,

packages/integration/src/app/custom-select/custom-select.component.html

@@ -0,0 +1,6 @@
+<ng-template> <ng-content></ng-content> </ng-template>
+
+<div *ngFor="let option of options">
+    <span class="item" [ngClass]="{'active': selectedValue === option.nativeElement.value}" (click)="selectOption(option)">{{ option.nativeElement.text }}</span>
+</div>
+

packages/integration/src/app/custom-select/custom-select.component.scss

@@ -0,0 +1,13 @@
+
+:host {
+    display: flex;
+    flex-direction: column;
+    .item {
+        padding: 10px 10px;
+        display: flex;
+        cursor: pointer;
+    }
+}
+.active {
+    background: #eee;
+}

packages/integration/src/app/custom-select/custom-select.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomSelectComponent } from './custom-select.component';
+
+describe('CustomSelectComponent', () => {
+  let component: CustomSelectComponent;
+  let fixture: ComponentFixture<CustomSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/integration/src/app/custom-select/custom-select.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, ContentChildren, QueryList, ElementRef, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+export const CUSTOM_SELECT_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CustomSelectComponent),
+    multi: true
+};
+
+const noop = () => {};
+
+@Component({
+    selector: 'app-custom-select',
+    templateUrl: './custom-select.component.html',
+    styleUrls: ['./custom-select.component.scss'],
+    providers: [CUSTOM_SELECT_VALUE_ACCESSOR]
+})
+export class CustomSelectComponent implements OnInit, ControlValueAccessor {
+    selectedValue: string;
+
+    private onTouchedCallback: () => void = noop;
+
+    private onChangeCallback: (_: any) => void = noop;
+
+    @ContentChildren('option') options: QueryList<ElementRef>;
+
+    constructor() {}
+
+    ngOnInit() {}
+
+    writeValue(obj: any): void {
+        this.selectedValue = obj;
+    }
+
+    registerOnChange(fn: any): void {
+        this.onChangeCallback = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this.onTouchedCallback = fn;
+    }
+
+    setDisabledState?(isDisabled: boolean): void {}
+
+    selectOption(option: ElementRef) {
+        this.selectedValue = option.nativeElement.value
+        this.onChangeCallback(option.nativeElement.value);
+    }
+}

packages/integration/src/app/template-driven/use-case.component.html

@@ -56,7 +56,16 @@
                 placeholder="Enter number (validators: required, ngxMin: 10, ngxMax: 100)"
             />
         </div>
-        <div class="mb-2"><a href="javascript:;" (click)="showSex = !showSex">{{showSex ? 'Hide' : 'Show'}} Sex</a></div>
+        <div class="form-group">
+            <label for="exampleCustomSelect1">Custom Select</label>
+            <app-custom-select name="customSelect" class="ngx-custom-select" required="" [(ngModel)]="model.customSelectValue" id="exampleCustomSelect1">
+                <option value="1" #option>One</option>
+                <option value="2" #option>Two</option>
+            </app-custom-select>
+        </div>
+        <div class="mb-2">
+            <a href="javascript:;" (click)="showSex = !showSex">{{ showSex ? 'Hide' : 'Show' }} Sex</a>
+        </div>
         <div class="form-group" *ngIf="showSex">
             <label for="exampleSelectSex1">Sex</label>
             <select

packages/integration/src/app/template-driven/use-case.component.ts

@@ -23,7 +23,8 @@ export class AppTemplateDrivenUseCaseComponent {
         email: '',
         password: '',
         number: '',
-        sex: ''
+        sex: '',
+        customSelectValue: ''
     };
 
     validatorConfig: NgxValidatorConfig = {

packages/integration/src/styles.scss

@@ -1,4 +1,40 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap/scss/bootstrap.scss';
 @import '~highlight.js/styles/github.css';
+
+@mixin ngx-form-validation-state($state, $color) {
+    .ngx-custom-select {
+        .was-validated &:#{$state},
+        &.is-#{$state} {
+            // border-color: $color;
+            border: 1px solid $color;
+
+            @if $enable-validation-icons {
+                padding-right: $input-height-inner;
+                background-repeat: no-repeat;
+                background-position: center right calc(#{$input-height-inner} / 4);
+                background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
+
+                @if $state == "valid" {
+                  background-image: $form-feedback-icon-valid;
+                } @else {
+                  background-image: $form-feedback-icon-invalid;
+                }
+            }
+
+            &:focus {
+                border-color: $color;
+                box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
+            }
+
+            ~ .#{$state}-feedback,
+            ~ .#{$state}-tooltip {
+                display: block;
+            }
+        }
+    }
+}
+
+@include ngx-form-validation-state('valid', $form-feedback-valid-color);
+@include ngx-form-validation-state('invalid', $form-feedback-invalid-color);