@ferhaps/easy-ui-lib 0.0.7 → 1.0.0

package/README.md

@@ -17,17 +17,6 @@ This library requires:
 
 ## Components
 
-### ChipComponent
-A selectable chip component for displaying tags or filters.
-```typescript
-<lib-chip
-  [value]="value"
-  [isSelected]="isSelected"
-  [text]="displayText"
-  (selected)="onChipSelected($event)">
-</lib-chip>
-```
-
 ### TableComponent
 A feature-rich table component supporting:
 - Sorting
@@ -51,6 +40,7 @@ A feature-rich table component supporting:
     draggable: true
   }"
   (action)="handleTableAction($event)">
+  <div class="upper-part">Optional content to be displyed at the top of the table</div>
 </lib-table>
 ```
 
@@ -80,13 +70,26 @@ A customizable dialog component with optional back button.
 ### GlobalLoaderComponent
 A centered spinner overlay for loading states.
 ```typescript
-<lib-global-loader></lib-global-loader>
+<lib-global-loader />
+
+private loaderService = inject(LoaderService);
+this.loaderService.setLoading(true);
+// do stuff
+this.loaderService.setLoading(false);
 ```
 
 ### ErrorHandlerComponent
 Displays error messages in a dialog format.
 ```typescript
-<lib-error-handler></lib-error-handler>
+<lib-error-handler />
+
+private errorService = inject(ErrorService);
+try {
+  this.apiCall();
+}
+catch (e: HttpErrorResponse) {
+  this.errorService.sendError(e);
+}
 ```
 
 ## Directives
@@ -99,13 +102,26 @@ Validates if two form fields match (useful for password confirmation).
 ```
 
 ### PasswordValidatorDirective
-Ensures password meets complexity requirements.
+Ensures password meets the following requirments:
+* At least one uppercase letter
+* At least one lowercase letter
+* At least one special character from the specified set
+* At least one number
+* Minimum length of 8 characters
+
 ```typescript
 <input type="password" libPasswordValidator />
 ```
 
 ### PhoneValidationDirective
-Formats and validates phone number input.
+Formats and validates phone number input as follows:
+* Ensures the input always starts with a '+' symbol
+If missing, automatically prepends it to the value
+
+* Allows only numbers and the plus sign
+
+* Prevents removing the initial '+' symbol:
+
 ```typescript
 <input type="tel" libPhoneValidation />
 ```
@@ -129,18 +145,21 @@ Converts snake_case to Title Case text.
 ### LoaderService
 Manages global loading state.
 ```typescript
-constructor(private loaderService: LoaderService) {
-  loaderService.setLoading(true);
-  // ... async operation
-  loaderService.setLoading(false);
-}
+private loaderService = inject(LoaderService);
+this.loaderService.setLoading(true);
+// do stuff
+this.loaderService.setLoading(false);
 ```
 
 ### ErrorService
 Handles global error display.
 ```typescript
-constructor(private errorService: ErrorService) {
-  errorService.sendError(error);
+private errorService = inject(ErrorService);
+try {
+  this.apiCall();
+}
+catch (e: HttpErrorResponse) {
+  this.errorService.sendError(e);
 }
 ```
 

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

@@ -1,44 +1,26 @@
-{
-  "name": "@ferhaps/easy-ui-lib",
-  "version": "0.0.7",
-  "description": "Angular UI components, directives and pipes library with Angular Material",
-  "keywords": [
-    "angular",
-    "ui",
-    "components",
-    "pipes",
-    "directives",
-    "library"
-  ],
-  "author": {
-    "name": "Ferhan Cherkez",
-    "email": "fericherkez14052002@gmail.com",
-    "url": "https://www.linkedin.com/in/ferhan-cherkez-6931a1190/"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Ferhaps/angular-ui-library/tree/modules"
-  },
-  "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,
-  "module": "fesm2022/ferhaps-easy-ui-lib.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ferhaps-easy-ui-lib.mjs"
-    }
-  }
-}
+{
+  "name": "@ferhaps/easy-ui-lib",
+  "version": "1.0.0",
+  "description": "Angular UI components, directives and pipes library with Angular Material",
+  "keywords": ["angular", "ui", "components", "pipes", "directives", "library"],
+  "author": {
+    "name": "Ferhan Cherkez",
+    "email": "fericherkez14052002@gmail.com",
+    "url": "https://www.linkedin.com/in/ferhan-cherkez-6931a1190/"
+  },
+  "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/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 [dialogTitle]="'А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>