@falcon-ng/tailwind 0.0.2

package/README.md

@@ -0,0 +1,71 @@
+## Build
+Run `ng build @falcon-ng/tailwind` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## In Production
+
+- Add the dependencies to the project `npm i @falcon-ng/tailwind`
+### Publish to NPM
+- `ng build @falcon-ng/tailwind --configuration=production`
+- `npm login`
+- From the project root folder: `cd dist/@falcon-ng/tailwind`
+- `npm publish --access public` access public is for free version
+### To unplish the package from NPM
+- `npm unpublish @falcon-ng/tailwind@<version>`
+  - If publish error or previous version try the below command
+  ```
+  npm unpublish --force @falcon-ng/tailwind@0.0.1
+  npm publish --force --access public
+  ```
+  - To update the version of the library, cd into the library project
+  ```
+  npm version <new_Version_No>
+    ```
+
+## In Development
+
+- During development the best way to consume library is using `npm link`
+```
+cd dist/@falcon-ng/tailwind
+npm link
+```
+- We can link an Angular project to this library from anywhere on local machine. From the project root folder:
+```
+npm link @falcon-ng/tailwind
+```
+- If we now build the library with the watch flag `ng build @falcon-ng/tailwind --watch`, and at the same time run `ng serve -o` to another project in another terminal window.
+- This will allow us to develop an application and (one or more) linked libraries simultaneously, and see the app recompile with each modification to the library’s source code.
+- add `preserveSymlinks = true` to the `angular.json` located at the other project
+```
+{
+  "architect":
+  {
+    "build":
+    {
+      "builder": "@angular-devkit/build-angular:browser",
+      "options": {
+        "preserveSymlinks": true
+      }
+    }
+  }
+}
+```
+- Add falcol tailwind module to the project
+```
+import { FalconCoreModule } from '@falcon-ng/tailwind';
+import {environment} from "../environments/environment";
+@NgModule({
+  declarations: [],
+  imports:[
+  FalconCoreModule.forRoot(environment)
+  ],
+  bootstrap: [AppComponent]
+})
+```
+
+## Publish code to GitHub
+
+ng build --configuration=production --output-path docs --base-href /<project_name>/
+
+Example --> ng build --configuration=production --output-path docs --base-href /Angular-Tailwind-Reusable-Form/
+
+- Reference - https://angular.io/guide/deployment

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/@falcon-ng/tailwind",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@falcon-ng/tailwind",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^15.0.0",
+    "@angular/core": "^15.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/src/lib/base-control.ts

@@ -0,0 +1,142 @@
+import {ControlType} from './model/enum';
+import {IValidator} from './model/ivalidator';
+import {
+  FloatLabelType,
+  MatFormFieldAppearance,
+} from '@angular/material/form-field';
+import {
+  IComponentEvent,
+  IMatHint,
+  IOptions,
+  ISelectOptions, ISliderProperty,
+  ISuffixPrefixConfig,
+  ITextAreaProperty,
+} from './model/interface';
+
+/**
+ * @description
+ * Class use for setting the layout.
+ * @usageNotes
+ * ```ts
+ *       new Dropdown({
+ *        key: 'brave',
+ *       label: 'Bravery Rating',
+ *       options: [
+ *         {key: 'solid',  value: 'Solid'},
+ *         {key: 'great',  value: 'Great'},
+ *         {key: 'good',   value: 'Good'},
+ *         {key: 'unproven', value: 'Unproven'}
+ *       ],
+ *       order: 3
+ * }),
+ ** ```
+ */
+export interface Layout<T> {
+  class?: string;
+  baseControls: BaseControl<T>[];
+}
+
+/**
+ * @description
+ * Class use for setting the control properties.
+ * @usageNotes
+ * ```ts
+ *       new Dropdown({
+ *        formControlName: 'brave',
+ *       label: 'Bravery Rating',
+ *       options: [
+ *         {key: 'solid',  value: 'Solid'},
+ *         {key: 'great',  value: 'Great'},
+ *         {key: 'good',   value: 'Good'},
+ *         {key: 'unproven', value: 'Unproven'}
+ *       ],
+ *       order: 3
+ * }),
+ ** ```
+ */
+export class BaseControl<T> {
+  value: T | undefined;
+  formControlName: string;
+  label: string;
+  labelPosition: any;
+  order: number;
+  controlType: ControlType;
+  type: string;
+  disabled: boolean;
+  options: IOptions[] | any;
+  validations: IValidator[];
+  appearance: MatFormFieldAppearance | any;
+  class: string;
+  style: { [klass: string]: any };
+  placeHolder: string;
+  floatLabel: FloatLabelType;
+  hint: IMatHint;
+  suffix: ISuffixPrefixConfig;
+  prefix: ISuffixPrefixConfig;
+  textAreaProperty: ITextAreaProperty;
+  event: IComponentEvent<T>;
+  selectProperty: ISelectOptions;
+  color: string;
+  sliderProperty: ISliderProperty;
+  chipSelectedOptions: IOptions[] | any;
+  editorProperty: any;
+  formArray: BaseControl<T>[] | undefined;
+  constructor(
+    options: {
+      value?: T;
+      formControlName?: string;
+      label?: string;
+      labelPosition?: any;
+      order?: number;
+      controlType?: ControlType;
+      type?: string;
+      disabled?: boolean;
+      options?: IOptions[] | any;
+      validations?: IValidator[];
+      appearance?: MatFormFieldAppearance | any;
+      class?: string;
+      style?: { [klass: string]: any };
+      placeHolder?: string;
+      floatLabel?: FloatLabelType;
+      hint?: IMatHint;
+      suffix?: ISuffixPrefixConfig;
+      prefix?: ISuffixPrefixConfig;
+      textAreaProperty?: ITextAreaProperty;
+      event?: IComponentEvent<T>;
+      selectProperty?: ISelectOptions;
+      color?: string;
+      sliderProperty?: ISliderProperty;
+      chipSelectedOptions?: IOptions[] | any;
+      editorProperty?: any;
+      formArray?: BaseControl<T>[];
+    } = {}
+  ) {
+    this.value = options.value;
+    this.formControlName = options.formControlName || '';
+    this.label = options.label || '';
+    this.labelPosition = options.labelPosition || 'before' || 'after';
+    this.order = options.order === undefined ? 1 : options.order;
+    this.controlType = options.controlType || ControlType.Button;
+    this.type = options.type || '';
+    this.disabled = options.disabled || false;
+    this.options = options.options || [];
+    this.validations = options.validations || [];
+    this.appearance = options.appearance || 'outline';
+    this.class = options.class || '';
+    this.style = options.style || {};
+    this.placeHolder = options.placeHolder || '';
+    this.floatLabel = options.floatLabel || 'auto';
+    this.hint = options.hint || ({} as IMatHint);
+    this.prefix = options.prefix || ({} as ISuffixPrefixConfig);
+    this.suffix = options.suffix || ({} as ISuffixPrefixConfig);
+    this.textAreaProperty =
+      options.textAreaProperty || ({} as ITextAreaProperty);
+    this.event = options.event || {};
+    this.selectProperty = options.selectProperty || {};
+    this.color = options.color || '';
+    this.sliderProperty = options.sliderProperty || {};
+    this.chipSelectedOptions = options.chipSelectedOptions || {};
+    this.editorProperty = options.editorProperty || {};
+    this.formArray = options.formArray || undefined
+  }
+}

package/src/lib/base-form-component.ts

@@ -0,0 +1,363 @@
+import {Observable} from 'rxjs';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import {BaseControl, Layout} from './base-control';
+import {inject} from '@angular/core';
+import {IValidator} from './model/ivalidator';
+import {ControlType} from './model/enum';
+
+/**
+ * @description
+ * Base form component initialized to create form controls, set validation, submit.
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this abstract class to
+ * define its own initialization method.
+ * ```ts
+ *  export class InputComponent extends BaseFormComponent<any> implements OnInit {
+ *     constructor(fb : FormBuilder) {
+ *        super(fb);
+ *        this.defineForm();
+ *    }
+ *    protected defineForm(): void {
+ *    }
+ *    ngOnInit(): void {
+ *      this.formGroup = this.createControls();
+ *    }
+ *    protected submitDatasource(model: any): Observable<any> {
+ *      return of(model);
+ *    }
+ * ```
+ */
+export abstract class BaseFormComponent<T> {
+  public formGroup!: FormGroup;
+
+  protected abstract defineForm(): void;
+
+  protected abstract submitDataSource(model: T): Observable<T>;
+
+  public dataSource: T | undefined = undefined;
+  public controlsConfig!: Layout<T>;
+  public showLoading: boolean = false;
+  protected fb = inject(FormBuilder);
+
+  constructor() {
+  }
+
+  /**
+   * @description
+   * Method evoke on when the form is submitted.
+   * @returns submitDatasource() method with form data if valid otherwise form invalid.
+   */
+  public onSubmit() {
+    if (this.formGroup !== undefined && this.formGroup.valid) {
+      this.submitDataSource(this.formGroup.value);
+    } else {
+      this.validateAllFormFields(this.formGroup);
+    }
+  }
+
+  /**
+   * @description
+   * Private method to validate all form controls before is form submited.
+   * @param formGroup Validate form group.
+   * @returns Groups of controls added to the form builder.
+   */
+  private validateAllFormFields(formGroup: FormGroup) {
+    if (this.formGroup !== undefined) this.formGroup.markAllAsTouched();
+  }
+
+  /**
+   * @description
+   * Create the reactive form controls
+   * @returns Groups of controls added to the form builder.
+   */
+  protected createControls() {
+    const group = this.fb.group({});
+    this.controlsConfig.baseControls.forEach((controls, index) => {
+      this.bindControl(controls, group, index);
+    });
+    return group;
+  }
+
+  /**
+   * @description
+   * Private method to bind the form control.
+   * @param controlConfig field to bind.
+   * @param group group to add.
+   * @param index index of the layout
+   */
+  private bindControl(
+    controlConfig: BaseControl<T>,
+    group: FormGroup,
+    index: number
+  ) {
+    if (controlConfig.controlType === ControlType.Button) return;
+    let control = null;
+    if (controlConfig.formArray !== undefined) {
+      control =
+        controlConfig.formArray.length > 0
+          ? this.fb.array([
+            this.createFormArrayGroup(
+              controlConfig.formArray[
+              controlConfig.formArray.length - 1
+                ].formArray,
+            ),
+          ])
+          : this.fb.array(
+            [],
+            this.bindValidations(controlConfig.validations || []),
+          );
+    } else {
+      control = this.fb.control(
+        {
+          value: controlConfig.value,
+          disabled: controlConfig.disabled,
+        },
+        this.bindValidations(controlConfig.validations || [])
+      );
+    }
+    group.addControl(controlConfig.formControlName, control);
+  }
+
+  /**
+   * @description
+   * Private method to bind the validation to the form controls on form submit.
+   * @param validations Push the validation to the controls.
+   * @returns Validation.
+   */
+  private bindValidations(validations: IValidator[]) {
+    if (validations.length > 0) {
+      const validList: (ValidatorFn | null | undefined)[] = [];
+      validations.forEach((valid: IValidator) => {
+        validList.push(valid.validator);
+      });
+      return Validators.compose(validList);
+    }
+    return null;
+  }
+
+  /**
+   * Create an form array element
+   * @param layoutConfig layout of form array
+   * @returns Form array group
+   */
+  private createFormArrayGroup(componentConfig: BaseControl<T>[] | undefined): FormGroup {
+    var formGroup: FormGroup = this.fb.group({});
+    componentConfig?.forEach((item, index) => {
+      var control = null;
+      if (item.formArray !== undefined) {
+        control =
+          item.formArray.length > 0
+            ? this.fb.array(
+              [
+                this.createFormArrayGroup(
+                  item.formArray[item.formArray.length - 1].formArray,
+                ),
+              ],
+              this.bindValidations(item.validations || []),
+            )
+            : this.fb.array(
+              [],
+              this.bindValidations(item.validations || []),
+            );
+      } else {
+        control = this.fb.control(
+          {
+            value: item.value,
+            disabled: item.disabled,
+          },
+          this.bindValidations(item.validations || []),
+        );
+      }
+      formGroup.addControl(item.formControlName, control);
+    });
+    return formGroup;
+  }
+
+  /**
+   * @description
+   * Reset fild values to default or specify some value.
+   * @param defaultValues Specify the specific value to set to the controls.
+   * @returns void.
+   */
+  public reset(defaultValues?: any): void {
+    this.formGroup.reset(defaultValues);
+  }
+
+  /**
+   * @description
+   * Reset specific fild Errors.
+   * @param name Name of the field to reset the error.
+   * @returns void.
+   */
+  resetFieldErrors(name: string): void {
+    this.formGroup?.get(name)?.setErrors(null);
+  }
+
+  /**
+   * @description
+   * Get the controls value from the form.
+   * @returns Form controls values.
+   */
+  get value(): any {
+    return this.formGroup.value;
+  }
+
+  /**
+   * @description
+   * Updating parts of the data model.
+   * Use the patchValue() method to replace any properties defined in the object that have changed in the form model.
+   * @returns Form controls values.
+   * @param value The object that matches the structure of the group.
+   * @param options Configuration options that determine how the control propagates changes and
+   * emits events after the value is patched.
+   * `onlySelf`: When true, each change only affects this control and not its parent. Default is
+   * true.
+   * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   *  @usageNotes
+   * The following snippet shows how a component can implement this abstract class to
+   * define its own initialization method.
+   * ```ts
+   *   this.formGroup.patchValue({
+   *     name: 'Todd Motto',
+   *     event: {
+   *       title: 'AngularCamp 2016',
+   *       location: 'Barcelona, Spain'
+   *     }
+   *   });
+   * ```
+   */
+  protected patchValue(
+    value: { [key: string]: any },
+    options?: { onlySelf?: boolean; emitEvent?: boolean }
+  ) {
+    return this.formGroup.patchValue(value, options);
+  }
+
+  /**
+   * @description
+   * Updating parts of the data model.
+   * Use the setValue() method to set a new value for an individual control. The setValue() method strictly adheres to the structure of the form group and replaces the entire value for the control.
+   * @returns Form controls values.
+   * @param value The object that matches the structure of the group.
+   * @param options Configuration options that determine how the control propagates changes and
+   * emits events after the value is patched.
+   * `onlySelf`: When true, each change only affects this control and not its parent. Default is
+   * true.
+   * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+   * `valueChanges`
+   *  @usageNotes
+   * The following snippet shows how a component can implement this abstract class to
+   * define its own initialization method.
+   * ```ts
+   *   this.formGroup.setValue({
+   *     name: 'Todd Motto',
+   *     event: {
+   *       title: 'AngularCamp 2016',
+   *       location: 'Barcelona, Spain'
+   *     }
+   *   });
+   * ```
+   */
+  protected setValue(
+    value: { [key: string]: any },
+    options?: { onlySelf?: boolean; emitEvent?: boolean }
+  ) {
+    return this.formGroup.setValue(value, options);
+  }
+
+  /**
+   * @description
+   * Dynamically remove the form control.
+   * @param index Index of item.
+   * @usageNotes
+   * The following snippet shows how to remove the form control from Froup Group
+   * ```ts
+   *    removeControl(1);
+   * ```
+   */
+  protected removeControl(layoutIndex: number, index: number) {
+    this.formGroup.removeControl(
+      this.controlsConfig.baseControls[layoutIndex].formControlName
+    );
+    this.controlsConfig.baseControls.splice(index, 1);
+  }
+
+  /**
+   * @description
+   * Dynamically add the form control.
+   * @param configToAdd Configuration of the form control.
+   * @param index Add controls to the specific index.
+   * @usageNotes
+   * The following snippet shows how a component can implement this abstract class to
+   * define its own initialization method.
+   * ```ts
+   *   var configToadd = {
+   *    componentProperty: {
+   *      label: "Outline Auto complete",
+   *      options: [{ value: 'Extra-cheese', viewValue: 'Extra cheese' },
+   *      { value: 'Bellsprout', viewValue: 'Bellsprout' },
+   *      { value: 'Mushroom', viewValue: 'Mushroom' },
+   *      { value: 'Onion', viewValue: 'Onion' },
+   *      { value: 'Pepperoni', viewValue: 'Pepperoni' },
+   *      { value: 'Sausage', viewValue: 'Sausage' },
+   *      { value: 'Tomato', viewValue: 'Tomato' }],
+   *      appearance: Appearance.Outline,
+   *      color: 'accent'
+   *    },
+   *    componentType: ComponentType.AutoComplete,
+   *    formControlName: "test"
+   *  };
+   *  this.addControl(configToadd); or this.addControl(configToadd,1);
+   * ```
+   */
+  //  protected addControl(layoutToAdd?: BaseControl<string>[],index?: number) {
+  //    layoutToAdd.forEach((layout, layoutIndex) => {
+  //      layout.componentConfig.forEach(
+  //        (componentConfig, componentIndex) => {
+  //          if (componentConfig.formArray !== undefined) {
+  //            componentConfig.formArray.forEach((control) => {
+  //              this.formGroup.setControl(
+  //                'productOption',
+  //                this.createFormArrayGroup(control.componentConfig),
+  //              );
+  //              this.controlsConfig.container.layoutConfig[1].componentConfig[0].formArray.push(
+  //                layout,
+  //              );
+  //            });
+  //          } else {
+  //            this.formGroup.addControl(
+  //              componentConfig.formControlName,
+  //              new UntypedFormControl(
+  //                {
+  //                  value: componentConfig.componentProperty.value,
+  //                  disabled:
+  //                  componentConfig.componentProperty.disabled,
+  //                },
+  //                this.bindValidations(
+  //                  componentConfig.validations || [],
+  //                ),
+  //              ),
+  //            );
+  //            index !== null
+  //              ? this.controlsConfig.container.layoutConfig.splice(
+  //                index,
+  //                0,
+  //                layout,
+  //              )
+  //              : this.controlsConfig.container.layoutConfig.push(
+  //                layout,
+  //              );
+  //          }
+  //        },
+  //      );
+  //    });
+  //  }
+}

package/src/lib/component/auto-complete/auto-complete.component.html

@@ -0,0 +1,39 @@
+<mat-form-field *ngIf="control.appearance != 'plain'; else plainInput" [appearance]="control.appearance"
+  [formGroup]="formGroup" [ngStyle]="control.style" [ngClass]="control.class">
+  <mat-label>{{control.label}}</mat-label>
+  <input matInput [formControl]="autoCompleteControl" [formControlName]="control.formControlName"
+    [placeholder]="control.placeHolder" [type]="control.type" [ngStyle]="control.style" [ngClass]="control.class"
+    [matAutocomplete]="auto"
+    [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']">
+  <mat-autocomplete #auto="matAutocomplete" (optionSelected)='optionSelected($event.option.viewValue)'>
+    <mat-option *ngFor="let item of filteredOptions | async" [value]="item.key">
+      {{item.value}}
+    </mat-option>
+  </mat-autocomplete>
+
+  <span matPrefix [matTooltip]="control.prefix.toolTipText!"
+    [ngClass]="{'material-icons': control.prefix.isIcon}">{{control.prefix.text}} &nbsp;&nbsp;</span>
+  <span matSuffix [matTooltip]="control.suffix.toolTipText!"
+    [ngClass]="{'material-icons': control.suffix.isIcon}">{{control.suffix.text}} &nbsp;&nbsp;</span>
+
+  <mat-hint>{{control.hint.text}}</mat-hint>
+  <ng-container *ngFor="let validation of control.validations;" ngProjectAs="mat-error">
+    <mat-error *ngIf="formGroup.get(control.formControlName)?.hasError(validation.name)">{{validation.message}}
+    </mat-error>
+  </ng-container>
+</mat-form-field>
+
+<ng-template #plainInput>
+  <div [formGroup]="formGroup" [ngStyle]="control.style" [ngClass]="control.class">
+    <input type="text" [formControl]="autoCompleteControl" [formControlName]="control.formControlName"
+      [placeholder]="control.placeHolder" [type]="control.type" [ngStyle]="control.style" [ngClass]="control.class"
+      [matAutocomplete]="auto"
+      [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']"
+      class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500">
+  </div>
+  <mat-autocomplete #auto="matAutocomplete" (optionSelected)='optionSelected($event.option.viewValue)'>
+    <mat-option *ngFor="let item of filteredOptions | async" [value]="item.key">
+      {{item.value}}
+    </mat-option>
+  </mat-autocomplete>
+</ng-template>

package/src/lib/component/auto-complete/auto-complete.component.spec.ts

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

package/src/lib/component/auto-complete/auto-complete.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {BaseControl} from "../../base-control";
+import {FormControl, FormGroup} from "@angular/forms";
+import {IOptions} from "../../model/interface";
+import {Observable} from "rxjs";
+import { map, startWith } from 'rxjs/operators';
+@Component({
+  selector: 'falcon-auto-complete',
+  templateUrl: './auto-complete.component.html',
+  styleUrls: ['./auto-complete.component.scss'],
+})
+export class AutoCompleteComponent {
+  control!: BaseControl<string>;
+  formGroup!: FormGroup;
+  autoCompleteControl = new FormControl();
+  constructor() { }
+  filteredOptions!: Observable<IOptions[]>;
+
+  ngOnInit() {
+    this.filteredOptions = this.autoCompleteControl.valueChanges.pipe(startWith(''),map(value => this._filter(value)));
+  }
+
+  private _filter(value: string): IOptions[] {
+    const filterValue = value.toLowerCase();
+    return this.control.options.filter((option: IOptions) => option?.key?.toLowerCase().includes(filterValue));
+  }
+
+  optionSelected(value: any) {
+    this.formGroup?.get(this.control?.formControlName)?.setValue(value);
+  }
+}