@sftech/ng-shared 0.0.22 → 0.0.23

package/fesm2022/sftech-ng-shared.mjs

@@ -1,13 +1,13 @@
 import { definePreset } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
-import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, input, Output, Component, ViewChild, ContentChild, Input, inject, model, signal, effect } from '@angular/core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { Button } from 'primeng/button';
 import { Drawer } from 'primeng/drawer';
 import { Toast } from 'primeng/toast';
-import { faPlus, faHexagonNodes, faArrowRight, faArrowLeft, faBrain, faComments, faClose, faCloud, faTrash, faDatabase, faFileArrowUp, faExchange, faQuestion, faSpinner, faBars, faComment, faRocket, faSearch, faShield, faHandSparkles, faScrewdriverWrench, faUpload, faLaptop } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faHexagonNodes, faArrowRight, faArrowLeft, faBolt, faBrain, faCalendarDays, faComments, faClose, faCloud, faTrash, faDatabase, faFileLines, faFileArrowUp, faExchange, faArrowUpRightFromSquare, faFilter, faSliders, faGlobe, faChevronDown, faChevronUp, faQuestion, faInbox, faCircleInfo, faLightbulb, faSpinner, faBars, faComment, faCircleExclamation, faRocket, faSearch, faShield, faHandSparkles, faTag, faScrewdriverWrench, faUpload, faLaptop } from '@fortawesome/free-solid-svg-icons';
 import { Ripple } from 'primeng/ripple';
 import { StyleClass } from 'primeng/styleclass';
 import { RouterLink, Router, ActivatedRoute } from '@angular/router';
@@ -50,23 +50,37 @@ class IconProvider {
     static agent = faHexagonNodes;
     static arrowRight = faArrowRight;
     static back = faArrowLeft;
+    static bolt = faBolt;
     static brain = faBrain;
+    static calendar = faCalendarDays;
     static chat = faComments;
     static close = faClose;
     static cloud = faCloud;
     static delete = faTrash;
     static database = faDatabase;
+    static document = faFileLines;
     static documentAdd = faFileArrowUp;
     static exchange = faExchange;
+    static externalLink = faArrowUpRightFromSquare;
+    static filter = faFilter;
+    static filterSettings = faSliders;
+    static globe = faGlobe;
+    static chevronDown = faChevronDown;
+    static chevronUp = faChevronUp;
     static help = faQuestion;
+    static inbox = faInbox;
+    static info = faCircleInfo;
+    static lightbulb = faLightbulb;
     static loading = faSpinner;
     static menu = faBars;
     static message = faComment;
+    static notFound = faCircleExclamation;
     static robot = faHexagonNodes;
     static rocket = faRocket;
     static search = faSearch;
     static shield = faShield;
     static sparkles = faHandSparkles;
+    static tag = faTag;
     static tools = faScrewdriverWrench;
     static unknown = faQuestion;
     static upload = faUpload;
@@ -75,11 +89,11 @@ class IconProvider {
 
 class SidebarNavigationComponent {
     closeDrawer = new EventEmitter();
-    navigation = input([]);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SidebarNavigationComponent, isStandalone: true, selector: "sftech-sidebar-navigation", inputs: { navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeDrawer: "closeDrawer" }, ngImport: i0, template: "<ul class=\"list-none p-4 m-0\">\r\n    @for (category of navigation(); track category) {\r\n        <li>\r\n            <div\r\n                    pRipple\r\n                    pStyleClass=\"@next\"\r\n                    enterFromClass=\"hidden\"\r\n                    enterActiveClass=\"animate-slidedown\"\r\n                    leaveToClass=\"hidden\"\r\n                    leaveActiveClass=\"animate-slideup\"\r\n                    class=\"py-2 flex items-center justify-between cursor-pointer p-ripple\"\r\n            >\r\n                @if (category.icon) {\r\n                    <fa-icon [icon]=\"category.icon\"></fa-icon>\r\n                }\r\n                <span class=\"font-bold\">{{ category.categoryName }}</span>\r\n            </div>\r\n            <ul class=\"list-none p-0 m-0 overflow-hidden\">\r\n                @for (link of category.links; track link) {\r\n                <li class=\"py-1\">\r\n                    <a [routerLink]=\"[link.routerLink]\" (click)=\"closeDrawer.emit()\" pRipple class=\"flex items-center cursor-pointer px-4 py-2.5 rounded-border hover:bg-primary-50 duration-150 transition-colors p-ripple\">\r\n                        @if (link.icon) {\r\n                            <fa-icon [icon]=\"link.icon\"></fa-icon>\r\n                        }\r\n                        <span class=\"font-medium\">{{ link.name}}</span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </li>\r\n    }\r\n</ul>", styles: [""], dependencies: [{ kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    navigation = input([], ...(ngDevMode ? [{ debugName: "navigation" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SidebarNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: SidebarNavigationComponent, isStandalone: true, selector: "sftech-sidebar-navigation", inputs: { navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeDrawer: "closeDrawer" }, ngImport: i0, template: "<ul class=\"list-none p-4 m-0\">\r\n    @for (category of navigation(); track category) {\r\n        <li>\r\n            <div\r\n                    pRipple\r\n                    pStyleClass=\"@next\"\r\n                    enterFromClass=\"hidden\"\r\n                    enterActiveClass=\"animate-slidedown\"\r\n                    leaveToClass=\"hidden\"\r\n                    leaveActiveClass=\"animate-slideup\"\r\n                    class=\"py-2 flex items-center justify-between cursor-pointer p-ripple\"\r\n            >\r\n                @if (category.icon) {\r\n                    <fa-icon [icon]=\"category.icon\"></fa-icon>\r\n                }\r\n                <span class=\"font-bold\">{{ category.categoryName }}</span>\r\n            </div>\r\n            <ul class=\"list-none p-0 m-0 overflow-hidden\">\r\n                @for (link of category.links; track link) {\r\n                <li class=\"py-1\">\r\n                    <a [routerLink]=\"[link.routerLink]\" (click)=\"closeDrawer.emit()\" pRipple class=\"flex items-center cursor-pointer px-4 py-2.5 rounded-border hover:bg-primary-50 duration-150 transition-colors p-ripple\">\r\n                        @if (link.icon) {\r\n                            <fa-icon [icon]=\"link.icon\"></fa-icon>\r\n                        }\r\n                        <span class=\"font-medium\">{{ link.name}}</span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </li>\r\n    }\r\n</ul>", styles: [""], dependencies: [{ kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SidebarNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sftech-sidebar-navigation', imports: [
                         Ripple,
@@ -89,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], template: "<ul class=\"list-none p-4 m-0\">\r\n    @for (category of navigation(); track category) {\r\n        <li>\r\n            <div\r\n                    pRipple\r\n                    pStyleClass=\"@next\"\r\n                    enterFromClass=\"hidden\"\r\n                    enterActiveClass=\"animate-slidedown\"\r\n                    leaveToClass=\"hidden\"\r\n                    leaveActiveClass=\"animate-slideup\"\r\n                    class=\"py-2 flex items-center justify-between cursor-pointer p-ripple\"\r\n            >\r\n                @if (category.icon) {\r\n                    <fa-icon [icon]=\"category.icon\"></fa-icon>\r\n                }\r\n                <span class=\"font-bold\">{{ category.categoryName }}</span>\r\n            </div>\r\n            <ul class=\"list-none p-0 m-0 overflow-hidden\">\r\n                @for (link of category.links; track link) {\r\n                <li class=\"py-1\">\r\n                    <a [routerLink]=\"[link.routerLink]\" (click)=\"closeDrawer.emit()\" pRipple class=\"flex items-center cursor-pointer px-4 py-2.5 rounded-border hover:bg-primary-50 duration-150 transition-colors p-ripple\">\r\n                        @if (link.icon) {\r\n                            <fa-icon [icon]=\"link.icon\"></fa-icon>\r\n                        }\r\n                        <span class=\"font-medium\">{{ link.name}}</span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </li>\r\n    }\r\n</ul>" }]
         }], propDecorators: { closeDrawer: [{
                 type: Output
-            }] } });
+            }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }] } });
 
 class HeadMainFooterWithCanvasComponent {
     title = 'demo';
@@ -105,10 +119,10 @@ class HeadMainFooterWithCanvasComponent {
     closeCallback(e) {
         this.drawerRef.close(e);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeadMainFooterWithCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: HeadMainFooterWithCanvasComponent, isStandalone: true, selector: "sftech-head-main-footer-with-canvas", inputs: { title: "title", maxWidth: "maxWidth", navigationItems: "navigationItems", hasDrawer: "hasDrawer" }, 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 }], viewQueries: [{ propertyName: "drawerRef", first: true, predicate: ["drawerRef"], descendants: true }], ngImport: i0, template: "<div class=\"h-screen flex flex-col justify-between bg-gradient-to-b from-primary-50/40 via-white to-primary-50/40\">\r\n    <p-toast/>\r\n    <header class=\"shrink-0 p-3 bg-gradient-to-r from-primary-500 to-primary-900 text-white\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"w-full mx-auto\">\r\n            @if (hasDrawer) {\r\n                <div class=\"flex items-center w-full\">\r\n                    <div class=\"flex-shrink\">\r\n                        <p-button (click)=\"drawerVisible = !drawerVisible\">\r\n                            <fa-icon [icon]=\"iconProvider.menu\"></fa-icon>\r\n                        </p-button>\r\n                    </div>\r\n                    <div class=\"ms-2 w-full\">\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=\"flex-grow min-h-0 flex flex-col\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"mx-auto bg-white shadow-xl flex-grow overflow-auto w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"main\"></ng-container>\r\n        </div>\r\n    </main>\r\n\r\n    <footer class=\"shrink-0 p-3 bg-gradient-to-r from-primary-900 to-primary-500 text-white text-sm\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"w-full mx-auto\">\r\n            <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n        </div>\r\n    </footer>\r\n</div>\r\n\r\n@if (hasDrawer) {\r\n    <p-drawer #drawerRef [(visible)]=\"drawerVisible\">\r\n        <ng-template #headless>\r\n            <div class=\"flex flex-col h-full bg-white shadow-lg\">\r\n                <div class=\"flex items-center justify-between px-4 pt-5 pb-5 border-b border-gray-200\">\r\n                    <span class=\"font-semibold text-2xl text-primary\">Menu</span>\r\n                    <span>\r\n                        <p-button type=\"button\" (click)=\"drawerVisible = false\" rounded=\"true\" outlined=\"true\"\r\n                                  styleClass=\"h-9 w-9\"><fa-icon [icon]=\"iconProvider.close\"></fa-icon></p-button>\r\n                    </span>\r\n                </div>\r\n                <div class=\"overflow-y-auto px-4 mt-4\">\r\n                    <sftech-sidebar-navigation [navigation]=\"navigationItems\" (closeDrawer)=\"drawerVisible = false\"></sftech-sidebar-navigation>\r\n                </div>\r\n            </div>\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"] }, { kind: "component", type: SidebarNavigationComponent, selector: "sftech-sidebar-navigation", inputs: ["navigation"], outputs: ["closeDrawer"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HeadMainFooterWithCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: HeadMainFooterWithCanvasComponent, isStandalone: true, selector: "sftech-head-main-footer-with-canvas", inputs: { title: "title", maxWidth: "maxWidth", navigationItems: "navigationItems", hasDrawer: "hasDrawer" }, 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 }], viewQueries: [{ propertyName: "drawerRef", first: true, predicate: ["drawerRef"], descendants: true }], ngImport: i0, template: "<div class=\"h-screen flex flex-col justify-between bg-gradient-to-b from-primary-50/40 via-white to-primary-50/40\">\r\n    <p-toast/>\r\n    <header class=\"shrink-0 p-3 bg-gradient-to-r from-primary-500 to-primary-900 text-white\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"w-full mx-auto\">\r\n            @if (hasDrawer) {\r\n                <div class=\"flex items-center w-full\">\r\n                    <div class=\"flex-shrink\">\r\n                        <p-button (click)=\"drawerVisible = !drawerVisible\">\r\n                            <fa-icon [icon]=\"iconProvider.menu\"></fa-icon>\r\n                        </p-button>\r\n                    </div>\r\n                    <div class=\"ms-2 w-full\">\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=\"flex-grow min-h-0 flex flex-col\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"mx-auto bg-white shadow-xl flex-grow overflow-auto w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"main\"></ng-container>\r\n        </div>\r\n    </main>\r\n\r\n    <footer class=\"shrink-0 p-3 bg-gradient-to-r from-primary-900 to-primary-500 text-white text-sm\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"w-full mx-auto\">\r\n            <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n        </div>\r\n    </footer>\r\n</div>\r\n\r\n@if (hasDrawer) {\r\n    <p-drawer #drawerRef [(visible)]=\"drawerVisible\">\r\n        <ng-template #headless>\r\n            <div class=\"flex flex-col h-full bg-white shadow-lg\">\r\n                <div class=\"flex items-center justify-between px-4 pt-5 pb-5 border-b border-gray-200\">\r\n                    <span class=\"font-semibold text-2xl text-primary\">Menu</span>\r\n                    <span>\r\n                        <p-button type=\"button\" (click)=\"drawerVisible = false\" rounded=\"true\" outlined=\"true\"\r\n                                  styleClass=\"h-9 w-9\"><fa-icon [icon]=\"iconProvider.close\"></fa-icon></p-button>\r\n                    </span>\r\n                </div>\r\n                <div class=\"overflow-y-auto px-4 mt-4\">\r\n                    <sftech-sidebar-navigation [navigation]=\"navigationItems\" (closeDrawer)=\"drawerVisible = false\"></sftech-sidebar-navigation>\r\n                </div>\r\n            </div>\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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], 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"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: SidebarNavigationComponent, selector: "sftech-sidebar-navigation", inputs: ["navigation"], outputs: ["closeDrawer"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeadMainFooterWithCanvasComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HeadMainFooterWithCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sftech-head-main-footer-with-canvas', imports: [NgTemplateOutlet, Button, Drawer, FaIconComponent, Toast, SidebarNavigationComponent], template: "<div class=\"h-screen flex flex-col justify-between bg-gradient-to-b from-primary-50/40 via-white to-primary-50/40\">\r\n    <p-toast/>\r\n    <header class=\"shrink-0 p-3 bg-gradient-to-r from-primary-500 to-primary-900 text-white\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"w-full mx-auto\">\r\n            @if (hasDrawer) {\r\n                <div class=\"flex items-center w-full\">\r\n                    <div class=\"flex-shrink\">\r\n                        <p-button (click)=\"drawerVisible = !drawerVisible\">\r\n                            <fa-icon [icon]=\"iconProvider.menu\"></fa-icon>\r\n                        </p-button>\r\n                    </div>\r\n                    <div class=\"ms-2 w-full\">\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=\"flex-grow min-h-0 flex flex-col\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"mx-auto bg-white shadow-xl flex-grow overflow-auto w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"main\"></ng-container>\r\n        </div>\r\n    </main>\r\n\r\n    <footer class=\"shrink-0 p-3 bg-gradient-to-r from-primary-900 to-primary-500 text-white text-sm\">\r\n        <div [style.max-width]=\"maxWidth\" class=\"w-full mx-auto\">\r\n            <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n        </div>\r\n    </footer>\r\n</div>\r\n\r\n@if (hasDrawer) {\r\n    <p-drawer #drawerRef [(visible)]=\"drawerVisible\">\r\n        <ng-template #headless>\r\n            <div class=\"flex flex-col h-full bg-white shadow-lg\">\r\n                <div class=\"flex items-center justify-between px-4 pt-5 pb-5 border-b border-gray-200\">\r\n                    <span class=\"font-semibold text-2xl text-primary\">Menu</span>\r\n                    <span>\r\n                        <p-button type=\"button\" (click)=\"drawerVisible = false\" rounded=\"true\" outlined=\"true\"\r\n                                  styleClass=\"h-9 w-9\"><fa-icon [icon]=\"iconProvider.close\"></fa-icon></p-button>\r\n                    </span>\r\n                </div>\r\n                <div class=\"overflow-y-auto px-4 mt-4\">\r\n                    <sftech-sidebar-navigation [navigation]=\"navigationItems\" (closeDrawer)=\"drawerVisible = false\"></sftech-sidebar-navigation>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </p-drawer>\r\n}" }]
         }], propDecorators: { title: [{
@@ -134,10 +148,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class BaseDialogComponent {
-    hasHeader = input(true);
-    hasFooter = input(true);
-    showButtons = input(true);
-    headerText = input(undefined);
+    hasHeader = input(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
+    hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
+    showButtons = input(true, ...(ngDevMode ? [{ debugName: "showButtons" }] : []));
+    headerText = input(undefined, ...(ngDevMode ? [{ debugName: "headerText" }] : []));
     closed = new EventEmitter();
     header = null;
     body = null;
@@ -149,13 +163,13 @@ class BaseDialogComponent {
         this.ref.close(retVal);
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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<div class=\"flex flex-col\">\r\n    <div id=\"dialog-body\" class=\"flex-grow overflow-auto\">\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    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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<div class=\"flex flex-col\">\r\n    <div id=\"dialog-body\" class=\"flex-grow overflow-auto\">\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    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sftech-base-dialog', imports: [NgTemplateOutlet], 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<div class=\"flex flex-col\">\r\n    <div id=\"dialog-body\" class=\"flex-grow overflow-auto\">\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    }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { closed: [{
+        }], ctorParameters: () => [], propDecorators: { hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], headerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerText", required: false }] }], closed: [{
                 type: Output
             }], header: [{
                 type: ContentChild,
@@ -279,19 +293,35 @@ var FilterConcatenation;
 })(FilterConcatenation || (FilterConcatenation = {}));
 class OdataFilterCollection {
     andFilters = [];
-    // public orFilters: OdataFilter[] = [];
+    /**
+     * Raw filter strings that are added directly to the OData query.
+     * Useful for complex filters that can't be expressed with OdataFilter (e.g., OR conditions).
+     */
+    rawFilters = [];
     toGetParameter() {
         let odataString = '$filter=';
         const filters = this.andFilters.filter((x) => this._isFilterValid(x));
-        if (filters.length === 0) {
+        const allFilterStrings = [
+            ...filters.map((x) => x.toGetParameter()),
+            ...this.rawFilters.filter((x) => x.trim().length > 0),
+        ];
+        if (allFilterStrings.length === 0) {
             return '';
         }
-        odataString += filters.map((x) => x.toGetParameter()).join(FilterConcatenation.AND);
+        odataString += allFilterStrings.join(FilterConcatenation.AND);
         return odataString;
     }
     addAnd(andFilter) {
         this.andFilters.push(andFilter);
     }
+    /**
+     * Adds a raw OData filter string.
+     * Use this for complex filters like OR conditions.
+     * Example: "((publishedAt ne null and publishedAt ge '2024-01-01') or (publishedAt eq null and createdAt ge '2024-01-01'))"
+     */
+    addRaw(rawFilter) {
+        this.rawFilters.push(rawFilter);
+    }
     remove(field) {
         const idx = this.andFilters.findIndex((f) => f.field === field);
         if (idx >= 0) {
@@ -299,7 +329,7 @@ class OdataFilterCollection {
         }
     }
     hasValidFilters() {
-        return this.andFilters.filter((f) => this._isFilterValid(f)).length > 0;
+        return this.andFilters.filter((f) => this._isFilterValid(f)).length > 0 || this.rawFilters.length > 0;
     }
     _isFilterValid(filter) {
         return !(!filter.type || !filter.field || !filter.operator);
@@ -314,6 +344,12 @@ var ESortDirection;
 class ODataOrder {
     column = 'id';
     direction = ESortDirection.ASC;
+    static create(column, direction) {
+        const order = new ODataOrder();
+        order.column = column;
+        order.direction = direction;
+        return order;
+    }
     toGetParameter() {
         return `$orderby=${this.column} ${this.direction}`;
     }
@@ -369,13 +405,24 @@ class OdataFilter {
         this.operator = operator;
         this.type = type;
     }
+    /**
+     * Escapes a string value for safe use in OData queries.
+     * Prevents OData injection attacks by escaping single quotes.
+     */
+    escapeODataString(value) {
+        if (typeof value !== 'string') {
+            return String(value);
+        }
+        // OData escaping: single quotes are escaped by doubling them
+        return value.replace(/'/g, "''");
+    }
     toGetParameter() {
         if (!this.field || !this.operator || !this.type || !this.value) {
             return '';
         }
         switch (this.operator) {
             case EFilterOperator.CONTAINS:
-                return `contains(${this.field},'${this.value}')`;
+                return `contains(${this.field},'${this.escapeODataString(String(this.value))}')`;
             default:
                 return `${this.field} ${this._getODataOperator()} ${this._getTypeDependentValue()}`;
         }
@@ -397,11 +444,10 @@ class OdataFilter {
     }
     _getTypeDependentValue() {
         if (this.type === EFilterTypes.STRING) {
-            return `'${this.value}'`;
+            return `'${this.escapeODataString(String(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(':');
@@ -432,12 +478,13 @@ class OdataFilter {
 }
 
 class BaseListComponent {
-    odata = model(new OData());
-    showPageTitle = input(true);
-    canEdit = input(true);
-    openDisplayAsModal = input(true);
+    odata = model(new OData(), ...(ngDevMode ? [{ debugName: "odata" }] : []));
+    showPageTitle = input(true, ...(ngDevMode ? [{ debugName: "showPageTitle" }] : []));
+    canEdit = input(true, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    openDisplayAsModal = input(true, ...(ngDevMode ? [{ debugName: "openDisplayAsModal" }] : []));
     modalWidth = '40%';
-    data = signal(undefined);
+    data = signal(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     router = inject(Router);
     modalService = inject(DialogService);
     detailModalHeaderText = 'Details';
@@ -447,16 +494,29 @@ class BaseListComponent {
         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.updateOdata({ pagination: $event });
         this._loadData();
     }
+    updateOdata(changes) {
+        this.odata.update((current) => {
+            const newOdata = new OData();
+            newOdata.filter = changes.filter ?? current.filter;
+            newOdata.order = changes.order ?? current.order;
+            newOdata.expands = changes.expands ?? current.expands;
+            if (changes.resetPaginationToFirstPage) {
+                const newPag = new ODataPagination();
+                newPag.pageSize = current.pagination.pageSize;
+                newPag.totalPages = current.pagination.totalPages;
+                newPag.totalElements = current.pagination.totalElements;
+                newPag.page = 1;
+                newOdata.pagination = newPag;
+            }
+            else {
+                newOdata.pagination = changes.pagination ?? current.pagination;
+            }
+            return newOdata;
+        });
+    }
     openDisplay(id) {
         if (this.openDisplayAsModal()) {
             const modalRef = this.modalService.open(this._modalComponent, {
@@ -469,7 +529,7 @@ class BaseListComponent {
                 closable: true,
                 width: this.modalWidth,
             });
-            modalRef.onClose.subscribe((result) => {
+            modalRef?.onClose.subscribe((result) => {
                 if (result) {
                     this.data.update((data) => {
                         const index = data?.findIndex((item) => item.id === result.id);
@@ -488,9 +548,10 @@ class BaseListComponent {
         this.router.navigate([this._route, id]);
     }
     _loadData() {
+        this.loading.set(true);
         this._repo.odata(this.odata()).subscribe((response) => {
+            this.loading.set(false);
             if (response instanceof MappedApiError) {
-                console.error(response);
                 return;
             }
             this.data.set(response.data.items);
@@ -507,13 +568,13 @@ class BaseListComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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.14", ngImport: i0, type: BaseListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sftech-pages-base-list', standalone: true, imports: [], template: '<div></div>' }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { odata: [{ type: i0.Input, args: [{ isSignal: true, alias: "odata", required: false }] }, { type: i0.Output, args: ["odataChange"] }], showPageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageTitle", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], openDisplayAsModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDisplayAsModal", required: false }] }] } });
 
 class BaseDisplayComponent extends BaseDialogComponent {
     id;
@@ -521,8 +582,8 @@ class BaseDisplayComponent extends BaseDialogComponent {
     canEdit = true;
     redirectAfterSave = true;
     form;
-    model = signal(undefined);
-    isNew = signal(true);
+    model = signal(undefined, ...(ngDevMode ? [{ debugName: "model" }] : []));
+    isNew = signal(true, ...(ngDevMode ? [{ debugName: "isNew" }] : []));
     router = inject(Router);
     activatedRoute = inject(ActivatedRoute);
     toastr = inject(MessageService);
@@ -627,10 +688,10 @@ class BaseDisplayComponent extends BaseDialogComponent {
         mappedApiResponse.data = this.model();
         return of(mappedApiResponse);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BaseDisplayComponent, isStandalone: true, selector: "lib-core-base-display", inputs: { id: "id", openedAsModal: "openedAsModal", canEdit: "canEdit" }, usesInheritance: true, ngImport: i0, template: '<div></div>', isInline: true, styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: BaseDisplayComponent, isStandalone: true, selector: "lib-core-base-display", inputs: { id: "id", openedAsModal: "openedAsModal", canEdit: "canEdit" }, usesInheritance: true, ngImport: i0, template: '<div></div>', isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-core-base-display', standalone: true, imports: [], template: '<div></div>' }]
         }], ctorParameters: () => [], propDecorators: { id: [{
@@ -644,24 +705,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class BaseDisplayModalComponent {
     id;
     canEdit = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseDisplayModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BaseDisplayModalComponent, isStandalone: true, selector: "lib-prompt-display-modal", ngImport: i0, template: '', isInline: true, styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDisplayModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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.14", ngImport: i0, type: BaseDisplayModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDisplayModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-prompt-display-modal', standalone: true, imports: [], template: '' }]
         }] });
 
 class FormErrorDisplayComponent {
-    control = input(undefined);
-    label = input(undefined);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FormErrorDisplayComponent, isStandalone: true, selector: "sftech-form-error-display", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (control()?.errors) {\r\n    <div class=\"p-1 text-xs text-red-500\">\r\n        @if (control()?.errors?.['required']) {\r\n            <div>{{ label() }} ist ein Pflichtfeld.</div>\r\n        }\r\n    </div>\r\n}\r\n", styles: [""] });
+    control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FormErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FormErrorDisplayComponent, isStandalone: true, selector: "sftech-form-error-display", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (control()?.errors) {\r\n    <div class=\"p-1 text-xs text-red-500\">\r\n        @if (control()?.errors?.['required']) {\r\n            <div>{{ label() }} ist ein Pflichtfeld.</div>\r\n        }\r\n    </div>\r\n}\r\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormErrorDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FormErrorDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sftech-form-error-display', standalone: true, imports: [], template: "@if (control()?.errors) {\r\n    <div class=\"p-1 text-xs text-red-500\">\r\n        @if (control()?.errors?.['required']) {\r\n            <div>{{ label() }} ist ein Pflichtfeld.</div>\r\n        }\r\n    </div>\r\n}\r\n" }]
-        }] });
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 class PaginatorComponent {
     pagination;
@@ -707,16 +768,18 @@ class PaginatorComponent {
     //     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.14", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] }] });
+        // Create new instance instead of mutating
+        const newPagination = new ODataPagination();
+        newPagination.totalPages = this.pagination.totalPages;
+        newPagination.totalElements = this.pagination.totalElements;
+        newPagination.page = event.page !== undefined ? event.page + 1 : this.pagination.page;
+        newPagination.pageSize = event.rows ?? this.pagination.pageSize;
+        this.odataChanged.emit(newPagination);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.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: [{
@@ -816,12 +879,12 @@ class BaseDbApiService {
 }
 
 class NotPermittedComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotPermittedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NotPermittedComponent, isStandalone: true, selector: "sftech-not-permitted", ngImport: i0, template: "<div class=\"min-h-screen flex flex-col items-center justify-center bg-gray-100\">\n    <div class=\"bg-white shadow-md rounded-lg p-6 max-w-lg text-center border border-gray-200\">\n        <h1 class=\"text-3xl font-semibold text-red-600 mb-4\">Zugriff verweigert</h1>\n        <p class=\"text-lg text-gray-700 mb-6\">\n            Du bist nicht berechtigt, auf diese Seite zuzugreifen.\n            Bitte \u00FCberpr\u00FCfe deine Berechtigungen oder wende dich an den Administrator.\n        </p>\n        <a\n                class=\"inline-block bg-blue-600 text-white font-medium px-6 py-2 rounded-md hover:bg-blue-700 transition\"\n                href=\"/apps/frontend/public\"\n        >\n            Zur Startseite\n        </a>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NotPermittedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: NotPermittedComponent, isStandalone: true, selector: "sftech-not-permitted", ngImport: i0, template: "<div class=\"min-h-screen flex flex-col items-center justify-center bg-gray-100\">\n    <div class=\"bg-white shadow-md rounded-lg p-6 max-w-lg text-center border border-gray-200\">\n        <h1 class=\"text-3xl font-semibold text-red-600 mb-4\">Zugriff verweigert</h1>\n        <p class=\"text-lg text-gray-700 mb-6\">\n            Du bist nicht berechtigt, auf diese Seite zuzugreifen.\n            Bitte \u00FCberpr\u00FCfe deine Berechtigungen oder wende dich an den Administrator.\n        </p>\n        <a\n                class=\"inline-block bg-blue-600 text-white font-medium px-6 py-2 rounded-md hover:bg-blue-700 transition\"\n                href=\"/apps/frontend/public\"\n        >\n            Zur Startseite\n        </a>\n    </div>\n</div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotPermittedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NotPermittedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sftech-not-permitted', imports: [CommonModule], template: "<div class=\"min-h-screen flex flex-col items-center justify-center bg-gray-100\">\n    <div class=\"bg-white shadow-md rounded-lg p-6 max-w-lg text-center border border-gray-200\">\n        <h1 class=\"text-3xl font-semibold text-red-600 mb-4\">Zugriff verweigert</h1>\n        <p class=\"text-lg text-gray-700 mb-6\">\n            Du bist nicht berechtigt, auf diese Seite zuzugreifen.\n            Bitte \u00FCberpr\u00FCfe deine Berechtigungen oder wende dich an den Administrator.\n        </p>\n        <a\n                class=\"inline-block bg-blue-600 text-white font-medium px-6 py-2 rounded-md hover:bg-blue-700 transition\"\n                href=\"/apps/frontend/public\"\n        >\n            Zur Startseite\n        </a>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'sftech-not-permitted', imports: [], template: "<div class=\"min-h-screen flex flex-col items-center justify-center bg-gray-100\">\n    <div class=\"bg-white shadow-md rounded-lg p-6 max-w-lg text-center border border-gray-200\">\n        <h1 class=\"text-3xl font-semibold text-red-600 mb-4\">Zugriff verweigert</h1>\n        <p class=\"text-lg text-gray-700 mb-6\">\n            Du bist nicht berechtigt, auf diese Seite zuzugreifen.\n            Bitte \u00FCberpr\u00FCfe deine Berechtigungen oder wende dich an den Administrator.\n        </p>\n        <a\n                class=\"inline-block bg-blue-600 text-white font-medium px-6 py-2 rounded-md hover:bg-blue-700 transition\"\n                href=\"/apps/frontend/public\"\n        >\n            Zur Startseite\n        </a>\n    </div>\n</div>\n" }]
         }] });
 
 /**