@ferhaps/easy-ui-lib 0.0.1

package/README.md

@@ -0,0 +1,8 @@
+# UI Library
+
+A collection of reusable Angular UI components.
+
+## Installation
+
+```bash
+npm install @easy-ui-lib/ui-lib

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ui-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@ferhaps/easy-ui-lib",
+  "version": "0.0.1",
+  "description": "Angular UI components, directives and pipes library with Angular Material",
+  "keywords": ["angular", "ui", "components", "pipes", "directives", "library"],
+  "author": "Ferhan Cherkez",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Ferhaps/angular-ui-library"
+  },
+  "peerDependencies": {
+    "@angular/common": "^19.0.6",
+    "@angular/core": "^19.0.6",
+    "@angular/material": "^19.0.5",
+    "@angular/cdk": "^19.0.5"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1,3 @@
+<div class="chip" [class.selected]="isSelected()" (click)="onClick()">
+  {{text()}}
+</div>

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

@@ -0,0 +1,19 @@
+.chip {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  background-color: #e6e6e6;
+  color: #333;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: #cccccc;
+  }
+
+  &.selected {
+    background-color: var(--primary-color);
+    color: #fff;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+  selector: 'lib-chip',
+  imports: [],
+  templateUrl: './chip.component.html',
+  styleUrl: './chip.component.scss'
+})
+export class ChipComponent {
+  public value = input.required<any>();
+  public isSelected = input.required<boolean>();
+  public text = input.required<string>();
+
+  protected selected = output<any>();
+
+  protected onClick() {
+    if (this.isSelected()) {
+      return;
+    }
+
+    this.selected.emit(this.value());
+  }
+}

package/src/lib/components/default-dialog/default-dialog.component.html

@@ -0,0 +1,19 @@
+<div class="modal" [style]="{'height': height()}">
+  <div class="dialog-title">
+    @if (withBack()) {
+      <div class="back-arrow" (click)="back.emit()">
+        <mat-icon>keyboard_arrow_left</mat-icon>
+      </div>
+    }
+    <h4 class="title">{{ dialogTitle() }}</h4>
+    <div class="closer" mat-dialog-close>
+      <mat-icon>close</mat-icon>
+    </div>
+  </div>
+
+  <div class="dialog-content">
+    <ng-content select=".dialog-content"></ng-content>
+    <ng-template #tempBody></ng-template>
+    <ng-container *ngTemplateOutlet="temRef ? temRef: tempBody" />
+  </div>
+</div>

package/src/lib/components/default-dialog/default-dialog.component.scss

@@ -0,0 +1,41 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-title {
+  padding-inline: 2rem;
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+  position: relative;
+  display: flex;
+  font-size: 20px;
+  justify-content: center;
+
+  .back-arrow {
+    cursor: pointer;
+    margin-right: 0.5rem;
+  }
+
+  .title {
+    font-weight: 700;
+    font-size: 24px;
+    margin: 0 !important;
+  }
+
+  .closer {
+    right: 3%;
+    position: absolute;
+    cursor: pointer;
+  }
+}
+
+.dialog-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

package/src/lib/components/default-dialog/default-dialog.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, input, output, TemplateRef } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'lib-default-dialog',
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatDialogModule
+  ],
+  templateUrl: './default-dialog.component.html',
+  styleUrls: ['./default-dialog.component.scss']
+})
+export class DefaultDialogComponent {
+  @Input() temRef!: TemplateRef<any>;
+  public height = input<string>();
+  public dialogTitle = input<string>();
+  public withBack = input<boolean>();
+
+  protected back = output<void>();
+}

package/src/lib/components/error-dispaly.component.ts

@@ -0,0 +1,48 @@
+import { Component, input, OnInit } from '@angular/core';
+
+import { HttpErrorResponse } from '@angular/common/http';
+import { SnakeCaseParserPipe } from '../pipes/snake-case-parser.pipe';
+import { SystemError } from '../utils/types';
+
+@Component({
+  selector: 'lib-error-dispaly',
+  imports: [
+    SnakeCaseParserPipe
+  ],
+  template: `<strong class="err-container">{{ displayError | snakeCaseParser }}</strong>`,
+  styles: [`
+  .err-container {
+    display: block;
+    max-width: 300px;
+    font-size: 20px;
+    text-align: center;
+    border: 1px solid red;
+    border-radius: 5px;
+    padding: 0.5rem 1.5rem;
+    background-color: #ffe6e6;
+    color: #ff0000;
+    overflow-wrap: break-word;
+  }
+`]
+})
+export class ErrorDispalyComponent implements OnInit {
+  public error = input.required<SystemError>();
+
+  protected displayError: string = '';
+
+  public ngOnInit(): void {
+    if (this.error() instanceof HttpErrorResponse) {
+      if (typeof (this.error() as HttpErrorResponse).error === 'string') {
+        this.displayError = (this.error() as HttpErrorResponse).error;
+      } else if (this.error && (this.error() as HttpErrorResponse)?.error?.message) {
+        this.displayError = (this.error() as HttpErrorResponse).error.message;
+      } else {
+        this.displayError = 'Unknown error';
+      }
+    } else if (typeof this.error() === 'string') {
+      this.displayError = (this.error() as string);
+    } else {
+      this.displayError = 'Unknown error';
+    }
+  }
+}

package/src/lib/components/error-handler/error-handler.component.ts

@@ -0,0 +1,44 @@
+import { OnDestroy, inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Component } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { ErrorPopupComponent } from './error-popup/error-popup.component';
+import { NoopScrollStrategy } from '@angular/cdk/overlay';
+import { ErrorService } from '../../services/error.service';
+
+@Component({
+  selector: 'lib-error-handler',
+  templateUrl: 'error-handler.component.html',
+  styleUrls: ['error-handler.component.scss'],
+  imports: [
+    MatDialogModule
+  ]
+})
+export class ErrorHandlerComponent implements OnDestroy {
+  private errSubscriptions = new Subscription();
+  private errorService = inject(ErrorService);
+  private dialog = inject(MatDialog);
+
+  constructor() {
+    this.errSubscriptions.add(
+      this.errorService.error$.subscribe((err: HttpErrorResponse) => {
+        console.log(err);
+        this.showPopup(err);
+      }),
+    );
+  }
+
+  private showPopup(error: HttpErrorResponse): void {
+    this.dialog.closeAll();
+    this.dialog.open(ErrorPopupComponent, {
+      data: error,
+      width: '400px',
+      scrollStrategy: new NoopScrollStrategy(),
+    });
+  }
+
+  public ngOnDestroy(): void {
+    this.errSubscriptions.unsubscribe();
+  }
+}

package/src/lib/components/error-handler/error-popup/error-popup.component.html

@@ -0,0 +1,13 @@
+<lib-default-dialog [title]="'Аn error has occurred'">
+  <div class="dialog-content">
+    <div class="status-info">
+      <div>{{ error.status }}</div>
+      @if (error.status) {
+        <div>{{ httpStatusCodes[error.status] }}</div>
+      }
+    </div>
+    <div class="error-info">
+      <lib-error-dispaly [error]="error" />
+    </div>
+  </div>
+</lib-default-dialog>

package/src/lib/components/error-handler/error-popup/error-popup.component.scss

@@ -0,0 +1,19 @@
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-inline: 1rem;
+
+  .status-info {
+    display: flex;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    font-size: 18px;
+    gap: 0.5rem;
+  }
+
+  .error-info {
+    display: grid;
+    place-items: center;
+  }
+}

package/src/lib/components/error-handler/error-popup/error-popup.component.ts

@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { HttpErrorResponse } from '@angular/common/http';
+import { DefaultDialogComponent } from '../../default-dialog/default-dialog.component';
+import { ErrorDispalyComponent } from '../../error-dispaly.component';
+import { HTTP_STATUS_CODES } from '../../../utils/utils';
+
+@Component({
+  selector: 'lib-error-popup',
+  imports: [
+    DefaultDialogComponent,
+    ErrorDispalyComponent
+  ],
+  templateUrl: './error-popup.component.html',
+  styleUrls: ['./error-popup.component.scss']
+})
+export class ErrorPopupComponent {
+  protected httpStatusCodes = HTTP_STATUS_CODES;
+  
+  constructor(@Inject(MAT_DIALOG_DATA) public error: HttpErrorResponse) { }
+}

package/src/lib/components/global-loader/global-loader.component.html

@@ -0,0 +1,5 @@
+@if (loaderService.loading$ | async) {
+  <div class="loader">
+    <mat-spinner />
+  </div>
+}

package/src/lib/components/global-loader/global-loader.component.scss

@@ -0,0 +1,12 @@
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+}

package/src/lib/components/global-loader/global-loader.component.ts

@@ -0,0 +1,17 @@
+import { Component, inject } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { LoaderService } from '../../services/loader.service';
+import { AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'lib-global-loader',
+  imports: [
+    AsyncPipe,
+    MatProgressSpinnerModule
+  ],
+  templateUrl: './global-loader.component.html',
+  styleUrl: './global-loader.component.scss'
+})
+export class GlobalLoaderComponent {
+  protected loaderService = inject(LoaderService);
+}

package/src/lib/components/search-bar.component.ts

@@ -0,0 +1,70 @@
+import { Component, output, input } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+
+@Component({
+  selector: 'lib-search-bar',
+  template: `
+  <form class="search-bar" [formGroup]="searchForm">
+    <mat-icon>search</mat-icon>
+    <input class="search-input" type="search" name="field"
+      [placeholder]="'Search ' + for()" autocomplete="off" formControlName="search" />
+  </form>
+`,
+  styles: [`
+  .search-bar {
+    width: 270px;
+    border: 1px solid #A4A4A4;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-input {
+    border: none;
+    padding: 7px 11px;
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+  }
+
+  mat-icon {
+    margin-inline: 8px;
+  }
+
+  .search-input:focus {
+    border: none;
+    outline: none;
+  }
+
+  @media (max-width: 1086px) {
+    .search-bar {
+      width: 170px;
+    }
+  }
+`],
+  imports: [
+    MatIconModule,
+    ReactiveFormsModule
+  ]
+})
+export class SearchBarComponent {
+  public for = input.required<string>();
+  protected search = output<string>();
+
+  protected searchForm: FormGroup = new FormGroup({
+    search: new FormControl('')
+  });
+
+  constructor() {
+    this.searchForm.get('search')?.valueChanges.
+      pipe(
+        debounceTime(1000),
+        distinctUntilChanged(),
+      ).subscribe((searchTerm: string) => {
+        if (searchTerm.trim() !== '') {
+          this.search.emit(searchTerm);
+        }
+      });
+  }
+}

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

@@ -0,0 +1,121 @@
+<div class="flexer">
+  @if (config().title) {
+    <div class="row-heading-labels mb05">{{config().title}}</div>
+  }
+  <ng-content select=".upper-part"></ng-content>
+  @if (config().withAdd) {
+    <div class="flexer action pointer gap05 mb05" (click)="action.emit({action: 'add'})">
+      <mat-icon>add_circle_outline</mat-icon>
+      <div>add</div>
+    </div>
+  }
+</div>
+
+<div class="scroll" #scrollContainer (scroll)="onScroll()">
+  <table [class.with-options]="config().options?.length">
+    <thead>
+      <tr>
+        @for (heading of config().tableHeadings; track heading; let i = $index) {
+          <th>
+            <div class="flexer gap05">
+              {{heading}}
+              @if (config().sortable && !config().draggable) {
+                <lib-table-sort-header
+                  [selected]="currentSortColumn === i"
+                  (click)="currentSortColumn = i"
+                  (sort)="sortByProp(config().dataProps[i], $event)"
+                />
+              }
+            </div>
+          </th>
+        }
+        @if (config().options?.length) {
+          <th></th>
+        }
+      </tr>
+    </thead>
+    @if (config().draggable) {
+      <tbody cdkDropList (cdkDropListDropped)="drop($event)">
+        @for (obj of config().data; track trackById(i, obj); let i = $index) {
+          <tr
+            (mouseover)="hoverRowIndex = i"
+            (mouseleave)="hoverRowIndex = -1"
+            cdkDrag cdkDragLockAxis="y"
+            [class.pointer]="config().selectableRows"
+            [class.hover-row]="hoverRowIndex == i"
+            [class.selected-row]="config().selectableRows && selectedRowIndex == i"
+            (click)="onRowClick($event, obj, i)"
+            @fadeInOut>
+            @for (prop of config().dataProps; track prop; let cellIndex = $index) {
+              <td
+                [class.dragCol]="cellIndex === 0">
+                <div class="data" [classList]="getClass(obj, prop)"
+                  [class.flexer]="cellIndex === 0">
+                  @if (cellIndex === 0) {
+                    <mat-icon class="draggable" cdkDragHandle>
+                      drag_indicator
+                    </mat-icon>
+                  }
+                  {{obj[prop] | blankFiller}}
+                </div>
+              </td>
+            }
+            @if (config().options?.length) {
+              <td class="right-align" (click)="$event.stopPropagation()">
+                <button mat-icon-button class="pointer dots right" [matMenuTriggerFor]="optionsMenu">
+                  <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #optionsMenu="matMenu">
+                  @for (option of config().options; track option) {
+                    <div
+                      mat-menu-item (click)="selectOption(option, obj, i)"
+                      [class.red]="option == 'Remove' || option == 'Delete'">
+                      {{option}}
+                    </div>
+                  }
+                </mat-menu>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    } @else {
+      <tbody>
+        @for (obj of config().data; track trackById(i, obj); let i = $index) {
+          <tr
+            (mouseover)="hoverRowIndex = i"
+            (mouseleave)="hoverRowIndex = -1"
+            [class.pointer]="config().selectableRows"
+            [class.hover-row]="hoverRowIndex == i"
+            [class.selected-row]="config().selectableRows && selectedRowIndex == i"
+            (click)="onRowClick($event, obj, i)"
+            @fadeInOut>
+            @for (prop of config().dataProps; track prop; let cellIndex = $index) {
+              <td>
+                <div class="data" [classList]="getClass(obj, prop)">
+                  {{obj[prop] | blankFiller}}
+                </div>
+              </td>
+            }
+            @if (config().options?.length) {
+              <td class="right-align" (click)="$event.stopPropagation()">
+                <button mat-icon-button class="pointer dots right" [matMenuTriggerFor]="optionsMenu">
+                  <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #optionsMenu="matMenu">
+                  @for (option of config().options; track option) {
+                    <div
+                      mat-menu-item (click)="selectOption(option, obj, i)"
+                      [class.red]="option == 'Remove' || option == 'Delete'">
+                      {{option}}
+                    </div>
+                  }
+                </mat-menu>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    }
+  </table>
+</div>

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])(?=.*[!@#\$%\^&\*])(?=.*\d)/;
+
+    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/src/lib/utils/types.ts

@@ -0,0 +1,3 @@
+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/src/public-api.ts

@@ -0,0 +1,20 @@
+/*
+ * 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/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';

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"
+  ]
+}