fix some errors

apps/demo/src/app/database/database.page.html

@@ -1,15 +1,15 @@
 <sio-page [title]="'Task ('+this.taskState.localTotals+'/'+this.taskState.remoteTotals+') index' + this.taskState.remoteIndex">
-  <sio-datalist [data]="this.taskState"
+  <sio-datalist [store]="this.taskState"
     header="name"
     label="description"
     thumbnail="thumbnail"
-    LeftSwipe
-    [infinite]="this.taskState.localTotals < this.taskState.remoteTotals"
-    (sioCoreListItemLeftSwipe)="this.archive($event)"
-    (sioCoreListItemRightSwipe)="this.delete($event)"
-    (sioCoreListInfinite)="this.load($event)"
-    (sioRefreshList)="this.refresh($event)"
-  ></sio-list>
+    enableLeftSwipe
+    [enableInfinite]="this.taskState.localTotals < this.taskState.remoteTotals"
+    (leftSwipe)="this.archive($event)"
+    (rightSwipe)="this.delete($event)"
+    (infinite)="this.load($event)"
+    (refresh)="this.refresh($event)"
+  ></sio-datalist>
   <ion-fab slot="footer" vertical="bottom" horizontal="end">
     <sio-button
       (Click)="this.create()"

apps/demo/src/app/database/database.page.ts

@@ -32,18 +32,17 @@ export class DatabasePageComponent {
     //this.taskState.setOne(task);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public delete(event: any) {
     this.sioCoreLoggerService.debug('[DatabasePageComponent][delete]', event.id);
     this.taskState.removeOne(event.id);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  public archive(event: any) {
-    this.sioCoreLoggerService.log('you have right swiped ');
+  public archive(event: Event) {
+    this.sioCoreLoggerService.log('you have right swiped ', event);
   }
 
-  public load(event: Record<string, number | string>):void {
+  public load(event: Event):void {
     this.sioCoreLoggerService.debug('[DatabasePageComponent][load]', event);
   }
 

libs/core/src/lib/components/item/item.component.ts

@@ -75,15 +75,9 @@ export class SioCoreItemComponent implements OnInit {
 
   @Input() public alt: string | undefined = undefined;
 
-  @Output() sioCoreItemClick = new EventEmitter<
-    Record<string, number | string>
-  >();
-  @Output() sioCoreItemLeftSwipe = new EventEmitter<
-    Record<string, number | string>
-  >();
-  @Output() sioCoreItemRightSwipe = new EventEmitter<
-    Record<string, number | string>
-  >();
+  @Output() sioCoreItemClick = new EventEmitter<Event>();
+  @Output() sioCoreItemLeftSwipe = new EventEmitter<Event>();
+  @Output() sioCoreItemRightSwipe = new EventEmitter<Event>();
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   constructor(private sioCoreLoggerService: SioCoreLoggerService) {}
@@ -98,7 +92,7 @@ export class SioCoreItemComponent implements OnInit {
       '[SioCoreItemComponent][doLeftSwipe] You have left swiped',
       this.$id,
     );
-    this.sioCoreItemRightSwipe.emit({ id: this.$id! });
+    this.sioCoreItemRightSwipe.emit(); //{ id: this.$id ? this.$id : '' });
   }
 
   public async doLeftSwipe(slidingItem: IonItemSliding): Promise<void> {
@@ -107,13 +101,13 @@ export class SioCoreItemComponent implements OnInit {
       '[SioCoreItemComponent][doLeftSwipe] You have left swiped',
       this.$id,
     );
-    this.sioCoreItemLeftSwipe.emit({ id: this.$id! });
+    this.sioCoreItemLeftSwipe.emit(); //{ id: this.$id ? this.$id : '' });
   }
 
   public async Click(): Promise<void> {
     this.sioCoreLoggerService.info(
       '[SioCoreMenuItemComponent][Click] raise event click',
     );
-    this.sioCoreItemClick.emit({ id: this.$id! });
+    this.sioCoreItemClick.emit(); // id: this.$id ? this.$id : '' });
   }
 }

libs/core/src/lib/components/list/list.component.html

@@ -7,11 +7,11 @@
   <sio-item *ngFor="let item of this.data; trackItem" [$id]="item['$id']" [header]="item[this.header]"
     [label]="item[this.label]" [thumbnail]="this.thumbnail ? item[this.thumbnail] : undefined"
     [avatar]="this.avatar ? item[this.avatar] : undefined" [icon]="this.icon ? item[this.icon] : undefined"
-    [LeftSwipe]="this.LeftSwipe" [RightSwipe]="this.RightSwipe"
-    (sioCoreItemLeftSwipe)="this.receiveListRighSwipe($event)"
-    (sioCoreItemRightSwipe)="this.receiveListLeftSwipe($event)"></sio-item>
+    [LeftSwipe]="this.leftSwipe !== null" [RightSwipe]="this.rightSwipe !== null"
+    (sioCoreItemLeftSwipe)="this.onLeftSwipe($event)"
+    (sioCoreItemRightSwipe)="this.onRightSwipe($event)"></sio-item>
 </ion-list>
-<ion-infinite-scroll *ngIf="this.infinite" threshold="20%" (ionInfinite)="this.onListInfinite($event)">
+<ion-infinite-scroll *ngIf="this.enableInfinite" threshold="20%" (ionInfinite)="this.onInfinite($event)">
   <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="{{ 'LIST_LOADING' | translate }}">
   </ion-infinite-scroll-content>
 </ion-infinite-scroll>

libs/core/src/lib/components/list/list.component.ts

@@ -26,7 +26,7 @@ export class SioCoreListComponent implements OnInit {
   @Input() public enableInfinite: InputBoolean = false;
 
   @AttributeBoolean()
-  @Input() public enableLeftSwipe: InputBoolean;
+  @Input() public enableLeftSwipe: InputBoolean = false;
 
   @AttributeBoolean()
   @Input() public enableRightSwipe: InputBoolean = true;
@@ -39,11 +39,11 @@ export class SioCoreListComponent implements OnInit {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Input() public data: any[] | undefined;
 
-  @Output() clickItem = new EventEmitter<Record<string, number | string>>();
-  @Output() leftSwipe  = new EventEmitter<Record<string, number | string>>();
-  @Output() rightSwipe = new EventEmitter<Record<string, number | string>>();
-  @Output() infinite = new EventEmitter<Record<string, number | string>>();
-  @Output() refresh = new EventEmitter<void>();
+  @Output() clickItem = new EventEmitter<Event>();
+  @Output() leftSwipe  = new EventEmitter<Event>();
+  @Output() rightSwipe = new EventEmitter<Event>();
+  @Output() infinite = new EventEmitter<InfiniteScrollCustomEvent>();
+  @Output() refresh = new EventEmitter<RefresherCustomEvent>();
 
   // @Output() public sioCoreMenuDidChange = new EventEmitter();
 
@@ -74,28 +74,27 @@ export class SioCoreListComponent implements OnInit {
     return itemObject.id;
   }
 
-  public onLeftSwipe(data: Record<string, number | string>) {
+  public onLeftSwipe(data: Event) {
     this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListLeftSwipe]', data);
     this.leftSwipe.emit(data);
   }
-  public onRighSwipe(data: Record<string, number | string>) {
+  public onRightSwipe(data: Event) {
     this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListRightSwipe]', data);
     this.rightSwipe.emit(data);
   }
 
-  public onRefresh(data: Event) {
-    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][onRefresh]', data);
-    this.refresh.emit();
+  public onRefresh(event: RefresherCustomEvent) {
+    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][onRefresh]', event);
+    this.refresh.emit(event);
     setTimeout(() => {
-      (data as RefresherCustomEvent).target.complete();
+      event.target.complete();
     }, 500);
   }
 
-  public onInfinite(data: Event) {
-    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListInfinite]', data);
-    this.infinite.emit({ LastId : this.data!.pop().$id });
+  public onInfinite(event: InfiniteScrollCustomEvent) {
+    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListInfinite]', event);
     setTimeout(() => {
-      (data as InfiniteScrollCustomEvent).target.complete();
+      event.target.complete();
     }, 500);
   }
 }

libs/database/src/index.ts

@@ -3,5 +3,4 @@ export * from './lib/services';
 export * from './lib/interfaces';
 export * from './lib/tokens';
 export * from './lib/store';
-export * from './lib/helpers';
-export * from './lib/directives';
+export * from './lib/helpers';

libs/database/src/lib/components/data-list/data-list.component.html

@@ -1,12 +1,12 @@
 <sio-list
-  [data]="this.store.selectAll()"
+  [data]="this.store!.selectAll()"
   [header]="this.header"
   [label]="this.label"
   [thumbnail]="this.thumbnail"
-  [LeftSwipe]="this.LeftSwipe"
-  [infinite]="this.infinite"
-  (sioCoreListItemLeftSwipe)="this.sioCoreItemLeftSwipe($event)"
-  (sioCoreListItemRightSwipe)="this.sioCoreItemRightSwipe($event)"
-  (sioCoreListInfinite)="this.sioCoreListInfinite($event)"
-  (sioRefreshList)="(this.re)"
+  [enableLeftSwipe]="this.enableLeftSwipe"
+  [enableInfinite]="this.enableInfinite"
+  (leftSwipe)="this.onLeftSwipe($event)"
+  (rightSwipe)="this.onRightSwipe($event)"
+  (infinite)="this.onInfinite($event)"
+  (refresh)="this.onRefresh($event)"
 ></sio-list>

libs/database/src/lib/components/data-list/data-list.component.scss

@@ -0,0 +1,19 @@
+:host {
+  .ion-content-scroll-host::before,
+  .ion-content-scroll-host::after {
+    position: absolute;
+
+    width: 1px;
+    height: 1px;
+
+    content: '';
+  }
+
+  .ion-content-scroll-host::before {
+    bottom: -1px;
+  }
+
+  .ion-content-scroll-host::after {
+    top: -1px;
+  }
+}

libs/database/src/lib/components/data-list/data-list.component.ts

@@ -10,12 +10,13 @@ import { SioDatabaseState } from '../../store';
 
 @Component({
   selector: 'sio-datalist',
-  templateUrl: './list.component.html',
-  styleUrls: ['./list.component.scss'],
+  templateUrl: './data-list.component.html',
+  styleUrls: ['./data-list.component.scss'],
 })
 export class SioDatabaseListComponent implements OnInit {
   // input related to this component
-  @Input() public store: SioDatabaseState<never> | undefined = undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Input() public store: SioDatabaseState<any> | undefined = undefined;
 
   // Wrapped input for subcomponents
 
@@ -32,7 +33,7 @@ export class SioDatabaseListComponent implements OnInit {
 
   @AttributeBoolean()
   @Input()
-  public infinite: InputBoolean = false;
+  public enableInfinite: InputBoolean = false;
 
   @AttributeBoolean()
   @Input()
@@ -48,11 +49,11 @@ export class SioDatabaseListComponent implements OnInit {
   @Input() public avatar: string | undefined;
   @Input() public thumbnail: string | undefined;
 
-  @Output() Click = new EventEmitter<Record<string, number | string>>();
-  @Output() LeftSwipe = new EventEmitter<Record<string, number | string>>();
-  @Output() RightSwipe = new EventEmitter<Record<string, number | string>>();
-  @Output() Infinite = new EventEmitter<Record<string, number | string>>();
-  @Output() Refresh = new EventEmitter<Record<string, number | string>>();
+  @Output() Click = new EventEmitter<Event>();
+  @Output() LeftSwipe = new EventEmitter<Event>();
+  @Output() RightSwipe = new EventEmitter<Event>();
+  @Output() infinite = new EventEmitter<Event>();
+  @Output() refresh = new EventEmitter<Event>();
 
   constructor(private sioCoreLoggerService: SioCoreLoggerService) {
     this.sioCoreLoggerService.debug('[SioDatabaseListComponent][constructor]');
@@ -62,30 +63,30 @@ export class SioDatabaseListComponent implements OnInit {
     this.sioCoreLoggerService.debug('[SioDatabaseListComponent][ngOnInit]');
   }
 
-  public onLeftSwipe(data: Record<string, number | string>) {
+  public onLeftSwipe(event: Event) {
     this.sioCoreLoggerService.debug(
       '[SioDatabaseListComponent][onLeftSwipe]',
-      data,
+      event,
     );
-    this.LeftSwipe.emit(data);
+    this.LeftSwipe.emit(event);
   }
-  public onRighSwipe(data: Record<string, number | string>) {
+  public onRightSwipe(event: Event) {
     this.sioCoreLoggerService.debug(
       '[SioDatabaseListComponent][onRightSwipe]',
-      data,
+      event,
     );
-    this.RightSwipe.emit(data);
+    this.RightSwipe.emit(event);
   }
 
-  public onRefresh(data: Event) {
+  public onRefresh(event: RefresherCustomEvent) {
     this.sioCoreLoggerService.debug(
       '[SioDatabaseListComponent][onRefresh]',
-      data,
+      event,
     );
     if (this.store) this.store.load();
-    this.Refresh.emit();
+    this.refresh.emit();
     setTimeout(() => {
-      (data as RefresherCustomEvent).target.complete();
+      (event as RefresherCustomEvent).target.complete();
     }, 500);
   }
 
@@ -94,7 +95,7 @@ export class SioDatabaseListComponent implements OnInit {
       '[sioDatabaseListComponent][onInfinite]',
       data,
     );
-    this.Infinite.emit({ LastId: this.store!.pop().$id });
+    this.infinite.emit(); //{ LastId: this.store.entitiesArray.pop().$id });
     if (this.store) {
       this.store.setRemoteIndex('');
       this.store.load();

libs/database/src/lib/components/index.ts

@@ -0,0 +1 @@
+export * from './data-list';

libs/database/src/lib/database.module.ts

@@ -4,17 +4,12 @@ import { CommonModule } from '@angular/common';
 import { NgxsModule } from '@ngxs/store';
 
 import { SioCommonModule } from '@silicia/core';
-import { SioListDataDirective } from './directives/list-data.directives'
+import { SioDatabaseListComponent } from './components';
 
 @NgModule({
-  declarations: [SioListDataDirective],
-  imports: [
-    CommonModule,
-    SioCommonModule,
-    NgxsModule.forFeature([]),
-  ],
-  exports: [SioListDataDirective],
-  providers: []
+  declarations: [SioDatabaseListComponent],
+  imports: [CommonModule, SioCommonModule, NgxsModule.forFeature([])],
+  exports: [SioDatabaseListComponent],
+  providers: [],
 })
 export class SioDatabaseModule {}
-