@falcon-ng/tailwind 0.0.2 → 0.0.4

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

@@ -1,26 +0,0 @@
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {FormControl, FormGroup} from "@angular/forms";
-import {BaseControl} from "../../base-control";
-import {MatButtonToggleChange} from "@angular/material/button-toggle";
-
-@Component({
-  selector: 'falcon-button-toggle',
-  templateUrl: './button-toggle.component.html',
-  styleUrls: ['./button-toggle.component.scss'],
-})
-export class ButtonToggleComponent implements OnInit {
-  control!: BaseControl<string>;
-  formGroup!: FormGroup;
-  @Output() toggleGroupChange: EventEmitter<MatButtonToggleChange> = new EventEmitter<MatButtonToggleChange>();
-  ngOnInit(): void {
-    if (this.formGroup === undefined) {
-      this.formGroup = new FormGroup({
-        default: new FormControl()
-      });
-    }
-  }
-
-  toggleChange($event: any) {
-    this.toggleGroupChange.emit($event.value);
-  }
-}

package/src/lib/component/checkbox/checkbox.component.html

@@ -1,6 +0,0 @@
-<div [formGroup]="formGroup">
-    <mat-checkbox [ngStyle]="control.style" [ngClass]="control.class"
-        [color]="control.color != null ? control.color : 'accent'" [labelPosition]="control.labelPosition"
-        [formControlName]="control.formControlName" (change)="change($event)">
-        {{control.label}}</mat-checkbox>
-</div>

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

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

package/src/lib/component/checkbox/checkbox.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { BaseControl } from '../../base-control';
-
-@Component({
-  selector: 'falcon-checkbox',
-  templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.scss'],
-})
-export class CheckboxComponent {
-  control!: BaseControl<string>;
-  formGroup!: FormGroup;
-  change($event: any) {
-    if (this.control.event !== undefined)
-      this.control?.event?.change?.emit($event);
-  }
-}

package/src/lib/component/chips/chip.component.html

@@ -1,75 +0,0 @@
-<ng-container [ngSwitch]="control.type">
-  <mat-form-field class="chip-list" *ngSwitchCase="'search'" [appearance]="control.appearance" [formGroup]="formGroup"
-                  [ngStyle]="control.style" [ngClass]="control.class">
-    <mat-label>{{control.label}}</mat-label>
-    <mat-chip-grid #chipGrid aria-label="item selection">
-      <mat-chip-row *ngFor="let option of control.chipSelectedOptions" [removable]="removable"
-                    (removed)="remove(option)">
-        {{option.value}}
-        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
-      </mat-chip-row>
-
-      <input matInput #chipAutoCompleteInput [formControl]="autoCompleteControl"
-             [formArrayName]="control.formControlName" [placeholder]="control.placeHolder" [ngStyle]="control.style"
-             [ngClass]="control.class" [matAutocomplete]="auto" [matChipInputFor]="chipGrid"
-             [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)"
-             [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']"
-             (keyup.enter)="keyboardEnterEvent($event)">
-
-    </mat-chip-grid>
-    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected($event)">
-      <mat-option *ngFor="let item of filteredOptions | async" [value]="item.key">
-        {{item.value}}
-      </mat-option>
-    </mat-autocomplete>
-    <mat-hint>
-      <ng-container *ngIf="control.hint.link?.isLink; else elseBlock">
-        <ng-container *ngIf="control.hint.link?.queryParams !== undefined; else withoutQueryBlock">
-          <a [routerLink]="[control.hint.link?.routerLink]" [queryParams]="{ query: control.hint.link?.queryParams }"
-             routerLinkActive="router-link-active">{{control.hint.text}}</a>
-        </ng-container>
-      </ng-container>
-      <ng-template #elseBlock>
-        <span>{{control.hint.text}}</span>
-      </ng-template>
-      <ng-template #withoutQueryBlock>
-        <a [routerLink]="[control.hint.link?.routerLink]"
-           routerLinkActive="router-link-active">{{control.hint.text}}</a>
-      </ng-template>
-    </mat-hint>
-  </mat-form-field>
-
-  <mat-form-field class="chip-list" *ngSwitchCase="'text'" [appearance]="control.appearance" [formGroup]="formGroup"
-                  [ngStyle]="control.style" [ngClass]="control.class">
-    <mat-label>{{control.label}}</mat-label>
-    <mat-chip-grid #chipGrid aria-label="item selection">
-      <mat-chip-row *ngFor="let option of control.chipSelectedOptions" [value]="selectable" [removable]="removable"
-                    (removed)="remove(option)">
-        {{option?.value}}
-        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
-      </mat-chip-row>
-
-      <input matInput #chipTextInput [formArrayName]="control.formControlName" multiple
-             [placeholder]="control.placeHolder"
-             [matChipInputFor]="chipGrid" [ngStyle]="control.style" [ngClass]="control.class"
-             [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
-             (matChipInputTokenEnd)="add($event)"
-             [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']"
-             (keyup.enter)="keyboardEnterEvent($event)">
-
-    </mat-chip-grid>
-  </mat-form-field>
-
-  <mat-chip-listbox aria-label="Chips selection" *ngSwitchDefault>
-    <mat-chip color="{{control.color}}" selected>{{control.label}}</mat-chip>
-  </mat-chip-listbox>
-
-
-  <mat-chip-set class="chip-list" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)"
-                *ngSwitchCase="'dragDrop'" class="example-chip">
-    <mat-chip class="example-box" cdkDrag *ngFor="let option of control?.options">
-      {{option?.value}}
-    </mat-chip>
-  </mat-chip-set>
-
-</ng-container>

package/src/lib/component/chips/chip.component.scss

@@ -1,3 +0,0 @@
-.chip-list {
-  width: 100%;
-}

package/src/lib/component/chips/chip.component.spec.ts

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

package/src/lib/component/chips/chip.component.ts

@@ -1,125 +0,0 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { BaseControl } from '../../base-control';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Observable } from 'rxjs';
-import { IOptions } from '../../model/interface';
-import {
-  MatAutocomplete,
-  MatAutocompleteSelectedEvent,
-} from '@angular/material/autocomplete';
-import { map, startWith } from 'rxjs/operators';
-import { MatChipInputEvent } from '@angular/material/chips';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-
-@Component({
-  selector: 'falcon-chip',
-  templateUrl: './chip.component.html',
-  styleUrls: ['./chip.component.scss'],
-})
-export class ChipComponent implements OnInit {
-  @Input() control!: BaseControl<any>;
-  @Input() formGroup!: FormGroup;
-  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
-  selectable = true;
-  removable = true;
-  addOnBlur = true;
-  filteredOptions: Observable<IOptions[]>;
-  autoCompleteControl = new FormControl('');
-  private items: FormArray;
-
-  @ViewChild('chipAutoCompleteInput')
-  chipAutoCompleteInput!: ElementRef<HTMLInputElement>;
-  @ViewChild('chipTextInput') chipTextInput!: ElementRef<HTMLInputElement>;
-  @ViewChild('auto') matAutocomplete!: MatAutocomplete;
-
-  constructor(private fb: FormBuilder) {
-     this.filteredOptions = this.autoCompleteControl.valueChanges.pipe(
-       startWith(null),
-       map((value: string | null) =>
-         value ? this._filter(value) : this.control?.options.slice()
-       )
-     );
-
-  }
-
-  ngOnInit() {
-     setTimeout(() => {
-       if (this.control.chipSelectedOptions.length > 0) {
-         this.items = this.formGroup.controls[
-           this.control.formControlName
-         ] as FormArray;
-         this.control.chipSelectedOptions.forEach((value: any) => {
-           this.items.controls.push(this.createItem(value.value));
-         });
-       }
-     });
-  }
-
-  add(event: MatChipInputEvent): void {
-     const input = event.input;
-     const value = event.value;
-     if ((value || '').trim()) {
-       this.control.chipSelectedOptions.push({
-         key: value.trim(),
-         value: value.trim(),
-       });
-       this.items = this.formGroup.get(
-         this.control.formControlName
-       ) as FormArray;
-       this.items.push(this.createItem(value));
-     }
-     if (input) {
-       input.value = '';
-     }
-  }
-
-   createItem(value: String): FormGroup {
-     return this.fb.group({
-       key: value,
-       value: value,
-     });
-   }
-
-  remove(option: IOptions): void {
-     const index = this.control.chipSelectedOptions.indexOf(option);
-     if (index >= 0) {
-       this.control.chipSelectedOptions.splice(index, 1);
-       this.items.removeAt(index);
-     }
-  }
-
-  optionSelected(event: MatAutocompleteSelectedEvent): void {
-     this.control.chipSelectedOptions.push({
-       key: event.option.value,
-       value: event.option.value,
-     });
-     this.items = this.formGroup.get(this.control.formControlName) as FormArray;
-     this.items.push(this.createItem(event.option.value));
-     this.chipAutoCompleteInput.nativeElement.value = '';
-     this.formGroup.get(this.control.formControlName)?.setValue(null);
-  }
-
-   private _filter(value: string): any {
-     if (value !== null) {
-       const filterValue = value.toLowerCase();
-       return this.control?.options?.filter((option: IOptions) =>
-         option.value.toLowerCase().includes(filterValue)
-       );
-     }
-   }
-
-   drop(event: CdkDragDrop<IOptions[]>) {
-     moveItemInArray(
-       this.control.options,
-       event.previousIndex,
-       event.currentIndex
-     );
-   }
-
-  keyboardEnterEvent(event: any): void {
-     if (this.control.event !== undefined)
-       this.control.event.keyboardEnter?.emit(event);
-     this.chipTextInput.nativeElement.value = '';
-  }
-}

package/src/lib/component/date-picker/date-picker.component.html

@@ -1,18 +0,0 @@
-<mat-form-field [appearance]="control.appearance" [formGroup]="formGroup"
-                [floatLabel]="control.floatLabel" [ngStyle]="control.style"
-                [ngClass]="control.class">
-  <mat-label>{{control.label}}</mat-label>
-  <input matInput [matDatepicker]="picker" [formControlName]="control.formControlName"
-         [placeholder]="control.placeHolder" [type]="control.type"
-         [ngStyle]="control.style" [ngClass]="control.class"
-         [required]="formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']">
-  <mat-datepicker-toggle matSuffix [for]="picker">
-    <mat-icon matDatepickerToggleIcon *ngIf="control.suffix.isIcon">keyboard_arrow_down</mat-icon>
-  </mat-datepicker-toggle>
-  <mat-datepicker #picker></mat-datepicker>
-  <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>

package/src/lib/component/date-picker/date-picker.component.spec.ts

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

package/src/lib/component/date-picker/date-picker.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import {BaseControl} from "../../base-control";
-import {FormGroup} from "@angular/forms";
-
-@Component({
-  selector: 'falcon-date-picker',
-  templateUrl: './date-picker.component.html',
-  styleUrls: ['./date-picker.component.scss'],
-})
-export class DatePickerComponent {
- control!: BaseControl<string>;
- formGroup!: FormGroup;
-}

package/src/lib/component/dialog/dialog.component.html

@@ -1,12 +0,0 @@
-<span mat-dialog-title>{{data.title}}</span>
-<mat-divider></mat-divider>
-<div mat-dialog-content>
-  <span class="mat-h3">{{data.bodyMessage}}</span>
-</div>
-<mat-divider></mat-divider>
-<div mat-dialog-actions>
-    <button mat-raised-button [mat-dialog-close]="" cdkFocusInitial>{{data.cancelBtnText}}</button>
-    <button mat-raised-button [color]="'warn'" [mat-dialog-close]="data">
-      {{data.mainbtnText}}
-    </button>
-  </div>

package/src/lib/component/dialog/dialog.component.scss

@@ -1,3 +0,0 @@
-.mat-mdc-dialog-actions {
-  justify-content: end !important;
-}

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

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

package/src/lib/component/dialog/dialog.component.ts

@@ -1,12 +0,0 @@
-import {Component, Inject} from '@angular/core';
-import {IDialogData} from "../../model/interface";
-import {MAT_DIALOG_DATA} from "@angular/material/dialog";
-
-@Component({
-  selector: 'lib-dialog',
-  templateUrl: './dialog.component.html',
-  styleUrls: ['./dialog.component.scss']
-})
-export class DialogComponent {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: IDialogData) {}
-}

package/src/lib/component/pagination/pagination.component.html

@@ -1,10 +0,0 @@
-<div class="flex justify-between">
-    <span class="mat-h3">Page {{currentPage}} of {{totalPage}}</span>
-    <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-        <mat-button-toggle value="bold" *ngFor="let item of paginationSize; index as i;"
-            (change)="receiveBtnChange(item)" [checked]="firstLoad && i ==0">
-            &nbsp;&nbsp; <span class="mat-h3">{{item}}</span>&nbsp;&nbsp;
-        </mat-button-toggle>
-    </mat-button-toggle-group>
-
-</div>

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

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

package/src/lib/component/pagination/pagination.component.ts

@@ -1,86 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-
-@Component({
-  selector: 'falcon-pagination',
-  templateUrl: './pagination.component.html',
-  styleUrls: ['./pagination.component.scss']
-})
-export class PaginationComponent {
-  @Input() totalPage: number = 10;
-  @Input() pageSize: number = 10;
-  @Output() paginationEvent = new EventEmitter<number>();
-  paginationSize: number[] = new Array(10);
-  preDisable: boolean = true;
-  nextDisable: boolean = false;
-  private start!: number;
-  private end!: number;
-  currentPage: number = 1;
-  firstLoad: boolean = false;
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.firstLoad = true;
-    this.paginationSize = [
-      ...Array.from(
-              {
-                length:
-                this.totalPage < this.pageSize
-                ? this.totalPage
-                : this.pageSize,
-              },
-              (_, i) => i + 1,
-              ),
-      ];
-    if (this.paginationSize.length == this.totalPage)
-      this.nextDisable = true;
-  }
-
-  receiveBtnChange($event: any) {
-    this.firstLoad = false;
-    this.currentPage = $event;
-    if ($event == this.totalPage) this.nextDisable = true;
-    else if ($event == 1) {
-      this.nextDisable = false;
-      this.preDisable = true;
-    } else {
-      this.nextDisable = false;
-      this.preDisable = false;
-    }
-
-    if ($event === 'previous') {
-      this.preDisable = true;
-    } else if ($event === 'next') {
-    } else {
-      if (this.totalPage <= this.pageSize) {
-        this.paginationSize = [
-          ...Array.from({ length: this.totalPage }, (_, i) => i + 1),
-          ];
-      } else {
-        // start
-        if ($event < 6) {
-          this.start = 1;
-        } else {
-          if ($event + 5 < this.totalPage) {
-            this.start = $event - 5;
-          } else {
-            this.start = this.totalPage - this.pageSize;
-          }
-        }
-        //End
-        if ($event + 5 < this.totalPage) {
-          this.end = this.start + 9;
-        } else {
-          this.end = this.totalPage;
-        }
-        this.paginationSize = this.range(this.start, this.end);
-      }
-    }
-    this.paginationEvent.emit($event);
-  }
-  private range(start: number, end: number) {
-    return Array(Math.abs(start - end) + 1)
-    .fill(start)
-    .map((v, i) => v + i * (start > end ? -1 : 1));
-  }
-}

package/src/lib/component/progress-bar/progress-bar.component.html

@@ -1 +0,0 @@
-<mat-progress-bar [mode]="mode" [bufferValue]="bufferValue" [color]="color" [value]="value"></mat-progress-bar>

package/src/lib/component/progress-bar/progress-bar.component.spec.ts

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

package/src/lib/component/progress-bar/progress-bar.component.ts

@@ -1,15 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {ThemePalette} from "@angular/material/core";
-import {ProgressBarMode} from "@angular/material/progress-bar";
-
-@Component({
-  selector: 'falcon-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.scss']
-})
-export class ProgressBarComponent {
-  @Input() bufferValue!: number;
-  @Input() color: ThemePalette;
-  @Input() mode!: ProgressBarMode;
-  @Input() value!: number;
-}

package/src/lib/component/progress-spinner/progress-spinner.component.html

@@ -1,7 +0,0 @@
-<mat-progress-spinner
-  [color]="color"
-  [mode]="mode"
-  [diameter]="diameter"
-[strokeWidth]="strokeWidth"
-  [value]="value">
-</mat-progress-spinner>

package/src/lib/component/progress-spinner/progress-spinner.component.spec.ts

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

package/src/lib/component/progress-spinner/progress-spinner.component.ts

@@ -1,16 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {ThemePalette} from "@angular/material/core";
-import {ProgressSpinnerMode} from "@angular/material/progress-spinner";
-
-@Component({
-  selector: 'falcon-progress-spinner',
-  templateUrl: './progress-spinner.component.html',
-  styleUrls: ['./progress-spinner.component.scss']
-})
-export class ProgressSpinnerComponent {
-  @Input() diameter: number = 100;
-  @Input() color: ThemePalette;
-  @Input() mode!: ProgressSpinnerMode;
-  @Input() value!: number;
-  @Input() strokeWidth: number = 5;
-}