ichec-angular-core 0.3.5 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import { BehaviorSubject, map, catchError, mergeMap, throwError, tap, of, debounceTime, distinctUntilChanged, merge, Subscription, finalize } from 'rxjs';
2
2
  import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
3
3
  import * as i0 from '@angular/core';
4
- import { InjectionToken, inject, signal, DOCUMENT, Injectable, Component, computed, input, output, viewChild } from '@angular/core';
4
+ import { InjectionToken, inject, DOCUMENT, signal, Injectable, Component, computed, input, output, viewChild } from '@angular/core';
5
5
  import { CookieService } from 'ngx-cookie-service';
6
6
  import * as i1$2 from '@angular/forms';
7
7
  import { FormControl, Validators, FormGroup, ReactiveFormsModule, FormBuilder } from '@angular/forms';
@@ -183,9 +183,11 @@ class FileRecord {
183
183
  const REST_SERVICE_CONFIG = new InjectionToken("Config for the rest service");
184
184
  class RestService {
185
185
  manifest = new BehaviorSubject(null);
186
+ loggedInUser = new BehaviorSubject(null);
186
187
  _url = "";
187
188
  userQuery = "user";
188
189
  config = inject(REST_SERVICE_CONFIG);
190
+ document = inject(DOCUMENT);
189
191
  _http = inject(HttpClient);
190
192
  cookieService = inject(CookieService);
191
193
  deleteItem(id) {
@@ -223,16 +225,16 @@ class RestService {
223
225
  if (query.filter) {
224
226
  params.set('search', query.filter);
225
227
  }
226
- return this._http.get(this.baseUrl, this.getRequestBase("json", new HttpParams({ fromObject: Object.fromEntries(params) }))).pipe(catchError(this.handleError));
228
+ return this._http.get(this.baseUrl, this.getRequestBase("json", new HttpParams({ fromObject: Object.fromEntries(params) }), "", true)).pipe(catchError(this.handleError));
227
229
  }
228
230
  getItem(id) {
229
- return this._http.get(this.baseUrl + id + "/", this.getRequestBase()).pipe(catchError(this.handleError));
231
+ return this._http.get(this.baseUrl + id + "/", this.getRequestBase("json", new HttpParams(), "", true)).pipe(catchError(this.handleError));
230
232
  }
231
233
  getUrl(url) {
232
- return this._http.get(url, this.getRequestBase()).pipe(catchError(this.handleError));
234
+ return this._http.get(url, this.getRequestBase("json", new HttpParams(), "", true)).pipe(catchError(this.handleError));
233
235
  }
234
236
  getPaginatedUrl(url) {
235
- return this._http.get(url, this.getRequestBase()).pipe(catchError(this.handleError));
237
+ return this._http.get(url, this.getRequestBase("json", new HttpParams(), "", true)).pipe(catchError(this.handleError));
236
238
  }
237
239
  getOptions() {
238
240
  return this._http.options(this.baseUrl, this.getRequestBase()).pipe(catchError(this.handleError));
@@ -271,7 +273,7 @@ class RestService {
271
273
  postItem(item) {
272
274
  return this._http.post(this.baseUrl, item, this.getRequestBase()).pipe(catchError(this.handleError));
273
275
  }
274
- getHeaders(content_type = "json", file = "") {
276
+ getHeaders(content_type = "json", file = "", xhr = false) {
275
277
  let headers = new HttpHeaders({ 'Accept': 'application/json' });
276
278
  if (this.config.auth_type === "token") {
277
279
  headers = headers.set('Authorization', "Token " + localStorage.getItem("api_token"));
@@ -288,6 +290,9 @@ class RestService {
288
290
  else if (content_type) {
289
291
  headers = headers.set('Content-Type', content_type);
290
292
  }
293
+ if (xhr) {
294
+ headers = headers.set("x-requested-with", "XMLHttpRequest");
295
+ }
291
296
  return headers;
292
297
  }
293
298
  get baseUrl() {
@@ -296,12 +301,12 @@ class RestService {
296
301
  get mediaUrl() {
297
302
  return this.config.endpoint_url + "/api/" + this._url.slice(0, -1) + "_media/";
298
303
  }
299
- getRequestBase(content_type = "json", params = new HttpParams(), file = "") {
304
+ getRequestBase(content_type = "json", params = new HttpParams(), file = "", xhr = false) {
300
305
  let supports_cors = "same-origin";
301
306
  if (this.manifest.value && this.manifest.value.supports_cors) {
302
307
  supports_cors = 'include';
303
308
  }
304
- return { headers: this.getHeaders(content_type, file),
309
+ return { headers: this.getHeaders(content_type, file, xhr),
305
310
  credentials: supports_cors ? 'include' : 'same-origin',
306
311
  params: params };
307
312
  }
@@ -310,6 +315,11 @@ class RestService {
310
315
  // A client-side or network error occurred. Handle it accordingly.
311
316
  console.error('Client side or network error:', error.error);
312
317
  }
318
+ else if (error.status === 403 && "refresh_url" in error.error) {
319
+ // This is a special case in the backend - our session has timed out
320
+ // so we need to reload that page to reflect the user's current status
321
+ window.location.reload();
322
+ }
313
323
  else {
314
324
  console.error(`Backend returned code ${error.status}, body was: `, error.error);
315
325
  }
@@ -348,9 +358,7 @@ class UserService extends ItemService {
348
358
  /**
349
359
  Service to handle IPortalMember via REST and also handle logins.
350
360
  */
351
- loggedInUser = new BehaviorSubject(null);
352
361
  canInvite = signal(false, ...(ngDevMode ? [{ debugName: "canInvite" }] : []));
353
- document = inject(DOCUMENT);
354
362
  _url = PortalMember.plural;
355
363
  typename = PortalMember.typename;
356
364
  permissions = new Map();
@@ -376,22 +384,25 @@ class UserService extends ItemService {
376
384
  if (next) {
377
385
  suffix = "?next=" + next;
378
386
  }
379
- console.log("posting logout to: ", prefix + this.manifest.value.logout_url + "/" + suffix);
380
- this._http.post(prefix + this.manifest.value.logout_url + "/" + suffix, "", {
387
+ else {
388
+ suffix = "?next=/home";
389
+ }
390
+ const logout_url = prefix + this.manifest.value.logout_url + "/" + suffix;
391
+ console.log("posting logout to: ", logout_url);
392
+ this._http.post(logout_url, "", {
381
393
  headers: new HttpHeaders({
382
394
  'X-CSRFToken': this.cookieService.get("csrftoken")
383
395
  }),
384
396
  responseType: 'text',
385
397
  credentials: this.manifest.value.supports_cors ? 'include' : 'same-origin'
386
- }).pipe(
387
- // The backend can return an error as it tries to redirect to a non-existing url.
388
- catchError(_ => this.document.location.href = prefix + "/" + suffix)).subscribe(_ => {
398
+ }).pipe(map(m => this._logout_redirect(JSON.parse(m)))).subscribe(_ => {
389
399
  console.log("Logged Out");
390
- // Force a page reload
391
- this.document.location.href = prefix + "/" + suffix;
392
- //this.login(next)
393
400
  });
394
401
  }
402
+ _logout_redirect(manifest) {
403
+ console.log("Redirecting logout to: ", manifest.url);
404
+ this.document.location.href = manifest.url;
405
+ }
395
406
  canCreate() {
396
407
  return this.canInvite();
397
408
  }
@@ -424,7 +435,8 @@ class UserService extends ItemService {
424
435
  if (this.config.endpoint_url) {
425
436
  prefix = this.config.endpoint_url + "/";
426
437
  }
427
- this.document.location.href = prefix + this.manifest.value.login_url + "/?next=" + next;
438
+ const suffix = "/?next=" + next;
439
+ this.document.location.href = prefix + this.manifest.value.login_url + suffix;
428
440
  }
429
441
  hasAddPermission(feature) {
430
442
  const perm = this.permissions.get(feature);
@@ -690,12 +702,18 @@ class LeftNavService {
690
702
  onGroupsUpdated(groups) {
691
703
  const groupings = new Set();
692
704
  this._defaultGroupings.forEach(e => groupings.add(e));
693
- groups.forEach(g => this._groups.forEach(n => {
694
- if (n.name == g.name) {
695
- n.groupings.forEach(g => groupings.add(g));
705
+ for (const g of this._groups) {
706
+ let found = false;
707
+ for (const n of groups) {
708
+ if (n.name == g.name) {
709
+ g.groupings.forEach(ui_group => groupings.add(ui_group));
710
+ found = true;
711
+ }
696
712
  }
697
- ;
698
- }));
713
+ if (found) {
714
+ break;
715
+ }
716
+ }
699
717
  this.activeGroupings.set(groupings);
700
718
  }
701
719
  setDefaultGroupings(groupings) {
@@ -1295,6 +1313,14 @@ class FormFieldDetailComponent {
1295
1313
  return false;
1296
1314
  }
1297
1315
  */
1316
+ resolveOptions(options) {
1317
+ if (options) {
1318
+ return JSON.parse(decodeURIComponent(options));
1319
+ }
1320
+ else {
1321
+ return [];
1322
+ }
1323
+ }
1298
1324
  get key() {
1299
1325
  return this.field().id.toString();
1300
1326
  }
@@ -1302,7 +1328,7 @@ class FormFieldDetailComponent {
1302
1328
  return this.form().get(this.key);
1303
1329
  }
1304
1330
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1305
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n <h3>{{ field().label }}</h3>\n <p>{{field().description}}</p>\n <div>\n @switch (field().field_type) {\n @case ('TEXT') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n <textarea matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n style=\"min-height:150px\"\n [formControlName]=\"key\"\n [name]=\"key\"></textarea>\n </mat-form-field>\n }\n @case('BOOLEAN')\n {\n <mat-checkbox\n class=\"form-field\"\n [name]=\"key\"\n [formControlName]=\"key\">\n {{ field().label }}\n </mat-checkbox>\n }\n @case ('INTEGER') {\n <mat-form-field class=\"form-field\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"number\"\n max=\"10\" min=\"1\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('CHAR') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('SELECTION')\n {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <mat-select formControlName=\"key\" name=\"key\">\n @for(option of field().options; track option)\n {\n <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @case('FILE') {\n <div class=\"form-field\">\n @if(field().template)\n {\n <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n <mat-icon>download</mat-icon>\n Download Template\n </a>\n }\n <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n <h4>Upload</h4>\n <lib-file-upload [control]=\"control\" \n [showHeading]=\"false\" \n [uploadCategory]=\"'document'\"></lib-file-upload>\n </div>\n </div>\n } \n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
1331
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n <h3>{{ field().label }}</h3>\n <p>{{field().description}}</p>\n <div>\n @switch (field().field_type) {\n @case ('TEXT') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n <textarea matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n style=\"min-height:150px\"\n [formControlName]=\"key\"\n [name]=\"key\"></textarea>\n </mat-form-field>\n }\n @case('BOOLEAN')\n {\n <mat-checkbox\n class=\"form-field\"\n [name]=\"key\"\n [formControlName]=\"key\">\n {{ field().label }}\n </mat-checkbox>\n }\n @case ('INTEGER') {\n <mat-form-field class=\"form-field\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"number\"\n max=\"10\" min=\"1\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('CHAR') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('SELECTION')\n {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <mat-select formControlName=\"key\" name=\"key\">\n @for(option of resolveOptions(field().options); track $index)\n {\n <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @case('FILE') {\n <div class=\"form-field\">\n @if(field().template)\n {\n <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n <mat-icon>download</mat-icon>\n Download Template\n </a>\n }\n <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n <h4>Upload</h4>\n <lib-file-upload [control]=\"control\" \n [showHeading]=\"false\" \n [uploadCategory]=\"'document'\"></lib-file-upload>\n </div>\n </div>\n } \n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
1306
1332
  }
1307
1333
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, decorators: [{
1308
1334
  type: Component,
@@ -1312,7 +1338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
1312
1338
  MatButtonModule,
1313
1339
  MatSelectModule,
1314
1340
  MatTooltipModule,
1315
- MatCheckboxModule, MatIconModule, FileUploadComponent], template: "<div [formGroup]=\"form()\">\n <h3>{{ field().label }}</h3>\n <p>{{field().description}}</p>\n <div>\n @switch (field().field_type) {\n @case ('TEXT') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n <textarea matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n style=\"min-height:150px\"\n [formControlName]=\"key\"\n [name]=\"key\"></textarea>\n </mat-form-field>\n }\n @case('BOOLEAN')\n {\n <mat-checkbox\n class=\"form-field\"\n [name]=\"key\"\n [formControlName]=\"key\">\n {{ field().label }}\n </mat-checkbox>\n }\n @case ('INTEGER') {\n <mat-form-field class=\"form-field\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"number\"\n max=\"10\" min=\"1\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('CHAR') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('SELECTION')\n {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <mat-select formControlName=\"key\" name=\"key\">\n @for(option of field().options; track option)\n {\n <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @case('FILE') {\n <div class=\"form-field\">\n @if(field().template)\n {\n <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n <mat-icon>download</mat-icon>\n Download Template\n </a>\n }\n <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n <h4>Upload</h4>\n <lib-file-upload [control]=\"control\" \n [showHeading]=\"false\" \n [uploadCategory]=\"'document'\"></lib-file-upload>\n </div>\n </div>\n } \n }\n </div>\n</div>\n" }]
1341
+ MatCheckboxModule, MatIconModule, FileUploadComponent], template: "<div [formGroup]=\"form()\">\n <h3>{{ field().label }}</h3>\n <p>{{field().description}}</p>\n <div>\n @switch (field().field_type) {\n @case ('TEXT') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n <textarea matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n style=\"min-height:150px\"\n [formControlName]=\"key\"\n [name]=\"key\"></textarea>\n </mat-form-field>\n }\n @case('BOOLEAN')\n {\n <mat-checkbox\n class=\"form-field\"\n [name]=\"key\"\n [formControlName]=\"key\">\n {{ field().label }}\n </mat-checkbox>\n }\n @case ('INTEGER') {\n <mat-form-field class=\"form-field\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"number\"\n max=\"10\" min=\"1\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('CHAR') {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <input matInput\n [placeholder]=\"field().default\"\n type=\"text\"\n [formControlName]=\"key\"\n name=\"key\">\n </mat-form-field>\n }\n @case ('SELECTION')\n {\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n <mat-label>{{ field().label }}</mat-label>\n <mat-select formControlName=\"key\" name=\"key\">\n @for(option of resolveOptions(field().options); track $index)\n {\n <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @case('FILE') {\n <div class=\"form-field\">\n @if(field().template)\n {\n <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n <mat-icon>download</mat-icon>\n Download Template\n </a>\n }\n <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n <h4>Upload</h4>\n <lib-file-upload [control]=\"control\" \n [showHeading]=\"false\" \n [uploadCategory]=\"'document'\"></lib-file-upload>\n </div>\n </div>\n } \n }\n </div>\n</div>\n" }]
1316
1342
  }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
1317
1343
 
1318
1344
  class FormFieldEditComponent {
@@ -1437,13 +1463,17 @@ class FormFieldForm {
1437
1463
  if (item.template) {
1438
1464
  template.remote = item.template;
1439
1465
  }
1466
+ let options = null;
1467
+ if (item.options) {
1468
+ options = JSON.parse(decodeURIComponent(item.options));
1469
+ }
1440
1470
  form.setValue({
1441
1471
  label: item.label,
1442
1472
  key: item.key,
1443
1473
  required: item.required,
1444
1474
  description: item.description,
1445
1475
  template: template,
1446
- options: item.options,
1476
+ options: options,
1447
1477
  default: item.default,
1448
1478
  field_type: item.field_type,
1449
1479
  order: item.order,
@@ -1452,12 +1482,16 @@ class FormFieldForm {
1452
1482
  }
1453
1483
  static createItem(form) {
1454
1484
  const value = form.value;
1485
+ let options = null;
1486
+ if (value.options) {
1487
+ options = encodeURIComponent(JSON.stringify(value.options));
1488
+ }
1455
1489
  return {
1456
1490
  label: value.label || "",
1457
1491
  key: value.key || "",
1458
1492
  required: value.required || false,
1459
1493
  description: value.description || "",
1460
- options: value.options || null,
1494
+ options: options,
1461
1495
  default: value.default || "",
1462
1496
  field_type: value.field_type || "BOOLEAN",
1463
1497
  order: value.order || 0
@@ -1465,11 +1499,15 @@ class FormFieldForm {
1465
1499
  }
1466
1500
  static updateItem(form, item) {
1467
1501
  const value = form.value;
1502
+ let options = null;
1503
+ if (value.options) {
1504
+ options = encodeURIComponent(JSON.stringify(value.options));
1505
+ }
1468
1506
  item.label = value.label || "";
1469
1507
  item.key = value.key || "";
1470
1508
  item.required = value.required || false;
1471
1509
  item.description = value.description || "";
1472
- item.options = value.options || null;
1510
+ item.options = options;
1473
1511
  item.default = value.default || "";
1474
1512
  item.field_type = value.field_type || "BOOLEAN";
1475
1513
  item.order = value.order || 0;
@@ -2275,7 +2313,7 @@ class ListViewComponent {
2275
2313
  return (url_segments.length == 2) && (url_segments[1].path == "self");
2276
2314
  }
2277
2315
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2278
- 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 }, 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 }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, 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 }], 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%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\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 <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n </lib-list-table-view>\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: ["searchTerm", "pageSize", "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", "sortFields", "filters"], outputs: ["searchChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2316
+ 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 }, 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 }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, 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 }], 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%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\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 <lib-list-table-view style=\"max-width:800px\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n </lib-list-table-view>\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: ["searchTerm", "pageSize", "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", "sortFields", "filters"], outputs: ["searchChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2279
2317
  }
2280
2318
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
2281
2319
  type: Component,
@@ -2292,7 +2330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
2292
2330
  MatTooltipModule,
2293
2331
  MatButtonModule,
2294
2332
  ListHeaderComponent,
2295
- NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\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 <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n </lib-list-table-view>\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"] }]
2333
+ NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\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 <lib-list-table-view style=\"max-width:800px\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n </lib-list-table-view>\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"] }]
2296
2334
  }], 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 }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", 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 }] }], defaultQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultQueries", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], 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 }] }] } });
2297
2335
 
2298
2336
  class TopBarComponent {
@@ -2365,11 +2403,11 @@ class LeftNavComponent {
2365
2403
  }
2366
2404
  }
2367
2405
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2368
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n @if(leftNavService.wide()){\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <span>{{grouping.name}}</span>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n @else{\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 64px;\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <span>{{grouping.name}}</span>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon>{{option.icon}}</mat-icon>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n\n <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n <router-outlet />\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
2406
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n @if(leftNavService.wide()){\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <div style=\"display:flex; width: 100%; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n <span style=\"width:100%\">{{grouping.name}}</span>\n </div>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n @else{\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 70px;\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <div style=\"display:flex; width: 100%; flex-direction: row; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n <span style=\"width:100%\">{{grouping.name}}</span>\n </div>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon>{{option.icon}}</mat-icon>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n\n <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n <router-outlet />\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
2369
2407
  }
2370
2408
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, decorators: [{
2371
2409
  type: Component,
2372
- args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule, MatIconModule, MatTooltipModule, NgStyle], template: "<mat-sidenav-container class=\"leftnav-container\">\n @if(leftNavService.wide()){\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <span>{{grouping.name}}</span>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n @else{\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 64px;\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <span>{{grouping.name}}</span>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon>{{option.icon}}</mat-icon>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n\n <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n <router-outlet />\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"] }]
2410
+ args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule, MatIconModule, MatTooltipModule, NgStyle], template: "<mat-sidenav-container class=\"leftnav-container\">\n @if(leftNavService.wide()){\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <div style=\"display:flex; width: 100%; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n <span style=\"width:100%\">{{grouping.name}}</span>\n </div>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n @else{\n <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 70px;\">\n <mat-nav-list>\n @for (grouping of leftNavService.activeGroupings(); track grouping) { \n <ul>\n @if(grouping.name)\n {\n <div style=\"display:flex; width: 100%; flex-direction: row; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n <span style=\"width:100%\">{{grouping.name}}</span>\n </div>\n }\n @for (option of grouping.options; track option) {\n <li>\n <a mat-list-item \n [routerLink]=\"option.route\" \n routerLinkActive #rla=\"routerLinkActive\" \n [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n <div style=\"display:flex; vertical-align:middle;\">\n <mat-icon>{{option.icon}}</mat-icon>\n </div>\n </a>\n </li>\n }\n </ul>\n }\n </mat-nav-list>\n </mat-sidenav>\n }\n\n <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n <router-outlet />\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"] }]
2373
2411
  }], ctorParameters: () => [], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], sideNavContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenavContent), { isSignal: true }] }] } });
2374
2412
 
2375
2413
  class FeedbackComponent {