add sort and humanize pipe

src/index.ts

@@ -1,16 +1,19 @@
 export * from './lib/common-ui.module';
-export * from './lib/buttons/icon-button/icon-button.component';
-export * from './lib/buttons/icon-button/icon-button.type';
 export * from './lib/base/auto-unsubscribe.component';
-export * from './lib/utils/decorators/required.decorator';
-export * from './lib/buttons/circle-button/circle-button.component';
-export * from './lib/buttons/circle-button/circle-button.type';
+export * from './lib/buttons/icon-button/icon-button.type';
+export * from './lib/buttons/icon-button/icon-button.component';
+export * from './lib/utils/functions';
+export * from './lib/utils/pipes/humanize.pipe';
 export * from './lib/utils/types/tooltip-positions.type';
-export * from './lib/filtering/filter.service';
+export * from './lib/utils/decorators/required.decorator';
+export * from './lib/buttons/circle-button/circle-button.type';
+export * from './lib/buttons/circle-button/circle-button.component';
 export * from './lib/filtering/filter-utils';
+export * from './lib/filtering/filter.service';
+export * from './lib/filtering/models/filter.model';
 export * from './lib/filtering/models/filter-group.model';
 export * from './lib/filtering/models/nested-filter.model';
-export * from './lib/filtering/models/filter.model';
+export * from './lib/sorting/sort-by.pipe';
 export * from './lib/sorting/sorting.service';
 export * from './lib/sorting/models/sorting-option.model';
 export * from './lib/sorting/models/sorting-order.type';

src/lib/common-ui.module.ts

@@ -8,6 +8,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { CircleButtonComponent } from './buttons/circle-button/circle-button.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RoundCheckboxComponent } from './inputs/round-checkbox/round-checkbox.component';
+import { SortByPipe } from './sorting/sort-by.pipe';
+import { HumanizePipe } from './utils/pipes/humanize.pipe';
 
 const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent];
 
@@ -17,10 +19,12 @@ const matModules = [MatIconModule, MatButtonModule, MatTooltipModule];
 
 const components = [...buttons, ...inputs];
 
+const pipes = [SortByPipe, HumanizePipe];
+
 @NgModule({
-    declarations: [...components],
+    declarations: [...components, ...pipes],
     imports: [CommonModule, ...matModules],
-    exports: [...components, ...matModules]
+    exports: [...components, ...pipes, ...matModules]
 })
 export class CommonUiModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {

src/lib/sorting/sort-by.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SortingService } from './sorting.service';
+import { SortingOrder } from './models/sorting-order.type';
+
+@Pipe({ name: 'sortBy' })
+export class SortByPipe implements PipeTransform {
+    constructor(private readonly _sortingService: SortingService) {}
+
+    transform<T>(value: T[], order: SortingOrder, column: string): T[] {
+        return this._sortingService.sort(value, order, column);
+    }
+}

src/lib/sorting/sorting.service.ts

@@ -4,7 +4,9 @@ import { BehaviorSubject } from 'rxjs';
 import { SortingOption } from './models/sorting-option.model';
 import { SortingOrder, SortingOrders } from './models/sorting-order.type';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class SortingService {
     private readonly _sortingOption$ = new BehaviorSubject<SortingOption | undefined>(undefined);
     readonly sortingOption$ = this._sortingOption$.asObservable();
@@ -21,7 +23,7 @@ export class SortingService {
         if (!values || values.length <= 1 || !order) return values;
 
         if (!column) {
-            /** sort 1d array */
+            /** sort 1D array */
             const result = [...values].sort();
             return order === SortingOrders.asc ? result : result.reverse();
         }

src/lib/utils/functions.ts

@@ -0,0 +1,9 @@
+export function capitalize(value: string): string {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+export function humanize(value: string, lowercase = true): string {
+    const frags = (lowercase ? value.toLowerCase() : value).split(/[ \-_]+/);
+
+    return frags.map(capitalize).join(' ');
+}

src/lib/utils/pipes/humanize.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { humanize } from '../functions';
+
+@Pipe({
+    name: 'humanize'
+})
+export class HumanizePipe implements PipeTransform {
+    transform(item: string, lowercase = false): string {
+        return humanize(item, lowercase);
+    }
+}