refactoring documents and exampels

README.md

@@ -14,6 +14,9 @@ RLT support (use dir='rtl' in html tag)
 <a target="_blank" href="https://alireza-sohrabi.github.io/ngx-mat-select">Documents `Online`
 </a>
 
+<a target="_blank" href="http://localhost:4200/#/other-examples/customize">Customize `Online`
+</a>
+
 <a target="_blank" href="https://stackblitz.com/edit/ngx-mat-select?file=src/app/app.component.html">Source Code 
 `Stackblitz`</a>
 

src/app/documents/client-side/client-side.module.ts

@@ -0,0 +1,54 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatCardModule} from "@angular/material/card";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatOptionModule} from "@angular/material/core";
+import {MatSelectModule} from "@angular/material/select";
+import {MatButtonModule} from "@angular/material/button";
+import {NgxMatSelectModule} from "../../ngx-mat-select";
+import {WithoutAnyValueComponent} from "./without-any-value/without-any-value.component";
+import {ConfigModule} from "../other-examples/customize/config/config.module";
+import {PrimitiveComponent} from "./primitive/primitive.component";
+import {
+  ReactiveFormPrimitiveValueComponent
+} from "./reactive-form-primitive-value/reactive-form-primitive-value.component";
+import {ReactiveFormObjectValueComponent} from "./reactive-form-object-value/reactive-form-object-value.component";
+import {MatListModule} from "@angular/material/list";
+import {OptionsAtOnceComponent} from "./options-at-once/options-at-once.component";
+import {SearchBoxComparisonComponent} from "./search-box-comparison/search-box-comparison.component";
+
+
+@NgModule({
+  declarations: [
+    WithoutAnyValueComponent,
+    PrimitiveComponent,
+    ReactiveFormPrimitiveValueComponent,
+    ReactiveFormObjectValueComponent,
+    OptionsAtOnceComponent,
+    SearchBoxComparisonComponent
+  ],
+  imports: [
+    CommonModule,
+    MatCardModule,
+    NgxMatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatButtonModule,
+    ConfigModule,
+    MatListModule,
+  ],
+  exports: [
+    WithoutAnyValueComponent,
+    PrimitiveComponent,
+    ReactiveFormPrimitiveValueComponent,
+    ReactiveFormObjectValueComponent,
+    OptionsAtOnceComponent,
+    SearchBoxComparisonComponent
+  ]
+})
+export class ClientSideModule {
+}

src/app/examples/other-examples/customize/config/config.component.ts → src/app/documents/other-examples/customize/config/config.component.ts

@@ -42,7 +42,7 @@ export class ConfigComponent implements AfterViewInit {
   }
 
   getBodyEl() {
-    return Array.from(document.getElementsByTagName('body'));
+    return Array.from(document.getElementsByTagName('app-customize'));
   }
 
   getDimension(value: any) {

src/app/examples/other-examples/customize/customize.component.ts → src/app/documents/other-examples/customize/customize.component.ts

@@ -3,7 +3,7 @@ import {NgxMatSelectConfigExample} from "./customize-model";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
 
 @Component({
-  selector: 'app-ngx-mat-select',
+  selector: 'app-customize',
   templateUrl: './customize.component.html',
 })
 export class CustomizeComponent {

src/app/documents/server-side/server-side.module.ts

@@ -0,0 +1,33 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatCardModule} from "@angular/material/card";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatOptionModule} from "@angular/material/core";
+import {MatSelectModule} from "@angular/material/select";
+import {MatButtonModule} from "@angular/material/button";
+import {NgxMatSelectModule} from "../../ngx-mat-select";
+import {FetchOptionsComponent} from "./fetch-options/fetch-options.component";
+import {ObjectValueComponent} from "./object-value/object-value.component";
+import {PrimitiveValueComponent} from "./primitive-value/primitive-value.component";
+
+
+@NgModule({
+  declarations: [FetchOptionsComponent, ObjectValueComponent, PrimitiveValueComponent],
+  imports: [
+    CommonModule,
+    MatCardModule,
+    NgxMatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatButtonModule,
+
+
+  ],
+  exports: [FetchOptionsComponent, ObjectValueComponent, PrimitiveValueComponent]
+})
+export class ServerSideModule {
+}

src/app/examples/change-value/change-value.component.html

@@ -0,0 +1,92 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      Use value property
+    </mat-card-title>
+    <mat-card-subtitle>
+      <ul>
+        <li>
+          change the value of the select-box with value input property
+        </li>
+      </ul>
+    </mat-card-subtitle>
+
+  </mat-card-header>
+  <mat-card-content>
+    <div class="ngx-mat-select-forms-container">
+
+        <div>
+          <ng-container *ngIf="config.multiple">
+            <mat-form-field>
+              <mat-label>
+                Set Value
+              </mat-label>
+              <ngx-mat-select
+                #selectBox1="ngxMatSelect"
+                [(value)]="value"
+                clientSide
+                [options]="options"
+                [multiple]="true"
+                [hasSearchBox]="config.hasSearchBox"
+                [hasBackButton]="config.hasBackButton"
+                [viewType]="config.viewType"
+                [placeholder]="config.placeholder"
+                [multipleDisplay]="config.multipleDisplay"
+                [searchBoxPlaceholder]="config.searchBoxPlaceholder"
+                [optionHeight]="config.optionHeight"
+                [panelHeight]="config.panelHeight"
+                [panelWidth]="config.panelWidth"
+                [disabled]="config.disabled"
+                [required]="config.required"
+              >
+              </ngx-mat-select>
+            </mat-form-field>
+
+            <div>
+              <b>Value</b>: {{value | json}}
+            </div>
+            <div>
+              <b>Select Box Value</b>: {{selectBox1.value | json}}
+            </div>
+          </ng-container>
+
+          <ng-container *ngIf="!config.multiple">
+            <mat-form-field
+              class="form-field">
+              <mat-label> Set Value</mat-label>
+              <ngx-mat-select
+                clientSide
+                #selectBox2="ngxMatSelect"
+                [options]="options"
+                [(ngModel)]="valueSingle"
+                [required]="config.required"
+                [disabled]="config.disabled"
+                [hasSearchBox]="config.hasSearchBox"
+                [hasBackButton]="config.hasBackButton"
+                [viewType]="config.viewType"
+                [placeholder]="config.placeholder"
+                [multipleDisplay]="config.multipleDisplay"
+                [searchBoxPlaceholder]="config.searchBoxPlaceholder"
+                [optionHeight]="config.optionHeight"
+                [panelHeight]="config.panelHeight"
+                [panelWidth]="config.panelWidth"
+                [multiple]="false"
+
+              >
+              </ngx-mat-select>
+
+            </mat-form-field>
+            <div>
+              <b>Value</b>: {{value[0]}}
+            </div>
+            <div>
+              <b>Select Box Value</b>: {{selectBox2.value | json}}
+            </div>
+
+          </ng-container>
+
+        </div>
+
+    </div>
+  </mat-card-content>
+</mat-card>

src/app/examples/change-value/change-value.component.ts

@@ -0,0 +1,19 @@
+import {ChangeDetectionStrategy, Component, Input, ViewChild} from '@angular/core';
+import { NgForm} from '@angular/forms';
+import {NgxMatSelectConfigExample} from '../expamles-select';
+
+@Component({
+  selector: 'app-change-value',
+  templateUrl: './change-value.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChangeValueComponent {
+  @Input() config!: NgxMatSelectConfigExample;
+  @ViewChild(NgForm) ngForm?: NgForm;
+
+  value = [undefined,null, 20, 10000];
+  valueSingle = [20];
+
+  options = [undefined,null, ...Array.from(new Array(2000)).map((_, index) => index)];
+
+}

src/app/examples/change-value/change-value.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from "@angular/forms";
+import {MatCardModule} from "@angular/material/card";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {NgxMatSelectModule} from "../../ngx-mat-select";
+import {ChangeValueComponent} from "./change-value.component";
+
+
+@NgModule({
+  declarations: [ChangeValueComponent],
+  imports: [
+    CommonModule, FormsModule, NgxMatSelectModule, MatCardModule, MatFormFieldModule
+  ],
+  exports: [ChangeValueComponent]
+})
+export class ChangeValueModule {
+}