@falcon-ng/tailwind 0.0.2

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

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

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

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

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

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

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

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

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

package/src/lib/component/radio/radio.component.html

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

package/src/lib/component/radio/radio.component.scss

@@ -0,0 +1,14 @@
+.radio-group-column {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+}
+.radio-group-row {
+  display: flex;
+  flex-direction: row;
+  margin: 15px 0;
+}
+
+.radio-button {
+  margin: 5px;
+}

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

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

package/src/lib/component/radio/radio.component.ts

@@ -0,0 +1,29 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {MatRadioChange} from "@angular/material/radio";
+import {BaseControl} from "../../base-control";
+
+@Component({
+  selector: 'falcon-radio',
+  templateUrl: './radio.component.html',
+  styleUrls: ['./radio.component.scss'],
+})
+export class RadioComponent {
+  control!: BaseControl<string>;
+  formGroup!: FormGroup;
+  @Output() radioGroupChange: EventEmitter<MatRadioChange> =
+    new EventEmitter<MatRadioChange>();
+
+  ngOnInit(): void {
+    console.log(this.control.options)
+    if (this.formGroup === undefined) {
+      this.formGroup = new FormGroup({
+        default: new FormControl(),
+      });
+    }
+  }
+
+  radioGroupChangeEvent($event: any) {
+    this.radioGroupChange.emit($event.value);
+  }
+}

package/src/lib/component/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,10 @@
+<ng-container [formGroup]="formGroup">
+  <mat-label>{{control.label}}</mat-label>
+  <angular-editor [formControlName]="control.formControlName" [config]="control.editorProperty">
+  </angular-editor>
+  <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>
+</ng-container>

package/src/lib/component/rich-text-editor/rich-text-editor.component.spec.ts

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

package/src/lib/component/rich-text-editor/rich-text-editor.component.ts

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

package/src/lib/component/select/select.component.html

@@ -0,0 +1,25 @@
+<mat-form-field [appearance]="control.appearance" [formGroup]="formGroup" [floatLabel]="control.floatLabel"
+  [ngStyle]="control.style" [ngClass]="control.class">
+  <mat-label>{{control.label}}</mat-label>
+  <mat-select [multiple]="control.selectProperty.multiple" (selectionChange)="selectChange($event)"
+    [formControlName]="control.formControlName != undefined ? control.formControlName : 'default'"
+    [placeholder]="control.placeHolder" [ngStyle]="control.style" [ngClass]="control.class" [(value)]="control.value">
+    <mat-option *ngFor="let item of control.options" [value]="item.key" [disabled]="item.disabled">
+      {{item.value}}
+    </mat-option>
+  </mat-select>
+  <mat-hint *ngIf="control.hint?.show">
+    <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>

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

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

package/src/lib/component/select/select.component.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { BaseControl } from '../../base-control';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MatSelectChange } from '@angular/material/select';
+
+@Component({
+  selector: 'falcon-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss'],
+})
+export class SelectComponent implements OnInit {
+  control!: BaseControl<string>;
+  formGroup!: FormGroup;
+  @Output() selectionChange: EventEmitter<MatSelectChange> =
+    new EventEmitter<MatSelectChange>();
+
+  constructor() {}
+
+  ngOnInit(): void {
+    if (this.formGroup === undefined) {
+      this.formGroup = new FormGroup({
+        default: new FormControl(),
+      });
+    }
+  }
+
+  selectChange($event: any) {
+    this.selectionChange.emit($event.value);
+    if (this.control.event !== undefined)
+      this.control.event.change?.emit($event);
+  }
+}

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

@@ -0,0 +1,7 @@
+<div [formGroup]="formGroup">
+  <mat-slide-toggle [labelPosition]="control.appearance"
+                    [ngStyle]="control.style" [ngClass]="control.class"
+                    [formControlName]="control.formControlName" [color]="control.color">
+    {{control.label}}
+  </mat-slide-toggle>
+</div>

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

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

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

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

package/src/lib/component/slider/slider.component.html

@@ -0,0 +1,11 @@
+<div [ngStyle]="control.style" [ngClass]="control.class" [formGroup]="formGroup">
+<mat-label>{{control.label}}</mat-label>&nbsp;&nbsp;&nbsp;
+  <mat-slider
+    [ngStyle]="control.style" [ngClass]="control.class"
+    [color]="control.color"
+    [max]="control.sliderProperty.max"
+    [min]="control.sliderProperty.min"
+    [step]="control.sliderProperty.step">
+    <input matSliderThumb [formControlName]="control.formControlName">
+  </mat-slider>
+</div>

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

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

package/src/lib/component/slider/slider.component.ts

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

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

@@ -0,0 +1 @@
+<span>Pizza party!!! 🍕</span>

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-snack-bar',
+  templateUrl: './snack-bar.component.html',
+  styleUrls: ['./snack-bar.component.scss']
+})
+export class SnackBarComponent {
+
+}