@falcon-ng/tailwind 0.0.2

package/src/lib/model/enum.ts

@@ -0,0 +1,151 @@
+/**
+ * @description
+ * Enum use for setting the form control Types.
+ * @usageNotes
+ * ```ts
+ *      export class Textbox extends BaseControl<string>{
+ *         override controlType = ControlType.Select;
+ *      }
+ * ```
+ */
+export const enum ControlType {
+  TextBox = 0,
+  TextArea = 1,
+  Select = 2,
+  DatePicker = 3,
+  Radio = 4,
+  Checkbox = 5,
+  Button = 6,
+  SlideToggle = 7,
+  Slider = 8,
+  ButtonToggle = 9,
+  AutoComplete = 10,
+  Chip = 11,
+  Editor = 12,
+  Divider = 13,
+}
+
+/**
+ * @description
+ * Enum use for Appearance of the control.
+ * @usageNotes
+ * Before and After property should be only use for Checkbox and Radio button
+ * ```ts
+ *       if (componentType == ComponentType.Radio && componentType == ComponentType.Checkbox) THEN
+ *          only use Appearance Before and After
+ * ```
+ */
+export const enum Appearance {
+  /**
+   * @usageNotes Should be only use for input, textbox, and select
+   */
+  Plain = 'plain',
+  Legacy = 'legacy',
+  Standard = 'standard',
+  Fill = 'fill',
+  Outline = 'outline',
+  /**
+   * @usageNotes Should be only use for label position
+   */
+  Before = 'before',
+  After = 'after',
+  /**
+   * @usageNotes Should be only use for select
+   */
+  Multiple = 'true',
+
+  /**
+   * @usageNotes Should be only use for Buttom
+   */
+  Basic = 0,
+  Raised = 1,
+  Stroked = 2,
+  Flat = 3,
+  Icon = 4,
+  FAB = 5,
+  MiniFAB = 6,
+  routeLink = 7,
+  routeHref = 8,
+}
+
+/**
+ * @description
+ * Enum use for setting the attribute Types.
+ * @usageNotes
+ * ```ts
+ *      componentProperty: {
+ *        attrType: InputTypes.Text
+ *      }
+ * ```
+ */
+export const enum InputTypes {
+  Color = 'color',
+  Date = 'date',
+  DatetimeLocal = 'datetime-local',
+  Email = 'email',
+  Month = 'month',
+  Number = 'number',
+  Password = 'password',
+  Search = 'search',
+  Tel = 'tel',
+  Text = 'text',
+  Time = 'time',
+  Url = 'url',
+  Week = 'week',
+  /**
+   * @usageNotes Should be only use for Buttom
+   */
+  Button = 'button',
+  Submit = 'submit',
+  DragDrop = 'dragDrop',
+}
+
+/**
+ * @description
+ * Enum use for setting HTTP method.
+ * @usageNotes
+ * ```ts
+ *      this.genericHttpClientService.Delete(this.deleteUserUrl).subscribe(item => {}, error => {});
+ * ```
+ */
+export const enum HttpMethod {
+  Get = 'GET',
+  Post = 'POST',
+  Put = 'PUT',
+  Patch = 'PATCH',
+  Delete = 'DELETE',
+}
+
+/**
+ * @description
+ * Enum use for Table actions
+ */
+export const enum TableAction {
+  View,
+  Edit,
+  Delete,
+  RightArrow,
+}
+
+/**
+ * @description
+ * Enum use for setting the Floating label.
+ * @usageNotes
+ * ```ts
+ *      componentProperty: {
+ *        floatLabel: Floatinglabel.Always
+ *      }
+ * ```
+ */
+export const enum Floatinglabel {
+  Auto = 'auto',
+  Always = 'always',
+}
+
+export const enum LoggingLevel {
+  None = 'None',
+  Verbose = 'Verbose',
+  Info = 'Info',
+  Warnings = 'Warnings',
+  Errors = 'Errors'
+}

package/src/lib/model/environments.ts

@@ -0,0 +1,28 @@
+export abstract class EnvironmentViewModel {
+    abstract readonly production: boolean;
+    abstract readonly openID?: IOpenIdViewModel;
+    abstract readonly baseUrl?: string;
+    abstract readonly snackBarEnable?: boolean
+}
+
+
+/**
+ * @description
+ * Interface use for an app setting configuration for Open Id Client setting.
+ */
+export declare interface IOpenIdViewModel {
+    authority?: string;
+    client_id?: string;
+    redirect_uri?: string;
+    response_type?: string;
+    scope?: string;
+    silent_redirect_uri?: string;
+    post_logout_redirect_uri?: string;
+    filterProtocolClaims?: boolean
+    loadUserInfo?: boolean
+    automaticSilentRenew?: boolean;
+    monitorSession?: boolean;
+    accessTokenExpiringNotificationTime?: number;
+    checkSessionInterval?: number;
+    silentRequestTimeout?: number;
+}

package/src/lib/model/interface.ts

@@ -0,0 +1,310 @@
+import { HttpHeaders, HttpParams } from '@angular/common/http';
+import { LoggingLevel } from './enum';
+import { EventEmitter } from '@angular/core';
+/**
+ * @description
+ * Interface use for IRequestOptions.
+ * @usageNotes
+ * ```ts
+ *       {
+ *        headers : "application/json",
+ *        observe : "body",
+ *        params : {},
+ *        reportProgress : true,
+ *        responseType : "application/json",
+ *        withCredentials : true,
+ *        body : {"username" : "test@test.com", "password": "xxxxxx"},
+ *       }
+ * ```
+ */
+export declare interface IRequestOptions {
+  headers?: HttpHeaders | { [header: string]: string | string[] };
+  observe?: 'body' | 'events' | 'response';
+  params?: HttpParams | { [param: string]: string | string[] };
+  reportProgress?: boolean;
+  responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+  withCredentials?: boolean;
+  body?: any;
+}
+
+/**
+ * @description
+ * Interface use for mat table header and column.
+ * @usageNotes
+ * ```ts
+ *       columns: MatTable[] = [
+ *        {
+ *          columnDef: 'position',
+ *          header: 'No.',
+ *          cell: (element: any) => `${element.position}`
+ *          }
+ *      ]
+ * ```
+ */
+export declare interface MatTable {
+  columnDef?: string;
+  header?: string;
+  cell?: any;
+  link?: IRouteLink;
+}
+
+/**
+ * @description
+ * Interface use for mat table configuration.
+ * @usageNotes
+ * ```ts
+ *       {
+ *          columns : MatTable[] = [{
+ *            columnDef: 'position',
+ *            header: 'No.',
+ *            cell: (element: any) => `${element.position}`
+ *        }, filter : true,
+ *           pagination : true
+ *        ]}
+ * ```
+ */
+export declare interface MatTableConfig {
+  columns?: MatTable[];
+  dataSource?: any;
+  filter?: boolean;
+  paginationConfig?: MatTablePaginationConfig;
+  progressBar?: boolean;
+  action?: ITableAction;
+  property?: IMatTableStyle;
+}
+
+/**
+ * @description
+ * Interface use for mat table style
+ */
+export declare interface IMatTableStyle {
+  css?: string;
+  style?: string;
+}
+
+/**
+ * @description
+ * Interface use for mat table pagination configuration.
+ */
+export declare interface MatTablePaginationConfig {
+  pagination?: boolean;
+  pageSizeOptions?: number[];
+}
+/**
+ * @description
+ * Interface use for mat table action button configuration.
+ * view - action for view only
+ * edit - action for edit the row
+ * delete - action for delete the row
+ * menu - context menu for more action
+ */
+export declare interface ITableAction {
+  view?: boolean;
+  edit?: boolean;
+  delete?: boolean;
+  arrowRight?: boolean;
+  isMenu: boolean;
+  menu?: IMatHint[];
+}
+
+/**
+ * @description
+ * Interface use for material hint component.
+ */
+export declare interface IMatHint {
+  isIcon: boolean;
+  icon?: IIcon;
+  text?: string;
+  link?: IRouteLink;
+  disabled?: boolean;
+  show?: boolean;
+}
+
+/**
+ * @description
+ * Interface for icons
+ */
+export declare interface IIcon {
+  iconText?: string;
+  iconColor?: string;
+}
+
+/**
+ * @description
+ * Interface for routerLink
+ */
+export declare interface IRouteLink {
+  routerLink: string | any;
+  queryParams?: string;
+  isLink?: boolean;
+}
+
+/**
+ * @description
+ * Interface for Dialog Data
+ */
+export declare interface IDialogData {
+  title: string;
+  cancelBtnText: string;
+  mainbtnText?: string;
+  bodyMessage?: string;
+}
+/**
+ * @description
+ * Interface use for setting the suffix and prefix.
+ * @usageNotes
+ * ```ts
+ *       new Textbox({
+ *        label: "Prefix & Suffix icon",
+ *        appearance: Appearance.Outline,
+ *        placeHolder: "Prefix & Suffix icon",
+ *        attrType: InputTypes.Text,
+ *        prefix : {
+ *          isIcon : true,
+ *          text : "euro"
+ *        },
+ *        suffix : {
+ *          isIcon: true,
+ *          text : "done"
+ *        }
+ *      });
+ * ```
+ */
+export declare interface ISuffixPrefixConfig {
+  isIcon?: boolean;
+  text?: string;
+  toolTipText?: string;
+}
+
+/**
+ * @description
+ * Interface use for an app setting configuration.
+ */
+export declare interface IAppSettingViewModel {
+  baseUrl?: string;
+  loggingLevel?: LoggingLevel;
+}
+
+/**
+ * View model for snack bar Message and Action Text
+ */
+export interface SnackbarModel {
+  messageText: string;
+  actionText: string;
+}
+
+/**
+ * @description
+ * Interface use for setting the TextArea Property.
+ * @usageNotes
+ * ```ts
+ *       componentProperty: {
+ *        textAreaProperty : {
+ *          cdkTextareaAutosize : true,
+ *          cdkAutosizeMinRows : 1,
+ *          cdkAutosizeMaxRows : 2,
+ *          rows : 2,
+ *          cols : 2
+ *        }
+ *      }
+ * ```
+ */
+export declare interface ITextAreaProperty {
+  cdkTextareaAutosize?: boolean;
+  cdkAutosizeMinRows?: number;
+  cdkAutosizeMaxRows?: number;
+  rows?: number;
+  cols?: number;
+}
+
+/**
+ * @description
+ * Interface use for setting the options meta for select control.
+ * @usageNotes
+ * ```ts
+ *       componentProperty: {
+ *        selectProperty: {multiple : true};
+ *      }
+ * ```
+ */
+export declare interface ISelectOptions {
+  single?: boolean;
+  multiple?: boolean;
+}
+
+/**
+ * @description
+ * Interface use for setting the options meta.
+ * Disable is used for select option values
+ * @usageNotes
+ * ```ts
+ *       componentProperty: {
+ *        options: [{key : 'key-1', value : 'value-1', icon: 'material_icon', disabled: true}];
+ *      }
+ * ```
+ */
+export declare interface IOptions {
+  key?: any;
+  value?: any;
+  icon?: string;
+  class?: string;
+  disabled?: boolean;
+}
+
+/**
+ * @description
+ * @param change change event for the control
+ * @param click click event for the control
+ * Events for controls
+ */
+export declare interface IComponentEvent<T> {
+  change?: EventEmitter<T>;
+  click?: EventEmitter<T>;
+  keyboardEnter?: EventEmitter<T>;
+}
+/**
+* @description
+* Interface use for setting the Mat Slider Property.
+* @usageNotes
+* ```ts
+*       componentProperty: {
+*        sliderProperty : {
+*          invert : true,
+*          step : 1,
+*          thumbLabel : false,
+*          vertical : true,
+*          horizontal : false
+*        }
+*      }
+* ```
+*/
+export declare interface ISliderProperty {
+  invert?: boolean;
+  thumbLabel?: boolean;
+  vertical?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  tickInterval?: string | number;
+}
+
+/**
+* @description
+* Interface use for mat table header and column.
+* @usageNotes
+* ```ts
+*       columns: MatTable[] = [
+*        {
+*          columnDef: 'position',
+*          header: 'No.',
+*          cell: (element: any) => `${element.position}`
+*          }
+*      ]
+* ```
+*/
+export declare interface MatTable {
+  columnDef?: string;
+  header?: string;
+  cell?: any;
+  link?: IRouteLink;
+}

package/src/lib/model/ivalidator.ts

@@ -0,0 +1,18 @@
+/**
+ * @description
+ * Interface use for validation config.
+ * @usageNotes
+ * ```ts
+ *       validations: [
+ *        {
+ *          name: "required",
+ *          validator: Validators.required,
+ *          message: "Required Field"
+ *        }]
+ * ```
+ */
+export declare interface IValidator {
+  name: string;
+  validator: any;
+  message: string;
+}

package/src/lib/module/angularmaterial.module.ts

@@ -0,0 +1,98 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ScrollingModule} from "@angular/cdk/scrolling";
+import {PortalModule} from "@angular/cdk/portal";
+import {OverlayModule} from "@angular/cdk/overlay";
+import {MatTreeModule} from "@angular/material/tree";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatToolbarModule} from "@angular/material/toolbar";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatTableModule} from "@angular/material/table";
+import {MatSortModule} from "@angular/material/sort";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {MatSliderModule} from "@angular/material/slider";
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {MatSelectModule} from "@angular/material/select";
+import {MatNativeDateModule, MatRippleModule} from "@angular/material/core";
+import {MatRadioModule} from "@angular/material/radio";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatProgressBarModule} from "@angular/material/progress-bar";
+import {MatPaginatorModule} from "@angular/material/paginator";
+import {MatMenuModule} from "@angular/material/menu";
+import {MatListModule} from "@angular/material/list";
+import {MatInputModule} from "@angular/material/input";
+import {MatIconModule} from "@angular/material/icon";
+import {MatGridListModule} from "@angular/material/grid-list";
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatDividerModule} from "@angular/material/divider";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatStepperModule} from "@angular/material/stepper";
+import {MatChipsModule} from "@angular/material/chips";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatCardModule} from "@angular/material/card";
+import {MatButtonToggleModule} from "@angular/material/button-toggle";
+import {MatButtonModule} from "@angular/material/button";
+import {MatBottomSheetModule} from "@angular/material/bottom-sheet";
+import {MatBadgeModule} from "@angular/material/badge";
+import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import {DragDropModule} from "@angular/cdk/drag-drop";
+import {CdkTreeModule} from "@angular/cdk/tree";
+import {CdkTableModule} from "@angular/cdk/table";
+import {CdkStepperModule} from "@angular/cdk/stepper";
+import {ClipboardModule} from "@angular/cdk/clipboard";
+import {A11yModule} from "@angular/cdk/a11y";
+
+
+
+@NgModule({
+  declarations: [],
+  exports: [
+    A11yModule,
+    ClipboardModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    OverlayModule,
+    PortalModule,
+    ScrollingModule
+  ]
+})
+export class AngularmaterialModule { }

package/src/lib/reactive-field.directive.ts

@@ -0,0 +1,24 @@
+import {ComponentRef, Directive, Input, OnInit, ViewContainerRef} from '@angular/core';
+import {BaseControl} from "./base-control";
+import {FormGroup} from "@angular/forms";
+import {Constant} from "./model/constant";
+
+@Directive({
+  selector: '[reactiveField]'
+})
+export class ReactiveFieldDirective implements OnInit {
+  @Input() control!: BaseControl<string>;
+  @Input() formGroup!: FormGroup;
+  private componentRef!: ComponentRef<any>;
+  constructor(private viewContainerRef: ViewContainerRef) {
+  }
+
+  ngOnInit(): void {
+    if (this.control !== undefined) {
+      this.componentRef = this.viewContainerRef.createComponent(Constant.ComponentMapper[this.control.controlType]);
+      this.componentRef.instance.control = this.control;
+      this.componentRef.instance.formGroup = this.formGroup;
+    }
+  }
+
+}

package/src/lib/service/appsetting.service.ts

@@ -0,0 +1,57 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Subject, Observable, from} from 'rxjs';
+import {LoggerService} from './logger.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppSettingService {
+  static APP_SETTINGS_LOADED = "APP_SETTINGS_LOADED";
+  private listeners: any;
+  initialized: boolean = false;
+  private eventsSubject: Subject<any>;
+  public isServiceReady: Subject<boolean> = new Subject<boolean>();
+  private events: Observable<any>;
+  private appSettings: any;
+
+  constructor(private http: HttpClient, private logger: LoggerService) {
+    this.listeners = {};
+    this.eventsSubject = new Subject<any>();
+
+    this.events = from(this.eventsSubject);
+    this.events.subscribe(
+      ({name, args}) => {
+        if (this.listeners[name]) {
+          for (let listener of this.listeners[name]) {
+            listener(...args);
+          }
+        }
+      });
+  }
+
+  async load() {
+    if (this.initialized) return;
+    let data = await this.http.get('assets/appsetting.json').toPromise();
+    this.appSettings = data;
+    this.initialized = true;
+    this.isServiceReady.next(this.initialized);
+    this.logger.info("[AppSettingService] load --> isServiceReady", this.initialized);
+  }
+
+  on(name: any, listener: any) {
+    if (!this.listeners[name]) {
+      this.listeners[name] = [];
+    }
+
+    this.listeners[name].push(listener);
+  }
+
+  public getAppsettingValue<T>(): T | null {
+    return this.appSettings ? <T>this.appSettings : null;
+  }
+}
+
+export function appSettingsFactory(appSettings: AppSettingService) {
+  return async () => await appSettings.load();
+};