@ferhaps/easy-ui-lib 0.0.7 → 1.0.0

package/src/lib/components/table/table.component.scss

@@ -0,0 +1,116 @@
+.scroll {
+  overflow-y: auto;
+  max-height: 94%;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0px;
+
+  &.with-options {
+    td {
+      padding-block: 3px !important;
+    }
+  }
+}
+
+.flexer {
+  display: flex;
+  align-items: center;
+}
+
+.action {
+  color: #009ddc;
+  font-weight: 500;
+  text-align: right;
+  margin-left: auto;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.gap05 {
+  gap: 0.5rem;
+}
+
+.mb05 {
+  margin-bottom: 0.5;
+}
+
+.data {
+  white-space: pre-wrap;
+}
+
+.row-heading-labels {
+  font-weight: 700;
+  font-size: 20px;
+}
+
+.selected-row td {
+  background-color: #d3edf8;
+}
+
+.hover-row {
+  background-color: #ebf7fc;
+}
+
+.red {
+  color: #ff0000;
+}
+
+@media (max-width: 1086px) {
+  table td, table th {
+    padding: 3px !important;
+    width: auto !important;
+  }
+}
+
+td, th {
+  padding: 0.5rem 1rem;
+  font-size: 14px;
+}
+
+th {
+  background-color: #f6f6f6;
+  text-align: left;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-top: 2px solid #E5E4E7;
+}
+
+td {
+  border-bottom: 2px solid #E5E4E7;
+  border-top: 2px solid #E5E4E7;
+}
+
+.dots {
+  width: fit-content;
+}
+
+.draggable {
+  cursor: grabbing;
+}
+
+.dragCol {
+  padding-left: 0 !important;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-size: 1.5em;
+  text-align: center;
+  opacity: 0.8;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.dragdrop-placeholder {
+  background: #ccc;
+  border: dotted 3px #999;
+  min-height: 30px;
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+}

package/src/lib/components/table/table.component.ts

@@ -0,0 +1,105 @@
+import { Component, ElementRef, input, output, viewChild } from '@angular/core';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { SortState, TableSortHeaderComponent } from '../table-sort-header/table-sort-header.component';
+import { WhiteSpaceFillerPipe } from '../../pipes/blank-filler.pipe';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from "@angular/cdk/drag-drop";
+import { fader } from '../../utils/animations';
+
+export type TableEvent = {
+  action: string;
+  obj?: any;
+  prop?: string;
+  index?: number;
+  selected?: boolean;
+  sortState?: SortState;
+  event?: Event;
+};
+
+export type Config = {
+  data: any[];
+  title: string;
+  dataProps: string[];
+  tableHeadings: string[];
+  options?: string[];
+  withAdd?: boolean;
+  selectableRows?: boolean;
+  sortable?: boolean;
+  draggable?: boolean;
+  classRules?: ClassRule[];
+};
+
+export type ClassRule = {
+  className: string;
+  condition: (obj: any, prop: string) => boolean;
+};
+
+@Component({
+  selector: 'lib-table',
+  templateUrl: 'table.component.html',
+  styleUrls: ['table.component.scss'],
+  animations: [fader],
+  imports: [
+    WhiteSpaceFillerPipe,
+    MatMenuModule,
+    MatIconModule,
+    MatButtonModule,
+    TableSortHeaderComponent,
+    DragDropModule
+  ]
+})
+export class TableComponent {
+  public config = input.required<Config>();
+  protected action = output<TableEvent>();
+  protected scrollContainer = viewChild.required<ElementRef<HTMLDivElement>>('scrollContainer');
+
+  protected selectedRowIndex: number = -1;
+  protected hoverRowIndex: number = -1;
+  protected currentSortColumn: number = -1;
+
+  protected getClass(obj: any, prop: string): string {
+    if (!this.config().classRules) return '';
+
+    const classes: string[] = [];
+    for (let rule of (this.config().classRules as ClassRule[])) {
+      if (rule.condition(obj, prop)) {
+        classes.push(rule.className);
+      }
+    }
+
+    return classes.join(' ');
+  }
+
+  protected drop(event: CdkDragDrop<any>) {
+    if (this.config().draggable) {
+      moveItemInArray(this.config().data, event.previousIndex, event.currentIndex);
+      this.action.emit({ action: 'drag', obj: this.config().data[event.currentIndex], index: event.currentIndex });
+    }
+  }
+
+  protected onScroll() {
+    const container = this.scrollContainer().nativeElement;
+    // console.log(Math.ceil(container.scrollTop), container.offsetHeight, container.scrollHeight)
+    if ((Math.ceil(container.scrollTop) + container.offsetHeight) >= container.scrollHeight) {
+      this.action.emit({ action: 'scrolled' });
+    }
+  }
+
+  protected onRowClick(event: Event, obj: any, index: number): void {
+    this.selectedRowIndex = index === this.selectedRowIndex ? -1 : index;
+    this.action.emit({ action: 'rowClick', obj, index, selected: this.selectedRowIndex === index, event });
+  }
+
+  protected selectOption(оption: string, obj: any, index: number): void {
+    this.action.emit({ action: оption.toLowerCase(), obj, index, selected: this.selectedRowIndex === index });
+  }
+
+  protected sortByProp(prop: string, sortState: SortState): void {
+    this.action.emit({ action: 'sort', prop, sortState });
+  }
+
+  protected trackById(index: number, obj: any): number {
+    return obj.id || index;
+  }
+}

package/src/lib/components/table-sort-header/table-sort-header.component.html

@@ -0,0 +1,7 @@
+<div class="sorting-container" (click)="onSortClick()">
+  <mat-icon
+    [class.selected]="selected() && sortState != 'none'"
+    [class.rotated]="sortState == 'asc'">
+    sort
+  </mat-icon>
+</div>

package/src/lib/components/table-sort-header/table-sort-header.component.scss

@@ -0,0 +1,17 @@
+.sorting-container {
+  display: flex;
+  align-items: center;
+
+  * {
+    cursor: pointer;
+  }
+
+  .selected {
+    color: #31ADFF;
+    background-color: #ebf7fc;
+  }
+  
+  .rotated {
+    transform: rotate(180deg) scaleX(-1);
+  }
+}

package/src/lib/components/table-sort-header/table-sort-header.component.ts

@@ -0,0 +1,31 @@
+import { Component, input, output } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+
+export type SortState = 'none' | 'asc' | 'desc';
+
+@Component({
+  selector: 'lib-table-sort-header',
+  imports: [
+    MatIconModule,
+  ],
+  templateUrl: './table-sort-header.component.html',
+  styleUrls: ['./table-sort-header.component.scss']
+})
+export class TableSortHeaderComponent {
+  public selected = input.required<boolean>();
+  public sort = output<SortState>();
+
+  protected sortState: SortState = 'none';
+
+  protected onSortClick(): void {
+    if (this.sortState === 'none') {
+      this.sortState = 'desc';
+    } else if (this.sortState === 'desc') {
+      this.sortState = 'asc';
+    } else {
+      this.sortState = 'none';
+    }
+
+    this.sort.emit(this.sortState);
+  }
+}

package/src/lib/directives/fields-match-validator.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, Validator } from '@angular/forms';
+
+@Directive({
+  selector: '[libFieldsMatchValidator]',
+  providers: [
+    {
+      provide: NG_VALIDATORS,
+      useExisting: FieldsMatchValidatorDirective,
+      multi: true,
+    },
+  ],
+})
+export class FieldsMatchValidatorDirective implements Validator {
+  public fieldToMatch = input.required<string>();
+
+  public validate(control: AbstractControl): { [key: string]: any } | null {
+    const value = control.value;
+
+    if (!value) {
+      return null;
+    }
+
+    const matchingControl = control.root.get(this.fieldToMatch());
+    if (!matchingControl) {
+      return null;
+    }
+
+    if (value !== matchingControl.value) {
+      return { mismatch: true };
+    }
+
+    return null;
+  }
+}

package/src/lib/directives/password-validator.directive.ts

@@ -0,0 +1,26 @@
+import { Directive } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
+
+@Directive({
+  selector: '[libPasswordValidator]',
+  providers: [
+    {
+      provide: NG_VALIDATORS,
+      useExisting: PasswordValidatorDirective,
+      multi: true
+    }
+  ]
+})
+export class PasswordValidatorDirective implements Validator {
+  public validate(control: AbstractControl): ValidationErrors | null {
+    const password = control.value;
+
+    const pattern = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#\$%\^&\*])(?=.*\d).{8,}$/
+
+    if (password && !pattern.test(password)) {
+      return { passwordInvalid: true };
+    }
+
+    return null;
+  }
+}

package/src/lib/directives/phone-validation.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[libPhoneValidation]',
+})
+export class PhoneValidationDirective {
+  @HostListener('input', ['$event']) public onInput(event: InputEvent) {
+    const input = event.target as HTMLInputElement;
+    if (!input.value.includes('+')) {
+      input.value = `+${input.value}`;
+    }
+    const regex = /^[0-9+]*$/;
+    if (!regex.test(input.value)) {
+      input.value = input.value.replace(/[^0-9+]/g, '');
+    }
+  }
+
+  @HostListener('keydown', ['$event']) public onKeyDown(event: KeyboardEvent): void {
+    const inputValue = (event.target as HTMLInputElement).value;
+    if (event.key === 'Backspace' && inputValue === '+') {
+      event.preventDefault();
+    }
+  }
+}

package/src/lib/pipes/blank-filler.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: 'blankFiller',
+})
+export class WhiteSpaceFillerPipe implements PipeTransform {
+  public transform(value: any, fillWith: string = '-'): string {
+    if (value === 0) {
+      return '0';
+    }
+    return value ? value : fillWith;
+  }
+}

package/src/lib/pipes/snake-case-parser.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'snakeCaseParser',
+})
+export class SnakeCaseParserPipe implements PipeTransform {
+  public transform(str: string | undefined): string {
+    if (str) {
+      let temp = str.split('_').map(word => {
+        return word.toLowerCase();
+      }).join(' ');
+      return temp.charAt(0).toUpperCase() + temp.slice(1);
+    }
+
+    return '';
+  }
+}

package/src/lib/services/error.service.ts

@@ -0,0 +1,15 @@
+import { HttpErrorResponse } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Subject } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ErrorService {
+  private errorSubject = new Subject<HttpErrorResponse>();
+  public error$ = this.errorSubject.asObservable();
+
+  public sendError(error: HttpErrorResponse) {
+    this.errorSubject.next(error);
+  }
+}

package/src/lib/services/loader.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderService {
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+  public loading$ = this.loadingSubject.asObservable();
+
+  public setLoading(loadingState: boolean) {
+    this.loadingSubject.next(loadingState);
+  }
+}

package/src/lib/utils/animations.ts

@@ -0,0 +1,29 @@
+import { animate, state, style, transition, trigger } from "@angular/animations";
+
+export const fader = trigger('fadeInOut', [
+  transition(':enter', [
+    style({ opacity: 0 }),
+    animate('200ms', style({ opacity: 1 })),
+  ]),
+  transition(':leave', [
+    animate('200ms', style({ opacity: 0 })),
+  ]),
+]);
+
+export const openDropdown = trigger('open-close-dropdown', [
+  transition(':enter', [
+    style({ height: 0, overflow: 'hidden' }),
+    animate('200ms ease', style({ height: '*' }))
+  ]),
+  transition(':leave', [
+    style({ height: '*', overflow: 'hidden' }),
+    animate('200ms ease', style({ height: 0 }))
+  ])
+]);
+
+export const textFader = trigger('textFader', [
+  state('void', style({ opacity: 0 })),
+  state('*', style({ opacity: 1 })),
+  transition('void => *', [animate('0.3s 0.3s ease-in')]),
+  transition('* => void', [animate('0.3s ease-in')])
+]);

package/{lib/utils/types.d.ts → src/lib/utils/types.ts}

@@ -1,2 +1,3 @@
-import { HttpErrorResponse } from "@angular/common/http";
-export type SystemError = HttpErrorResponse | string | undefined;
+import { HttpErrorResponse } from "@angular/common/http";
+
+export type SystemError = HttpErrorResponse | string | undefined;

package/src/lib/utils/utils.ts

@@ -0,0 +1,65 @@
+export const HTTP_STATUS_CODES: any = {
+  100: 'Continue',
+  101: 'Switching Protocols',
+  102: 'Processing',
+  103: 'Early Hints',
+  200: 'OK',
+  201: 'Created',
+  202: 'Accepted',
+  203: 'Non-Authoritative Information',
+  204: 'No Content',
+  205: 'Reset Content',
+  206: 'Partial Content',
+  207: 'Multi-Status',
+  208: 'Already Reported',
+  226: 'IM Used',
+  300: 'Multiple Choices',
+  301: 'Moved Permanently',
+  302: 'Found',
+  303: 'See Other',
+  304: 'Not Modified',
+  305: 'Use Proxy',
+  306: '(Unused)',
+  307: 'Temporary Redirect',
+  308: 'Permanent Redirect',
+  400: 'Bad Request',
+  401: 'Unauthorized',
+  402: 'Payment Required',
+  403: 'Forbidden',
+  404: 'Not Found',
+  405: 'Method Not Allowed',
+  406: 'Not Acceptable',
+  407: 'Proxy Authentication Required',
+  408: 'Request Timeout',
+  409: 'Conflict',
+  410: 'Gone',
+  411: 'Length Required',
+  412: 'Precondition Failed',
+  413: 'Payload Too Large',
+  414: 'URI Too Long',
+  415: 'Unsupported Media Type',
+  416: 'Range Not Satisfiable',
+  417: 'Expectation Failed',
+  418: "I'm a teapot",
+  421: 'Misdirected Request',
+  422: 'Unprocessable Entity',
+  423: 'Locked',
+  424: 'Failed Dependency',
+  425: 'Too Early',
+  426: 'Upgrade Required',
+  428: 'Precondition Required',
+  429: 'Too Many Requests',
+  431: 'Request Header Fields Too Large',
+  451: 'Unavailable For Legal Reasons',
+  500: 'Internal Server Error',
+  501: 'Not Implemented',
+  502: 'Bad Gateway',
+  503: 'Service Unavailable',
+  504: 'Gateway Timeout',
+  505: 'HTTP Version Not Supported',
+  506: 'Variant Also Negotiates',
+  507: 'Insufficient Storage',
+  508: 'Loop Detected',
+  510: 'Not Extended',
+  511: 'Network Authentication Required'
+};

package/{public-api.d.ts → src/public-api.ts}

@@ -1,17 +1,20 @@
-export * from './lib/pipes/blank-filler.pipe';
-export * from './lib/pipes/snake-case-parser.pipe';
-export * from './lib/directives/fields-match-validator.directive';
-export * from './lib/directives/phone-validation.directive';
-export * from './lib/directives/password-validator.directive';
-export * from './lib/components/default-dialog/default-dialog.component';
-export * from './lib/components/error-dispaly.component';
-export * from './lib/components/search-bar.component';
-export * from './lib/utils/types';
-export * from './lib/utils/animations';
-export * from './lib/components/table-sort-header/table-sort-header.component';
-export * from './lib/components/table/table.component';
-export * from './lib/components/global-loader/global-loader.component';
-export * from './lib/services/loader.service';
-export * from './lib/services/error.service';
-export * from './lib/components/error-handler/error-handler.component';
-export * from './lib/components/chip/chip.component';
+/*
+ * Public API Surface of ui-lib
+ */
+
+export * from './lib/pipes/blank-filler.pipe';
+export * from './lib/pipes/snake-case-parser.pipe';
+export * from './lib/directives/fields-match-validator.directive';
+export * from './lib/directives/phone-validation.directive';
+export * from './lib/directives/password-validator.directive';
+export * from './lib/components/default-dialog/default-dialog.component';
+export * from './lib/components/error-dispaly.component';
+export * from './lib/components/search-bar.component';
+export * from './lib/utils/types';
+export * from './lib/utils/animations';
+export * from './lib/components/table-sort-header/table-sort-header.component';
+export * from './lib/components/table/table.component';
+export * from './lib/components/global-loader/global-loader.component';
+export * from './lib/services/loader.service';
+export * from './lib/services/error.service';
+export * from './lib/components/error-handler/error-handler.component';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}