ichec-angular-core 0.3.12 → 0.3.13

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.
@@ -13,7 +13,7 @@ import * as i2 from '@angular/material/button';
13
13
  import { MatButtonModule } from '@angular/material/button';
14
14
  import * as i1 from '@angular/material/table';
15
15
  import { MatTable, MatTableModule } from '@angular/material/table';
16
- import * as i5 from '@angular/material/form-field';
16
+ import * as i2$1 from '@angular/material/form-field';
17
17
  import { MatFormFieldModule } from '@angular/material/form-field';
18
18
  import * as i6 from '@angular/material/select';
19
19
  import { MatSelectModule } from '@angular/material/select';
@@ -29,28 +29,28 @@ import * as i7 from '@angular/material/slide-toggle';
29
29
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
30
30
  import * as i4 from '@angular/material/card';
31
31
  import { MatCardModule } from '@angular/material/card';
32
- import * as i6$2 from '@angular/material/checkbox';
32
+ import * as i7$1 from '@angular/material/checkbox';
33
33
  import { MatCheckboxModule } from '@angular/material/checkbox';
34
- import * as i2$1 from '@angular/material/list';
34
+ import * as i2$2 from '@angular/material/list';
35
35
  import { MatListModule } from '@angular/material/list';
36
36
  import { MatDividerModule } from '@angular/material/divider';
37
37
  import * as i3$2 from '@angular/material/sort';
38
38
  import { MatSort, MatSortModule } from '@angular/material/sort';
39
39
  import { MatButtonToggleModule } from '@angular/material/button-toggle';
40
40
  import * as i1$4 from '@angular/material/progress-spinner';
41
- import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
41
+ import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
42
42
  import { DataSource } from '@angular/cdk/collections';
43
- import * as i2$2 from '@angular/material/paginator';
43
+ import * as i2$3 from '@angular/material/paginator';
44
44
  import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
45
- import * as i2$3 from '@angular/cdk/scrolling';
45
+ import * as i2$4 from '@angular/cdk/scrolling';
46
46
  import { ScrollingModule } from '@angular/cdk/scrolling';
47
- import * as i2$4 from '@angular/material/toolbar';
47
+ import * as i2$5 from '@angular/material/toolbar';
48
48
  import { MatToolbarModule } from '@angular/material/toolbar';
49
- import * as i5$1 from '@angular/material/menu';
49
+ import * as i5 from '@angular/material/menu';
50
50
  import { MatMenuModule } from '@angular/material/menu';
51
51
  import * as i1$5 from '@angular/material/sidenav';
52
52
  import { MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
53
- import * as i6$3 from '@angular/material/expansion';
53
+ import * as i6$2 from '@angular/material/expansion';
54
54
  import { MatExpansionModule } from '@angular/material/expansion';
55
55
  import * as i10 from '@angular/material/tabs';
56
56
  import { MatTabsModule } from '@angular/material/tabs';
@@ -66,6 +66,10 @@ class Permission {
66
66
  static plural = "permissions";
67
67
  }
68
68
 
69
+ class Feedback {
70
+ static typename = "feedback";
71
+ static plural = "feedback";
72
+ }
69
73
  class PortalMember {
70
74
  static typename = "member";
71
75
  static plural = "members";
@@ -843,7 +847,10 @@ class DetailView {
843
847
  constructor(itemService) {
844
848
  this.itemService = itemService;
845
849
  }
846
- onInit() {
850
+ onInit(embedded = false) {
851
+ if (embedded) {
852
+ return;
853
+ }
847
854
  const id = Number(this.route.snapshot.paramMap.get('id'));
848
855
  if (id) {
849
856
  this._getItem(id);
@@ -1077,7 +1084,7 @@ class SelectTableComponent {
1077
1084
  this.table()?.renderRows();
1078
1085
  }
1079
1086
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1080
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SelectTableComponent, isStandalone: true, selector: "lib-select-table", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAdded: "itemAdded", itemRemoved: "itemRemoved", searchChanged: "searchChanged" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<div class='select-container'>\n <div class='controls-container'>\n <mat-form-field style=\"width:100%\">\n <mat-label>Search {{itemType()}} to add...</mat-label>\n <input \n type=\"text\"\n aria-label=\"Selected item\"\n matInput\n [formControl]=\"searchControl\" \n placeholder=\"Search {{itemType()}} to add...\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" style=\"width:100%\">\n @for(item of options(); track item.item.id){\n <mat-option [value]=\"item.title\" style=\"width:100%\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate(); context: { item: item.item }\">\n </ng-container>\n </mat-option>\n }\n </mat-autocomplete>\n </mat-form-field>\n\n @if(searchControl.value){\n <button mat-mini-fab type=\"button\" \n class=\"form-action-button\" \n matTooltip=\"Add new item\"\n (click)=\"add()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n\n @if(selected().length > 0){\n <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\n @for (column of columns(); track column.name) {\n <ng-container matColumnDef=\"{{ column.name }}\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n {{ column.title }}\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"remove\">\n <th mat-header-cell *matHeaderCellDef>Remove\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button\n color=\"primary\"\n type=\"button\" \n matTooltip=\"Remove item\"\n aria-label=\"Remove an item\"\n (click)=\"remove(element.id)\">\n <mat-icon>remove\n </mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnNames()\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: columnNames();\">\n </tr>\n </table>\n }\n</div>", styles: [".select-container{display:flex;text-align:center;justify-content:center;flex-direction:column;width:100%}.controls-container{width:100%;display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
1087
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SelectTableComponent, isStandalone: true, selector: "lib-select-table", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAdded: "itemAdded", itemRemoved: "itemRemoved", searchChanged: "searchChanged" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<div class='select-container'>\n <div class='controls-container'>\n <mat-form-field style=\"width:100%\">\n <mat-label>Search {{itemType()}} to add...</mat-label>\n <input \n type=\"text\"\n aria-label=\"Selected item\"\n matInput\n [formControl]=\"searchControl\" \n placeholder=\"Search {{itemType()}} to add...\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" style=\"width:100%\">\n @for(item of options(); track item.item.id){\n <mat-option [value]=\"item.title\" style=\"width:100%\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate(); context: { item: item.item }\">\n </ng-container>\n </mat-option>\n }\n </mat-autocomplete>\n </mat-form-field>\n\n @if(searchControl.value){\n <button mat-mini-fab type=\"button\" \n class=\"form-action-button\" \n matTooltip=\"Add new item\"\n (click)=\"add()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n\n @if(selected().length > 0){\n <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\n @for (column of columns(); track column.name) {\n <ng-container matColumnDef=\"{{ column.name }}\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n {{ column.title }}\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"remove\">\n <th mat-header-cell *matHeaderCellDef>Remove\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button\n color=\"primary\"\n type=\"button\" \n matTooltip=\"Remove item\"\n aria-label=\"Remove an item\"\n (click)=\"remove(element.id)\">\n <mat-icon>remove\n </mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnNames()\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: columnNames();\">\n </tr>\n </table>\n }\n</div>", styles: [".select-container{display:flex;text-align:center;justify-content:center;flex-direction:column;width:100%}.controls-container{width:100%;display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
1081
1088
  }
1082
1089
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectTableComponent, decorators: [{
1083
1090
  type: Component,
@@ -1213,7 +1220,7 @@ class SearchBarComponent {
1213
1220
  this.sortControl.setValue(!this.sortControl.value);
1214
1221
  }
1215
1222
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1216
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n <div class=\"search-row\">\n <mat-form-field class=\"search\" style=\"width:70%\">\n <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n @if(searchControl.value){\n <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n @else(){\n <button matSuffix mat-icon-button aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n }\n </mat-form-field>\n\n @if(form().searchFields.sortFields.length > 0){\n <div>\n <mat-form-field style=\"margin: 10px\">\n <mat-label>Sort By</mat-label>\n <mat-select formControlName=\"sortField\">\n @for(field of form().searchFields.sortFields; track field)\n {\n <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n @if(sortControl.value){\n <mat-icon>arrow_upward</mat-icon>\n }\n @else{\n <mat-icon>arrow_downward</mat-icon>\n }\n </button>\n </div>\n }\n </div>\n\n @if(form().searchFields.filter.rows.length > 0)\n {\n @if(showFilters())\n {\n <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>hide</mat-icon>Hide Filters</button>\n\n <button mat-button=\"tonal\" (click)=\"clearFilters()\"><mat-icon>collapse_all</mat-icon>Clear Filters</button>\n }\n @else {\n <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n }\n }\n\n </div>\n\n <div class=\"filter-container\">\n @if(showFilters() && form().searchFields.filter.rows.length > 0)\n {\n <div style=\"display: flex; flex-direction: row;\">\n <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n @for(row of form().searchFields.filter.rows; track row)\n {\n @for(filter of row.filters; track filter)\n {\n @if(filter.type === \"boolean\")\n {\n <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n }\n @else if (filter.type === \"selection\") {\n <mat-form-field>\n <mat-label>{{filter.display_name}}</mat-label>\n <mat-select [formControlName]=\"filter.key\">\n @for(choice of filter.choices; track choice){\n <mat-option [value]=\"choice.value\">\n {{choice.display_name}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n }\n }\n </form>\n </div>\n }\n </div>\n </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: 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: "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: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
1223
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n <div class=\"search-row\">\n <mat-form-field class=\"search\" style=\"width:70%\">\n <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n @if(searchControl.value){\n <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n @else(){\n <button matSuffix mat-icon-button aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n }\n </mat-form-field>\n\n @if(form().searchFields.sortFields.length > 0){\n <div>\n <mat-form-field style=\"margin: 10px\">\n <mat-label>Sort By</mat-label>\n <mat-select formControlName=\"sortField\">\n @for(field of form().searchFields.sortFields; track field)\n {\n <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n @if(sortControl.value){\n <mat-icon>arrow_upward</mat-icon>\n }\n @else{\n <mat-icon>arrow_downward</mat-icon>\n }\n </button>\n </div>\n }\n </div>\n\n @if(form().searchFields.filter.rows.length > 0)\n {\n @if(showFilters())\n {\n <div>\n <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>arrow_drop_up</mat-icon>Hide Filters</button>\n\n <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"clearFilters()\"><mat-icon>delete</mat-icon>Clear Filters</button>\n </div>\n }\n @else {\n <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n }\n }\n\n </div>\n\n <div class=\"filter-container\">\n @if(showFilters() && form().searchFields.filter.rows.length > 0)\n {\n <div style=\"display: flex; flex-direction: row;\">\n <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n @for(row of form().searchFields.filter.rows; track row)\n {\n @for(filter of row.filters; track filter)\n {\n @if(filter.type === \"boolean\")\n {\n <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n }\n @else if (filter.type === \"selection\") {\n <mat-form-field>\n <mat-label>{{filter.display_name}}</mat-label>\n <mat-select [formControlName]=\"filter.key\">\n @for(choice of filter.choices; track choice){\n <mat-option [value]=\"choice.value\">\n {{choice.display_name}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n }\n }\n </form>\n </div>\n }\n </div>\n </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: 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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
1217
1224
  }
1218
1225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SearchBarComponent, decorators: [{
1219
1226
  type: Component,
@@ -1224,7 +1231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
1224
1231
  MatSelectModule,
1225
1232
  MatSlideToggleModule,
1226
1233
  MatIconModule,
1227
- TitleCasePipe], template: "<div class=\"container\">\n <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n <div class=\"search-row\">\n <mat-form-field class=\"search\" style=\"width:70%\">\n <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n @if(searchControl.value){\n <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n @else(){\n <button matSuffix mat-icon-button aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n }\n </mat-form-field>\n\n @if(form().searchFields.sortFields.length > 0){\n <div>\n <mat-form-field style=\"margin: 10px\">\n <mat-label>Sort By</mat-label>\n <mat-select formControlName=\"sortField\">\n @for(field of form().searchFields.sortFields; track field)\n {\n <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n @if(sortControl.value){\n <mat-icon>arrow_upward</mat-icon>\n }\n @else{\n <mat-icon>arrow_downward</mat-icon>\n }\n </button>\n </div>\n }\n </div>\n\n @if(form().searchFields.filter.rows.length > 0)\n {\n @if(showFilters())\n {\n <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>hide</mat-icon>Hide Filters</button>\n\n <button mat-button=\"tonal\" (click)=\"clearFilters()\"><mat-icon>collapse_all</mat-icon>Clear Filters</button>\n }\n @else {\n <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n }\n }\n\n </div>\n\n <div class=\"filter-container\">\n @if(showFilters() && form().searchFields.filter.rows.length > 0)\n {\n <div style=\"display: flex; flex-direction: row;\">\n <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n @for(row of form().searchFields.filter.rows; track row)\n {\n @for(filter of row.filters; track filter)\n {\n @if(filter.type === \"boolean\")\n {\n <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n }\n @else if (filter.type === \"selection\") {\n <mat-form-field>\n <mat-label>{{filter.display_name}}</mat-label>\n <mat-select [formControlName]=\"filter.key\">\n @for(choice of filter.choices; track choice){\n <mat-option [value]=\"choice.value\">\n {{choice.display_name}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n }\n }\n </form>\n </div>\n }\n </div>\n </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"] }]
1234
+ TitleCasePipe], template: "<div class=\"container\">\n <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n <div class=\"search-row\">\n <mat-form-field class=\"search\" style=\"width:70%\">\n <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n @if(searchControl.value){\n <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n @else(){\n <button matSuffix mat-icon-button aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n }\n </mat-form-field>\n\n @if(form().searchFields.sortFields.length > 0){\n <div>\n <mat-form-field style=\"margin: 10px\">\n <mat-label>Sort By</mat-label>\n <mat-select formControlName=\"sortField\">\n @for(field of form().searchFields.sortFields; track field)\n {\n <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n @if(sortControl.value){\n <mat-icon>arrow_upward</mat-icon>\n }\n @else{\n <mat-icon>arrow_downward</mat-icon>\n }\n </button>\n </div>\n }\n </div>\n\n @if(form().searchFields.filter.rows.length > 0)\n {\n @if(showFilters())\n {\n <div>\n <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>arrow_drop_up</mat-icon>Hide Filters</button>\n\n <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"clearFilters()\"><mat-icon>delete</mat-icon>Clear Filters</button>\n </div>\n }\n @else {\n <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n }\n }\n\n </div>\n\n <div class=\"filter-container\">\n @if(showFilters() && form().searchFields.filter.rows.length > 0)\n {\n <div style=\"display: flex; flex-direction: row;\">\n <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n @for(row of form().searchFields.filter.rows; track row)\n {\n @for(filter of row.filters; track filter)\n {\n @if(filter.type === \"boolean\")\n {\n <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n }\n @else if (filter.type === \"selection\") {\n <mat-form-field>\n <mat-label>{{filter.display_name}}</mat-label>\n <mat-select [formControlName]=\"filter.key\">\n @for(choice of filter.choices; track choice){\n <mat-option [value]=\"choice.value\">\n {{choice.display_name}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n }\n }\n </form>\n </div>\n }\n </div>\n </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"] }]
1228
1235
  }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
1229
1236
 
1230
1237
  class FileUploadComponent {
@@ -1332,7 +1339,7 @@ class FormFieldDetailComponent {
1332
1339
  return this.form().get(this.key);
1333
1340
  }
1334
1341
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1335
- 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"] }] });
1342
+ 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 @if(field().description)\n {\n <p>{{field().description}}</p>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\n </mat-form-field>\n }\n @case('BOOLEAN')\n {\n <mat-checkbox\n class=\"form-field\"\n [name]=\"key\"\n [formControlName]=\"key\"\n >\n {{ field().label }}\n </mat-checkbox>\n @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7$1.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"] }] });
1336
1343
  }
1337
1344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, decorators: [{
1338
1345
  type: Component,
@@ -1342,7 +1349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
1342
1349
  MatButtonModule,
1343
1350
  MatSelectModule,
1344
1351
  MatTooltipModule,
1345
- 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" }]
1352
+ MatCheckboxModule, MatIconModule, FileUploadComponent], template: "<div [formGroup]=\"form()\">\n <h3>{{ field().label }}</h3>\n @if(field().description)\n {\n <p>{{field().description}}</p>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\n </mat-form-field>\n }\n @case('BOOLEAN')\n {\n <mat-checkbox\n class=\"form-field\"\n [name]=\"key\"\n [formControlName]=\"key\"\n >\n {{ field().label }}\n </mat-checkbox>\n @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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 @if(field().tooltip){\n <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n info\n </mat-icon>\n }\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" }]
1346
1353
  }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
1347
1354
 
1348
1355
  class FormFieldEditComponent {
@@ -1417,7 +1424,7 @@ class FormFieldEditComponent {
1417
1424
  this.optionsControl.setValue(options.filter(e => e.value !== value));
1418
1425
  }
1419
1426
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1420
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orderUp: "orderUp", orderDown: "orderDown", deleted: "deleted" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n @if(canOrderUp())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n }\n @if(canOrderDown())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n }\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Label</mat-label>\n <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Key</mat-label>\n <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Description</mat-label>\n <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n required name=\"description\"></textarea>\n <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <div style=\"display: flex; flex-direction: row; align-items: center;\">\n <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n info\n </mat-icon>\n </div>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Type</mat-label>\n <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n @for(type of availableTypes; track type.value){\n <mat-option [value]=\"type.value\">{{type.display_name}}\n </mat-option>\n }\n </mat-select>\n <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n @switch (fieldType) {\n @case(FieldType.Boolean)\n {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <mat-select formControlName=\"default\" name=\"default\" required>\n <mat-option [value]=\"'true'\">True</mat-option>\n <mat-option [value]=\"'false'\">False</mat-option>\n </mat-select>\n </mat-form-field>\n }\n @case(FieldType.Char)\n {\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.Text || FieldType.RichText)\n {\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Default</mat-label>\n <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n name=\"default\"></textarea>\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.File)\n {\n <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n }\n @case ((FieldType.Selection)) {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <h4>Add Choice</h4>\n <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n <mat-form-field class=\"form-field\">\n <mat-label>Choice</mat-label>\n <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Display Name</mat-label>\n <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n </div>\n\n @if(optionsControl.value && optionsControl.value.length > 0){\n <h4>Choices</h4>\n <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n <ng-container matColumnDef=\"name\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Display Name\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Value\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"remove\">\n <th mat-header-cell *matHeaderCellDef>Remove\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button\n color=\"primary\"\n type=\"button\" \n matTooltip=\"Remove option\"\n aria-label=\"Remove this option\"\n (click)=\"removeOption(element.value)\">\n <mat-icon>remove\n </mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n </tr>\n </table>\n }\n }\n }\n</form>", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: "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: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
1427
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orderUp: "orderUp", orderDown: "orderDown", deleted: "deleted" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n @if(canOrderUp())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n }\n @if(canOrderDown())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n }\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Label</mat-label>\n <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Key</mat-label>\n <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Description</mat-label>\n <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n name=\"description\"></textarea>\n <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's instructions for the person filling in the form.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Tooltip</mat-label>\n <textarea matInput placeholder=\"Tooltip\" style=\"min-height:150px\" type=\"text\" formControlName=\"tooltip\"\n name=\"tooltip\"></textarea>\n <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's tooltip for the person filling in the form.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <div style=\"display: flex; flex-direction: row; align-items: center;\">\n <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n info\n </mat-icon>\n </div>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Type</mat-label>\n <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n @for(type of availableTypes; track type.value){\n <mat-option [value]=\"type.value\">{{type.display_name}}\n </mat-option>\n }\n </mat-select>\n <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n @switch (fieldType) {\n @case(FieldType.Boolean)\n {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <mat-select formControlName=\"default\" name=\"default\" required>\n <mat-option [value]=\"'true'\">True</mat-option>\n <mat-option [value]=\"'false'\">False</mat-option>\n </mat-select>\n </mat-form-field>\n }\n @case(FieldType.Char)\n {\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.Text || FieldType.RichText)\n {\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Default</mat-label>\n <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n name=\"default\"></textarea>\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.File)\n {\n <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n }\n @case ((FieldType.Selection)) {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <h4>Add Choice</h4>\n <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n <mat-form-field class=\"form-field\">\n <mat-label>Choice</mat-label>\n <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Display Name</mat-label>\n <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n </div>\n\n @if(optionsControl.value && optionsControl.value.length > 0){\n <h4>Choices</h4>\n <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n <ng-container matColumnDef=\"name\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Display Name\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Value\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"remove\">\n <th mat-header-cell *matHeaderCellDef>Remove\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button\n color=\"primary\"\n type=\"button\" \n matTooltip=\"Remove option\"\n aria-label=\"Remove this option\"\n (click)=\"removeOption(element.value)\">\n <mat-icon>remove\n </mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n </tr>\n </table>\n }\n }\n }\n</form>", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7$1.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: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
1421
1428
  }
1422
1429
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldEditComponent, decorators: [{
1423
1430
  type: Component,
@@ -1432,7 +1439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
1432
1439
  MatSelectModule,
1433
1440
  MatTooltipModule,
1434
1441
  MatCheckboxModule,
1435
- FileUploadComponent], template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n @if(canOrderUp())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n }\n @if(canOrderDown())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n }\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Label</mat-label>\n <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Key</mat-label>\n <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Description</mat-label>\n <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n required name=\"description\"></textarea>\n <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <div style=\"display: flex; flex-direction: row; align-items: center;\">\n <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n info\n </mat-icon>\n </div>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Type</mat-label>\n <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n @for(type of availableTypes; track type.value){\n <mat-option [value]=\"type.value\">{{type.display_name}}\n </mat-option>\n }\n </mat-select>\n <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n @switch (fieldType) {\n @case(FieldType.Boolean)\n {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <mat-select formControlName=\"default\" name=\"default\" required>\n <mat-option [value]=\"'true'\">True</mat-option>\n <mat-option [value]=\"'false'\">False</mat-option>\n </mat-select>\n </mat-form-field>\n }\n @case(FieldType.Char)\n {\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.Text || FieldType.RichText)\n {\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Default</mat-label>\n <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n name=\"default\"></textarea>\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.File)\n {\n <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n }\n @case ((FieldType.Selection)) {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <h4>Add Choice</h4>\n <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n <mat-form-field class=\"form-field\">\n <mat-label>Choice</mat-label>\n <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Display Name</mat-label>\n <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n </div>\n\n @if(optionsControl.value && optionsControl.value.length > 0){\n <h4>Choices</h4>\n <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n <ng-container matColumnDef=\"name\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Display Name\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Value\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"remove\">\n <th mat-header-cell *matHeaderCellDef>Remove\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button\n color=\"primary\"\n type=\"button\" \n matTooltip=\"Remove option\"\n aria-label=\"Remove this option\"\n (click)=\"removeOption(element.value)\">\n <mat-icon>remove\n </mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n </tr>\n </table>\n }\n }\n }\n</form>", styles: [":host{flex-grow:1}\n"] }]
1442
+ FileUploadComponent], template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n @if(canOrderUp())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n }\n @if(canOrderDown())\n {\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n }\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Label</mat-label>\n <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Key</mat-label>\n <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Description</mat-label>\n <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n name=\"description\"></textarea>\n <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's instructions for the person filling in the form.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Tooltip</mat-label>\n <textarea matInput placeholder=\"Tooltip\" style=\"min-height:150px\" type=\"text\" formControlName=\"tooltip\"\n name=\"tooltip\"></textarea>\n <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's tooltip for the person filling in the form.\">\n info\n </mat-icon>\n </mat-form-field>\n\n <div style=\"display: flex; flex-direction: row; align-items: center;\">\n <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n info\n </mat-icon>\n </div>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Type</mat-label>\n <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n @for(type of availableTypes; track type.value){\n <mat-option [value]=\"type.value\">{{type.display_name}}\n </mat-option>\n }\n </mat-select>\n <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n @switch (fieldType) {\n @case(FieldType.Boolean)\n {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <mat-select formControlName=\"default\" name=\"default\" required>\n <mat-option [value]=\"'true'\">True</mat-option>\n <mat-option [value]=\"'false'\">False</mat-option>\n </mat-select>\n </mat-form-field>\n }\n @case(FieldType.Char)\n {\n <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.Text || FieldType.RichText)\n {\n <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n <mat-label>Default</mat-label>\n <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n name=\"default\"></textarea>\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n }\n @case(FieldType.File)\n {\n <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n }\n @case ((FieldType.Selection)) {\n <mat-form-field class=\"form-field\">\n <mat-label>Default</mat-label>\n <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <h4>Add Choice</h4>\n <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n <mat-form-field class=\"form-field\">\n <mat-label>Choice</mat-label>\n <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>Display Name</mat-label>\n <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n info\n </mat-icon> \n </mat-form-field>\n\n <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n </div>\n\n @if(optionsControl.value && optionsControl.value.length > 0){\n <h4>Choices</h4>\n <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n <ng-container matColumnDef=\"name\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Display Name\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n Value\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"remove\">\n <th mat-header-cell *matHeaderCellDef>Remove\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button\n color=\"primary\"\n type=\"button\" \n matTooltip=\"Remove option\"\n aria-label=\"Remove this option\"\n (click)=\"removeOption(element.value)\">\n <mat-icon>remove\n </mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n </tr>\n </table>\n }\n }\n }\n</form>", styles: [":host{flex-grow:1}\n"] }]
1436
1443
  }], propDecorators: { table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], canOrderUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOrderUp", required: false }] }], canOrderDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOrderDown", required: false }] }], orderUp: [{ type: i0.Output, args: ["orderUp"] }], orderDown: [{ type: i0.Output, args: ["orderDown"] }], deleted: [{ type: i0.Output, args: ["deleted"] }] } });
1437
1444
 
1438
1445
  class FormFieldForm {
@@ -1444,7 +1451,8 @@ class FormFieldForm {
1444
1451
  label: fb.control('', Validators.required),
1445
1452
  key: fb.control('', Validators.required),
1446
1453
  required: fb.control(false, Validators.required),
1447
- description: fb.control('', Validators.required),
1454
+ description: fb.control(''),
1455
+ tooltip: fb.control(''),
1448
1456
  template: fb.control(this.getBaseTemplate()),
1449
1457
  options: fb.control(null),
1450
1458
  default: fb.control(''),
@@ -1476,6 +1484,7 @@ class FormFieldForm {
1476
1484
  key: item.key,
1477
1485
  required: item.required,
1478
1486
  description: item.description,
1487
+ tooltip: item.tooltip,
1479
1488
  template: template,
1480
1489
  options: options,
1481
1490
  default: item.default,
@@ -1495,6 +1504,7 @@ class FormFieldForm {
1495
1504
  key: value.key || "",
1496
1505
  required: value.required || false,
1497
1506
  description: value.description || "",
1507
+ tooltip: value.tooltip || "",
1498
1508
  options: options,
1499
1509
  default: value.default || "",
1500
1510
  field_type: value.field_type || "BOOLEAN",
@@ -1511,6 +1521,7 @@ class FormFieldForm {
1511
1521
  item.key = value.key || "";
1512
1522
  item.required = value.required || false;
1513
1523
  item.description = value.description || "";
1524
+ item.tooltip = value.tooltip || "";
1514
1525
  item.options = options;
1515
1526
  item.default = value.default || "";
1516
1527
  item.field_type = value.field_type || "BOOLEAN";
@@ -1825,7 +1836,7 @@ class FormGroupEditComponent {
1825
1836
  });
1826
1837
  }
1827
1838
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormGroupEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1828
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormGroupEditComponent, isStandalone: true, selector: "lib-form-group-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", fieldAdded: "fieldAdded", orderUp: "orderUp", orderDown: "orderDown" }, ngImport: i0, template: "<div class=\"container\">\n\n<div class=\"header\">\n<h3>Editing Group</h3>\n@if(canOrderUp())\n{\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n}\n@if(canOrderDown())\n{\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n}\n<button mat-mini-fab type=\"button\" \n style=\"margin:5px\" \n color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n (click)=\"onDeleteClicked()\">\n <mat-icon>delete</mat-icon>\n</button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n <mat-form-field class=\"form-field\" style=\"width: 70%\">\n <mat-label for=\"label\">Label</mat-label>\n <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n name=\"label\"/>\n <mat-icon matSuffix matTooltip=\"An optional label that will appear as a heading for the group in the form.\">info</mat-icon>\n </mat-form-field> \n\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%\">\n <mat-label for=\"description\">Description</mat-label>\n <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:120px;\" formControlName=\"description\"\n name=\"description\"></textarea>\n <mat-icon matSuffix matTooltip=\"An optional description of the group, that will appear as a paragraph in the form.\">info</mat-icon>\n </mat-form-field>\n</form>\n\n<button matButton=\"filled\" type=\"button\" style=\"margin:5px\" \n color=\"primary\" matTooltip=\"Add a new field\" aria-label=\"Add a new field\"\n (click)=\"onAddField()\">\n Add Field\n</button>\n\n</div>", styles: [":host{flex-grow:1}.control-button{margin-right:10px}.container,.header{display:flex;flex-direction:column;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }] });
1839
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormGroupEditComponent, isStandalone: true, selector: "lib-form-group-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", fieldAdded: "fieldAdded", orderUp: "orderUp", orderDown: "orderDown" }, ngImport: i0, template: "<div class=\"container\">\n\n<div class=\"header\">\n<h3>Editing Group</h3>\n@if(canOrderUp())\n{\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n}\n@if(canOrderDown())\n{\n <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n}\n<button mat-mini-fab type=\"button\" \n style=\"margin:5px\" \n color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n (click)=\"onDeleteClicked()\">\n <mat-icon>delete</mat-icon>\n</button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n <mat-form-field class=\"form-field\" style=\"width: 70%\">\n <mat-label for=\"label\">Label</mat-label>\n <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n name=\"label\"/>\n <mat-icon matSuffix matTooltip=\"An optional label that will appear as a heading for the group in the form.\">info</mat-icon>\n </mat-form-field> \n\n <mat-form-field class=\"form-field-wide\" style=\"width: 70%\">\n <mat-label for=\"description\">Description</mat-label>\n <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:120px;\" formControlName=\"description\"\n name=\"description\"></textarea>\n <mat-icon matSuffix matTooltip=\"An optional description of the group, that will appear as a paragraph in the form.\">info</mat-icon>\n </mat-form-field>\n</form>\n\n<button matButton=\"filled\" type=\"button\" style=\"margin:5px\" \n color=\"primary\" matTooltip=\"Add a new field\" aria-label=\"Add a new field\"\n (click)=\"onAddField()\">\n Add Field\n</button>\n\n</div>", styles: [":host{flex-grow:1}.control-button{margin-right:10px}.container,.header{display:flex;flex-direction:column;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }] });
1829
1840
  }
1830
1841
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormGroupEditComponent, decorators: [{
1831
1842
  type: Component,
@@ -1991,7 +2002,7 @@ class DynamicFormBuilderComponent {
1991
2002
  this.form().form.markAsDirty();
1992
2003
  }
1993
2004
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1994
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DynamicFormBuilderComponent, isStandalone: true, selector: "lib-dynamic-form-builder", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, handleSubmit: { classPropertyName: "handleSubmit", publicName: "handleSubmit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"group-list\">\n <div class=\"group-list-header\">\n <h3 class=\"heading\">Groups</h3>\n <button mat-mini-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n <mat-list class=\"group-scroll\">\n @for(group of form().groups.controls; track group; let group_idx=$index; let even=$even)\n {\n <div class=\"scroll-item-container\">\n <mat-list-item class=\"scroll-item\" [class.selected]=\"isGroupSelected(group_idx)\" (click)=\"onGroupClick(group_idx, group)\">\n <div class=\"scroll-item-content\">\n <mat-icon matListIcon>list</mat-icon>\n @if(!group.valid){\n <mat-icon style=\"color:var(--mat-sys-error)\">error</mat-icon>\n }\n <h4 class=\"scroll-group-heading\">{{getGroupLabel(group)}}</h4>\n </div>\n </mat-list-item>\n\n @for(field of getFields(group).controls; track field; let field_idx=$index; let field_even=$even; let count=$count)\n {\n <mat-list-item class=\"scroll-item\" [class.selected]=\"isFieldSelected(group_idx, field_idx)\" [class.even]=\"field_even\" (click)=\"onFieldClick(field_idx, group_idx, field)\">\n <div class=\"scroll-item-content\">\n @if(!field.valid){\n <mat-icon style=\"padding-left: 5px;color:var(--mat-sys-error)\">error</mat-icon>\n }\n <span style=\"padding-left: 5px;\">{{getFieldLabel(field)}}</span>\n </div>\n </mat-list-item>\n @if(field_idx < count - 1){\n <mat-divider></mat-divider>\n }\n }\n </div>\n }\n </mat-list>\n </div>\n\n <div class=\"group-view\">\n @if(activeGroup(); as group)\n {\n <lib-form-group-edit [form]=\"group.group\" \n [canOrderUp]=\"allowGroupOrderUp()\" \n [canOrderDown]=\"allowGroupOrderDown()\"\n (fieldAdded)=\"addField(group.group)\"\n (orderUp)=\"onGroupOrderUp()\"\n (orderDown)=\"onGroupOrderDown()\"\n (deleted)=\"deleteGroup(group.index)\"\n \n >\n </lib-form-group-edit>\n }\n @else if(activeField(); as field)\n {\n <lib-form-field-edit [form]=\"field.field\" \n [canOrderUp]=\"allowOrderUp()\" \n [canOrderDown]=\"allowOrderDown()\"\n (orderUp)=\"onFieldOrderUp()\"\n (orderDown)=\"onFieldOrderDown()\"\n (deleted)=\"deleteField()\"\n ></lib-form-field-edit>\n }\n @else {\n <p>Select a Group or Field to view and edit it</p>\n }\n </div>\n</div>", styles: [":host{flex-grow:1}.expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}.heading{margin:0 5px 5px 0}.container{display:flex;flex-direction:row;width:100%;margin-left:5px}.group-list{display:flex;flex-direction:column;width:100%;max-width:300px;height:520px}.group-list-header{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.group-scroll{width:100%}.group-view{width:100%;margin-left:10px}.scroll-item-container{width:100%;border-radius:6px;margin-bottom:2px;background-color:var(--mat-sys-surface-container-low)}.scroll-item{width:100%;height:40px;display:flex;padding-left:5px;flex-direction:row;text-align:left;align-items:center;justify-content:center}.scroll-item:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.scroll-item-content{display:flex;flex-direction:row;align-items:center}.scroll-group-heading{padding-left:5px;width:100%;text-align:center}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["deleted", "fieldAdded", "orderUp", "orderDown"] }, { kind: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["orderUp", "orderDown", "deleted"] }] });
2005
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DynamicFormBuilderComponent, isStandalone: true, selector: "lib-dynamic-form-builder", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, handleSubmit: { classPropertyName: "handleSubmit", publicName: "handleSubmit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"group-list\">\n <div class=\"group-list-header\">\n <h3 class=\"heading\">Groups</h3>\n <button mat-mini-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n <mat-list class=\"group-scroll\">\n @for(group of form().groups.controls; track group; let group_idx=$index; let even=$even)\n {\n <div class=\"scroll-item-container\">\n <mat-list-item class=\"scroll-item\" [class.selected]=\"isGroupSelected(group_idx)\" (click)=\"onGroupClick(group_idx, group)\">\n <div class=\"scroll-item-content\">\n <mat-icon matListIcon>list</mat-icon>\n @if(!group.valid){\n <mat-icon style=\"color:var(--mat-sys-error)\">error</mat-icon>\n }\n <h4 class=\"scroll-group-heading\">{{getGroupLabel(group)}}</h4>\n </div>\n </mat-list-item>\n\n @for(field of getFields(group).controls; track field; let field_idx=$index; let field_even=$even; let count=$count)\n {\n <mat-list-item class=\"scroll-item\" [class.selected]=\"isFieldSelected(group_idx, field_idx)\" [class.even]=\"field_even\" (click)=\"onFieldClick(field_idx, group_idx, field)\">\n <div class=\"scroll-item-content\">\n @if(!field.valid){\n <mat-icon style=\"padding-left: 5px;color:var(--mat-sys-error)\">error</mat-icon>\n }\n <span style=\"padding-left: 5px;\">{{getFieldLabel(field)}}</span>\n </div>\n </mat-list-item>\n @if(field_idx < count - 1){\n <mat-divider></mat-divider>\n }\n }\n </div>\n }\n </mat-list>\n </div>\n\n <div class=\"group-view\">\n @if(activeGroup(); as group)\n {\n <lib-form-group-edit [form]=\"group.group\" \n [canOrderUp]=\"allowGroupOrderUp()\" \n [canOrderDown]=\"allowGroupOrderDown()\"\n (fieldAdded)=\"addField(group.group)\"\n (orderUp)=\"onGroupOrderUp()\"\n (orderDown)=\"onGroupOrderDown()\"\n (deleted)=\"deleteGroup(group.index)\"\n \n >\n </lib-form-group-edit>\n }\n @else if(activeField(); as field)\n {\n <lib-form-field-edit [form]=\"field.field\" \n [canOrderUp]=\"allowOrderUp()\" \n [canOrderDown]=\"allowOrderDown()\"\n (orderUp)=\"onFieldOrderUp()\"\n (orderDown)=\"onFieldOrderDown()\"\n (deleted)=\"deleteField()\"\n ></lib-form-field-edit>\n }\n @else {\n <p>Select a Group or Field to view and edit it</p>\n }\n </div>\n</div>", styles: [":host{flex-grow:1}.expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}.heading{margin:0 5px 5px 0}.container{display:flex;flex-direction:row;width:100%;margin-left:5px}.group-list{display:flex;flex-direction:column;width:100%;max-width:300px;height:520px}.group-list-header{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.group-scroll{width:100%}.group-view{width:100%;margin-left:10px}.scroll-item-container{width:100%;border-radius:6px;margin-bottom:2px;background-color:var(--mat-sys-surface-container-low)}.scroll-item{width:100%;height:40px;display:flex;padding-left:5px;flex-direction:row;text-align:left;align-items:center;justify-content:center}.scroll-item:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.scroll-item-content{display:flex;flex-direction:row;align-items:center}.scroll-group-heading{padding-left:5px;width:100%;text-align:center}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["deleted", "fieldAdded", "orderUp", "orderDown"] }, { kind: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["orderUp", "orderDown", "deleted"] }] });
1995
2006
  }
1996
2007
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormBuilderComponent, decorators: [{
1997
2008
  type: Component,
@@ -2166,7 +2177,7 @@ class ListTableViewComponent {
2166
2177
  }));
2167
2178
  }
2168
2179
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2169
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListTableViewComponent, isStandalone: true, selector: "lib-list-table-view", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if (dataSource(); as dataSource) {\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n matSortActive=\"name\"\n matSortDisableClear\n matSortDirection=\"desc\"\n class=\"mat-elevation-z8\"\n style=\"width:100%; max-width: 800px;\"\n >\n @for (column of columns(); track column.name) {\n <ng-container matColumnDef=\"{{ column.name }}\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n {{ column.title }}\n </th>\n <td mat-cell *matCellDef=\"let element\">\n\n @if(column.element_type === \"date\")\n {\n {{ element[column.name] | date}}\n }\n @else if(column.element_type === \"enum\")\n {\n {{ element[column.name] | titlecase}}\n }\n @else {\n {{ element[column.name] }}\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnNames()\"\n [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n [routerLinkActive]=\"['is-active']\"\n ></tr>\n </table>\n\n <mat-paginator\n [length]=\"dataSource.length()\"\n [pageSize]=\"20\"\n [pageSizeOptions]=\"pageSizeOptions\"\n aria-label=\"Select page\"\n >\n </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
2180
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListTableViewComponent, isStandalone: true, selector: "lib-list-table-view", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if (dataSource(); as dataSource) {\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n matSortActive=\"name\"\n matSortDisableClear\n matSortDirection=\"desc\"\n class=\"mat-elevation-z8\"\n style=\"width:100%; max-width: 800px;\"\n >\n @for (column of columns(); track column.name) {\n <ng-container matColumnDef=\"{{ column.name }}\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n {{ column.title }}\n </th>\n <td mat-cell *matCellDef=\"let element\">\n\n @if(column.element_type === \"date\")\n {\n {{ element[column.name] | date}}\n }\n @else if(column.element_type === \"enum\")\n {\n {{ element[column.name] | titlecase}}\n }\n @else {\n {{ element[column.name] }}\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnNames()\"\n [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n [routerLinkActive]=\"['is-active']\"\n ></tr>\n </table>\n\n <mat-paginator\n [length]=\"dataSource.length()\"\n [pageSize]=\"20\"\n [pageSizeOptions]=\"pageSizeOptions\"\n aria-label=\"Select page\"\n >\n </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
2170
2181
  }
2171
2182
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListTableViewComponent, decorators: [{
2172
2183
  type: Component,
@@ -2198,7 +2209,7 @@ class ListScrollViewComponent {
2198
2209
  this.selected.emit(id);
2199
2210
  }
2200
2211
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2201
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, routerMode: { classPropertyName: "routerMode", publicName: "routerMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<mat-nav-list class=\"scrollable-container\">\n <cdk-virtual-scroll-viewport\n itemSize=\"itemHeight()\"\n class=\"scrollable-list\"\n style=\"width: 100%;\">\n <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n @if(routerMode())\n {\n <ng-container\n *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n >\n </ng-container>\n }\n @else \n {\n <div\n (click)=\"onSelected(item.id)\" \n (keydown)=\"onSelected(item.id)\"\n tabindex=\"0\"\n style=\"width: 100%; margin-right: 5px; margin-bottom: 2px;\"\n role=\"button\">\n <ng-container\n *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n >\n </ng-container> \n </div> \n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.scrollable-container{padding:0;display:flex;justify-content:center}.scrollable-list{height:540px;padding:5px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
2212
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, routerMode: { classPropertyName: "routerMode", publicName: "routerMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<mat-nav-list class=\"scrollable-container\">\n <cdk-virtual-scroll-viewport\n itemSize=\"itemHeight()\"\n class=\"scrollable-list\"\n style=\"width: 100%;\">\n <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n @if(routerMode())\n {\n <ng-container\n *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n >\n </ng-container>\n }\n @else \n {\n <div\n (click)=\"onSelected(item.id)\" \n (keydown)=\"onSelected(item.id)\"\n tabindex=\"0\"\n style=\"width: 100%; margin-right: 5px; margin-bottom: 2px;\"\n role=\"button\">\n <ng-container\n *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n >\n </ng-container> \n </div> \n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.scrollable-container{padding:0;display:flex;justify-content:center}.scrollable-list{height:540px;padding:5px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
2202
2213
  }
2203
2214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListScrollViewComponent, decorators: [{
2204
2215
  type: Component,
@@ -2287,6 +2298,7 @@ class ListViewComponent {
2287
2298
  columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
2288
2299
  fb = inject(FormBuilder);
2289
2300
  searchForm = signal(new SearchForm(new SearchFields(), this.fb), ...(ngDevMode ? [{ debugName: "searchForm" }] : []));
2301
+ scrollView = viewChild(ListScrollViewComponent, ...(ngDevMode ? [{ debugName: "scrollView" }] : []));
2290
2302
  get resolvedItemWidth() {
2291
2303
  if (this.itemDetailTemplate() && this.dataSource !== undefined && !this.dataSource.sourceIsEmpty()) {
2292
2304
  return (this.itemWidth() + 50).toString() + "px";
@@ -2336,9 +2348,21 @@ class ListViewComponent {
2336
2348
  const item_service = this.itemService();
2337
2349
  if (item_service) {
2338
2350
  this.dataSource = new ListDataSource(item_service, this.selectedViewType(), this.searchFields().defaultQueries);
2351
+ this.dataSource.items.subscribe(items => this.onSearchItems(items));
2339
2352
  }
2340
2353
  this.reset();
2341
2354
  }
2355
+ onSearchItems(items) {
2356
+ const scrollView = this.scrollView();
2357
+ if (scrollView) {
2358
+ if (items.length === 0) {
2359
+ scrollView.onSelected(null);
2360
+ }
2361
+ else {
2362
+ scrollView.onSelected(items[0].id);
2363
+ }
2364
+ }
2365
+ }
2342
2366
  reset() {
2343
2367
  if (this.dataSource) {
2344
2368
  this.dataSource.reset(this.searchForm().toQuery());
@@ -2359,7 +2383,7 @@ class ListViewComponent {
2359
2383
  return (url_segments.length == 2) && (url_segments[1].path == "self");
2360
2384
  }
2361
2385
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2362
- 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 }], 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"] }] });
2386
+ 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"] }] });
2363
2387
  }
2364
2388
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
2365
2389
  type: Component,
@@ -2377,7 +2401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
2377
2401
  MatButtonModule,
2378
2402
  ListHeaderComponent,
2379
2403
  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"] }]
2380
- }], 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 }] }] } });
2404
+ }], 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 }] }] } });
2381
2405
 
2382
2406
  class TopBarComponent {
2383
2407
  title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
@@ -2416,7 +2440,7 @@ class TopBarComponent {
2416
2440
  }
2417
2441
  }
2418
2442
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2419
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, loginRoute: { classPropertyName: "loginRoute", publicName: "loginRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n @if(logo())\n {\n <a aria-label=\"Home\" [routerLink]=\"['home']\">\n <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n </a>\n }\n @else {\n <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n <mat-icon class=\"icon\">home</mat-icon>\n </a>\n <span>{{title()}}</span>\n }\n @if(user()){\n <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n @if(leftNavService.wide()){\n menu_open\n }\n @else {\n menu\n }\n </mat-icon>\n </button>\n }\n\n <span class=\"topbar-spacer\"></span>\n @if(user(); as user)\n {\n <span>{{user.username}}</span>\n \n <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n <mat-icon class=\"icon\">person</mat-icon>\n </button>\n\n <mat-menu #profile_menu=\"matMenu\">\n <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n <mat-icon>manage_accounts</mat-icon>\n <span>My Profile</span>\n </a> \n <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback']\">\n <mat-icon>contact_support</mat-icon>\n <span>Get Support</span>\n </a> \n <button mat-menu-item (click)=\"onLogout()\">\n <mat-icon>logout</mat-icon>\n <span>Log Out</span>\n </button>\n\n </mat-menu>\n }\n @else {\n <span>Log In</span>\n <button matIconButton (click)=\"onLogin()\">\n <mat-icon class=\"icon\">login</mat-icon>\n </button>\n }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"], dependencies: [{ 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: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
2443
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, loginRoute: { classPropertyName: "loginRoute", publicName: "loginRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n @if(logo())\n {\n <a aria-label=\"Home\" [routerLink]=\"['home']\">\n <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n </a>\n }\n @else {\n <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n <mat-icon class=\"icon\">home</mat-icon>\n </a>\n <span>{{title()}}</span>\n }\n @if(user()){\n <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n @if(leftNavService.wide()){\n menu_open\n }\n @else {\n menu\n }\n </mat-icon>\n </button>\n }\n\n <span class=\"topbar-spacer\"></span>\n @if(user(); as user)\n {\n <span>{{user.username}}</span>\n \n <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n <mat-icon class=\"icon\">person</mat-icon>\n </button>\n\n <mat-menu #profile_menu=\"matMenu\">\n <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n <mat-icon>manage_accounts</mat-icon>\n <span>My Profile</span>\n </a> \n <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback/create']\">\n <mat-icon>contact_support</mat-icon>\n <span>Get Support</span>\n </a> \n <button mat-menu-item (click)=\"onLogout()\">\n <mat-icon>logout</mat-icon>\n <span>Log Out</span>\n </button>\n\n </mat-menu>\n }\n @else {\n <span>Log In</span>\n <button matIconButton (click)=\"onLogin()\">\n <mat-icon class=\"icon\">login</mat-icon>\n </button>\n }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"], dependencies: [{ 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: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
2420
2444
  }
2421
2445
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopBarComponent, decorators: [{
2422
2446
  type: Component,
@@ -2424,7 +2448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
2424
2448
  MatToolbarModule,
2425
2449
  MatIconModule,
2426
2450
  MatButtonModule,
2427
- MatMenuModule], template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n @if(logo())\n {\n <a aria-label=\"Home\" [routerLink]=\"['home']\">\n <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n </a>\n }\n @else {\n <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n <mat-icon class=\"icon\">home</mat-icon>\n </a>\n <span>{{title()}}</span>\n }\n @if(user()){\n <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n @if(leftNavService.wide()){\n menu_open\n }\n @else {\n menu\n }\n </mat-icon>\n </button>\n }\n\n <span class=\"topbar-spacer\"></span>\n @if(user(); as user)\n {\n <span>{{user.username}}</span>\n \n <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n <mat-icon class=\"icon\">person</mat-icon>\n </button>\n\n <mat-menu #profile_menu=\"matMenu\">\n <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n <mat-icon>manage_accounts</mat-icon>\n <span>My Profile</span>\n </a> \n <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback']\">\n <mat-icon>contact_support</mat-icon>\n <span>Get Support</span>\n </a> \n <button mat-menu-item (click)=\"onLogout()\">\n <mat-icon>logout</mat-icon>\n <span>Log Out</span>\n </button>\n\n </mat-menu>\n }\n @else {\n <span>Log In</span>\n <button matIconButton (click)=\"onLogin()\">\n <mat-icon class=\"icon\">login</mat-icon>\n </button>\n }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"] }]
2451
+ MatMenuModule], template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n @if(logo())\n {\n <a aria-label=\"Home\" [routerLink]=\"['home']\">\n <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n </a>\n }\n @else {\n <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n <mat-icon class=\"icon\">home</mat-icon>\n </a>\n <span>{{title()}}</span>\n }\n @if(user()){\n <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n @if(leftNavService.wide()){\n menu_open\n }\n @else {\n menu\n }\n </mat-icon>\n </button>\n }\n\n <span class=\"topbar-spacer\"></span>\n @if(user(); as user)\n {\n <span>{{user.username}}</span>\n \n <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n <mat-icon class=\"icon\">person</mat-icon>\n </button>\n\n <mat-menu #profile_menu=\"matMenu\">\n <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n <mat-icon>manage_accounts</mat-icon>\n <span>My Profile</span>\n </a> \n <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback/create']\">\n <mat-icon>contact_support</mat-icon>\n <span>Get Support</span>\n </a> \n <button mat-menu-item (click)=\"onLogout()\">\n <mat-icon>logout</mat-icon>\n <span>Log Out</span>\n </button>\n\n </mat-menu>\n }\n @else {\n <span>Log In</span>\n <button matIconButton (click)=\"onLogin()\">\n <mat-icon class=\"icon\">login</mat-icon>\n </button>\n }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"] }]
2428
2452
  }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], loginRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "loginRoute", required: false }] }] } });
2429
2453
 
2430
2454
  class LeftNavComponent {
@@ -2449,7 +2473,7 @@ class LeftNavComponent {
2449
2473
  }
2450
2474
  }
2451
2475
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2452
- 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; let idx=$index; let count=$count) { \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 @if(idx < count-1)\n {\n <mat-divider></mat-divider>\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; let idx=$index; let count=$count) { \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 @if(idx < count-1)\n {\n <mat-divider></mat-divider>\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: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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"] }, { kind: "ngmodule", type: MatDividerModule }] });
2476
+ 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; let idx=$index; let count=$count) { \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 @if(idx < count-1)\n {\n <mat-divider></mat-divider>\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; let idx=$index; let count=$count) { \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 @if(idx < count-1)\n {\n <mat-divider></mat-divider>\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$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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"] }, { kind: "ngmodule", type: MatDividerModule }] });
2453
2477
  }
2454
2478
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, decorators: [{
2455
2479
  type: Component,
@@ -2463,14 +2487,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
2463
2487
  MatDividerModule], 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; let idx=$index; let count=$count) { \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 @if(idx < count-1)\n {\n <mat-divider></mat-divider>\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; let idx=$index; let count=$count) { \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 @if(idx < count-1)\n {\n <mat-divider></mat-divider>\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"] }]
2464
2488
  }], ctorParameters: () => [], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], sideNavContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenavContent), { isSignal: true }] }] } });
2465
2489
 
2466
- class FeedbackComponent {
2490
+ class FeedbackService extends ItemWithUserService {
2491
+ _url = Feedback.plural;
2492
+ typename = Feedback.typename;
2493
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
2494
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackService, providedIn: 'root' });
2495
+ }
2496
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackService, decorators: [{
2497
+ type: Injectable,
2498
+ args: [{
2499
+ providedIn: 'root',
2500
+ }]
2501
+ }] });
2502
+
2503
+ class FeedbackForm {
2504
+ fb = inject(FormBuilder);
2505
+ form;
2506
+ constructor() {
2507
+ this.form = FeedbackForm.createForm(this.fb);
2508
+ }
2509
+ static createForm(fb) {
2510
+ return fb.group({
2511
+ comments: fb.control('', Validators.required)
2512
+ });
2513
+ }
2514
+ setValue(item) {
2515
+ this.form.patchValue({
2516
+ comments: item.comments,
2517
+ });
2518
+ }
2519
+ createItem() {
2520
+ const value = this.form.value;
2521
+ return {
2522
+ comments: value.comments || ""
2523
+ };
2524
+ }
2525
+ updateItem(item) {
2526
+ item.comments = this.form.value.comments || "";
2527
+ return item;
2528
+ }
2529
+ }
2530
+
2531
+ class FeedbackComponent extends EditView {
2532
+ helpLink = signal("", ...(ngDevMode ? [{ debugName: "helpLink" }] : []));
2533
+ constructor() {
2534
+ super(inject(FeedbackService), new (FeedbackForm));
2535
+ this.itemService.manifest.subscribe(m => { if (m) {
2536
+ this.helpLink.set(m.docs_url);
2537
+ } });
2538
+ }
2539
+ ngOnInit() {
2540
+ this.onInit();
2541
+ }
2467
2542
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2468
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: FeedbackComponent, isStandalone: true, selector: "lib-feedback", ngImport: i0, template: "<p>feedback works!</p>\n", styles: [""] });
2543
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FeedbackComponent, isStandalone: true, selector: "lib-feedback", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n @if(submitting())\n {\n <mat-spinner></mat-spinner>\n }\n @else{\n <div class=\"item-edit-container\">\n \n @if(helpLink(); as helplink)\n {\n <h2>User Guide</h2>\n <p>See the <a href=\"{{helplink}}\">User Guide</a> for information on using the portal.</p>\n }\n\n <h2>Comments</h2>\n <p>If you notice a defect or have general feedback on the portal please fill in the comments field below.</p>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n <mat-form-field class=\"form-field-wide\" style=\"max-width:800px\">\n <mat-label for=\"description\">Comments</mat-label>\n <textarea matInput placeholder=\"Comments\"\n type=\"text\"\n id=\"comments\"\n formControlName=\"comments\"\n name=\"comments\"\n class=\"medium-textarea\"\n required></textarea>\n </mat-form-field>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Submit\"\n [disabled]=\"!this.form.form.valid || !this.form.form.dirty\">\n <mat-icon>save</mat-icon>\n </button>\n \n <button mat-fab\n type=\"button\"\n class=\"form-action-button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n\n </form>\n </div>\n}\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { 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: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
2469
2544
  }
2470
2545
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackComponent, decorators: [{
2471
2546
  type: Component,
2472
- args: [{ selector: 'lib-feedback', imports: [], template: "<p>feedback works!</p>\n" }]
2473
- }] });
2547
+ args: [{ selector: 'lib-feedback', imports: [BackButtonComponent,
2548
+ ReactiveFormsModule,
2549
+ MatProgressSpinner,
2550
+ TitleCasePipe,
2551
+ MatInputModule,
2552
+ MatButtonModule,
2553
+ MatIconModule], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n @if(submitting())\n {\n <mat-spinner></mat-spinner>\n }\n @else{\n <div class=\"item-edit-container\">\n \n @if(helpLink(); as helplink)\n {\n <h2>User Guide</h2>\n <p>See the <a href=\"{{helplink}}\">User Guide</a> for information on using the portal.</p>\n }\n\n <h2>Comments</h2>\n <p>If you notice a defect or have general feedback on the portal please fill in the comments field below.</p>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n <mat-form-field class=\"form-field-wide\" style=\"max-width:800px\">\n <mat-label for=\"description\">Comments</mat-label>\n <textarea matInput placeholder=\"Comments\"\n type=\"text\"\n id=\"comments\"\n formControlName=\"comments\"\n name=\"comments\"\n class=\"medium-textarea\"\n required></textarea>\n </mat-form-field>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Submit\"\n [disabled]=\"!this.form.form.valid || !this.form.form.dirty\">\n <mat-icon>save</mat-icon>\n </button>\n \n <button mat-fab\n type=\"button\"\n class=\"form-action-button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n\n </form>\n </div>\n}\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"] }]
2554
+ }], ctorParameters: () => [] });
2474
2555
 
2475
2556
  class AvatarComponent {
2476
2557
  text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
@@ -2572,7 +2653,7 @@ class UserEditComponent extends EditView {
2572
2653
  return this.form.form.get('profile');
2573
2654
  }
2574
2655
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2575
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n <div class=\"item-edit-container\">\n\n <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n <lib-file-upload [control]=\"profileControl\" [uploadCategory]=\"'image'\"></lib-file-upload>\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label>Username</mat-label>\n <input matInput\n placeholder=\"Username\"\n type=\"text\"\n formControlName=\"username\"\n name=\"username\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field-wide\">\n <mat-label>Email</mat-label>\n <input matInput\n placeholder=\"Email\"\n type=\"text\"\n formControlName=\"email\"\n name=\"email\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>First Name</mat-label>\n <input matInput\n placeholder=\"First Name\"\n type=\"text\"\n formControlName=\"first_name\"\n name=\"first_name\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field\">\n <mat-label>Last Name</mat-label>\n <input matInput\n placeholder=\"Last Name\"\n type=\"text\"\n formControlName=\"last_name\"\n name=\"last_name\">\n </mat-form-field>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Save\"\n [disabled]=\"!form.form.valid || !form.form.dirty\">\n <mat-icon>save</mat-icon></button>\n \n <button mat-fab\n class=\"form-action-button\"\n type=\"button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon></button>\n </div> \n </form>\n </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { 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: "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: MatFormFieldModule }, { 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"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
2656
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n <div class=\"item-edit-container\">\n\n <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n <lib-file-upload [control]=\"profileControl\" [uploadCategory]=\"'image'\"></lib-file-upload>\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label>Username</mat-label>\n <input matInput\n placeholder=\"Username\"\n type=\"text\"\n formControlName=\"username\"\n name=\"username\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field-wide\">\n <mat-label>Email</mat-label>\n <input matInput\n placeholder=\"Email\"\n type=\"text\"\n formControlName=\"email\"\n name=\"email\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>First Name</mat-label>\n <input matInput\n placeholder=\"First Name\"\n type=\"text\"\n formControlName=\"first_name\"\n name=\"first_name\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field\">\n <mat-label>Last Name</mat-label>\n <input matInput\n placeholder=\"Last Name\"\n type=\"text\"\n formControlName=\"last_name\"\n name=\"last_name\">\n </mat-form-field>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Save\"\n [disabled]=\"!form.form.valid || !form.form.dirty\">\n <mat-icon>save</mat-icon></button>\n \n <button mat-fab\n class=\"form-action-button\"\n type=\"button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon></button>\n </div> \n </form>\n </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { 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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { 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"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
2576
2657
  }
2577
2658
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserEditComponent, decorators: [{
2578
2659
  type: Component,
@@ -2635,7 +2716,7 @@ class UserCreateComponent {
2635
2716
  this._location.back();
2636
2717
  }
2637
2718
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2638
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: UserCreateComponent, isStandalone: true, selector: "lib-user-create", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n <div class=\"item-edit-container\">\n\n <h1 class=\"item-edit-header\">Invite Member</h1>\n\n <form class=\"form-card\" [formGroup]=\"form().form\" (ngSubmit)=\"submit()\">\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label>Email</mat-label>\n <input matInput\n placeholder=\"Email\"\n type=\"text\"\n formControlName=\"user_email\"\n name=\"user_email\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>First Name</mat-label>\n <input matInput\n placeholder=\"First Name\"\n type=\"text\"\n formControlName=\"user_first_name\"\n name=\"user_first_name\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field\">\n <mat-label>Last Name</mat-label>\n <input matInput\n placeholder=\"Last Name\"\n type=\"text\"\n formControlName=\"user_last_name\"\n name=\"user_last_name\">\n </mat-form-field>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Invite\"\n [disabled]=\"!form().form.valid || !form().form.dirty\">\n <mat-icon>save</mat-icon></button>\n </div> \n </form>\n </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { 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: "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: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] });
2719
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: UserCreateComponent, isStandalone: true, selector: "lib-user-create", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n <div class=\"item-edit-container\">\n\n <h1 class=\"item-edit-header\">Invite Member</h1>\n\n <form class=\"form-card\" [formGroup]=\"form().form\" (ngSubmit)=\"submit()\">\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label>Email</mat-label>\n <input matInput\n placeholder=\"Email\"\n type=\"text\"\n formControlName=\"user_email\"\n name=\"user_email\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label>First Name</mat-label>\n <input matInput\n placeholder=\"First Name\"\n type=\"text\"\n formControlName=\"user_first_name\"\n name=\"user_first_name\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field\">\n <mat-label>Last Name</mat-label>\n <input matInput\n placeholder=\"Last Name\"\n type=\"text\"\n formControlName=\"user_last_name\"\n name=\"user_last_name\">\n </mat-form-field>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Invite\"\n [disabled]=\"!form().form.valid || !form().form.dirty\">\n <mat-icon>save</mat-icon></button>\n </div> \n </form>\n </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { 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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] });
2639
2720
  }
2640
2721
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserCreateComponent, decorators: [{
2641
2722
  type: Component,
@@ -2660,7 +2741,7 @@ class UserListDetailComponent {
2660
2741
  return title;
2661
2742
  }
2662
2743
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserListDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2663
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, even: { classPropertyName: "even", publicName: "even", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n @if(item().profile_thumbnail){\n <div class=\"image-holder\" style=\"width:35px;\">\n <img matListItemAvatar \n alt=\"User Avatar\" \n src=\"{{item().profile_thumbnail}}\" style=\"height:30px; border-radius: 5px;\">\n </div> \n }\n @else if(!item().verified)\n {\n <div class=\"image-holder\" style=\"width:35px;\">\n <mat-icon matListItemIcon>mail</mat-icon>\n </div> \n }\n @else {\n <div class=\"image-holder\" style=\"width:35px;\">\n <mat-icon matListItemIcon>person</mat-icon>\n </div>\n }\n <div class=\"text-container\">\n <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n <p matListItemLine>{{item().email}}</p>\n </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i2$1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
2744
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, even: { classPropertyName: "even", publicName: "even", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n @if(item().profile_thumbnail){\n <div class=\"image-holder\" style=\"width:35px;\">\n <img matListItemAvatar \n alt=\"User Avatar\" \n src=\"{{item().profile_thumbnail}}\" style=\"height:30px; border-radius: 5px;\">\n </div> \n }\n @else if(!item().verified)\n {\n <div class=\"image-holder\" style=\"width:35px;\">\n <mat-icon matListItemIcon>mail</mat-icon>\n </div> \n }\n @else {\n <div class=\"image-holder\" style=\"width:35px;\">\n <mat-icon matListItemIcon>person</mat-icon>\n </div>\n }\n <div class=\"text-container\">\n <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n <p matListItemLine>{{item().email}}</p>\n </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$2.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i2$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$2.MatListItemTitle, selector: "[matListItemTitle]" }] });
2664
2745
  }
2665
2746
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserListDetailComponent, decorators: [{
2666
2747
  type: Component,
@@ -2777,7 +2858,7 @@ class GroupEditComponent extends EditView {
2777
2858
  this.selectionManager.fetchCandidates(this.itemService.typePlural() + "__id", item.id);
2778
2859
  }
2779
2860
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2780
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: GroupEditComponent, isStandalone: true, selector: "lib-group-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n <div class=\"item-edit-container\">\n \n <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"name\">Name</mat-label>\n <input matInput placeholder=\"Name\"\n type=\"text\"\n id=\"name\"\n formControlName=\"name\"\n name=\"name\"\n required>\n </mat-form-field>\n \n <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n [itemType]=\"'Members'\"\n [columns]=\"selectionManager.columns\"\n [itemTemplate]=\"itemTemplate\"\n [options]=\"selectionManager.candidates()\"\n (itemAdded)=\"selectionManager.onAdded($event)\"\n (itemRemoved)=\"selectionManager.onRemoved($event)\"\n (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n </lib-select-table>\n <ng-template #itemTemplate let-item=\"item\">\n <div>\n <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n <p>{{item.email}}</p>\n </div>\n </ng-template>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Submit\"\n [disabled]=\"!showSubmit\">\n <mat-icon>save</mat-icon>\n </button>\n \n <button mat-fab\n type=\"button\"\n class=\"form-action-button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n </form>\n </div>\n</div>\n\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: 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: "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: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }] });
2861
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: GroupEditComponent, isStandalone: true, selector: "lib-group-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n <div class=\"item-edit-container\">\n \n <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"name\">Name</mat-label>\n <input matInput placeholder=\"Name\"\n type=\"text\"\n id=\"name\"\n formControlName=\"name\"\n name=\"name\"\n required>\n </mat-form-field>\n \n <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n [itemType]=\"'Members'\"\n [columns]=\"selectionManager.columns\"\n [itemTemplate]=\"itemTemplate\"\n [options]=\"selectionManager.candidates()\"\n (itemAdded)=\"selectionManager.onAdded($event)\"\n (itemRemoved)=\"selectionManager.onRemoved($event)\"\n (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n </lib-select-table>\n <ng-template #itemTemplate let-item=\"item\">\n <div>\n <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n <p>{{item.email}}</p>\n </div>\n </ng-template>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Submit\"\n [disabled]=\"!showSubmit\">\n <mat-icon>save</mat-icon>\n </button>\n \n <button mat-fab\n type=\"button\"\n class=\"form-action-button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n </form>\n </div>\n</div>\n\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: 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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }] });
2781
2862
  }
2782
2863
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupEditComponent, decorators: [{
2783
2864
  type: Component,
@@ -2801,7 +2882,7 @@ class GroupComponent {
2801
2882
  }
2802
2883
  }
2803
2884
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2804
- 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$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
2885
+ 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]" }] });
2805
2886
  }
2806
2887
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, decorators: [{
2807
2888
  type: Component,
@@ -2812,7 +2893,7 @@ class AddressEditComponent {
2812
2893
  countryOptions = input([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
2813
2894
  form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
2814
2895
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2815
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AddressEditComponent, isStandalone: true, selector: "lib-address-edit", inputs: { countryOptions: { classPropertyName: "countryOptions", publicName: "countryOptions", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(form(); as form){\n<div [formGroup]=\"form\" style=\"display: flex; flex-direction: column; width:100%\">\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"line1\">Line 1</mat-label>\n <input matInput placeholder=\"Address Line 1\" type=\"text\" id=\"line1\" formControlName=\"line1\" name=\"line1\"\n required>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"line2\">Line 2</mat-label>\n <input matInput placeholder=\"Address Line 2\" type=\"text\" id=\"line2\" formControlName=\"line2\" name=\"line1\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"line3\">Line 3</mat-label>\n <input matInput placeholder=\"Address Line 3\" type=\"text\" id=\"line3\" formControlName=\"line3\" name=\"line3\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"city\">City</mat-label>\n <input matInput placeholder=\"City\" type=\"text\" id=\"city\" formControlName=\"city\" name=\"city\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"region\">Region</mat-label>\n <input matInput placeholder=\"Region\" type=\"text\" id=\"region\" formControlName=\"region\" name=\"region\" required>\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"line1\">Post Code</mat-label>\n <input matInput placeholder=\"Post Code\" type=\"text\" id=\"postcode\" formControlName=\"postcode\" name=\"postcode\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"country\">Country</mat-label>\n <mat-select formControlName=\"country\" name=\"country\" id=\"country\" required>\n @for(country of countryOptions(); track $index){\n <mat-option [value]=\"country.code\">{{country.name}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n</div>\n}", styles: [""], dependencies: [{ 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: 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: 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: 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }] });
2896
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AddressEditComponent, isStandalone: true, selector: "lib-address-edit", inputs: { countryOptions: { classPropertyName: "countryOptions", publicName: "countryOptions", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(form(); as form){\n<div [formGroup]=\"form\" style=\"display: flex; flex-direction: column; width:100%\">\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"line1\">Line 1</mat-label>\n <input matInput placeholder=\"Address Line 1\" type=\"text\" id=\"line1\" formControlName=\"line1\" name=\"line1\"\n required>\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"line2\">Line 2</mat-label>\n <input matInput placeholder=\"Address Line 2\" type=\"text\" id=\"line2\" formControlName=\"line2\" name=\"line1\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"line3\">Line 3</mat-label>\n <input matInput placeholder=\"Address Line 3\" type=\"text\" id=\"line3\" formControlName=\"line3\" name=\"line3\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"city\">City</mat-label>\n <input matInput placeholder=\"City\" type=\"text\" id=\"city\" formControlName=\"city\" name=\"city\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"region\">Region</mat-label>\n <input matInput placeholder=\"Region\" type=\"text\" id=\"region\" formControlName=\"region\" name=\"region\" required>\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"line1\">Post Code</mat-label>\n <input matInput placeholder=\"Post Code\" type=\"text\" id=\"postcode\" formControlName=\"postcode\" name=\"postcode\">\n </mat-form-field>\n\n <mat-form-field class=\"form-field\">\n <mat-label for=\"country\">Country</mat-label>\n <mat-select formControlName=\"country\" name=\"country\" id=\"country\" required>\n @for(country of countryOptions(); track $index){\n <mat-option [value]=\"country.code\">{{country.name}}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { 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: 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: 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }] });
2816
2897
  }
2817
2898
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressEditComponent, decorators: [{
2818
2899
  type: Component,
@@ -2914,16 +2995,19 @@ class OrganizationComponent {
2914
2995
  rows: [{
2915
2996
  filters: [{
2916
2997
  display_name: "Country",
2917
- key: "country_name",
2998
+ key: "address__country",
2918
2999
  type: "selection",
2919
3000
  tooltip: "",
2920
- choices: [],
3001
+ choices: [{ display_name: "Ireland", value: "IE" },
3002
+ { display_name: "France", value: "FR" },
3003
+ { display_name: "Spain", value: "ES" },
3004
+ { display_name: "Italy", value: "IT" }
3005
+ ],
2921
3006
  default: "",
2922
3007
  include_if_null: false
2923
3008
  }]
2924
3009
  }]
2925
3010
  },
2926
- defaultQueries: [{ key: "address__country", value: "IE" }],
2927
3011
  sortFields: [{ display_name: "Age", value: "created_at" },
2928
3012
  { display_name: "Last Updated", value: "updated_at" },
2929
3013
  { display_name: "Name", value: "name" }
@@ -2931,9 +3015,7 @@ class OrganizationComponent {
2931
3015
  }), ...(ngDevMode ? [{ debugName: "searchFields" }] : []));
2932
3016
  detailView = viewChild(OrganizationDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
2933
3017
  onSelected(id) {
2934
- if (id) {
2935
- this.detailView()?.onSelection(id);
2936
- }
3018
+ this.detailView()?.onSelection(id);
2937
3019
  }
2938
3020
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2939
3021
  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"] }] });
@@ -3030,7 +3112,7 @@ class OrganizationEditComponent extends EditView {
3030
3112
  this.selectionManager.fetchCandidates(this.itemService.typePlural() + "__id", item.id);
3031
3113
  }
3032
3114
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3033
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n @if(submitting())\n {\n <mat-spinner></mat-spinner>\n }\n @else{\n <div class=\"item-edit-container\">\n \n <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n <mat-tab-group mat-stretch-tabs=\"true\" mat-align-tabs=\"center\" style=\"width:100%;\">\n\n <mat-tab label=\"Overview\" style=\"width:100%;\">\n <div style=\"padding:10px;\">\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"name\">Name</mat-label>\n <input matInput placeholder=\"Name\"\n type=\"text\"\n id=\"name\"\n formControlName=\"name\"\n name=\"name\"\n required>\n </mat-form-field>\n \n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"acronym\">Acronym</mat-label> \n <input matInput placeholder=\"Acronym\"\n type=\"text\"\n id=\"acronym\"\n formControlName=\"acronym\"\n name=\"acronym\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"description\">Description</mat-label>\n <textarea matInput placeholder=\"Description\"\n type=\"text\"\n id=\"description\"\n formControlName=\"description\"\n name=\"description\"\n class=\"medium-textarea\"\n required></textarea>\n </mat-form-field>\n\n <mat-accordion style=\"width:100%\">\n <mat-expansion-panel style=\"width:100%\" [expanded]=\"true\">\n <mat-expansion-panel-header>\n <mat-panel-title>Address</mat-panel-title>\n </mat-expansion-panel-header>\n\n <lib-address-edit \n [countryOptions]=\"organizationService.countryOptions()\"\n [form]=\"addressForm()\"\n ></lib-address-edit>\n </mat-expansion-panel>\n </mat-accordion>\n\n <mat-slide-toggle style=\"margin-top: 10px;\" formControlName=\"public\">Is Public?</mat-slide-toggle>\n\n </div>\n </mat-tab>\n\n <mat-tab label=\"Members\" style=\"width:100%;\">\n <div style=\"padding:10px\">\n <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n [itemType]=\"'Members'\"\n [columns]=\"selectionManager.columns\"\n [itemTemplate]=\"itemTemplate\"\n [options]=\"selectionManager.candidates()\"\n (itemAdded)=\"selectionManager.onAdded($event)\"\n (itemRemoved)=\"selectionManager.onRemoved($event)\"\n (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n </lib-select-table>\n <ng-template #itemTemplate let-item=\"item\">\n <div>\n <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n <p>{{item.email}}</p>\n </div>\n </ng-template>\n </div>\n </mat-tab>\n </mat-tab-group>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Submit\"\n [disabled]=\"!showSubmit\">\n <mat-icon>save</mat-icon>\n </button>\n \n <button mat-fab\n type=\"button\"\n class=\"form-action-button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n </form>\n </div>\n }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: 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: 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: "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: MatSelectModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: AddressEditComponent, selector: "lib-address-edit", inputs: ["countryOptions", "form"] }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { 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: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
3115
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n @if(submitting())\n {\n <mat-spinner></mat-spinner>\n }\n @else{\n <div class=\"item-edit-container\">\n \n <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n <mat-tab-group mat-stretch-tabs=\"true\" mat-align-tabs=\"center\" style=\"width:100%;\">\n\n <mat-tab label=\"Overview\" style=\"width:100%;\">\n <div style=\"padding:10px;\">\n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"name\">Name</mat-label>\n <input matInput placeholder=\"Name\"\n type=\"text\"\n id=\"name\"\n formControlName=\"name\"\n name=\"name\"\n required>\n </mat-form-field>\n \n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"acronym\">Acronym</mat-label> \n <input matInput placeholder=\"Acronym\"\n type=\"text\"\n id=\"acronym\"\n formControlName=\"acronym\"\n name=\"acronym\">\n </mat-form-field>\n \n <mat-form-field class=\"form-field-wide\">\n <mat-label for=\"description\">Description</mat-label>\n <textarea matInput placeholder=\"Description\"\n type=\"text\"\n id=\"description\"\n formControlName=\"description\"\n name=\"description\"\n class=\"medium-textarea\"\n required></textarea>\n </mat-form-field>\n\n <mat-accordion style=\"width:100%\">\n <mat-expansion-panel style=\"width:100%\" [expanded]=\"true\">\n <mat-expansion-panel-header>\n <mat-panel-title>Address</mat-panel-title>\n </mat-expansion-panel-header>\n\n <lib-address-edit \n [countryOptions]=\"organizationService.countryOptions()\"\n [form]=\"addressForm()\"\n ></lib-address-edit>\n </mat-expansion-panel>\n </mat-accordion>\n\n <mat-slide-toggle style=\"margin-top: 10px;\" formControlName=\"public\">Is Public?</mat-slide-toggle>\n\n </div>\n </mat-tab>\n\n <mat-tab label=\"Members\" style=\"width:100%;\">\n <div style=\"padding:10px\">\n <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n [itemType]=\"'Members'\"\n [columns]=\"selectionManager.columns\"\n [itemTemplate]=\"itemTemplate\"\n [options]=\"selectionManager.candidates()\"\n (itemAdded)=\"selectionManager.onAdded($event)\"\n (itemRemoved)=\"selectionManager.onRemoved($event)\"\n (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n </lib-select-table>\n <ng-template #itemTemplate let-item=\"item\">\n <div>\n <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n <p>{{item.email}}</p>\n </div>\n </ng-template>\n </div>\n </mat-tab>\n </mat-tab-group>\n\n <div class=\"button-group\">\n <button mat-fab\n class=\"form-action-button\"\n type=\"submit\"\n matTooltip=\"Submit\"\n [disabled]=\"!showSubmit\">\n <mat-icon>save</mat-icon>\n </button>\n \n <button mat-fab\n type=\"button\"\n class=\"form-action-button\"\n matTooltip=\"Cancel\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n </form>\n </div>\n }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: 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: 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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: AddressEditComponent, selector: "lib-address-edit", inputs: ["countryOptions", "form"] }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { 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: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
3034
3116
  }
3035
3117
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationEditComponent, decorators: [{
3036
3118
  type: Component,
@@ -3062,5 +3144,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
3062
3144
  * Generated bundle index. Do not edit.
3063
3145
  */
3064
3146
 
3065
- export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, GroupEditComponent, GroupService, ItemQuery, ItemService, ItemWithUserService, LeftNavComponent, LeftNavService, ListTableViewComponent, ListViewComponent, MemberSelectionManager, MockItemService, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PopulatedFormComponent, PopulatedFormForm, PortalMember, REST_SERVICE_CONFIG, ResolvedPermission, RestService, SearchBarComponent, SearchFields, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserCreateComponent, UserCreateForm, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey, getFileFieldIds, getFilter };
3147
+ export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, Feedback, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, GroupEditComponent, GroupService, ItemQuery, ItemService, ItemWithUserService, LeftNavComponent, LeftNavService, ListTableViewComponent, ListViewComponent, MemberSelectionManager, MockItemService, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PopulatedFormComponent, PopulatedFormForm, PortalMember, REST_SERVICE_CONFIG, ResolvedPermission, RestService, SearchBarComponent, SearchFields, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserCreateComponent, UserCreateForm, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey, getFileFieldIds, getFilter };
3066
3148
  //# sourceMappingURL=ichec-angular-core.mjs.map