clean code

angular.json

@@ -15,12 +15,15 @@
       "prefix": "ps",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/ngx-cdk-ui",
+            "outputPath": {
+              "base": "dist/ngx-cdk-ui"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "polyfills": [
-            "polyfills": "src/polyfills.ts",
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -31,12 +34,11 @@
               "src/styles.scss"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -51,8 +53,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

package.json

@@ -15,14 +15,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.12",
+    "@angular/animations": "^18.2.1",
-    "@angular/common": "^17.3.12",
+    "@angular/common": "^18.2.1",
-    "@angular/compiler": "^17.3.12",
+    "@angular/compiler": "^18.2.1",
-    "@angular/core": "^17.3.12",
+    "@angular/core": "^18.2.1",
-    "@angular/forms": "^17.3.12",
+    "@angular/forms": "^18.2.1",
-    "@angular/platform-browser": "^17.3.12",
+    "@angular/platform-browser": "^18.2.1",
-    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular/platform-browser-dynamic": "^18.2.1",
-    "@angular/router": "^17.3.12",
+    "@angular/router": "^18.2.1",
     "@ng-select/ng-select": "^13.0.0",
     "@openharbor/ngx-data": "^18.0.0-alpha.3",
     "@poweredsoft/data": "^0.0.36",
@@ -41,10 +41,10 @@
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.8",
+    "@angular-devkit/build-angular": "^18.2.1",
-    "@angular/cli": "^17.3.8",
+    "@angular/cli": "^18.2.1",
-    "@angular/compiler-cli": "^17.3.12",
+    "@angular/compiler-cli": "^18.2.1",
-    "@angular/language-service": "^17.3.12",
+    "@angular/language-service": "^18.2.1",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
@@ -56,13 +56,13 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^17.3.0",
+    "ng-packagr": "^18.2.1",
     "npm-run-all": "^4.1.5",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~5.2",
+    "typescript": "~5.5.4",
     "wait-on": "^5.0.1"
   },
   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command-modal/command-modal.service.ts

@@ -3,7 +3,9 @@ import {EventEmitter, Injectable, TemplateRef} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 import {BsModalService} from 'ngx-bootstrap/modal';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class CommandModalService {
   constructor(private modalService: BsModalService) {
   }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command/command.module.ts

@@ -1,15 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {CommandDirective} from './directives/command.directive';
-import {ConfirmModalModule} from '../confirm-modal/confirm-modal.module';
-
-
-@NgModule({
-  declarations: [CommandDirective],
-  imports: [
-    CommonModule,
-    ConfirmModalModule
-  ],
-  exports:[CommandDirective]
-})
-export class CommandModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command/directives/command.directive.ts

@@ -4,7 +4,8 @@ import {finalize} from 'rxjs/operators';
 import {ConfirmModalService} from '../../confirm-modal/confirm-modal.service';
 
 @Directive({
-  selector: '[bsxCommand]'
+  selector: '[bsxCommand]',
+  standalone: true
 })
 export class CommandDirective {
   constructor(private confirmModalService: ConfirmModalService) { }
@@ -57,7 +58,6 @@ export class CommandDirective {
 
   @HostListener('click')
   wasClicked() {
-
     if (this.confirm) {
       this.confirmModalService.confirm({
         message: this.confirmMessage,
@@ -73,5 +73,4 @@ export class CommandDirective {
       this.doCommand();
     }
   }
-
 }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts

@@ -1,12 +1,17 @@
-import {Component, Inject, OnInit} from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {BsModalRef} from 'ngx-bootstrap/modal';
 import {Observer} from 'rxjs';
+import {CommonModule} from "@angular/common";
 
 
 @Component({
   selector: 'bsx-confirm-modal',
   templateUrl: './confirm-modal.component.html',
-  styleUrls: ['./confirm-modal.component.scss']
+  styleUrls: ['./confirm-modal.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule
+  ]
 })
 export class ConfirmModalComponent {
   @Inject(BsModalRef) modelRef!: BsModalRef;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/confirm-modal/confirm-modal.module.ts

@@ -1,16 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {ConfirmModalComponent} from './confirm-modal-components/confirm-modal/confirm-modal.component';
-import {ModalModule} from 'ngx-bootstrap/modal';
-import {ConfirmModalService} from './confirm-modal.service';
-
-@NgModule({
-  declarations: [ConfirmModalComponent],
-  imports: [
-    CommonModule,
-    ModalModule.forRoot(),
-  ],
-  exports: [],
-  providers: [ConfirmModalService]
-})
-export class ConfirmModalModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/confirm-modal/confirm-modal.service.ts

@@ -12,7 +12,9 @@ export interface IConfirmModalOptions
   noText?: string;
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class ConfirmModalService {
   constructor(private modalService: BsModalService) { }
 

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/data-source-filter.module.ts

@@ -1,24 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {DataSourceTextFilterComponent} from './text-filter/data-source-text-filter.component';
-import {FormsModule} from '@angular/forms';
-import {DataSourceNumberFilterComponent} from './number-filter/data-source-number-filter.component';
-import {DataSourceDatetimeFilterComponent} from './datetime-filter/data-source-datetime-filter.component';
-import {BsDatepickerModule} from 'ngx-bootstrap/datepicker';
-import {PopoverModule} from 'ngx-bootstrap/popover';
-import {BsDropdownModule} from 'ngx-bootstrap/dropdown';
-import {TooltipModule} from 'ngx-bootstrap/tooltip';
-
-@NgModule({
-  declarations: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    BsDatepickerModule.forRoot(),
-    PopoverModule.forRoot(),
-    BsDropdownModule.forRoot(),
-    TooltipModule.forRoot()
-  ],
-  exports: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent]
-})
-export class DataSourceFilterModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html

@@ -75,8 +75,8 @@
 </svg>
 </button> -->
 
-<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterPopUpOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
+     viewBox="0 0 477.875 477.875" fill-opacity="0.5" [tooltip]="showTooltip()" [isDisabled]="filterPopUpOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [isOpen]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
 <g>
 <g>
  <path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts

@@ -1,11 +1,24 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
+import {FormsModule} from "@angular/forms";
+import {BsDatepickerModule} from "ngx-bootstrap/datepicker";
+import {TooltipModule} from "ngx-bootstrap/tooltip";
+import {PopoverModule} from "ngx-bootstrap/popover";
+import {CommonModule} from "@angular/common";
 
 
 @Component({
   selector: 'bsx-ds-datetime-filter',
   templateUrl: './data-source-datetime-filter.component.html',
-  styleUrls: ['./data-source-datetime-filter.component.scss']
+  styleUrls: ['./data-source-datetime-filter.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    BsDatepickerModule,
+    TooltipModule,
+    PopoverModule
+  ]
 })
 export class DataSourceDatetimeFilterComponent implements OnInit {
   @Input() path: string;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html

@@ -20,8 +20,8 @@
   </form>
 </ng-template>
 
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-     viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
+     viewBox="0 0 477.875 477.875" fill-opacity="0.5" [tooltip]="showTooltip()" [isDisabled]="filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [isOpen]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
 <g>
 	<g>
 		<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts

@@ -1,11 +1,22 @@
 import {Component, Input} from '@angular/core';
 import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
+import {FormsModule} from "@angular/forms";
+import {CommonModule} from "@angular/common";
+import {TooltipModule} from "ngx-bootstrap/tooltip";
+import {PopoverModule} from "ngx-bootstrap/popover";
 
 
 @Component({
   selector: 'bsx-ds-number-filter',
   templateUrl: './data-source-number-filter.component.html',
-  styleUrls: ['./data-source-number-filter.component.scss']
+  styleUrls: ['./data-source-number-filter.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    TooltipModule,
+    PopoverModule
+  ]
 })
 export class DataSourceNumberFilterComponent {
   @Input() dataSource : IDataSource<any>;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html

@@ -64,8 +64,8 @@
 </svg>
 </button> -->
 
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-     viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
+     viewBox="0 0 477.875 477.875" fill-opacity="0.5" [tooltip]="showTooltip()" [isDisabled]="filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [isOpen]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
 <g>
 <g>
    <path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts

@@ -1,11 +1,21 @@
 import {Component, Input} from '@angular/core';
 import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
-import {PopoverDirective} from 'ngx-bootstrap/popover';
+import {PopoverDirective, PopoverModule} from 'ngx-bootstrap/popover';
+import {FormsModule} from "@angular/forms";
+import {TooltipModule} from "ngx-bootstrap/tooltip";
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'bsx-ds-text-filter',
   templateUrl: './data-source-text-filter.component.html',
-  styleUrls: ['./data-source-text-filter.component.scss']
+  styleUrls: ['./data-source-text-filter.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    TooltipModule,
+    PopoverModule,
+  ]
 })
 export class DataSourceTextFilterComponent {
   @Input() dataSource : IDataSource<any>;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-sorting/data-source-sorting.module.ts

@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {DataSourceSortingComponent} from './ds-sorting/data-source-sorting.component';
-
-
-@NgModule({
-  declarations: [DataSourceSortingComponent],
-  imports: [
-    CommonModule
-  ],
-  exports:[DataSourceSortingComponent]
-})
-export class DataSourceSortingModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts

@@ -1,10 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'bsx-ds-sorting',
   templateUrl: './data-source-sorting.component.html',
-  styleUrls: ['./data-source-sorting.component.scss']
+  styleUrls: ['./data-source-sorting.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
 })
 export class DataSourceSortingComponent {
   @Input() dataSource : IDataSource<any>;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts

@@ -14,7 +14,8 @@ export interface IModelFormCreateEvent
 }
 
 @Directive({
-  selector: '[bsxFormGroupCommandModal]'
+  selector: '[bsxFormGroupCommandModal]',
+  standalone: true
 })
 export class FormGroupCommandModalDirective {
   @Inject(BsModalService) private modalService!: BsModalService;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/form-group-command-modal/form-group-command-modal.module.ts

@@ -1,18 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormGroupCommandModalComponent} from './form-group-command-modal/form-group-command-modal.component';
-import {FormGroupCommandModalDirective} from './directives/form-group-command-modal.directive';
-import {ModalModule} from 'ngx-bootstrap/modal';
-import {ReactiveFormsModule} from '@angular/forms';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ModalModule.forRoot(),
-    ReactiveFormsModule
-  ],
-  declarations: [FormGroupCommandModalComponent, FormGroupCommandModalDirective],
-  exports: [FormGroupCommandModalDirective]
-})
-export class FormGroupCommandModalModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts

@@ -4,11 +4,14 @@ import {IDataSource} from '@poweredsoft/data';
 import {finalize} from 'rxjs/operators';
 import {Subscription} from 'rxjs'
 import {UntypedFormGroup} from '@angular/forms';
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'bsx-form-group-command-modal',
   templateUrl: './form-group-command-modal.component.html',
-  styleUrls: ['./form-group-command-modal.component.scss']
+  styleUrls: ['./form-group-command-modal.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
 })
 export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
   @Inject(BsModalRef) public modalRef!: BsModalRef;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/pagination/data-source-pagination/data-source-pagination.component.ts

@@ -1,11 +1,16 @@
 import {ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 import {Subscription} from 'rxjs';
+import {CommonModule} from "@angular/common";
+import {PaginationModule} from "ngx-bootstrap/pagination";
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: 'bsx-ds-pagination',
   templateUrl: './data-source-pagination.component.html',
-  styleUrls: ['./data-source-pagination.component.scss']
+  styleUrls: ['./data-source-pagination.component.scss'],
+  standalone: true,
+  imports: [CommonModule, PaginationModule, FormsModule]
 })
 export class DataSourcePaginationComponent implements OnInit, OnDestroy {
   @Inject(ChangeDetectorRef) private cdf!: ChangeDetectorRef;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/pagination/pagination.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {DataSourcePaginationComponent} from './data-source-pagination/data-source-pagination.component';
-import {PaginationModule as ValorPaginationModule} from 'ngx-bootstrap/pagination';
-import {FormsModule} from '@angular/forms';
-
-
-@NgModule({
-  declarations: [DataSourcePaginationComponent],
-  imports: [
-    CommonModule,
-    ValorPaginationModule.forRoot(),
-    FormsModule
-  ],
-  exports: [DataSourcePaginationComponent]
-})
-export class PaginationModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/spinner/spinner.module.ts

@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SpinnerComponent} from './spinner/spinner.component';
-
-
-@NgModule({
-  declarations: [SpinnerComponent],
-  imports: [
-    CommonModule
-  ],
-  exports:[SpinnerComponent]
-})
-export class SpinnerModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/spinner/spinner/spinner.component.ts

@@ -1,9 +1,12 @@
 import {Component} from '@angular/core';
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'bsx-spinner',
   templateUrl: './spinner.component.html',
-  styleUrls: ['./spinner.component.scss']
+  styleUrls: ['./spinner.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
 })
 export class SpinnerComponent {
 

projects/openharbor/ngx-data-bootstrap-ui/src/public-api.ts

@@ -2,22 +2,14 @@
  * Public API Surface of ngx-bootstrap
  */
 
-export * from './lib/command-modal/command-modal.module';
 export * from './lib/command-modal/command-modal.service';
 export * from './lib/command-modal/directives/command-modal.directive';
-export * from './lib/form-group-command-modal/form-group-command-modal.module';
 export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive';
 export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
-export * from './lib/confirm-modal/confirm-modal.module';
 export * from './lib/confirm-modal/confirm-modal.service';
-export * from './lib/spinner/spinner.module';
 export * from './lib/spinner/spinner/spinner.component';
-export * from './lib/data-source-filter/data-source-filter.module';
 export * from './lib/data-source-filter/text-filter/data-source-text-filter.component';
 export * from './lib/data-source-filter/number-filter/data-source-number-filter.component';
 export * from './lib/data-source-filter/datetime-filter/data-source-datetime-filter.component';
-export * from './lib/data-source-sorting/data-source-sorting.module';
 export * from './lib/data-source-sorting/ds-sorting/data-source-sorting.component';
-export * from './lib/command/command.module';
 export * from './lib/command/directives/command.directive';
-export * from './lib/pagination/pagination.module';

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html

@@ -19,7 +19,6 @@
         </div>
 
         <div class="flex-item">
-
           <ng-container *ngIf="hasSortingTemplate(column)">
             <ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
           </ng-container>
@@ -28,7 +27,6 @@
             <ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
           </ng-container>
         </div>
-
       </div>
     </th>
   </tr>

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-pager/ds-pager.component.ts

@@ -1,11 +1,14 @@
 import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
 import {Subscription} from 'rxjs';
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'cdk-ds-pager',
   templateUrl: './ds-pager.component.html',
-  styleUrls: ['./ds-pager.component.scss']
+  styleUrls: ['./ds-pager.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
 })
 export class DsPagerComponent implements OnInit, OnDestroy {
 

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-pager/ds-pager.module.ts

@@ -1,12 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {DsPagerComponent} from './ds-pager.component';
-
-@NgModule({
-  declarations: [DsPagerComponent],
-  imports: [
-    CommonModule
-  ],
-  exports: [DsPagerComponent]
-})
-export class DsPagerModule { }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-search/ds-search.component.html

@@ -1,6 +1,6 @@
 <form (submit)="applySearch()">
   <div [ngClass]="classes">
-    <input type="search" (onSearch)="onSearch()" [placeholder]="finalSearchText" [ngClass]="searchClasses"
+    <input type="search" (input)="onSearch()" [placeholder]="finalSearchText" [ngClass]="searchClasses"
            [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
     <button type="submit" [ngClass]="submitButtonClasses">{{ finalSearchText }}</button>
   </div>

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-search/ds-search.component.ts

@@ -1,12 +1,16 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: 'cdk-ds-search',
   templateUrl: './ds-search.component.html',
-  styleUrls: ['./ds-search.component.scss']
+  styleUrls: ['./ds-search.component.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule]
 })
-export class DsSearchComponent implements OnInit {
+export class DsSearchComponent {
   @Input() dataSource: IDataSource<any>;
   @Input() filterType: string;
   @Input() filterPaths: string[];
@@ -29,11 +33,10 @@ export class DsSearchComponent implements OnInit {
   }
 
   onSearch() {
-      this.applySearch();
+    this.applySearch();
   }
 
   applySearch() {
-
     const existingFilters = this.dataSource.filters;
 
 
@@ -68,8 +71,4 @@ export class DsSearchComponent implements OnInit {
       filters: finalNewFilters
     })
   }
-
-  ngOnInit(): void {
-  }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-search/ds-search.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsSearchComponent } from './ds-search.component';
-import { FormsModule } from '@angular/forms';
-
-
-
-@NgModule({
-  declarations: [DsSearchComponent],
-  imports: [
-    CommonModule,
-    FormsModule
-  ],
-  exports: [DsSearchComponent]
-})
-export class DsSearchModule { }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.ts

@@ -1,11 +1,14 @@
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 import {Subscription} from 'rxjs';
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'cdk-ds-validation-error',
   templateUrl: './ds-validation-error.component.html',
-  styleUrls: ['./ds-validation-error.component.scss']
+  styleUrls: ['./ds-validation-error.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
 })
 export class DsValidationErrorComponent implements OnInit, OnDestroy {
   @Input() dataSource: IDataSource<any>;

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-validation-error/ds-validation-error.module.ts

@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {DsValidationErrorComponent} from './ds-validation-error.component';
-
-
-@NgModule({
-  declarations: [DsValidationErrorComponent],
-  imports: [
-    CommonModule
-  ],
-  exports: [DsValidationErrorComponent]
-})
-export class DsValidationErrorModule { }

projects/openharbor/ngx-data-cdk-ui/src/public-api.ts

@@ -23,11 +23,9 @@ export * from './lib/list-view/directives/list-view-footer.directive';
 export * from './lib/list-view/directives/list-view-separator.directive';
 
 // search
-export * from './lib/ds-search/ds-search.module';
 export * from './lib/ds-search/ds-search.component';
 
 // ds validation
-export * from './lib/ds-validation-error/ds-validation-error.module';
 export * from './lib/ds-validation-error/ds-validation-error.component';
 
 // view
@@ -48,5 +46,4 @@ export * from './lib/ds-command/directives/ds-command-no-command.directive';
 export * from './lib/ds-command/directives/ds-command-error.directive';
 
 // ds-pager
-export * from './lib/ds-pager/ds-pager.module';
 export * from './lib/ds-pager/ds-pager.component';

src/app/app.module.ts

@@ -10,7 +10,7 @@ import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
 import {DefaultOptions} from 'apollo-client';
 import {InMemoryCache} from 'apollo-cache-inmemory';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {HttpClientModule} from "@angular/common/http";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
 
 
 export function app_Init(apollo: Apollo, httpLink: HttpLink) {
@@ -47,29 +47,22 @@ export function app_Init(apollo: Apollo, httpLink: HttpLink) {
   };
 }
 
-@NgModule({
+@NgModule({ declarations: [
-  declarations: [
+        AppComponent,
-    AppComponent,
+        HomeComponent,
-    HomeComponent,
+        //SelectLabelTemplateDirective,
-    //SelectLabelTemplateDirective,
+    ],
-
+    bootstrap: [AppComponent], imports: [BrowserModule,
-  ],
+        AppRoutingModule,
-  imports: [
+        ApolloModule,
-    BrowserModule,
+        HttpLinkModule,
-    AppRoutingModule,
+        BrowserAnimationsModule], providers: [
-    HttpClientModule,
+        {
-    ApolloModule,
+            provide: APP_INITIALIZER,
-    HttpLinkModule,
+            useFactory: app_Init,
-    BrowserAnimationsModule
+            deps: [Apollo, HttpLink],
-  ],
+            multi: true,
-  providers: [
+        },
-    {
+        provideHttpClient(withInterceptorsFromDi()),
-      provide: APP_INITIALIZER,
+    ] })
-      useFactory: app_Init,
-      deps: [Apollo, HttpLink],
-      multi: true,
-    },
-  ],
-  bootstrap: [AppComponent]
-})
 export class AppModule { }

src/styles.scss

@@ -1,4 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/bootstrap';
-@import '~ngx-bootstrap/datepicker/bs-datepicker.css';
+@import 'ngx-bootstrap/datepicker/bs-datepicker.css';
-@import "~@ng-select/ng-select/themes/default.theme.css";
+@import "@ng-select/ng-select/themes/default.theme.css";

tsconfig.json

@@ -4,8 +4,8 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
+    "esModuleInterop": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "module": "es2020",
     "moduleResolution": "node",