@sftech/ng-shared 0.0.1 → 0.0.2

package/fesm2022/sftech-ng-shared.mjs

@@ -1,12 +1,19 @@
 import { definePreset } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
-import * as i0 from '@angular/core';
-import { ViewChild, ContentChild, Input, Component } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { ViewChild, ContentChild, Input, Component, input, EventEmitter, Output, model, signal, inject, effect } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { Button } from 'primeng/button';
 import { Drawer } from 'primeng/drawer';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { Toast } from 'primeng/toast';
+import { faClose, faTrash, faBars } from '@fortawesome/free-solid-svg-icons';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { MessageService } from 'primeng/api';
+import { switchMap, map, of, catchError } from 'rxjs';
+import * as i1 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
 
 const SfTechPreset = definePreset(Aura, {
     semantic: {
@@ -25,7 +32,10 @@ const SfTechPreset = definePreset(Aura, {
     }
 });
 
+// biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
 class IconProvider {
+    static close = faClose;
+    static delete = faTrash;
     static menu = faBars;
 }
 
@@ -39,20 +49,12 @@ class HeadMainFooterWithCanvasComponent {
     drawerRef;
     drawerVisible = false;
     iconProvider = IconProvider;
-    closeCallback(e) {
-        this.drawerRef.close(e);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: HeadMainFooterWithCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: HeadMainFooterWithCanvasComponent, isStandalone: true, selector: "sftech-head-main-footer-with-canvas", inputs: { title: "title", maxWidth: "maxWidth" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "main", first: true, predicate: ["main"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }, { propertyName: "drawers", first: true, predicate: ["drawers"], descendants: true }], viewQueries: [{ propertyName: "drawerRef", first: true, predicate: ["drawerRef"], descendants: true }], ngImport: i0, template: "<div class=\"min-h-screen flex flex-col justify-between\">\r\n  <header class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n          @if (drawers) {\r\n              <div class=\"flex items-center\">\r\n                  <div class=\"flex-shrink\">\r\n                      <p-button (click)=\"drawerVisible = !drawerVisible\"><fa-icon [icon]=\"iconProvider.menu\"></fa-icon></p-button>\r\n                  </div>\r\n                  <div class=\"ms-2\">\r\n                      <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n                  </div>\r\n              </div>\r\n          } @else {\r\n              <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n          }\r\n      </div>\r\n  </header>\r\n\r\n  <main class=\"p-2 h-full flex-grow\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"main\"></ng-container>\r\n      </div>\r\n  </main>\r\n\r\n  <footer class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n      </div>\r\n  </footer>\r\n</div>\r\n\r\n@if (drawers) {\r\n  <p-drawer #drawerRef [(visible)]=\"drawerVisible\">\r\n    <ng-template #headless>\r\n      <ng-container *ngTemplateOutlet=\"drawers\"></ng-container>\r\n    </ng-template>\r\n  </p-drawer>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: HeadMainFooterWithCanvasComponent, isStandalone: true, selector: "sftech-head-main-footer-with-canvas", inputs: { title: "title", maxWidth: "maxWidth" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "main", first: true, predicate: ["main"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }, { propertyName: "drawers", first: true, predicate: ["drawers"], descendants: true }], viewQueries: [{ propertyName: "drawerRef", first: true, predicate: ["drawerRef"], descendants: true }], ngImport: i0, template: "<div class=\"min-h-screen flex flex-col justify-between\">\r\n    <p-toast />\r\n  <header class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n          @if (drawers) {\r\n              <div class=\"flex items-center\">\r\n                  <div class=\"flex-shrink\">\r\n                      <p-button (click)=\"drawerVisible = !drawerVisible\"><fa-icon [icon]=\"iconProvider.menu\"></fa-icon></p-button>\r\n                  </div>\r\n                  <div class=\"ms-2\">\r\n                      <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n                  </div>\r\n              </div>\r\n          } @else {\r\n              <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n          }\r\n      </div>\r\n  </header>\r\n\r\n  <main class=\"p-2 h-full flex-grow\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"main\"></ng-container>\r\n      </div>\r\n  </main>\r\n\r\n  <footer class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n      </div>\r\n  </footer>\r\n</div>\r\n\r\n@if (drawers) {\r\n  <p-drawer #drawerRef [(visible)]=\"drawerVisible\">\r\n    <ng-template #headless>\r\n      <ng-container *ngTemplateOutlet=\"drawers\"></ng-container>\r\n    </ng-template>\r\n  </p-drawer>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: HeadMainFooterWithCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sftech-head-main-footer-with-canvas', imports: [
-                        NgTemplateOutlet,
-                        Button,
-                        Drawer,
-                        FaIconComponent
-                    ], template: "<div class=\"min-h-screen flex flex-col justify-between\">\r\n  <header class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n          @if (drawers) {\r\n              <div class=\"flex items-center\">\r\n                  <div class=\"flex-shrink\">\r\n                      <p-button (click)=\"drawerVisible = !drawerVisible\"><fa-icon [icon]=\"iconProvider.menu\"></fa-icon></p-button>\r\n                  </div>\r\n                  <div class=\"ms-2\">\r\n                      <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n                  </div>\r\n              </div>\r\n          } @else {\r\n              <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n          }\r\n      </div>\r\n  </header>\r\n\r\n  <main class=\"p-2 h-full flex-grow\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"main\"></ng-container>\r\n      </div>\r\n  </main>\r\n\r\n  <footer class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n      </div>\r\n  </footer>\r\n</div>\r\n\r\n@if (drawers) {\r\n  <p-drawer #drawerRef [(visible)]=\"drawerVisible\">\r\n    <ng-template #headless>\r\n      <ng-container *ngTemplateOutlet=\"drawers\"></ng-container>\r\n    </ng-template>\r\n  </p-drawer>\r\n}" }]
+            args: [{ selector: 'sftech-head-main-footer-with-canvas', imports: [NgTemplateOutlet, Button, Drawer, FaIconComponent, Toast], template: "<div class=\"min-h-screen flex flex-col justify-between\">\r\n    <p-toast />\r\n  <header class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n          @if (drawers) {\r\n              <div class=\"flex items-center\">\r\n                  <div class=\"flex-shrink\">\r\n                      <p-button (click)=\"drawerVisible = !drawerVisible\"><fa-icon [icon]=\"iconProvider.menu\"></fa-icon></p-button>\r\n                  </div>\r\n                  <div class=\"ms-2\">\r\n                      <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n                  </div>\r\n              </div>\r\n          } @else {\r\n              <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n          }\r\n      </div>\r\n  </header>\r\n\r\n  <main class=\"p-2 h-full flex-grow\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"main\"></ng-container>\r\n      </div>\r\n  </main>\r\n\r\n  <footer class=\"p-2 bg-primary-600\">\r\n      <div [style.max-width]=\"maxWidth\" class=\"mx-auto\">\r\n        <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n      </div>\r\n  </footer>\r\n</div>\r\n\r\n@if (drawers) {\r\n  <p-drawer #drawerRef [(visible)]=\"drawerVisible\">\r\n    <ng-template #headless>\r\n      <ng-container *ngTemplateOutlet=\"drawers\"></ng-container>\r\n    </ng-template>\r\n  </p-drawer>\r\n}" }]
         }], propDecorators: { title: [{
                 type: Input
             }], maxWidth: [{
@@ -74,6 +76,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 args: ['drawerRef']
             }] } });
 
+class BaseDialogComponent {
+    hasHeader = input(true);
+    hasFooter = input(true);
+    showButtons = input(true);
+    headerText = input(undefined);
+    closed = new EventEmitter();
+    header = null;
+    body = null;
+    footer = null;
+    iconProvider = IconProvider;
+    constructor() { }
+    close() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: BaseDialogComponent, isStandalone: true, selector: "sftech-base-dialog", inputs: { hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: "<!--<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '25rem' }\">-->\r\n<!--    <ng-template #header>-->\r\n<!--        <div class=\"inline-flex items-center justify-center gap-2\">-->\r\n<!--            <span class=\"font-bold whitespace-nowrap\">Amy Elsner</span>-->\r\n<!--        </div>-->\r\n<!--    </ng-template>-->\r\n<!--    <span class=\"text-surface-500 dark:text-surface-400 block mb-8\">Update your information.</span>-->\r\n<!--    <div class=\"flex items-center gap-4 mb-4\">-->\r\n<!--        <label for=\"username\" class=\"font-semibold w-24\">Username</label>-->\r\n<!--        <input pInputText id=\"username\" class=\"flex-auto\" autocomplete=\"off\" />-->\r\n<!--    </div>-->\r\n<!--    <div class=\"flex items-center gap-4 mb-2\">-->\r\n<!--        <label for=\"email\" class=\"font-semibold w-24\">Email</label>-->\r\n<!--        <input pInputText id=\"email\" class=\"flex-auto\" autocomplete=\"off\" />-->\r\n<!--    </div>-->\r\n<!--    <ng-template #footer>-->\r\n<!--        <p-button label=\"Cancel\" [text]=\"true\" severity=\"secondary\" (click)=\"visible = false\" />-->\r\n<!--        <p-button label=\"Save\" [outlined]=\"true\" severity=\"secondary\" (click)=\"visible = false\" />-->\r\n<!--    </ng-template>-->\r\n<!--</p-dialog>-->\r\n\r\n@if (hasHeader()) {\r\n    <div id=\"dialog-header\" class=\"flex justify-between mb-5\">\r\n        <div class=\"header-content\">\r\n            @if (headerText()) {\r\n                <h1>{{ headerText() }}</h1>\r\n            } @else {\r\n                <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n            }\r\n        </div>\r\n        <div class=\"header-actions\">\r\n            <p-button (onClick)=\"close()\">\r\n                <fa-icon [icon]=\"iconProvider.close\"></fa-icon>\r\n            </p-button>\r\n        </div>\r\n    </div>\r\n}\r\n<div id=\"dialog-body\">\r\n    <ng-container [ngTemplateOutlet]=\"body\"></ng-container>\r\n</div>\r\n\r\n@if (hasFooter()) {\r\n    <div id=\"dialog-footer\" class=\"flex justify-end mt-5\">\r\n        <div id=\"footer-content\">\r\n            <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n        </div>\r\n    </div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-base-dialog', imports: [Button, NgTemplateOutlet, FaIconComponent], template: "<!--<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '25rem' }\">-->\r\n<!--    <ng-template #header>-->\r\n<!--        <div class=\"inline-flex items-center justify-center gap-2\">-->\r\n<!--            <span class=\"font-bold whitespace-nowrap\">Amy Elsner</span>-->\r\n<!--        </div>-->\r\n<!--    </ng-template>-->\r\n<!--    <span class=\"text-surface-500 dark:text-surface-400 block mb-8\">Update your information.</span>-->\r\n<!--    <div class=\"flex items-center gap-4 mb-4\">-->\r\n<!--        <label for=\"username\" class=\"font-semibold w-24\">Username</label>-->\r\n<!--        <input pInputText id=\"username\" class=\"flex-auto\" autocomplete=\"off\" />-->\r\n<!--    </div>-->\r\n<!--    <div class=\"flex items-center gap-4 mb-2\">-->\r\n<!--        <label for=\"email\" class=\"font-semibold w-24\">Email</label>-->\r\n<!--        <input pInputText id=\"email\" class=\"flex-auto\" autocomplete=\"off\" />-->\r\n<!--    </div>-->\r\n<!--    <ng-template #footer>-->\r\n<!--        <p-button label=\"Cancel\" [text]=\"true\" severity=\"secondary\" (click)=\"visible = false\" />-->\r\n<!--        <p-button label=\"Save\" [outlined]=\"true\" severity=\"secondary\" (click)=\"visible = false\" />-->\r\n<!--    </ng-template>-->\r\n<!--</p-dialog>-->\r\n\r\n@if (hasHeader()) {\r\n    <div id=\"dialog-header\" class=\"flex justify-between mb-5\">\r\n        <div class=\"header-content\">\r\n            @if (headerText()) {\r\n                <h1>{{ headerText() }}</h1>\r\n            } @else {\r\n                <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n            }\r\n        </div>\r\n        <div class=\"header-actions\">\r\n            <p-button (onClick)=\"close()\">\r\n                <fa-icon [icon]=\"iconProvider.close\"></fa-icon>\r\n            </p-button>\r\n        </div>\r\n    </div>\r\n}\r\n<div id=\"dialog-body\">\r\n    <ng-container [ngTemplateOutlet]=\"body\"></ng-container>\r\n</div>\r\n\r\n@if (hasFooter()) {\r\n    <div id=\"dialog-footer\" class=\"flex justify-end mt-5\">\r\n        <div id=\"footer-content\">\r\n            <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n        </div>\r\n    </div>\r\n}" }]
+        }], ctorParameters: () => [], propDecorators: { closed: [{
+                type: Output
+            }], header: [{
+                type: ContentChild,
+                args: ['header']
+            }], body: [{
+                type: ContentChild,
+                args: ['body']
+            }], footer: [{
+                type: ContentChild,
+                args: ['footer']
+            }] } });
+
 async function loadConfig(configPath) {
     return fetch(configPath)
         .then((res) => {
@@ -83,9 +118,622 @@ async function loadConfig(configPath) {
     });
 }
 
+class BaseDbModel {
+    id;
+    createdAt;
+    propertiesToShow = [];
+    propertyFilterType = new Map();
+    propertyUINames = new Map();
+    getUiNameForProperty(propertyName) {
+        return this.propertyUINames.get(propertyName) || propertyName;
+    }
+    getFilterTypeForProperty(propertyName) {
+        return this.propertyFilterType.get(propertyName);
+    }
+    getPropertyValue(propertyName) {
+        return this[propertyName];
+    }
+    static fromDto(dto) {
+        const model = new this();
+        return model.fromDto(dto);
+    }
+    static fromDtos(dtos) {
+        return dtos.map((dto) => this.fromDto(dto));
+    }
+    fromDto(dto) {
+        this.id = dto.id;
+        this.createdAt = dto.createdAt;
+        return this;
+    }
+    fromDtos(dtos) {
+        return dtos.map((dto) => this.fromDto(dto));
+    }
+}
+
+class OdataExpands {
+    expands = [];
+    constructor(expands = []) {
+        this.expands = expands;
+    }
+    addField(field) {
+        this.expands.push(field);
+    }
+    toGetParameter() {
+        return this.expands.length > 0 ? `$expand=${this.expands.join(',')}` : '';
+    }
+}
+
+var FilterConcatenation;
+(function (FilterConcatenation) {
+    FilterConcatenation["OR"] = " or ";
+    FilterConcatenation["AND"] = " and ";
+})(FilterConcatenation || (FilterConcatenation = {}));
+class OdataFilterCollection {
+    andFilters = [];
+    // public orFilters: OdataFilter[] = [];
+    toGetParameter() {
+        let odataString = '$filter=';
+        const filters = this.andFilters.filter((x) => this._isFilterValid(x));
+        if (filters.length === 0) {
+            return '';
+        }
+        odataString += filters.map((x) => x.toGetParameter()).join(FilterConcatenation.AND);
+        return odataString;
+    }
+    addAnd(andFilter) {
+        this.andFilters.push(andFilter);
+    }
+    remove(field) {
+        const idx = this.andFilters.findIndex((f) => f.field === field);
+        if (idx >= 0) {
+            this.andFilters.splice(idx, 1);
+        }
+    }
+    hasValidFilters() {
+        return this.andFilters.filter((f) => this._isFilterValid(f)).length > 0;
+    }
+    _isFilterValid(filter) {
+        return !(!filter.type || !filter.field || !filter.operator);
+    }
+}
+
+var ESortDirection;
+(function (ESortDirection) {
+    ESortDirection["ASC"] = "asc";
+    ESortDirection["DESC"] = "desc";
+})(ESortDirection || (ESortDirection = {}));
+class ODataOrder {
+    column = 'id';
+    direction = ESortDirection.ASC;
+    toGetParameter() {
+        return `$orderby=${this.column} ${this.direction}`;
+    }
+}
+
+class ODataPagination {
+    pageSize = 20;
+    totalPages = 0;
+    totalElements = 0;
+    page = 1;
+    static fromDto(dto) {
+        const obj = new ODataPagination();
+        obj.pageSize = dto.pageSize;
+        obj.totalPages = dto.totalPages;
+        obj.totalElements = dto.totalElements;
+        obj.page = dto.page;
+        return obj;
+    }
+    toGetParameter() {
+        let odataString = `$top=${this.pageSize}`;
+        odataString += `&$skip=${(this.page - 1) * this.pageSize}`;
+        return odataString;
+    }
+}
+
+class OData {
+    pagination = new ODataPagination();
+    filter = new OdataFilterCollection();
+    expands = new OdataExpands();
+    order = new ODataOrder();
+    toGetParameter() {
+        let odataString = `odata?${this.pagination.toGetParameter()}`;
+        if (this.filter.hasValidFilters()) {
+            odataString += `&${this.filter.toGetParameter()}`;
+        }
+        if (this.order) {
+            odataString += `&${this.order.toGetParameter()}`;
+        }
+        if (this.expands) {
+            odataString += `&${this.expands.toGetParameter()}`;
+        }
+        return odataString;
+    }
+}
+
+var EFilterTypes;
+(function (EFilterTypes) {
+    EFilterTypes["NUMERIC"] = "numeric";
+    EFilterTypes["STRING"] = "string";
+    EFilterTypes["DATE"] = "date";
+    EFilterTypes["TIME"] = "time";
+    EFilterTypes["PACE"] = "pace";
+})(EFilterTypes || (EFilterTypes = {}));
+var EFilterOperator;
+(function (EFilterOperator) {
+    EFilterOperator["EQUALS"] = "=";
+    EFilterOperator["GREATER"] = ">";
+    EFilterOperator["LESS"] = "<";
+    EFilterOperator["GREATEREQUALS"] = ">=";
+    EFilterOperator["LESSEQUALS"] = "<=";
+    EFilterOperator["BETWEEN"] = "zwischen";
+    EFilterOperator["CONTAINS"] = "enth\u00E4lt";
+})(EFilterOperator || (EFilterOperator = {}));
+
+class OdataFilter {
+    field;
+    value;
+    operator;
+    type;
+    constructor(field, value, operator, type) {
+        this.field = field;
+        this.value = value;
+        this.operator = operator;
+        this.type = type;
+    }
+    toGetParameter() {
+        if (!this.field || !this.operator || !this.type || !this.value) {
+            return '';
+        }
+        switch (this.operator) {
+            case EFilterOperator.CONTAINS:
+                return `contains(${this.field},'${this.value}')`;
+            default:
+                return `${this.field} ${this._getODataOperator()} ${this._getTypeDependentValue()}`;
+        }
+    }
+    static availableOperators(type) {
+        switch (type) {
+            case EFilterTypes.NUMERIC:
+                return [EFilterOperator.GREATER, EFilterOperator.GREATEREQUALS, EFilterOperator.BETWEEN, EFilterOperator.LESS, EFilterOperator.LESSEQUALS, EFilterOperator.EQUALS];
+            case EFilterTypes.STRING:
+                return [EFilterOperator.CONTAINS];
+            case EFilterTypes.DATE:
+                return [EFilterOperator.GREATER, EFilterOperator.GREATEREQUALS, EFilterOperator.BETWEEN, EFilterOperator.LESS, EFilterOperator.LESSEQUALS, EFilterOperator.EQUALS];
+            case EFilterTypes.TIME:
+            case EFilterTypes.PACE:
+                return [EFilterOperator.GREATER, EFilterOperator.GREATEREQUALS, EFilterOperator.BETWEEN, EFilterOperator.LESS, EFilterOperator.LESSEQUALS, EFilterOperator.EQUALS];
+            default:
+                return [EFilterOperator.GREATER, EFilterOperator.GREATEREQUALS, EFilterOperator.BETWEEN, EFilterOperator.LESS, EFilterOperator.LESSEQUALS, EFilterOperator.EQUALS];
+        }
+    }
+    _getTypeDependentValue() {
+        if (this.type === EFilterTypes.STRING) {
+            return `'${this.value}'`;
+        }
+        if (this.type === EFilterTypes.TIME) {
+            if (!this.value.includes(':')) {
+                console.warn(this.value, 'not a valid time');
+                return 0;
+            }
+            const minutesSeconds = this.value.split(':');
+            return parseInt(minutesSeconds[0], 10) * 60 + parseInt(minutesSeconds[1], 10);
+        }
+        return this.value;
+    }
+    _getODataOperator() {
+        switch (this.operator) {
+            case EFilterOperator.EQUALS:
+                return 'eq';
+            case EFilterOperator.LESS:
+                return 'lt';
+            case EFilterOperator.LESSEQUALS:
+                return 'le';
+            case EFilterOperator.GREATER:
+                return 'gt';
+            case EFilterOperator.GREATEREQUALS:
+                return 'ge';
+            case EFilterOperator.BETWEEN:
+                return 'between';
+            case EFilterOperator.CONTAINS:
+                return 'contains';
+            default:
+                return 'eq';
+        }
+    }
+}
+
+class MappedApiResponse {
+    status;
+    data;
+    messages = [];
+    isError = false;
+}
+class MappedApiError {
+    status;
+    data;
+    messages = [];
+    isError = true;
+}
+
+class BaseListComponent {
+    odata = model(new OData());
+    showPageTitle = input(true);
+    canEdit = input(true);
+    openDisplayAsModal = input(true);
+    data = signal(undefined);
+    router = inject(Router);
+    modalService = inject(DialogService);
+    constructor() { }
+    ngOnInit() {
+        this._loadData();
+    }
+    updatePagination($event) {
+        this.odata.update((odata) => {
+            const odataNew = new OData();
+            odataNew.pagination = $event;
+            odataNew.filter = odata.filter;
+            odataNew.order = odata.order;
+            odataNew.expands = odata.expands;
+            return odataNew;
+        });
+        this._loadData();
+    }
+    openDisplay(id) {
+        if (id === undefined) {
+            return;
+        }
+        if (this.openDisplayAsModal()) {
+            const modalRef = this.modalService.open(this._modalComponent, { inputValues: { id, canEdit: this.canEdit(), openedAsModal: true }, focusOnShow: false, modal: true, dismissableMask: true, width: '70%', contentStyle: { overflow: 'auto' } });
+            modalRef.onClose.subscribe((result) => {
+                if (result) {
+                    this.data.update((data) => {
+                        const index = data?.findIndex((item) => item.id === result.id);
+                        if (index !== undefined && index >= 0) {
+                            data[index] = result.data;
+                        }
+                        return data;
+                    });
+                }
+            });
+            return;
+        }
+        this.router.navigate([this._route, id]);
+    }
+    _loadData() {
+        this._repo.odata(this.odata()).subscribe((response) => {
+            if (response instanceof MappedApiError) {
+                console.error(response);
+                return;
+            }
+            this.data.set(response.data.items);
+            if (!response.data) {
+                return;
+            }
+            this.odata.update((odata) => {
+                const odataNew = new OData();
+                odataNew.pagination = response.data.pagination;
+                odataNew.filter = odata.filter;
+                odataNew.order = odata.order;
+                odataNew.expands = odata.expands;
+                return odataNew;
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: BaseListComponent, isStandalone: true, selector: "sftech-pages-base-list", inputs: { odata: { classPropertyName: "odata", publicName: "odata", isSignal: true, isRequired: false, transformFunction: null }, showPageTitle: { classPropertyName: "showPageTitle", publicName: "showPageTitle", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, openDisplayAsModal: { classPropertyName: "openDisplayAsModal", publicName: "openDisplayAsModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { odata: "odataChange" }, ngImport: i0, template: '<div></div>', isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-pages-base-list', standalone: true, imports: [], template: '<div></div>' }]
+        }], ctorParameters: () => [] });
+
+class BaseDisplayComponent {
+    id;
+    openedAsModal = false;
+    canEdit = true;
+    redirectAfterSave = false;
+    ref = inject(DynamicDialogRef);
+    form;
+    model = signal(this.getNewModel());
+    iconProvider = IconProvider;
+    router = inject(Router);
+    activatedRoute = inject(ActivatedRoute);
+    toastr = inject(MessageService);
+    constructor() {
+        effect(() => {
+            if (this.model()) {
+                this.form = this.initializeForm();
+                if (!this.canEdit) {
+                    for (const control in this.form.controls) {
+                        this.form.controls[control].disable();
+                    }
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        let obs;
+        if (this.id) {
+            obs = this._loadData(this.id);
+        }
+        else {
+            obs = this.activatedRoute.params.pipe(switchMap((params) => {
+                const id = parseInt(params['id']);
+                this.id = id;
+                return this._loadData(id);
+            }));
+        }
+        obs.subscribe((res) => {
+            if (res instanceof MappedApiError) {
+                this.toastr.add({ severity: 'error', detail: 'Beim Laden der Daten ist ein Fehler aufgetreten' });
+                throw new Error(res.messages ? res.messages.join(' | ') : 'Beim Laden der Daten ist ein Fehler aufgetreten');
+            }
+            this.model.set(res.data);
+            if (this.form) {
+                this.form.patchValue(this.model());
+                this.form.markAsUntouched();
+            }
+        });
+    }
+    async submitForm() {
+        let obs;
+        if (!this.form.valid) {
+            return;
+        }
+        if (this.model().id) {
+            const dto = this.mapFormToUpdateDto();
+            obs = this._repo.update(this.model().id, dto);
+        }
+        else {
+            const dto = this.mapFormToCreateDto();
+            obs = this._repo.insert(dto);
+        }
+        obs.subscribe((res) => {
+            if (res.isError) {
+                this.toastr.add({ severity: 'error', detail: 'Beim Speichern der Daten ist ein Fehler aufgetreten' });
+                throw new Error(res.messages ? res.messages.join(' | ') : 'Beim Speichern der Daten ist ein Fehler aufgetreten');
+            }
+            this.model.set(res.data);
+            this.toastr.add({ severity: 'success', detail: `Datensatz mit der Id '${this.model().id}' erfolgreich gespeichert` });
+            if (this.redirectAfterSave) {
+                this.goBack({ operation: this.model().id ? 'update' : 'create', id: this.model().id, data: res.data });
+            }
+        });
+    }
+    deleteData() {
+        if (!this.model().id) {
+            this.model.set(this.getNewModel());
+            this.form.patchValue(this.model);
+            return;
+        }
+        this._repo.delete(this.model().id).subscribe((res) => {
+            if (res.isError) {
+                this.toastr.add({ severity: 'error', detail: 'Beim Löschen der Daten ist ein Fehler aufgetreten' });
+                throw new Error(res.messages ? res.messages.join(' | ') : 'Beim Löschen der Daten ist ein Fehler aufgetreten');
+            }
+            this.toastr.add({ severity: 'success', detail: `Datensatz mit der Id '${this.model().id}' erfolgreich gelöscht` });
+            this.goBack({ operation: 'delete', id: this.model().id });
+        });
+    }
+    getFormControl(property) {
+        return this.form.get(property);
+    }
+    goBack(retVal = { operation: 'aborted' }) {
+        if (this.openedAsModal) {
+            this.close(retVal);
+            return;
+        }
+        this.router.navigate([this._route]);
+    }
+    _loadData(id) {
+        if (id) {
+            return this._repo.get(id, true).pipe(map((res) => {
+                if (res instanceof MappedApiError) {
+                    this.toastr.add({ severity: 'error', detail: 'Beim Laden der Daten ist ein Fehler aufgetreten' });
+                    throw new Error(res.messages ? res.messages.join(' | ') : 'Beim Laden der Daten ist ein Fehler aufgetreten');
+                }
+                return res;
+            }));
+        }
+        const mappedApiResponse = new MappedApiResponse();
+        mappedApiResponse.data = this.model();
+        return of(mappedApiResponse);
+    }
+    close(retVal = { operation: 'aborted' }) {
+        this.ref.close(retVal);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: BaseDisplayComponent, isStandalone: true, selector: "lib-core-base-display", inputs: { id: "id", openedAsModal: "openedAsModal", canEdit: "canEdit" }, ngImport: i0, template: '<div></div>', isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-core-base-display', standalone: true, imports: [], template: '<div></div>' }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }], openedAsModal: [{
+                type: Input
+            }], canEdit: [{
+                type: Input
+            }] } });
+
+class BaseDisplayModalComponent {
+    id;
+    canEdit = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseDisplayModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: BaseDisplayModalComponent, isStandalone: true, selector: "lib-prompt-display-modal", ngImport: i0, template: '', isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseDisplayModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-prompt-display-modal', standalone: true, imports: [], template: '' }]
+        }] });
+
+class PaginatorComponent {
+    pagination;
+    odataChanged = new EventEmitter();
+    // public amountOfPageNumbersToShow = 5;
+    // public pageNumbers = computed(() => {
+    //     const currentPage = this.pagination!.page;
+    //     const totalPages = this.pagination!.totalPages;
+    //
+    //     if (totalPages <= this.amountOfPageNumbersToShow) {
+    //         // Wenn die Gesamtseiten kleiner als oder gleich der sichtbaren Seiten sind
+    //         return Array.from({ length: totalPages }, (_, i) => i + 1);
+    //     }
+    //
+    //     const pagination: number[] = []; // Immer mit 1 starten
+    //
+    //     // Bereich in der Mitte berechnen
+    //     const middleCount = this.amountOfPageNumbersToShow - 2; // Plätze für Mitte (ohne 1 und x)
+    //     const half = Math.floor(middleCount / 2);
+    //
+    //     let start = Math.max(2, currentPage - half); // Startpunkt der Mitte
+    //     let end = Math.min(totalPages - 1, currentPage + half); // Endpunkt der Mitte
+    //
+    //     // Anpassen, falls die Mitte den Anfang oder das Ende überschreitet
+    //     if (end - start < middleCount - 1) {
+    //         if (start === 2) {
+    //             end = start + middleCount - 1;
+    //         } else if (end === totalPages - 1) {
+    //             start = end - middleCount + 1;
+    //         }
+    //     }
+    //
+    //     // Mittlere Zahlen hinzufügen
+    //     for (let i = start; i <= end; i++) {
+    //         pagination.push(i);
+    //     }
+    //
+    //     return pagination;
+    // });
+    //
+    // public changePage(pageNumber: number) {
+    //     this.pagination.page = pageNumber;
+    //     this.odataChanged.emit(this.pagination);
+    // }
+    onPageChange(event) {
+        if (event.page !== undefined) {
+            this.pagination.page = event.page + 1;
+        }
+        this.pagination.pageSize = event.rows ?? 10;
+        this.odataChanged.emit(this.pagination);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: PaginatorComponent, isStandalone: true, selector: "sftech-paginator", inputs: { pagination: "pagination" }, outputs: { odataChanged: "odataChanged" }, ngImport: i0, template: "<!--<nav aria-label=\"Table navigation\" class=\"flex items-center flex-wrap md:flex-row justify-between p-2 bg-gradient-to-b from-secondary_accent-500 to-secondary_accent-700\">-->\r\n<!--    <div-->\r\n<!--        class=\"font-normal text-white dark:text-gray-400 md:mb-0 block w-full md:inline md:w-auto\">Ergebnis-->\r\n<!--        <span class=\"font-semibold text-primary_accent-900 dark:text-white\">{{ ((pagination.page - 1) * pagination.pageSize) + 1 }} - {{ pagination.totalPages === pagination.page ? pagination.totalElements : pagination.pageSize * pagination.page}}</span>-->\r\n<!--        von-->\r\n<!--        <span class=\"font-semibold text-primary_accent-900 dark:text-white\">{{ pagination.totalElements }}</span></div>-->\r\n<!--    <ul class=\"inline-flex -space-x-px rtl:space-x-reverse text-sm h-8\">-->\r\n<!--        @for (pageNumber of pageNumbers(); track pageNumber) {-->\r\n<!--            <li>-->\r\n<!--                <a [class.rounded-s-lg]=\"pageNumber === 1\" [class.rounded-e-lg]=\"pageNumber === pagination.totalPages\"-->\r\n<!--                   (click)=\"changePage(pageNumber)\"-->\r\n<!--                   class=\"flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\">{{ pageNumber }}</a>-->\r\n<!--            </li>-->\r\n<!--        }-->\r\n<!--    </ul>-->\r\n<!--</nav>-->\r\n\r\n\r\n\r\n\r\n<div class=\"card flex justify-center\">\r\n    <p-paginator (onPageChange)=\"onPageChange($event)\" [first]=\"pagination.page - 1 \" [rows]=\"pagination.pageSize\" [totalRecords]=\"pagination.totalElements\" [rowsPerPageOptions]=\"[10, 20, 30]\" />\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-paginator', standalone: true, imports: [PaginatorModule], template: "<!--<nav aria-label=\"Table navigation\" class=\"flex items-center flex-wrap md:flex-row justify-between p-2 bg-gradient-to-b from-secondary_accent-500 to-secondary_accent-700\">-->\r\n<!--    <div-->\r\n<!--        class=\"font-normal text-white dark:text-gray-400 md:mb-0 block w-full md:inline md:w-auto\">Ergebnis-->\r\n<!--        <span class=\"font-semibold text-primary_accent-900 dark:text-white\">{{ ((pagination.page - 1) * pagination.pageSize) + 1 }} - {{ pagination.totalPages === pagination.page ? pagination.totalElements : pagination.pageSize * pagination.page}}</span>-->\r\n<!--        von-->\r\n<!--        <span class=\"font-semibold text-primary_accent-900 dark:text-white\">{{ pagination.totalElements }}</span></div>-->\r\n<!--    <ul class=\"inline-flex -space-x-px rtl:space-x-reverse text-sm h-8\">-->\r\n<!--        @for (pageNumber of pageNumbers(); track pageNumber) {-->\r\n<!--            <li>-->\r\n<!--                <a [class.rounded-s-lg]=\"pageNumber === 1\" [class.rounded-e-lg]=\"pageNumber === pagination.totalPages\"-->\r\n<!--                   (click)=\"changePage(pageNumber)\"-->\r\n<!--                   class=\"flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\">{{ pageNumber }}</a>-->\r\n<!--            </li>-->\r\n<!--        }-->\r\n<!--    </ul>-->\r\n<!--</nav>-->\r\n\r\n\r\n\r\n\r\n<div class=\"card flex justify-center\">\r\n    <p-paginator (onPageChange)=\"onPageChange($event)\" [first]=\"pagination.page - 1 \" [rows]=\"pagination.pageSize\" [totalRecords]=\"pagination.totalElements\" [rowsPerPageOptions]=\"[10, 20, 30]\" />\r\n</div>" }]
+        }], propDecorators: { pagination: [{
+                type: Input
+            }], odataChanged: [{
+                type: Output
+            }] } });
+
+class MappedOdataResponse {
+    status;
+    data = new MappedOdataResponseData();
+    messages = [];
+    isError;
+}
+class MappedOdataResponseData {
+    items;
+    pagination = new ODataPagination();
+}
+
+class BaseDbApiService {
+    http;
+    config;
+    url;
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+    }
+    get(id, detailed = false) {
+        let url = `${this.url}/${id}`;
+        console.log(url);
+        if (detailed) {
+            url = `${url}/?detailed=${detailed}`;
+        }
+        return this.http.get(url).pipe(map((response) => this._responseMapping(response)), catchError((error) => {
+            return this._httpErrorToApiResponse(error);
+        }));
+    }
+    getAll() {
+        const odata = new OData();
+        return this.odata(odata);
+    }
+    odata(odataQuery) {
+        return this.http.get(`${this.url}/${odataQuery.toGetParameter()}`).pipe(map((response) => this._responseOdataMapping(response)), catchError((error) => {
+            return this._httpErrorToApiResponse(error);
+        }));
+    }
+    insert(dto) {
+        return this.http.post(this.url, dto).pipe(map((response) => this._responseMapping(response)), catchError((error) => {
+            return this._httpErrorToApiResponse(error);
+        }));
+    }
+    update(id, dto) {
+        return this.http.put(`${this.url}/${id}`, dto).pipe(map((response) => this._responseMapping(response)), catchError((error) => {
+            return this._httpErrorToApiResponse(error);
+        }));
+    }
+    delete(id) {
+        return this.http.delete(`${this.url}/${id}`).pipe(map((response) => {
+            const apiReponse = new MappedApiResponse();
+            apiReponse.status = response.status;
+            apiReponse.messages = response.messages ? response.messages : [];
+            apiReponse.isError = false;
+            return apiReponse;
+        }), catchError((error) => {
+            return this._httpErrorToApiResponse(error);
+        }));
+    }
+    _responseOdataMapping(response) {
+        const odataResponse = new MappedOdataResponse();
+        odataResponse.data.items = this.getNewModel().fromDtos(response.data?.items);
+        odataResponse.data.pagination = ODataPagination.fromDto(response.data.pagination);
+        return odataResponse;
+    }
+    _responseMapping(response) {
+        if (![200, 201, 202].includes(response.status)) {
+            return this._errorHandling(response.status, response.messages);
+        }
+        const apiResponse = new MappedApiResponse();
+        apiResponse.status = response.status;
+        apiResponse.messages = response.messages ? response.messages : [];
+        apiResponse.isError = false;
+        let mappedData;
+        if (Array.isArray(response.data)) {
+            mappedData = this.getNewModel().fromDtos(response.data);
+        }
+        else {
+            mappedData = this.getNewModel().fromDto(response.data);
+        }
+        apiResponse.data = mappedData;
+        return apiResponse;
+    }
+    _errorHandling(statusCode, messages) {
+        const apiResponse = new MappedApiError();
+        apiResponse.status = statusCode;
+        apiResponse.messages = messages ? messages : [];
+        apiResponse.isError = true;
+        return apiResponse;
+    }
+    _httpErrorToApiResponse(error) {
+        const messages = [];
+        if (error.message) {
+            messages.push(error.message);
+        }
+        if (error.error?.messages) {
+            messages.push(...error.error.messages);
+        }
+        return of(this._errorHandling(error.status, messages));
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { HeadMainFooterWithCanvasComponent, SfTechPreset, loadConfig };
+export { BaseDbApiService, BaseDbModel, BaseDialogComponent, BaseDisplayComponent, BaseDisplayModalComponent, BaseListComponent, EFilterOperator, EFilterTypes, ESortDirection, FilterConcatenation, HeadMainFooterWithCanvasComponent, IconProvider, OData, ODataOrder, ODataPagination, OdataExpands, OdataFilter, OdataFilterCollection, PaginatorComponent, SfTechPreset, loadConfig };
 //# sourceMappingURL=sftech-ng-shared.mjs.map