ontimize-web-ngx 15.6.0-next.3 → 15.6.0-next.4

package/lib/components/form/navigation/o-form-navigation.component.d.ts

@@ -1,16 +1,17 @@
 import { Injector, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { ServiceResponse } from '../../../interfaces/service-response.interface';
 import { OFormLayoutManagerBase } from '../../../layouts/form-layout/o-form-layout-manager-base.class';
+import { BaseService } from '../../../services/base-service.class';
 import { NavigationService } from '../../../services/navigation.service';
+import { OQueryParams } from '../../../types/query-params.type';
 import { OFormBase } from '../o-form-base.class';
 import { OFormNavigationClass } from './o-form.navigation.class';
-import { BaseService } from '../../../services/base-service.class';
-import { ServiceResponse } from '../../../interfaces/service-response.interface';
 import * as i0 from "@angular/core";
 export type QueryConfiguration = {
     serviceType: string;
-    queryArguments: any[];
+    queryArguments: OQueryParams;
     entity: string;
     service: string;
     queryMethod: string;
@@ -32,7 +33,8 @@ export declare class OFormNavigationComponent implements OnDestroy {
     protected queryConf: QueryConfiguration;
     constructor(injector: Injector, _form: OFormBase, router: Router);
     configureService(): void;
-    protected queryNavigationData(offset: number, length?: number): Promise<any>;
+    getQueryArguments(offset: number, length: number): OQueryParams;
+    protected queryNavigationData(offset: number, length?: number): Promise<void>;
     ngOnDestroy(): void;
     protected getKeysArray(): string[];
     getCurrentIndex(): number;

package/lib/components/grid/skeketon/o-grid-skeleton.component.d.ts

@@ -1,11 +1,8 @@
-import { ElementRef, Injector } from '@angular/core';
-import { OSkeletonComponent } from '../../o-skeleton.component';
+import { ORepeatableSkeletonComponent } from '../../o-repeatable-skeleton.component';
 import * as i0 from "@angular/core";
-export declare class OGridSkeletonComponent extends OSkeletonComponent {
-    protected elRef: ElementRef;
-    protected injector: Injector;
-    constructor(elRef: ElementRef, injector: Injector);
-    get count(): any[];
+export declare class OGridSkeletonComponent extends ORepeatableSkeletonComponent {
+    getParentElement(): HTMLElement;
+    getSkeletonItemElement(parentElement: HTMLElement): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<OGridSkeletonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OGridSkeletonComponent, "o-grid-skeleton", never, {}, {}, never, never, false, never>;
 }

package/lib/components/index.d.ts

@@ -41,4 +41,5 @@ export * from './expandable-container/o-expandable-container.component';
 export * from './expandable-container/o-expandable-container.module';
 export * from './tree/index';
 export * from './o-skeleton.component';
+export * from './o-repeatable-skeleton.component';
 export * from './user-info/o-user-info-base.class';

package/lib/components/list/o-list.component.d.ts

@@ -20,6 +20,7 @@ export declare const DEFAULT_INPUTS_O_LIST: string[];
 export declare const DEFAULT_OUTPUTS_O_LIST: string[];
 export declare class OListComponent extends AbstractOServiceComponent<OListComponentStateService> implements IList, AfterContentInit, AfterViewInit, OnDestroy, OnInit, OnChanges {
     listItemDirectives: QueryList<OListItemDirective>;
+    toolbarEl: ElementRef;
     refreshButton: boolean;
     selectable: boolean;
     deleteButton: boolean;
@@ -45,6 +46,7 @@ export declare class OListComponent extends AbstractOServiceComponent<OListCompo
     onItemSelected: EventEmitter<any[]>;
     onItemDeselected: EventEmitter<any[]>;
     constructor(injector: Injector, elRef: ElementRef, form: OFormComponent);
+    get toolBarHeight(): number;
     get state(): OListComponentStateClass;
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/lib/components/list/skeleton/o-list-skeleton.component.d.ts

@@ -1,11 +1,8 @@
-import { ElementRef, Injector } from '@angular/core';
-import { OSkeletonComponent } from '../../o-skeleton.component';
+import { ORepeatableSkeletonComponent } from '../../o-repeatable-skeleton.component';
 import * as i0 from "@angular/core";
-export declare class OListSkeletonComponent extends OSkeletonComponent {
-    protected elRef: ElementRef;
-    protected injector: Injector;
-    constructor(elRef: ElementRef, injector: Injector);
-    get count(): any[];
+export declare class OListSkeletonComponent extends ORepeatableSkeletonComponent {
+    getParentElement(): HTMLElement;
+    getSkeletonItemElement(parentElement: HTMLElement): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<OListSkeletonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OListSkeletonComponent, "o-list-skeleton", never, {}, {}, never, never, false, never>;
 }

package/lib/components/o-repeatable-skeleton.component.d.ts

@@ -0,0 +1,9 @@
+import { OSkeletonComponent } from './o-skeleton.component';
+import * as i0 from "@angular/core";
+export declare abstract class ORepeatableSkeletonComponent extends OSkeletonComponent {
+    abstract getParentElement(): HTMLElement;
+    abstract getSkeletonItemElement(parentElement: HTMLElement): HTMLElement;
+    getRows(): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ORepeatableSkeletonComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ORepeatableSkeletonComponent, never, never, {}, {}, never, never, false, never>;
+}

package/lib/components/o-skeleton.component.d.ts

@@ -1,14 +1,19 @@
-import { Injector, OnDestroy } from "@angular/core";
-import { Subscription } from "rxjs";
-import { AppearanceService } from "../services/appearance.service";
+import { AfterViewInit, ElementRef, Injector, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { AppearanceService } from '../services/appearance.service';
 import * as i0 from "@angular/core";
-export declare class OSkeletonComponent implements OnDestroy {
+export declare abstract class OSkeletonComponent implements AfterViewInit, OnDestroy {
     protected injector: Injector;
+    protected elRef: ElementRef;
     isDarkMode: boolean;
     subscription: Subscription;
     appearanceService: AppearanceService;
-    constructor(injector: Injector);
+    rows$: Observable<number[]>;
+    private readonly cd;
+    constructor(injector: Injector, elRef: ElementRef);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    abstract getRows(): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<OSkeletonComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<OSkeletonComponent, never, never, {}, {}, never, never, false, never>;
 }

package/lib/components/table/extensions/header/o-table-header-components.d.ts

@@ -12,5 +12,5 @@ import { OTableOptionComponent } from './table-option/o-table-option.component';
 import { OTableQuickfilterComponent } from './table-quickfilter/o-table-quickfilter.component';
 import { OTableHeaderComponent } from './table-header/o-table-header.component';
 import { OTableColumnSelectAllDirective } from './table-column-select-all/o-table-column-select-all.directive';
-export declare const O_TABLE_HEADER_COMPONENTS: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableOptionComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderColumnFilterIconComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];
-export declare const O_TABLE_HEADER_COMPONENTS_EXPORTED: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableOptionComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];
+export declare const O_TABLE_HEADER_COMPONENTS: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableOptionComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderColumnFilterIconComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];
+export declare const O_TABLE_HEADER_COMPONENTS_EXPORTED: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableOptionComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];

package/lib/components/table/extensions/skeleton/o-table-skeleton.component.d.ts

@@ -1,15 +1,6 @@
-import { AfterViewInit, ElementRef, Injector, OnInit } from '@angular/core';
 import { OSkeletonComponent } from '../../../o-skeleton.component';
-import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class OTableSkeletonComponent extends OSkeletonComponent implements OnInit, AfterViewInit {
-    protected elRef: ElementRef;
-    protected injector: Injector;
-    rows$: Observable<number[]>;
-    private readonly cd;
-    constructor(elRef: ElementRef, injector: Injector);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
+export declare class OTableSkeletonComponent extends OSkeletonComponent {
     getRows(): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<OTableSkeletonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OTableSkeletonComponent, "o-table-skeleton", never, {}, {}, never, never, false, never>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ontimize-web-ngx",
   "homepage": "https://github.com/OntimizeWeb/ontimize-web-ngx#readme",
-  "version": "15.6.0-next.3",
+  "version": "15.6.0-next.4",
   "description": "Ontimize Web framework using Angular 15",
   "bugs": "https://github.com/OntimizeWeb/ontimize-web-ngx/issues",
   "author": "Imatia S.L.",

package/theme.scss

@@ -47,6 +47,82 @@
   @include o-daterange-input-theme($theme-or-color-config);
   @include o-dual-list-selector-theme($theme-or-color-config);
   @include o-image-theme($theme-or-color-config);
+}@mixin o-app-sidenav-theme($theme-or-color-config) {
+  $theme: map.get($theme-or-color-config, color);
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $warn: map.get($theme, warn);
+  $background: map.get($theme, background);
+  $foreground: map.get($theme, foreground);
+
+  .o-app-sidenav {
+
+    .o-app-sidenav-menu-group,
+    .o-app-sidenav-menu-item {
+      &:not([disabled=true]) {
+
+        a.o-app-sidenav-viewer-sidenav-item-selected,
+        a:hover {
+          color: mat.get-color-from-palette($accent, 900);
+          background-color: mat.get-color-from-palette($primary, 100);
+        }
+      }
+    }
+
+    .o-app-sidenav-sidenav {
+      background: mat.get-color-from-palette($primary);
+
+
+      .sidenav-toggle {
+        color: mat.get-color-from-palette($primary, default-contrast);
+      }
+
+      .o-app-sidenav-item {
+        color: mat.get-color-from-palette($primary, default-contrast);
+
+        &.o-user-info {
+
+          &:focus,
+          &:hover {
+            color: inherit;
+          }
+
+          color: inherit;
+
+          .o-user-info-menu-item .o-user-info-item {
+            background: mat.get-color-from-palette($primary, default-contrast, 0.74);
+          }
+        }
+      }
+
+      /* Side Navigation Level Styles */
+      .o-app-sidenav-menu-group-level-1 {
+        .o-app-sidenav-menugroup {
+          &.opened {
+            +.o-app-sidenav-menugroup-items-container ul {
+              background: mat.get-color-from-palette($primary, 800);
+            }
+          }
+        }
+      }
+
+      .o-app-sidenav-menu-group-level-2,
+      .o-app-sidenav-menu-group-level-3,
+      .o-app-sidenav-menu-group-level-4 {
+        .o-app-sidenav-menugroup {
+          &.opened {
+            +.o-app-sidenav-menugroup-items-container ul {
+              background: mat.get-color-from-palette($primary, 900);
+            }
+          }
+        }
+      }
+
+      li a {
+        color: inherit;
+      }
+    }
+  }
 }@mixin o-app-header-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
@@ -140,83 +216,7 @@
         }
       }
     }
-  }@mixin o-app-sidenav-theme($theme-or-color-config) {
-  $theme: map.get($theme-or-color-config, color);
-  $primary: map.get($theme, primary);
-  $accent: map.get($theme, accent);
-  $warn: map.get($theme, warn);
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
-
-  .o-app-sidenav {
-
-    .o-app-sidenav-menu-group,
-    .o-app-sidenav-menu-item {
-      &:not([disabled=true]) {
-
-        a.o-app-sidenav-viewer-sidenav-item-selected,
-        a:hover {
-          color: mat.get-color-from-palette($accent, 900);
-          background-color: mat.get-color-from-palette($primary, 100);
-        }
-      }
-    }
-
-    .o-app-sidenav-sidenav {
-      background: mat.get-color-from-palette($primary);
-
-
-      .sidenav-toggle {
-        color: mat.get-color-from-palette($primary, default-contrast);
-      }
-
-      .o-app-sidenav-item {
-        color: mat.get-color-from-palette($primary, default-contrast);
-
-        &.o-user-info {
-
-          &:focus,
-          &:hover {
-            color: inherit;
-          }
-
-          color: inherit;
-
-          .o-user-info-menu-item .o-user-info-item {
-            background: mat.get-color-from-palette($primary, default-contrast, 0.74);
-          }
-        }
-      }
-
-      /* Side Navigation Level Styles */
-      .o-app-sidenav-menu-group-level-1 {
-        .o-app-sidenav-menugroup {
-          &.opened {
-            +.o-app-sidenav-menugroup-items-container ul {
-              background: mat.get-color-from-palette($primary, 800);
-            }
-          }
-        }
-      }
-
-      .o-app-sidenav-menu-group-level-2,
-      .o-app-sidenav-menu-group-level-3,
-      .o-app-sidenav-menu-group-level-4 {
-        .o-app-sidenav-menugroup {
-          &.opened {
-            +.o-app-sidenav-menugroup-items-container ul {
-              background: mat.get-color-from-palette($primary, 900);
-            }
-          }
-        }
-      }
-
-      li a {
-        color: inherit;
-      }
-    }
-  }
-}@mixin o-breadcrumb-theme($theme-or-color-config) {
+  }@mixin o-breadcrumb-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);