ichec-angular-core 1.0.0 → 1.0.2

package/fesm2022/ichec-angular-core.mjs

@@ -7,10 +7,11 @@ import * as i1$2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { Location, NgTemplateOutlet, TitleCasePipe, DatePipe, NgStyle } from '@angular/common';
 import * as i1$3 from '@angular/router';
-import { ActivatedRoute, RouterModule, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, UrlSerializer, createUrlTreeFromSnapshot, RouterModule, RouterOutlet } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import * as i1 from '@angular/material/table';
 import { MatTable, MatTableModule } from '@angular/material/table';
 import * as i2$1 from '@angular/material/form-field';
@@ -207,6 +208,7 @@ const REST_SERVICE_CONFIG = new InjectionToken("Config for the rest service");
 class RestService {
     manifest = new BehaviorSubject(null);
     loggedInUser = new BehaviorSubject(null);
+    loginFailed = new BehaviorSubject(false);
     _url = "";
     userQuery = "user";
     config = inject(REST_SERVICE_CONFIG);
@@ -442,6 +444,7 @@ class UserService extends ItemService {
     _selfFetchFailed(error) {
         if (error.status == 401) {
             console.log("No valid user session found:", error);
+            this.loginFailed.next(true);
             return of(null);
         }
         else {
@@ -867,19 +870,37 @@ class DetailView {
     userService = inject(UserService);
     itemService;
     location = inject(Location);
+    urlSerializer = inject(UrlSerializer);
     deleteDialog = inject(MatDialog);
+    requiresLogin = false;
     constructor(itemService) {
         this.itemService = itemService;
     }
-    onInit(embedded = false) {
+    onInit(embedded = false, requiresLogin = false) {
+        this.requiresLogin = requiresLogin;
         if (embedded) {
             return;
         }
         const id = Number(this.route.snapshot.paramMap.get('id'));
         if (id) {
-            this._getItem(id);
+            if (requiresLogin) {
+                this.userService.loggedInUser.subscribe(user => { if (user) {
+                    this._getItem(id);
+                } });
+                this.userService.loginFailed.subscribe((failed) => { if (failed) {
+                    this.onLoginFailed();
+                } });
+            }
+            else {
+                this._getItem(id);
+            }
         }
     }
+    onLoginFailed() {
+        const next = this.urlSerializer.serialize(createUrlTreeFromSnapshot(this.route.snapshot, ['.']));
+        console.log("Tried to access detail needing login - rerouting: ", next);
+        this.userService.login(next);
+    }
     onSelection(id) {
         if (id) {
             this._getItem(id);
@@ -947,6 +968,7 @@ class EditView {
     _userService = inject(UserService);
     form;
     itemService;
+    snackBar = inject(MatSnackBar);
     uploadedFiles = [];
     constructor(itemService, form) {
         this.itemService = itemService;
@@ -1006,14 +1028,28 @@ class EditView {
     }
     postItem() {
         this.submitting.set(true);
-        this.itemService.postItem(this.createItem()).subscribe(item => this.saveFiles(item));
+        this.itemService.postItem(this.createItem()).subscribe({
+            next: (item) => this.saveFiles(item),
+            error: (e) => this.onPostError(e)
+        });
+    }
+    onPostError(e) {
+        console.log(e);
     }
     putItem(item) {
         this.submitting.set(true);
-        this.itemService.putItem(this.updateItem(item)).subscribe(item => this.saveFiles(item));
+        this.itemService.putItem(this.updateItem(item)).subscribe({
+            next: (item) => this.saveFiles(item),
+            error: (e) => this.onPutError(e)
+        });
+    }
+    onPutError(e) {
+        console.log(e);
     }
     saveFiles(item) {
+        this.item.set(item);
         const next_file = this.getNextFileForUpload();
+        console.log(next_file, this.form);
         if (next_file) {
             this.saveFile(item, next_file);
         }
@@ -1022,14 +1058,33 @@ class EditView {
         }
     }
     saveFile(item, record) {
-        this.uploadedFiles.push(record.name);
         if (record.file) {
-            this.itemService.putFile(item.id, record.name, record.file).subscribe(item => this.saveFiles(item));
+            this.itemService.putFile(item.id, record.name, record.file).subscribe({
+                next: (item) => { this.uploadedFiles.push(record.name); this.saveFiles(item); },
+                error: (e) => this.onPutFileError(e)
+            });
         }
         else {
+            this.uploadedFiles.push(record.name);
             this.saveFiles(item);
         }
     }
+    onPutFileError(e) {
+        const item = this.item();
+        if (item) {
+            // Since the item is already created on the backend 
+            // switch to 'edit mode' for a file resubmit attempt
+            this.form.setValue(item);
+            this.createMode.set(false);
+        }
+        console.log(e);
+        this.onPutFileErrorSnackbar(e);
+    }
+    onPutFileErrorSnackbar(_e) {
+        this.snackBar.open("File upload failed - please try submitting again", "Dismiss", { verticalPosition: "bottom",
+            duration: 5000
+        });
+    }
     getNextFileForUpload() {
         for (const key of this.fileKeys) {
             if (!this.uploadedFiles.includes(key)) {
@@ -1067,6 +1122,12 @@ class EditView {
         this.submitting.set(false);
         this.uploadedFiles = [];
         this.item.set(item);
+        this.postItemUpdated();
+    }
+    postItemUpdated() {
+        this.snackBar.open(this.itemService.typename + " updated ok", "Dismiss", { verticalPosition: "top",
+            duration: 5000
+        });
         this.goBack();
     }
     onOptions(options) {
@@ -2309,6 +2370,7 @@ class ListViewComponent {
     itemHeight = input(100, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
     itemWidth = input(300, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    canCreateForceOff = input(false, ...(ngDevMode ? [{ debugName: "canCreateForceOff" }] : []));
     noSelfItemsMessage = input(...(ngDevMode ? [undefined, { debugName: "noSelfItemsMessage" }] : []));
     noItemsCanCreateMessage = input(...(ngDevMode ? [undefined, { debugName: "noItemsCanCreateMessage" }] : []));
     noItemsMessage = input(...(ngDevMode ? [undefined, { debugName: "noItemsMessage" }] : []));
@@ -2351,7 +2413,9 @@ class ListViewComponent {
     canCreate() {
         const item_service = this.itemService();
         if (item_service) {
-            return item_service.canCreate();
+            if (item_service.canCreate()) {
+                return !this.canCreateForceOff();
+            }
         }
         return false;
     }
@@ -2407,7 +2471,7 @@ class ListViewComponent {
         return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: true, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "scrollView", first: true, predicate: ListScrollViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "embedded", "searchForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, canCreateForceOff: { classPropertyName: "canCreateForceOff", publicName: "canCreateForceOff", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: true, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "scrollView", first: true, predicate: ListScrollViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "embedded", "searchForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -2425,7 +2489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatButtonModule,
                         ListHeaderComponent,
                         NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"] }]
-        }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], searchFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFields", required: true }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], scrollView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListScrollViewComponent), { isSignal: true }] }] } });
+        }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], canCreateForceOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateForceOff", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], searchFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFields", required: true }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], scrollView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListScrollViewComponent), { isSignal: true }] }] } });
 
 class TopBarComponent {
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
@@ -2802,7 +2866,7 @@ class UserComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: UserComponent, isStandalone: true, selector: "lib-user", viewQueries: [{ propertyName: "detailView", first: true, predicate: UserDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [searchFields]=\"searchFields\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"62\"\n  [itemWidth]=\"400\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item", "even", "selected"] }, { kind: "component", type: UserDetailComponent, selector: "lib-user-detail", inputs: ["showBack"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: UserComponent, isStandalone: true, selector: "lib-user", viewQueries: [{ propertyName: "detailView", first: true, predicate: UserDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [searchFields]=\"searchFields\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"62\"\n  [itemWidth]=\"400\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "canCreateForceOff", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item", "even", "selected"] }, { kind: "component", type: UserDetailComponent, selector: "lib-user-detail", inputs: ["showBack"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
@@ -2906,7 +2970,7 @@ class GroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: GroupComponent, isStandalone: true, selector: "lib-group", viewQueries: [{ propertyName: "detailView", first: true, predicate: GroupDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: GroupDetailComponent, selector: "lib-group-detail", inputs: ["showBack"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$2.MatListItemTitle, selector: "[matListItemTitle]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: GroupComponent, isStandalone: true, selector: "lib-group", viewQueries: [{ propertyName: "detailView", first: true, predicate: GroupDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "canCreateForceOff", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: GroupDetailComponent, selector: "lib-group-detail", inputs: ["showBack"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$2.MatListItemTitle, selector: "[matListItemTitle]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, decorators: [{
             type: Component,
@@ -2997,7 +3061,7 @@ class OrganizationDetailComponent extends DetailView {
         super(inject(OrganizationService));
     }
     ngOnInit() {
-        this.onInit();
+        this.onInit(!this.showBack(), true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", inputs: { showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if(showBack())\n{\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"\n      (deleteClicked)=\"onDeleteClicked()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      <p class=\"text-area-view\">{{item.description}}</p>\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <h3>Website</h3>\n    <div class=\"item-field\">\n      <a href=\"{{item.website}}\" target=\"_blank\" rel=\"noopener noreferrer\">{{item.website}}</a>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.text-area-view{text-align:justify;text-justify:inter-word;max-width:600px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
@@ -3042,7 +3106,7 @@ class OrganizationComponent {
         this.detailView()?.onSelection(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "detailView", first: true, predicate: OrganizationDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"82\"\n  [itemWidth]=\"400\"\n  [embeddedMode]=\"embedded()\"\n  [searchFields]=\"searchFields()\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n          @if(item.address.region && item.address.country_name){\n          <p matListItemLine style=\"margin-bottom: 0px; margin-top: 0px\">\n            {{item.address.region}}, {{item.address.country_name}}\n          </p>\n        }\n      </div>\n  </div>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-organization-detail [showBack]='false'></lib-organization-detail>\n  </ng-template>\n\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}.container{height:80px;padding-left:5px;padding-top:5px;border-radius:12px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: OrganizationDetailComponent, selector: "lib-organization-detail", inputs: ["showBack"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "detailView", first: true, predicate: OrganizationDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"82\"\n  [itemWidth]=\"400\"\n  [embeddedMode]=\"embedded()\"\n  [searchFields]=\"searchFields()\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n          @if(item.address.region && item.address.country_name){\n          <p matListItemLine style=\"margin-bottom: 0px; margin-top: 0px\">\n            {{item.address.region}}, {{item.address.country_name}}\n          </p>\n        }\n      </div>\n  </div>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-organization-detail [showBack]='false'></lib-organization-detail>\n  </ng-template>\n\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}.container{height:80px;padding-left:5px;padding-top:5px;border-radius:12px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "canCreateForceOff", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: OrganizationDetailComponent, selector: "lib-organization-detail", inputs: ["showBack"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,