ichec-angular-core 0.1.8 → 0.1.10

package/fesm2022/ichec-angular-core.mjs

@@ -237,6 +237,15 @@ class RestService {
         });
         return this._http.put(this.getBaseUrl() + id + "/" + field + "/upload", file, { headers: headers }).pipe(mergeMap(_ => this.getItem(id)), catchError(this.handleError));
     }
+    putFileStandalone(url, file) {
+        const token = "Token " + localStorage.getItem("api_token");
+        const headers = new HttpHeaders({
+            'Authorization': token,
+            'Accept': 'application/json',
+            'Content-Disposition': 'attachment; filename=' + file.name
+        });
+        return this._http.put(this._endpoint_url + "/api/" + url + "/upload", file, { headers: headers }).pipe(map(_response => { return void (0); }), catchError(this.handleError));
+    }
     patchItem(item, include_keys, exclude_keys) {
         // eslint-disable-next-line  @typescript-eslint/no-explicit-any
         function replacer(key, value) {
@@ -575,8 +584,11 @@ class FormService {
         return files;
     }
     updateFieldValue(control, item) {
-        item.value = control.value.value;
-        return item;
+        return { value: control.value.value,
+            field: item.field.id,
+            id: item.id,
+            asset: item.asset
+        };
     }
     getType(key, input) {
         const field_id = parseInt(key);
@@ -589,9 +601,9 @@ class FormService {
         }
         return "";
     }
-    getValue(key, form) {
+    getValue(key, item) {
         const field = parseInt(key);
-        for (const value of form.values) {
+        for (const value of item.values) {
             if (value.field.id == field) {
                 return value;
             }
@@ -599,13 +611,15 @@ class FormService {
         return null;
     }
     updateItem(form, item) {
+        const updated = { id: item.id, values: [] };
         Object.keys(form.controls).forEach(key => {
             const value = this.getValue(key, item);
             if (value) {
-                this.updateFieldValue(form.controls[key], value);
+                const updated_value = this.updateFieldValue(form.controls[key], value);
+                updated.values.push(updated_value);
             }
         });
-        return item;
+        return updated;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormService, providedIn: 'root' });
@@ -1942,7 +1956,7 @@ class ListViewComponent {
         return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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 }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", 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 }, defaultQueries: { classPropertyName: "defaultQueries", publicName: "defaultQueries", isSignal: true, isRequired: false, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\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 [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\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: ["searchTerm", "pageSize", "dataSource", "listItemTemplate"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$7.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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 }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", 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 }, defaultQueries: { classPropertyName: "defaultQueries", publicName: "defaultQueries", isSignal: true, isRequired: false, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <div class=\"header\">\n\n    @if(embeddedMode())\n    {\n      @if(dataSource && !dataSource.sourceIsEmpty())\n      {\n        <h1 class=\"title\">{{ title() | titlecase }}</h1>\n      }\n    }\n    @else {\n      <h1 class=\"title\">{{ title() | titlecase }}</h1>\n    }\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\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 [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\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: ["searchTerm", "pageSize", "dataSource", "listItemTemplate"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$7.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -1959,7 +1973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatInputModule,
                         MatTooltipModule,
                         MatButtonModule,
-                        SearchBarComponent], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\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 [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"] }]
+                        SearchBarComponent], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <div class=\"header\">\n\n    @if(embeddedMode())\n    {\n      @if(dataSource && !dataSource.sourceIsEmpty())\n      {\n        <h1 class=\"title\">{{ title() | titlecase }}</h1>\n      }\n    }\n    @else {\n      <h1 class=\"title\">{{ title() | titlecase }}</h1>\n    }\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\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 [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"] }]
         }] });
 
 class DetailHeaderComponent {