@falcon-ng/tailwind 0.0.2 → 0.0.4

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

@@ -1,363 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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);
-  }
-}

package/src/lib/component/bottom-sheet/bottom-sheet.component.html

@@ -1,9 +0,0 @@
-<mat-nav-list>
-  <ng-container *ngFor="let item of data">
-    <a [href]="item.link" mat-list-item (click)="click($event,item)">
-      <span matListItemTitle>{{item.levelOneText}}</span>
-      <span matLine>{{item.levelTwoText}}</span>
-    </a>
-  </ng-container>
-
-</mat-nav-list>

package/src/lib/component/bottom-sheet/bottom-sheet.component.spec.ts

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

package/src/lib/component/bottom-sheet/bottom-sheet.component.ts

@@ -1,19 +0,0 @@
-import {Component, Inject} from '@angular/core';
-import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from "@angular/material/bottom-sheet";
-
-@Component({
-  selector: 'lib-bottom-sheet',
-  templateUrl: './bottom-sheet.component.html',
-  styleUrls: ['./bottom-sheet.component.scss']
-})
-export class BottomSheetComponent {
-  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>, @Inject(MAT_BOTTOM_SHEET_DATA) public data: any) { }
-
-  ngOnInit(): void {
-  }
-
-  click(event: MouseEvent, item : any): void {
-    this._bottomSheetRef.dismiss(item);
-    event.preventDefault();
-  }
-}

package/src/lib/component/button/button.component.html

@@ -1,54 +0,0 @@
-<div [ngStyle]="control.style" [ngClass]="control.class">
-    <ng-container [ngSwitch]="control.appearance">
-        <button [disabled]="control.disabled" (click)="childBtnClick()"
-            [color]="control.color" [ngClass]="control.class"
-            [ngStyle]="control.style" mat-button *ngSwitchCase="0">
-            <mat-icon *ngIf="control?.suffix?.isIcon" style="margin-bottom: 1px;">
-                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
-        </button>
-        <button [disabled]="control.disabled" (click)="childBtnClick()"
-            [type]="control.type" [ngClass]="control.class"
-            [color]="control.color" [ngStyle]="control.style"
-            mat-raised-button *ngSwitchCase="1">
-            <mat-icon *ngIf="control.suffix?.isIcon" style="margin-bottom: 1px;">
-                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
-        </button>
-        <button [disabled]="control.disabled" (click)="childBtnClick()"
-            [type]="control.type" [ngClass]="control.class"
-            [color]="control.color" [ngStyle]="control.style"
-            mat-stroked-button *ngSwitchCase="2">
-            <mat-icon *ngIf="control.suffix?.isIcon" style="margin-bottom: 1px;">
-                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
-        </button>
-        <button [disabled]="control.disabled" (click)="childBtnClick()"
-            [type]="control.type" [ngClass]="control.class"
-            [color]="control.color" [ngStyle]="control.style"
-            mat-flat-button *ngSwitchCase="3">
-            <mat-icon *ngIf="control.suffix.isIcon" style="margin-bottom: 1px;">
-                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}
-        </button>
-        <button [disabled]="control.disabled" (click)="childBtnClick()"
-            [type]="control.type" [ngClass]="control.class"
-            [color]="control.color" [ngStyle]="control.style"
-            mat-icon-button [attr.aria-label]="control.label" *ngSwitchCase="4">
-            <mat-icon>{{control.label}}</mat-icon>
-        </button>
-        <button [disabled]="control.disabled" (click)="childBtnClick()"
-            [type]="control.type" [ngClass]="control.class"
-            [color]="control.color" [ngStyle]="control.style" mat-fab
-            [attr.aria-label]="control.label" *ngSwitchCase="5">
-            <mat-icon>{{control.label}}</mat-icon>
-        </button>
-        <button [disabled]="control.disabled" (click)="childBtnClick()"
-            [type]="control.type" [ngClass]="control.class"
-            [color]="control.color" [ngStyle]="control.style" mat-mini-fab
-            [attr.aria-label]="control.label" *ngSwitchCase="6">
-            <mat-icon>{{control.label}}</mat-icon>
-        </button>
-        <a mat-stroked-button *ngSwitchCase="7" [ngClass]="control.class"
-            [ngStyle]="control.style" routerLink="[]">{{control.label}}</a>
-        <a mat-stroked-button *ngSwitchCase="8" [ngClass]="control.class"
-            [ngStyle]="control.style"
-            href="{{control.value}}">{{control.label}}</a>
-    </ng-container>
-</div>

package/src/lib/component/button/button.component.spec.ts

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

package/src/lib/component/button/button.component.ts

@@ -1,17 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {FormGroup} from "@angular/forms";
-import {BaseControl} from "../../base-control";
-
-@Component({
-  selector: 'falcon-button',
-  templateUrl: './button.component.html',
-  styleUrls: ['./button.component.css']
-})
-export class ButtonComponent {
-  @Input() control!: BaseControl<string>;
-  @Input() formGroup!: FormGroup;
-  @Output() btnClick = new EventEmitter<string>();
-  childBtnClick() {
-    this.btnClick.emit("Button Click Event");
-  }
-}

package/src/lib/component/button-toggle/button-toggle.component.html

@@ -1,21 +0,0 @@
-<div [ngStyle]="control.style" [ngClass]="control.class"
-     [formGroup]="formGroup">
-  <mat-label [ngStyle]="control.style" [ngClass]="control.class"
-             *ngIf="control.label != undefined">
-    {{control.label | titlecase}}
-  </mat-label>
-  <mat-button-toggle-group
-    [formControlName]="control.formControlName != undefined ? control.formControlName : 'default'"
-    [appearance]="control.appearance" [ngStyle]="control.style"
-    [ngClass]="control.class" [attr.aria-label]="control.label"
-    class="botton-toggle" (change)="toggleChange($event)">
-    <mat-button-toggle *ngFor="let item of control.options" [value]="item?.value"
-                       [ngStyle]="control.style"
-                       [ngClass]="control.class">
-      <mat-icon [ngClass]="item?.class" aria-hidden="false" aria-label="item icon" *ngIf="item?.icon != undefined">
-        {{item?.icon}}
-      </mat-icon>
-      {{item.viewValue | titlecase}}
-    </mat-button-toggle>
-  </mat-button-toggle-group>
-</div>

package/src/lib/component/button-toggle/button-toggle.component.spec.ts

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