@cleavelandprice/ngx-lib 3.11.3 → 3.12.0

package/esm2022/upload/components/upload-dialog/upload-dialog.component.mjs

@@ -76,13 +76,13 @@ export class UploadDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: UploadDialogComponent, selector: "ng-component", viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\n\n<div mat-dialog-title id=\"title\">\n  <div>{{ uploadService.config.uploadDialogTitle }}</div>\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\n    {{ uploadService.config.uploadDialogAddFilesButtonText }}\n  </button>\n</div>\n\n@if (existingFileConflict) {\n  <div id=\"conflict\">\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\n  </div>\n}\n\n<mat-dialog-content>\n  <mat-list>\n    @for (file of files; track file) {\n      <mat-list-item>\n        <h4 mat-line>{{file.name}}</h4>\n        @if (progress) {\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"></mat-progress-bar>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\n</mat-dialog-content>\n\n<mat-dialog-actions id=\"actions\">\n  @if (showCancelButton) {\n    <button mat-button mat-dialog-close>{{ uploadService.config.uploadDialogCancelButtonText }}</button>\n  }\n  @if (files.size > 0) {\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\n  }\n</mat-dialog-actions>\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"], dependencies: [{ kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: UploadDialogComponent, selector: "ng-component", viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\n\n<div mat-dialog-title id=\"title\">\n  <div>{{ uploadService.config.uploadDialogTitle }}</div>\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\n    {{ uploadService.config.uploadDialogAddFilesButtonText }}\n  </button>\n</div>\n\n@if (existingFileConflict) {\n  <div id=\"conflict\">\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\n  </div>\n}\n\n<mat-dialog-content>\n  <mat-list>\n    @for (file of files; track file) {\n      <mat-list-item>\n        <h4 mat-line>{{file.name}}</h4>\n        @if (progress) {\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"/>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\n</mat-dialog-content>\n\n<mat-dialog-actions id=\"actions\">\n  @if (showCancelButton) {\n    <button mat-button mat-dialog-close>{{ uploadService.config.uploadDialogCancelButtonText }}</button>\n  }\n  @if (files.size > 0) {\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\n  }\n</mat-dialog-actions>\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"], dependencies: [{ kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UploadDialogComponent, decorators: [{
             type: Component,
-            args: [{ template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\n\n<div mat-dialog-title id=\"title\">\n  <div>{{ uploadService.config.uploadDialogTitle }}</div>\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\n    {{ uploadService.config.uploadDialogAddFilesButtonText }}\n  </button>\n</div>\n\n@if (existingFileConflict) {\n  <div id=\"conflict\">\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\n  </div>\n}\n\n<mat-dialog-content>\n  <mat-list>\n    @for (file of files; track file) {\n      <mat-list-item>\n        <h4 mat-line>{{file.name}}</h4>\n        @if (progress) {\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"></mat-progress-bar>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\n</mat-dialog-content>\n\n<mat-dialog-actions id=\"actions\">\n  @if (showCancelButton) {\n    <button mat-button mat-dialog-close>{{ uploadService.config.uploadDialogCancelButtonText }}</button>\n  }\n  @if (files.size > 0) {\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\n  }\n</mat-dialog-actions>\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"] }]
+            args: [{ template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\n\n<div mat-dialog-title id=\"title\">\n  <div>{{ uploadService.config.uploadDialogTitle }}</div>\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\n    {{ uploadService.config.uploadDialogAddFilesButtonText }}\n  </button>\n</div>\n\n@if (existingFileConflict) {\n  <div id=\"conflict\">\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\n  </div>\n}\n\n<mat-dialog-content>\n  <mat-list>\n    @for (file of files; track file) {\n      <mat-list-item>\n        <h4 mat-line>{{file.name}}</h4>\n        @if (progress) {\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"/>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\n</mat-dialog-content>\n\n<mat-dialog-actions id=\"actions\">\n  @if (showCancelButton) {\n    <button mat-button mat-dialog-close>{{ uploadService.config.uploadDialogCancelButtonText }}</button>\n  }\n  @if (files.size > 0) {\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\n  }\n</mat-dialog-actions>\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"] }]
         }], propDecorators: { file: [{
                 type: ViewChild,
                 args: ['file', { static: true }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsb2FkLWRpYWxvZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jbGVhdmVsYW5kcHJpY2Uvbmd4LWxpYi91cGxvYWQvc3JjL2NvbXBvbmVudHMvdXBsb2FkLWRpYWxvZy91cGxvYWQtZGlhbG9nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NsZWF2ZWxhbmRwcmljZS9uZ3gtbGliL3VwbG9hZC9zcmMvY29tcG9uZW50cy91cGxvYWQtZGlhbG9nL3VwbG9hZC1kaWFsb2cuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxNQUFNLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRWhDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7Ozs7OztBQU1oRSxNQUFNLE9BQU8scUJBQXFCO0lBSmxDO1FBS0Usa0JBQWtCO1FBQ1gsY0FBUyxHQUFHLE1BQU0sQ0FBQyxDQUFBLFlBQW1DLENBQUEsQ0FBQyxDQUFDO1FBQ3hELGtCQUFhLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBSXRDLFVBQUssR0FBYyxJQUFJLEdBQUcsRUFBRSxDQUFDO1FBS3BDLGdCQUFXLEdBQUcsSUFBSSxDQUFDO1FBRW5CLHFCQUFnQixHQUFHLElBQUksQ0FBQztRQUN4QixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztLQXlFMUI7SUF2RUMsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyw0QkFBNEIsQ0FBQztJ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UmVmLCBpbmplY3QsIE9uSW5pdCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1hdERpYWxvZ1JlZiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XHJcbmltcG9ydCB7IGZvcmtKb2luIH0gZnJvbSAncnhqcyc7XHJcblxyXG5pbXBvcnQgeyBVcGxvYWRTZXJ2aWNlIH0gZnJvbSAnLi8uLi8uLi9zZXJ2aWNlcy91cGxvYWQuc2VydmljZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICB0ZW1wbGF0ZVVybDogJy4vdXBsb2FkLWRpYWxvZy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdXBsb2FkLWRpYWxvZy5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFVwbG9hZERpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgLy8jcmVnaW9uIFNlcnZpY2VzXHJcbiAgcHVibGljIGRpYWxvZ1JlZiA9IGluamVjdChNYXREaWFsb2dSZWY8VXBsb2FkRGlhbG9nQ29tcG9uZW50Pik7XHJcbiAgcHVibGljIHVwbG9hZFNlcnZpY2UgPSBpbmplY3QoVXBsb2FkU2VydmljZSk7XHJcbiAgLy8jZW5kcmVnaW9uXHJcblxyXG4gIEBWaWV3Q2hpbGQoJ2ZpbGUnLCB7IHN0YXRpYzogdHJ1ZSB9KSBmaWxlITogRWxlbWVudFJlZjtcclxuICBwdWJsaWMgZmlsZXM6IFNldDxGaWxlPiA9IG5ldyBTZXQoKTtcclxuICBleGlzdGluZ0ZpbGVDb25mbGljdD86IHN0cmluZztcclxuXHJcbiAgLy8gU3RhdGVcclxuICBwcm9ncmVzczogYW55O1xyXG4gIGNhbkJlQ2xvc2VkID0gdHJ1ZTtcclxuICBwcmltYXJ5QnV0dG9uVGV4dD86IHN0cmluZztcclxuICBzaG93Q2FuY2VsQnV0dG9uID0gdHJ1ZTtcclxuICB1cGxvYWRpbmcgPSBmYWxzZTtcclxuICB1cGxvYWRTdWNjZXNzZnVsID0gZmFsc2U7XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5wcmltYXJ5QnV0dG9uVGV4dCA9IHRoaXMudXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nVXBsb2FkQnV0dG9uVGV4dDtcclxuICB9XHJcblxyXG4gIGFkZEZpbGVzKCkge1xyXG4gICAgdGhpcy5maWxlLm5hdGl2ZUVsZW1lbnQuY2xpY2soKTtcclxuICB9XHJcblxyXG4gIG9uRmlsZXNBZGRlZCgpIHtcclxuICAgIGNvbnN0IGZpbGVzOiB7IFtrZXk6IHN0cmluZ106IEZpbGUgfSA9IHRoaXMuZmlsZS5uYXRpdmVFbGVtZW50LmZpbGVzO1xyXG4gICAgZm9yIChjb25zdCBrZXkgaW4gZmlsZXMpIHtcclxuICAgICAgaWYgKCFpc05hTihwYXJzZUludChrZXkpKSkge1xyXG4gICAgICAgIC8vIFNlZSBpZiB0aGUgZmlsZSBhbHJlYWR5IGV4aXN0c1xyXG4gICAgICAgIHRoaXMudXBsb2FkU2VydmljZS5leGlzdHMoZmlsZXNba2V5XS5uYW1lKVxyXG4gICAgICAgICAgLnN1YnNjcmliZShleGlzdHMgPT4ge1xyXG4gICAgICAgICAgICBpZiAoZXhpc3RzKSB7XHJcbiAgICAgICAgICAgICAgdGhpcy5leGlzdGluZ0ZpbGVDb25mbGljdCA9IGZpbGVzW2tleV0ubmFtZTtcclxuICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgaWYgKCFleGlzdHMpIHtcclxuICAgICAgICAgICAgICB0aGlzLmZpbGVzLmFkZChmaWxlc1trZXldKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgfSk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIGNsb3NlRGlhbG9nKCkge1xyXG4gICAgLy8gaWYgZXZlcnl0aGluZyB3YXMgdXBsb2FkZWQgYWxyZWFkeSwganVzdCBjbG9zZSB0aGUgZGlhbG9nXHJcbiAgICBpZiAodGhpcy51cGxvYWRTdWNjZXNzZnVsKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmRpYWxvZ1JlZi5jbG9zZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIHNldCB0aGUgY29tcG9uZW50IHN0YXRlIHRvIFwidXBsb2FkaW5nXCJcclxuICAgIHRoaXMudXBsb2FkaW5nID0gdHJ1ZTtcclxuXHJcbiAgICAvLyBzdGFydCB0aGUgdXBsb2FkIGFuZCBzYXZlIHRoZSBwcm9ncmVzcyBtYXBcclxuICAgIHRoaXMucHJvZ3Jlc3MgPSB0aGlzLnVwbG9hZFNlcnZpY2UudXBsb2FkKHRoaXMuZmlsZXMpO1xyXG5cclxuICAgIC8vIGNvbnZlcnQgdGhlIHByb2dyZXNzIG1hcCBpbnRvIGFuIGFycmF5XHJcbiAgICBjb25zdCBhbGxQcm9ncmVzc09ic2VydmFibGVzOiBhbnlbXSA9IFtdO1xyXG5cclxuICAgIGZvciAobGV0IGtleSBpbiB0aGlzLnByb2dyZXNzKSB7XHJcbiAgICAgIGFsbFByb2dyZXNzT2JzZXJ2YWJsZXMucHVzaCh0aGlzLnByb2dyZXNzW2tleV0ucHJvZ3Jlc3MpO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIEFkanVzdCB0aGUgc3RhdGUgdmFyaWFibGVzXHJcblxyXG4gICAgLy8gVGhlIE9LLWJ1dHRvbiBzaG91bGQgaGF2ZSB0aGUgdGV4dCBcIkZpbmlzaFwiIG5vd1xyXG4gICAgdGhpcy5wcmltYXJ5QnV0dG9uVGV4dCA9IHRoaXMudXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nRmluaXNoQnV0dG9uVGV4dDtcclxuXHJcbiAgICAvLyBUaGUgZGlhbG9nIHNob3VsZCBub3QgYmUgY2xvc2VkIHdoaWxlIHVwbG9hZGluZ1xyXG4gICAgdGhpcy5jYW5CZUNsb3NlZCA9IGZhbHNlO1xyXG4gICAgdGhpcy5kaWFsb2dSZWYuZGlzYWJsZUNsb3NlID0gdHJ1ZTtcclxuXHJcbiAgICAvLyBIaWRlIHRoZSBjYW5jZWwtYnV0dG9uXHJcbiAgICB0aGlzLnNob3dDYW5jZWxCdXR0b24gPSBmYWxzZTtcclxuXHJcbiAgICAvLyBXaGVuIGFsbCBwcm9ncmVzcy1vYnNlcnZhYmxlcyBhcmUgY29tcGxldGVkLi4uXHJcbiAgICBmb3JrSm9pbihhbGxQcm9ncmVzc09ic2VydmFibGVzKS5zdWJzY3JpYmUoZW5kID0+IHtcclxuICAgICAgLy8gLi4uIHRoZSBkaWFsb2cgY2FuIGJlIGNsb3NlZCBhZ2Fpbi4uLlxyXG4gICAgICB0aGlzLmNhbkJlQ2xvc2VkID0gdHJ1ZTtcclxuICAgICAgdGhpcy5kaWFsb2dSZWYuZGlzYWJsZUNsb3NlID0gZmFsc2U7XHJcblxyXG4gICAgICAvLyAuLi4gdGhlIHVwbG9hZCB3YXMgc3VjY2Vzc2Z1bC4uLlxyXG4gICAgICB0aGlzLnVwbG9hZFN1Y2Nlc3NmdWwgPSB0cnVlO1xyXG5cclxuICAgICAgLy8gLi4uIGFuZCB0aGUgY29tcG9uZW50IGlzIG5vIGxvbmdlciB1cGxvYWRpbmdcclxuICAgICAgdGhpcy51cGxvYWRpbmcgPSBmYWxzZTtcclxuICAgIH0pO1xyXG4gIH1cclxufVxyXG4iLCI8aW5wdXQgdHlwZT1cImZpbGVcIiAjZmlsZSBzdHlsZT1cImRpc3BsYXk6IG5vbmVcIiAoY2hhbmdlKT1cIm9uRmlsZXNBZGRlZCgpXCIgbXVsdGlwbGUgLz5cblxuPGRpdiBtYXQtZGlhbG9nLXRpdGxlIGlkPVwidGl0bGVcIj5cbiAgPGRpdj57eyB1cGxvYWRTZXJ2aWNlLmNvbmZpZy51cGxvYWREaWFsb2dUaXRsZSB9fTwvZGl2PlxuICA8YnV0dG9uIFtkaXNhYmxlZF09XCJ1cGxvYWRpbmcgfHwgdXBsb2FkU3VjY2Vzc2Z1bFwiIG1hdC1yYWlzZWQtYnV0dG9uIGNvbG9yPVwicHJpbWFyeVwiIGNsYXNzPVwiYWRkLWZpbGVzLWJ0blwiIChjbGljayk9XCJhZGRGaWxlcygpXCI+XG4gICAge3sgdXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nQWRkRmlsZXNCdXR0b25UZXh0IH19XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG5cbkBpZiAoZXhpc3RpbmdGaWxlQ29uZmxpY3QpIHtcbiAgPGRpdiBpZD1cImNvbmZsaWN0XCI+XG4gICAge3sgZXhpc3RpbmdGaWxlQ29uZmxpY3QgfX0gYWxyZWFkeSBleGlzdHMgb24gdGhlIHNlcnZlciBhbmQgY2Fubm90IGJlIG92ZXJ3cml0dGVuXG4gIDwvZGl2PlxufVxuXG48bWF0LWRpYWxvZy1jb250ZW50PlxuICA8bWF0LWxpc3Q+XG4gICAgQGZvciAoZmlsZSBvZiBmaWxlczsgdHJhY2sgZmlsZSkge1xuICAgICAgPG1hdC1saXN0LWl0ZW0+XG4gICAgICAgIDxoNCBtYXQtbGluZT57e2ZpbGUubmFtZX19PC9oND5cbiAgICAgICAgQGlmIChwcm9ncmVzcykge1xuICAgICAgICAgIDxtYXQtcHJvZ3Jlc3MtYmFyIG1vZGU9XCJkZXRlcm1pbmF0ZVwiIFt2YWx1ZV09XCJwcm9ncmVzc1tmaWxlLm5hbWVdLnByb2dyZXNzIHwgYXN5bmNcIj48L21hdC1wcm9ncmVzcy1iYXI+XG4gICAgICAgIH1cbiAgICAgIDwvbWF0LWxpc3QtaXRlbT5cbiAgICB9XG4gIDwvbWF0LWxpc3Q+XG48L21hdC1kaWFsb2ctY29udGVudD5cblxuPG1hdC1kaWFsb2ctYWN0aW9ucyBpZD1cImFjdGlvbnNcIj5cbiAgQGlmIChzaG93Q2FuY2VsQnV0dG9uKSB7XG4gICAgPGJ1dHRvbiBtYXQtYnV0dG9uIG1hdC1kaWFsb2ctY2xvc2U+e3sgdXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nQ2FuY2VsQnV0dG9uVGV4dCB9fTwvYnV0dG9uPlxuICB9XG4gIEBpZiAoZmlsZXMuc2l6ZSA+IDApIHtcbiAgICA8YnV0dG9uIG1hdC1yYWlzZWQtYnV0dG9uIGNvbG9yPVwicHJpbWFyeVwiIFtkaXNhYmxlZF09XCIhY2FuQmVDbG9zZWRcIiAoY2xpY2spPVwiY2xvc2VEaWFsb2coKVwiPnt7IHByaW1hcnlCdXR0b25UZXh0IH19PC9idXR0b24+XG4gIH1cbjwvbWF0LWRpYWxvZy1hY3Rpb25zPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsb2FkLWRpYWxvZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jbGVhdmVsYW5kcHJpY2Uvbmd4LWxpYi91cGxvYWQvc3JjL2NvbXBvbmVudHMvdXBsb2FkLWRpYWxvZy91cGxvYWQtZGlhbG9nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NsZWF2ZWxhbmRwcmljZS9uZ3gtbGliL3VwbG9hZC9zcmMvY29tcG9uZW50cy91cGxvYWQtZGlhbG9nL3VwbG9hZC1kaWFsb2cuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxNQUFNLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRWhDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7Ozs7OztBQU1oRSxNQUFNLE9BQU8scUJBQXFCO0lBSmxDO1FBS0Usa0JBQWtCO1FBQ1gsY0FBUyxHQUFHLE1BQU0sQ0FBQyxDQUFBLFlBQW1DLENBQUEsQ0FBQyxDQUFDO1FBQ3hELGtCQUFhLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBSXRDLFVBQUssR0FBYyxJQUFJLEdBQUcsRUFBRSxDQUFDO1FBS3BDLGdCQUFXLEdBQUcsSUFBSSxDQUFDO1FBRW5CLHFCQUFnQixHQUFHLElBQUksQ0FBQztRQUN4QixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztLQXlFMUI7SUF2RUMsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyw0QkFBNEIsQ0FBQztJ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UmVmLCBpbmplY3QsIE9uSW5pdCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1hdERpYWxvZ1JlZiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XHJcbmltcG9ydCB7IGZvcmtKb2luIH0gZnJvbSAncnhqcyc7XHJcblxyXG5pbXBvcnQgeyBVcGxvYWRTZXJ2aWNlIH0gZnJvbSAnLi8uLi8uLi9zZXJ2aWNlcy91cGxvYWQuc2VydmljZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICB0ZW1wbGF0ZVVybDogJy4vdXBsb2FkLWRpYWxvZy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdXBsb2FkLWRpYWxvZy5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFVwbG9hZERpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgLy8jcmVnaW9uIFNlcnZpY2VzXHJcbiAgcHVibGljIGRpYWxvZ1JlZiA9IGluamVjdChNYXREaWFsb2dSZWY8VXBsb2FkRGlhbG9nQ29tcG9uZW50Pik7XHJcbiAgcHVibGljIHVwbG9hZFNlcnZpY2UgPSBpbmplY3QoVXBsb2FkU2VydmljZSk7XHJcbiAgLy8jZW5kcmVnaW9uXHJcblxyXG4gIEBWaWV3Q2hpbGQoJ2ZpbGUnLCB7IHN0YXRpYzogdHJ1ZSB9KSBmaWxlITogRWxlbWVudFJlZjtcclxuICBwdWJsaWMgZmlsZXM6IFNldDxGaWxlPiA9IG5ldyBTZXQoKTtcclxuICBleGlzdGluZ0ZpbGVDb25mbGljdD86IHN0cmluZztcclxuXHJcbiAgLy8gU3RhdGVcclxuICBwcm9ncmVzczogYW55O1xyXG4gIGNhbkJlQ2xvc2VkID0gdHJ1ZTtcclxuICBwcmltYXJ5QnV0dG9uVGV4dD86IHN0cmluZztcclxuICBzaG93Q2FuY2VsQnV0dG9uID0gdHJ1ZTtcclxuICB1cGxvYWRpbmcgPSBmYWxzZTtcclxuICB1cGxvYWRTdWNjZXNzZnVsID0gZmFsc2U7XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5wcmltYXJ5QnV0dG9uVGV4dCA9IHRoaXMudXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nVXBsb2FkQnV0dG9uVGV4dDtcclxuICB9XHJcblxyXG4gIGFkZEZpbGVzKCkge1xyXG4gICAgdGhpcy5maWxlLm5hdGl2ZUVsZW1lbnQuY2xpY2soKTtcclxuICB9XHJcblxyXG4gIG9uRmlsZXNBZGRlZCgpIHtcclxuICAgIGNvbnN0IGZpbGVzOiB7IFtrZXk6IHN0cmluZ106IEZpbGUgfSA9IHRoaXMuZmlsZS5uYXRpdmVFbGVtZW50LmZpbGVzO1xyXG4gICAgZm9yIChjb25zdCBrZXkgaW4gZmlsZXMpIHtcclxuICAgICAgaWYgKCFpc05hTihwYXJzZUludChrZXkpKSkge1xyXG4gICAgICAgIC8vIFNlZSBpZiB0aGUgZmlsZSBhbHJlYWR5IGV4aXN0c1xyXG4gICAgICAgIHRoaXMudXBsb2FkU2VydmljZS5leGlzdHMoZmlsZXNba2V5XS5uYW1lKVxyXG4gICAgICAgICAgLnN1YnNjcmliZShleGlzdHMgPT4ge1xyXG4gICAgICAgICAgICBpZiAoZXhpc3RzKSB7XHJcbiAgICAgICAgICAgICAgdGhpcy5leGlzdGluZ0ZpbGVDb25mbGljdCA9IGZpbGVzW2tleV0ubmFtZTtcclxuICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgaWYgKCFleGlzdHMpIHtcclxuICAgICAgICAgICAgICB0aGlzLmZpbGVzLmFkZChmaWxlc1trZXldKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgfSk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIGNsb3NlRGlhbG9nKCkge1xyXG4gICAgLy8gaWYgZXZlcnl0aGluZyB3YXMgdXBsb2FkZWQgYWxyZWFkeSwganVzdCBjbG9zZSB0aGUgZGlhbG9nXHJcbiAgICBpZiAodGhpcy51cGxvYWRTdWNjZXNzZnVsKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmRpYWxvZ1JlZi5jbG9zZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIHNldCB0aGUgY29tcG9uZW50IHN0YXRlIHRvIFwidXBsb2FkaW5nXCJcclxuICAgIHRoaXMudXBsb2FkaW5nID0gdHJ1ZTtcclxuXHJcbiAgICAvLyBzdGFydCB0aGUgdXBsb2FkIGFuZCBzYXZlIHRoZSBwcm9ncmVzcyBtYXBcclxuICAgIHRoaXMucHJvZ3Jlc3MgPSB0aGlzLnVwbG9hZFNlcnZpY2UudXBsb2FkKHRoaXMuZmlsZXMpO1xyXG5cclxuICAgIC8vIGNvbnZlcnQgdGhlIHByb2dyZXNzIG1hcCBpbnRvIGFuIGFycmF5XHJcbiAgICBjb25zdCBhbGxQcm9ncmVzc09ic2VydmFibGVzOiBhbnlbXSA9IFtdO1xyXG5cclxuICAgIGZvciAobGV0IGtleSBpbiB0aGlzLnByb2dyZXNzKSB7XHJcbiAgICAgIGFsbFByb2dyZXNzT2JzZXJ2YWJsZXMucHVzaCh0aGlzLnByb2dyZXNzW2tleV0ucHJvZ3Jlc3MpO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIEFkanVzdCB0aGUgc3RhdGUgdmFyaWFibGVzXHJcblxyXG4gICAgLy8gVGhlIE9LLWJ1dHRvbiBzaG91bGQgaGF2ZSB0aGUgdGV4dCBcIkZpbmlzaFwiIG5vd1xyXG4gICAgdGhpcy5wcmltYXJ5QnV0dG9uVGV4dCA9IHRoaXMudXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nRmluaXNoQnV0dG9uVGV4dDtcclxuXHJcbiAgICAvLyBUaGUgZGlhbG9nIHNob3VsZCBub3QgYmUgY2xvc2VkIHdoaWxlIHVwbG9hZGluZ1xyXG4gICAgdGhpcy5jYW5CZUNsb3NlZCA9IGZhbHNlO1xyXG4gICAgdGhpcy5kaWFsb2dSZWYuZGlzYWJsZUNsb3NlID0gdHJ1ZTtcclxuXHJcbiAgICAvLyBIaWRlIHRoZSBjYW5jZWwtYnV0dG9uXHJcbiAgICB0aGlzLnNob3dDYW5jZWxCdXR0b24gPSBmYWxzZTtcclxuXHJcbiAgICAvLyBXaGVuIGFsbCBwcm9ncmVzcy1vYnNlcnZhYmxlcyBhcmUgY29tcGxldGVkLi4uXHJcbiAgICBmb3JrSm9pbihhbGxQcm9ncmVzc09ic2VydmFibGVzKS5zdWJzY3JpYmUoZW5kID0+IHtcclxuICAgICAgLy8gLi4uIHRoZSBkaWFsb2cgY2FuIGJlIGNsb3NlZCBhZ2Fpbi4uLlxyXG4gICAgICB0aGlzLmNhbkJlQ2xvc2VkID0gdHJ1ZTtcclxuICAgICAgdGhpcy5kaWFsb2dSZWYuZGlzYWJsZUNsb3NlID0gZmFsc2U7XHJcblxyXG4gICAgICAvLyAuLi4gdGhlIHVwbG9hZCB3YXMgc3VjY2Vzc2Z1bC4uLlxyXG4gICAgICB0aGlzLnVwbG9hZFN1Y2Nlc3NmdWwgPSB0cnVlO1xyXG5cclxuICAgICAgLy8gLi4uIGFuZCB0aGUgY29tcG9uZW50IGlzIG5vIGxvbmdlciB1cGxvYWRpbmdcclxuICAgICAgdGhpcy51cGxvYWRpbmcgPSBmYWxzZTtcclxuICAgIH0pO1xyXG4gIH1cclxufVxyXG4iLCI8aW5wdXQgdHlwZT1cImZpbGVcIiAjZmlsZSBzdHlsZT1cImRpc3BsYXk6IG5vbmVcIiAoY2hhbmdlKT1cIm9uRmlsZXNBZGRlZCgpXCIgbXVsdGlwbGUgLz5cblxuPGRpdiBtYXQtZGlhbG9nLXRpdGxlIGlkPVwidGl0bGVcIj5cbiAgPGRpdj57eyB1cGxvYWRTZXJ2aWNlLmNvbmZpZy51cGxvYWREaWFsb2dUaXRsZSB9fTwvZGl2PlxuICA8YnV0dG9uIFtkaXNhYmxlZF09XCJ1cGxvYWRpbmcgfHwgdXBsb2FkU3VjY2Vzc2Z1bFwiIG1hdC1yYWlzZWQtYnV0dG9uIGNvbG9yPVwicHJpbWFyeVwiIGNsYXNzPVwiYWRkLWZpbGVzLWJ0blwiIChjbGljayk9XCJhZGRGaWxlcygpXCI+XG4gICAge3sgdXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nQWRkRmlsZXNCdXR0b25UZXh0IH19XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG5cbkBpZiAoZXhpc3RpbmdGaWxlQ29uZmxpY3QpIHtcbiAgPGRpdiBpZD1cImNvbmZsaWN0XCI+XG4gICAge3sgZXhpc3RpbmdGaWxlQ29uZmxpY3QgfX0gYWxyZWFkeSBleGlzdHMgb24gdGhlIHNlcnZlciBhbmQgY2Fubm90IGJlIG92ZXJ3cml0dGVuXG4gIDwvZGl2PlxufVxuXG48bWF0LWRpYWxvZy1jb250ZW50PlxuICA8bWF0LWxpc3Q+XG4gICAgQGZvciAoZmlsZSBvZiBmaWxlczsgdHJhY2sgZmlsZSkge1xuICAgICAgPG1hdC1saXN0LWl0ZW0+XG4gICAgICAgIDxoNCBtYXQtbGluZT57e2ZpbGUubmFtZX19PC9oND5cbiAgICAgICAgQGlmIChwcm9ncmVzcykge1xuICAgICAgICAgIDxtYXQtcHJvZ3Jlc3MtYmFyIG1vZGU9XCJkZXRlcm1pbmF0ZVwiIFt2YWx1ZV09XCJwcm9ncmVzc1tmaWxlLm5hbWVdLnByb2dyZXNzIHwgYXN5bmNcIi8+XG4gICAgICAgIH1cbiAgICAgIDwvbWF0LWxpc3QtaXRlbT5cbiAgICB9XG4gIDwvbWF0LWxpc3Q+XG48L21hdC1kaWFsb2ctY29udGVudD5cblxuPG1hdC1kaWFsb2ctYWN0aW9ucyBpZD1cImFjdGlvbnNcIj5cbiAgQGlmIChzaG93Q2FuY2VsQnV0dG9uKSB7XG4gICAgPGJ1dHRvbiBtYXQtYnV0dG9uIG1hdC1kaWFsb2ctY2xvc2U+e3sgdXBsb2FkU2VydmljZS5jb25maWcudXBsb2FkRGlhbG9nQ2FuY2VsQnV0dG9uVGV4dCB9fTwvYnV0dG9uPlxuICB9XG4gIEBpZiAoZmlsZXMuc2l6ZSA+IDApIHtcbiAgICA8YnV0dG9uIG1hdC1yYWlzZWQtYnV0dG9uIGNvbG9yPVwicHJpbWFyeVwiIFtkaXNhYmxlZF09XCIhY2FuQmVDbG9zZWRcIiAoY2xpY2spPVwiY2xvc2VEaWFsb2coKVwiPnt7IHByaW1hcnlCdXR0b25UZXh0IH19PC9idXR0b24+XG4gIH1cbjwvbWF0LWRpYWxvZy1hY3Rpb25zPlxuIl19

package/fesm2022/cleavelandprice-ngx-lib-active-directory-gui.mjs

@@ -1,7 +1,7 @@
 import { ActiveDirectoryService, ServiceConfig } from '@cleavelandprice/ngx-lib/active-directory';
 export * from '@cleavelandprice/ngx-lib/active-directory';
 import * as i0 from '@angular/core';
-import { inject, Component, Inject, ViewChild, EventEmitter, Output, Input, NgModule, Optional, SkipSelf } from '@angular/core';
+import { inject, Component, ViewChild, EventEmitter, input, Output, NgModule, Optional, SkipSelf } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from '@angular/material/dialog';
@@ -85,10 +85,22 @@ class UserChooserData {
 }
 
 class UserChooserComponent {
+    constructor() {
+        //#region Services
+        this.dialogRef = inject((MatDialogRef));
+        this.activeDirectoryService = inject(ActiveDirectoryService);
+        this.sharePointService = inject(SharePointService);
+        this.data = inject(MAT_DIALOG_DATA);
+        this._data = { ...new UserChooserData(), ...this.data };
+        ////filterInputFocused = false;
+        this.filterForm = new FormGroup({
+            filter: new FormControl()
+        });
+    }
     //#endregion
     //#region Properties
     get isMultiMode() {
-        return this.data.mode === UserChooserMode.Multiple;
+        return this._data.mode === UserChooserMode.Multiple;
     }
     get selectedOptions() {
         return this.selectionList?.options.filter(o => o.selected) ?? [];
@@ -101,31 +113,15 @@ class UserChooserComponent {
     }
     get adGroupsNeeded() {
         // If any are these are true, then we need to pull AD groups for use later
-        return this.data.showGroupMembershipTooltips ||
-            this.data.exclusions.groups.length > 0 ||
-            this.data.inclusions.groups.length > 0 ||
-            this.data.preSelections.groups.length > 0 ||
-            this.data.filterOptions.groupMembership ||
-            (this.data.selectableGroupNames?.length ?? 0) > 0; // debug
+        return this._data.showGroupMembershipTooltips ||
+            this._data.exclusions.groups.length > 0 ||
+            this._data.inclusions.groups.length > 0 ||
+            this._data.preSelections.groups.length > 0 ||
+            this._data.filterOptions.groupMembership ||
+            (this._data.selectableGroupNames?.length ?? 0) > 0; // debug
     }
     //#endregion
     //#region Lifecycle
-    constructor(data) {
-        this.data = data;
-        //#region Fields
-        //#region Services
-        this.dialogRef = inject((MatDialogRef));
-        this.activeDirectoryService = inject(ActiveDirectoryService);
-        this.sharePointService = inject(SharePointService);
-        ////filterInputFocused = false;
-        this.filterForm = new FormGroup({
-            filter: new FormControl()
-        });
-        this.data = {
-            ...new UserChooserData(),
-            ...data
-        };
-    }
     ngOnInit() {
         this.getData();
         this.listenForFilterChanges();
@@ -141,9 +137,9 @@ class UserChooserComponent {
     //#endregion
     //#region Events
     listSelectionChanged(options) {
-        if (this.data.mode === UserChooserMode.Single &&
+        if (this._data.mode === UserChooserMode.Single &&
             this.selectedOptions.length &&
-            this.data.closeWhenSelectionMade) {
+            this._data.closeWhenSelectionMade) {
             this.close();
         }
     }
@@ -176,22 +172,22 @@ class UserChooserComponent {
     }
     getData() {
         const dataObservables = [
-            this.data.users ?
+            this._data.users ?
                 // Users were passed in
-                of(this.data.users) :
+                of(this._data.users) :
                 // Users need to be retrieved
-                this.activeDirectoryService.getUsers(false, this.data.includeDisabledUsers, this.data.parentOu),
-            this.data.photos ?
+                this.activeDirectoryService.getUsers(false, this._data.includeDisabledUsers, this._data.parentOu),
+            this._data.photos ?
                 // Photos were passed in
-                of(this.data.photos) :
+                of(this._data.photos) :
                 // Photos need to be retrieved
                 this.sharePointService.getPhotos()
         ];
         // Do we need AD groups?
         if (this.adGroupsNeeded) {
-            this.data.groups ?
+            this._data.groups ?
                 // Groups were passed in
-                of(this.data.groups) :
+                of(this._data.groups) :
                 // Groups need to be retrieved
                 dataObservables.push(this.activeDirectoryService.getGroups());
         }
@@ -218,8 +214,8 @@ class UserChooserComponent {
             const usersAndGroups = [
                 ...users
             ];
-            if (this.data.selectableGroupNames?.length) {
-                this.data.selectableGroupNames
+            if (this._data.selectableGroupNames?.length) {
+                this._data.selectableGroupNames
                     .forEach(groupName => {
                     const group = this.groups.find(g => g.displayName === groupName);
                     if (group) {
@@ -241,8 +237,8 @@ class UserChooserComponent {
             return;
         }
         const value = this.selectedUsers
-            .map(u => this.data.returnUserObjects ? u : u.sAMAccountName);
-        this.dialogRef.close(this.data.mode === UserChooserMode.Multiple ?
+            .map(u => this._data.returnUserObjects ? u : u.sAMAccountName);
+        this.dialogRef.close(this._data.mode === UserChooserMode.Multiple ?
             value :
             value[0]);
     }
@@ -257,7 +253,7 @@ class UserChooserComponent {
     }
     //#region Exclusions - won't be included in the dataSource at all
     excludeUsersByAccountName(users) {
-        this.data.exclusions.accountNames
+        this._data.exclusions.accountNames
             .forEach(accountName => {
             const index = users.findIndex(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
             if (index === -1) {
@@ -268,7 +264,7 @@ class UserChooserComponent {
         return users;
     }
     excludeUsersByGroupName(users) {
-        this.data.exclusions.groups
+        this._data.exclusions.groups
             .forEach(groupName => {
             const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
@@ -285,7 +281,7 @@ class UserChooserComponent {
         return users;
     }
     excludeUsersByDepartment(users) {
-        this.data.exclusions.departments
+        this._data.exclusions.departments
             .forEach(department => {
             const excludedUsers = users.filter(u => u.department?.toLowerCase() === department.toLowerCase());
             excludedUsers.forEach(user => {
@@ -296,7 +292,7 @@ class UserChooserComponent {
         return users;
     }
     excludeUsersByTitle(users) {
-        this.data.exclusions.titles
+        this._data.exclusions.titles
             .forEach(title => {
             const excludedUsers = users.filter(u => u.title?.toLowerCase() === title.toLowerCase());
             excludedUsers.forEach(user => {
@@ -309,24 +305,24 @@ class UserChooserComponent {
     //#endregion
     //#region Inclusions - only these will be included in the dataSource
     includeUsersByAccountName(users) {
-        return users.filter(user => this.data.inclusions.accountNames.length === 0 || // No account inclusions specified
-            this.data.inclusions.accountNames.find(accountName => accountName.toLowerCase() === user.sAMAccountName.toLowerCase()));
+        return users.filter(user => this._data.inclusions.accountNames.length === 0 || // No account inclusions specified
+            this._data.inclusions.accountNames.find(accountName => accountName.toLowerCase() === user.sAMAccountName.toLowerCase()));
     }
     includeUsersByDepartment(users) {
-        return users.filter(user => this.data.inclusions.departments.length === 0 || // No department inclusions specified
-            this.data.inclusions.departments.find(department => department.toLowerCase() === user.department?.toLowerCase()));
+        return users.filter(user => this._data.inclusions.departments.length === 0 || // No department inclusions specified
+            this._data.inclusions.departments.find(department => department.toLowerCase() === user.department?.toLowerCase()));
     }
     includeUsersByTitle(users) {
-        return users.filter(user => this.data.inclusions.titles.length === 0 || // No title inclusions specified
-            this.data.inclusions.titles.find(title => title.toLowerCase() === user.title?.toLowerCase()));
+        return users.filter(user => this._data.inclusions.titles.length === 0 || // No title inclusions specified
+            this._data.inclusions.titles.find(title => title.toLowerCase() === user.title?.toLowerCase()));
     }
     includeUsersByGroupName(users) {
-        if (!this.data.inclusions.groups.length) {
+        if (!this._data.inclusions.groups.length) {
             return users; // No group inclusions specified
         }
         // Cheating a bit and leveraging the 'selected' property to keep track of who should be included
         // Since inclusions happen befor pre-selections, we can do that, as long as we set 'selected' back to false when we're done
-        this.data.inclusions.groups
+        this._data.inclusions.groups
             .forEach(groupName => {
             const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
@@ -345,7 +341,7 @@ class UserChooserComponent {
     //#endregion
     //#region  Pre-Selections
     preSelectUsersByAccountName(users) {
-        this.data.preSelections.accountNames
+        this._data.preSelections.accountNames
             .forEach(accountName => {
             const user = users.find(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
             if (!user) {
@@ -356,21 +352,21 @@ class UserChooserComponent {
         return users;
     }
     preSelectUsersByDepartment(users) {
-        this.data.preSelections.departments
+        this._data.preSelections.departments
             .forEach(department => users
             .filter(u => u.department?.toLowerCase() === department.toLowerCase())
             .forEach(user => user.selected = true));
         return users;
     }
     preSelectUsersByTitle(users) {
-        this.data.preSelections.titles
+        this._data.preSelections.titles
             .forEach(title => users
             .filter(u => u.title?.toLowerCase() === title.toLowerCase())
             .forEach(user => user.selected = true));
         return users;
     }
     preSelectUsersByGroupName(users) {
-        this.data.preSelections.groups
+        this._data.preSelections.groups
             .forEach(groupName => {
             const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
@@ -399,16 +395,16 @@ class UserChooserComponent {
                 const regex = new RegExp(filter, 'i'); // Case-insensitive
                 let match = false; // The end result - whether or not a employee matches the filter
                 const filterProperties = ['displayName'];
-                if (this.data.filterOptions.accountName) {
+                if (this._data.filterOptions.accountName) {
                     filterProperties.push('sAMAccountName');
                 }
-                if (this.data.filterOptions.title) {
+                if (this._data.filterOptions.title) {
                     filterProperties.push('title');
                 }
-                if (this.data.filterOptions.department) {
+                if (this._data.filterOptions.department) {
                     filterProperties.push('department');
                 }
-                if (this.data.filterOptions.phoneNumber) {
+                if (this._data.filterOptions.phoneNumber) {
                     filterProperties.push('telephoneNumber');
                 }
                 // Match on the properties configured above
@@ -420,7 +416,7 @@ class UserChooserComponent {
                     }
                 });
                 // Match on group membership (group name)
-                if (this.data.filterOptions.groupMembership) {
+                if (this._data.filterOptions.groupMembership) {
                     user.memberOf.forEach(groupDn => {
                         const group = this.groups?.find(group => group.distinguishedName === groupDn && group.name.match(regex));
                         if (group) {
@@ -438,7 +434,7 @@ class UserChooserComponent {
             .subscribe(() => this.dataSource.filter = this.filterForm.value.filter?.trim().toLowerCase());
     }
     tooltip(user) {
-        return this.data.showGroupMembershipTooltips ?
+        return this._data.showGroupMembershipTooltips ?
             user.memberOf
                 .map(groupDn => this.groups
                 ?.find(group => group.distinguishedName === groupDn)?.name)
@@ -446,16 +442,13 @@ class UserChooserComponent {
                 .join('\n') :
             '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UserChooserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: UserChooserComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div id=\"dialog-title\">\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n\n  <div id=\"num-selected\">\n    {{ selectedOptions.length }} selected\n  </div>\n</div>\n\n<mat-dialog-content>\n  @if (dataSource && photos) {\n    <form [formGroup]=\"filterForm\">\n      @if (dataSource) {\n        <mat-form-field>\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n          @if (filterForm.value.filter) {\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n              <mat-icon fontIcon=\"close\"></mat-icon>\n            </button>\n          }\n        </mat-form-field>\n      }\n    </form>\n    <mat-selection-list [multiple]=\"isMultiMode\"\n      (selectionChange)=\"listSelectionChanged($event.options)\">\n      @for (user of dataSource?.filteredData; track user) {\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\n          @if (getPhoto(user)) {\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n          } @else {\n            <mat-icon matListItemAvatar class=\"no-photo\"\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\">\n            </mat-icon>\n          }\n          <div class=\"user\">\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n              {{ user.displayName }}\n              @if (isUser(user) && data.showPhone && castUser(user).telephoneNumber) {\n                <div>{{ castUser(user).telephoneNumber }}</div>\n              }\n            </div>\n            @if (isUser(user)) {\n              <div>{{ castUser(user).department }}</div>\n              <div class=\"title\">{{ castUser(user).title }}</div>\n            }\n          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  } @else {\n    <div>\n      <mat-spinner [diameter]=\"50\"></mat-spinner>\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n  }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  @if (dataSource && photos) {\n    @if (selectedOptions.length) {\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\n        Hide Unselected\n      </mat-slide-toggle>\n    }\n    @if (isMultiMode) {\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n        >\n        <mat-icon fontIcon=\"select_all\"></mat-icon>\n        <span class=\"hide-mobile\">Select All</span>\n      </button>\n    }\n    @if (isMultiMode && selectedOptions.length) {\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n        >\n        <mat-icon fontIcon=\"clear_all\"></mat-icon>\n        <span class=\"hide-mobile\">Clear All</span>\n      </button>\n    }\n    @if (isMultiMode || !data.closeWhenSelectionMade) {\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\n        [disabled]=\"!selectedOptions.length\">\n        <mat-icon fontIcon=\"check\"></mat-icon>\n        <span class=\"hide-mobile\">Ok</span>\n      </button>\n    }\n  }\n\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\n    <mat-icon fontIcon=\"close\"></mat-icon>\n    <span class=\"hide-mobile\">Cancel</span>\n  </button>\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width:801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UserChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: UserChooserComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div id=\"dialog-title\">\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\n\n  <div id=\"num-selected\">\n    {{ selectedOptions.length }} selected\n  </div>\n</div>\n\n<mat-dialog-content>\n  @if (dataSource && photos) {\n    <form [formGroup]=\"filterForm\">\n      @if (dataSource) {\n        <mat-form-field>\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n          @if (filterForm.value.filter) {\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n              <mat-icon fontIcon=\"close\"/>\n            </button>\n          }\n        </mat-form-field>\n      }\n    </form>\n    <mat-selection-list [multiple]=\"isMultiMode\"\n      (selectionChange)=\"listSelectionChanged($event.options)\">\n      @for (user of dataSource?.filteredData; track user) {\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\n          @if (getPhoto(user)) {\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n          } @else {\n            <mat-icon matListItemAvatar class=\"no-photo\"\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\n          }\n          <div class=\"user\">\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n              {{ user.displayName }}\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\n                <div>{{ castUser(user).telephoneNumber }}</div>\n              }\n            </div>\n            @if (isUser(user)) {\n              <div>{{ castUser(user).department }}</div>\n              <div class=\"title\">{{ castUser(user).title }}</div>\n            }\n          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  } @else {\n    <div>\n      <mat-spinner [diameter]=\"50\"/>\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n  }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  @if (dataSource && photos) {\n    @if (selectedOptions.length) {\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\n        Hide Unselected\n      </mat-slide-toggle>\n    }\n    @if (isMultiMode) {\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n        >\n        <mat-icon fontIcon=\"select_all\"/>\n        <span class=\"hide-mobile\">Select All</span>\n      </button>\n    }\n    @if (isMultiMode && selectedOptions.length) {\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n        >\n        <mat-icon fontIcon=\"clear_all\"/>\n        <span class=\"hide-mobile\">Clear All</span>\n      </button>\n    }\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\n        [disabled]=\"!selectedOptions.length\">\n        <mat-icon fontIcon=\"check\"/>\n        <span class=\"hide-mobile\">Ok</span>\n      </button>\n    }\n  }\n\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\n    <mat-icon fontIcon=\"close\"/>\n    <span class=\"hide-mobile\">Cancel</span>\n  </button>\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width:801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UserChooserComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div id=\"dialog-title\">\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n\n  <div id=\"num-selected\">\n    {{ selectedOptions.length }} selected\n  </div>\n</div>\n\n<mat-dialog-content>\n  @if (dataSource && photos) {\n    <form [formGroup]=\"filterForm\">\n      @if (dataSource) {\n        <mat-form-field>\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n          @if (filterForm.value.filter) {\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n              <mat-icon fontIcon=\"close\"></mat-icon>\n            </button>\n          }\n        </mat-form-field>\n      }\n    </form>\n    <mat-selection-list [multiple]=\"isMultiMode\"\n      (selectionChange)=\"listSelectionChanged($event.options)\">\n      @for (user of dataSource?.filteredData; track user) {\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\n          @if (getPhoto(user)) {\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n          } @else {\n            <mat-icon matListItemAvatar class=\"no-photo\"\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\">\n            </mat-icon>\n          }\n          <div class=\"user\">\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n              {{ user.displayName }}\n              @if (isUser(user) && data.showPhone && castUser(user).telephoneNumber) {\n                <div>{{ castUser(user).telephoneNumber }}</div>\n              }\n            </div>\n            @if (isUser(user)) {\n              <div>{{ castUser(user).department }}</div>\n              <div class=\"title\">{{ castUser(user).title }}</div>\n            }\n          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  } @else {\n    <div>\n      <mat-spinner [diameter]=\"50\"></mat-spinner>\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n  }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  @if (dataSource && photos) {\n    @if (selectedOptions.length) {\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\n        Hide Unselected\n      </mat-slide-toggle>\n    }\n    @if (isMultiMode) {\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n        >\n        <mat-icon fontIcon=\"select_all\"></mat-icon>\n        <span class=\"hide-mobile\">Select All</span>\n      </button>\n    }\n    @if (isMultiMode && selectedOptions.length) {\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n        >\n        <mat-icon fontIcon=\"clear_all\"></mat-icon>\n        <span class=\"hide-mobile\">Clear All</span>\n      </button>\n    }\n    @if (isMultiMode || !data.closeWhenSelectionMade) {\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\n        [disabled]=\"!selectedOptions.length\">\n        <mat-icon fontIcon=\"check\"></mat-icon>\n        <span class=\"hide-mobile\">Ok</span>\n      </button>\n    }\n  }\n\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\n    <mat-icon fontIcon=\"close\"></mat-icon>\n    <span class=\"hide-mobile\">Cancel</span>\n  </button>\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width:801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"] }]
-        }], ctorParameters: () => [{ type: UserChooserData, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }], propDecorators: { selectionList: [{
+            args: [{ template: "<div id=\"dialog-title\">\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\n\n  <div id=\"num-selected\">\n    {{ selectedOptions.length }} selected\n  </div>\n</div>\n\n<mat-dialog-content>\n  @if (dataSource && photos) {\n    <form [formGroup]=\"filterForm\">\n      @if (dataSource) {\n        <mat-form-field>\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n          @if (filterForm.value.filter) {\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n              <mat-icon fontIcon=\"close\"/>\n            </button>\n          }\n        </mat-form-field>\n      }\n    </form>\n    <mat-selection-list [multiple]=\"isMultiMode\"\n      (selectionChange)=\"listSelectionChanged($event.options)\">\n      @for (user of dataSource?.filteredData; track user) {\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\n          @if (getPhoto(user)) {\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n          } @else {\n            <mat-icon matListItemAvatar class=\"no-photo\"\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\n          }\n          <div class=\"user\">\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n              {{ user.displayName }}\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\n                <div>{{ castUser(user).telephoneNumber }}</div>\n              }\n            </div>\n            @if (isUser(user)) {\n              <div>{{ castUser(user).department }}</div>\n              <div class=\"title\">{{ castUser(user).title }}</div>\n            }\n          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  } @else {\n    <div>\n      <mat-spinner [diameter]=\"50\"/>\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n  }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  @if (dataSource && photos) {\n    @if (selectedOptions.length) {\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\n        Hide Unselected\n      </mat-slide-toggle>\n    }\n    @if (isMultiMode) {\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n        >\n        <mat-icon fontIcon=\"select_all\"/>\n        <span class=\"hide-mobile\">Select All</span>\n      </button>\n    }\n    @if (isMultiMode && selectedOptions.length) {\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n        >\n        <mat-icon fontIcon=\"clear_all\"/>\n        <span class=\"hide-mobile\">Clear All</span>\n      </button>\n    }\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\n        [disabled]=\"!selectedOptions.length\">\n        <mat-icon fontIcon=\"check\"/>\n        <span class=\"hide-mobile\">Ok</span>\n      </button>\n    }\n  }\n\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\n    <mat-icon fontIcon=\"close\"/>\n    <span class=\"hide-mobile\">Cancel</span>\n  </button>\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width:801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"] }]
+        }], propDecorators: { selectionList: [{
                 type: ViewChild,
                 args: [MatSelectionList]
             }], filterInput: [{
@@ -473,8 +466,9 @@ class UserFormFieldComponent {
         //#endregion
         this.usersSelected = new EventEmitter(); // string for Single mode, string[] for multi
         this.userUnSelected = new EventEmitter();
-        this.placeholder = 'Select User(s)';
-        this.clickable = true;
+        this.placeholder = input('Select User(s)');
+        this.clickable = input(true);
+        this.userChooserData = input.required();
         this.accountNames = [];
     }
     //#endregion
@@ -485,22 +479,22 @@ class UserFormFieldComponent {
     //#endregion
     //#region Lifecycle
     ngOnInit() {
-        this.userChooserData = {
+        this._userChooserData = {
             ...new UserChooserData(),
-            ...this.userChooserData
+            ...this.userChooserData()
         };
         // If users have been pre-selected in the config, store those in accountNames, which drives the UI of this component
-        this.accountNames = this.userChooserData.preSelections.accountNames;
+        this.accountNames = this._userChooserData.preSelections.accountNames;
         this.getData();
     }
     //#endregion
     //#region Events
     selectUser() {
-        if (!this.clickable) {
+        if (!this.clickable()) {
             return;
         }
         const data = {
-            ...this.userChooserData,
+            ...this._userChooserData,
             users: this.users,
             photos: this.photos,
         };
@@ -516,33 +510,33 @@ class UserFormFieldComponent {
                 selected :
                 [selected];
             // Overwrite what may have been passed in, for subsequent launches of UserChooserComponent - otherwise it just keeps getting fed stale data
-            this.userChooserData.preSelections.accountNames = this.accountNames;
+            this._userChooserData.preSelections.accountNames = this.accountNames;
             this.usersSelected.emit(selected);
         });
     }
     unSelectUser(accountName) {
         const index = this.accountNames.findIndex(a => a === accountName);
         this.accountNames.splice(index, 1);
-        this.userChooserData.preSelections.accountNames = this.accountNames;
+        this._userChooserData.preSelections.accountNames = this.accountNames;
         this.userUnSelected.emit(accountName);
     }
     //#endregion
     //#region Utilities
     getData() {
         forkJoin([
-            this.userChooserData.users ?
+            this._userChooserData.users ?
                 // Users were passed in
-                of(this.userChooserData.users) :
+                of(this._userChooserData.users) :
                 // Users need to be retrieved
-                this.activeDirectoryService.getUsers(false, this.userChooserData.includeDisabledUsers, this.userChooserData.parentOu),
-            this.userChooserData.groups ?
+                this.activeDirectoryService.getUsers(false, this._userChooserData.includeDisabledUsers, this._userChooserData.parentOu),
+            this._userChooserData.groups ?
                 // Groups were passed in
-                of(this.userChooserData.groups) :
+                of(this._userChooserData.groups) :
                 // Groups need to be retrieved
-                this.activeDirectoryService.getGroups(this.userChooserData.parentOu),
-            this.userChooserData.photos ?
+                this.activeDirectoryService.getGroups(this._userChooserData.parentOu),
+            this._userChooserData.photos ?
                 // Photos were passed in
-                of(this.userChooserData.photos) :
+                of(this._userChooserData.photos) :
                 // Photos need to be retrieved
                 this.sharePointService.getPhotos()
         ])
@@ -569,21 +563,15 @@ class UserFormFieldComponent {
             p.title?.toLowerCase() === user.displayName.toLowerCase())?.encodedAbsUrl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UserFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: UserFormFieldComponent, selector: "cp-user-field", inputs: { placeholder: "placeholder", clickable: "clickable", userChooserData: "userChooserData" }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, ngImport: i0, template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable\">\n    @if (accountNames?.length) {\n      <div\n        [class.grid]=\"accountNames.length > 1\"\n        [class.three]=\"accountNames.length > 2\"\n        [class.four]=\"accountNames.length > 3\"\n        [class.five]=\"accountNames.length > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder : ''\"\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"></mat-icon>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"], dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i6$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: UserFormFieldComponent, selector: "cp-user-field", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, userChooserData: { classPropertyName: "userChooserData", publicName: "userChooserData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, ngImport: i0, template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\n    @if (accountNames.length) {\n      <div\n        [class.grid]=\"accountNames.length > 1\"\n        [class.three]=\"accountNames.length > 2\"\n        [class.four]=\"accountNames.length > 3\"\n        [class.five]=\"accountNames.length > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"/>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"/>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"], dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i6$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UserFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cp-user-field', template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable\">\n    @if (accountNames?.length) {\n      <div\n        [class.grid]=\"accountNames.length > 1\"\n        [class.three]=\"accountNames.length > 2\"\n        [class.four]=\"accountNames.length > 3\"\n        [class.five]=\"accountNames.length > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder : ''\"\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"></mat-icon>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"] }]
+            args: [{ selector: 'cp-user-field', template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\n    @if (accountNames.length) {\n      <div\n        [class.grid]=\"accountNames.length > 1\"\n        [class.three]=\"accountNames.length > 2\"\n        [class.four]=\"accountNames.length > 3\"\n        [class.five]=\"accountNames.length > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"/>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"/>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"] }]
         }], propDecorators: { usersSelected: [{
                 type: Output
             }], userUnSelected: [{
                 type: Output
-            }], placeholder: [{
-                type: Input
-            }], clickable: [{
-                type: Input
-            }], userChooserData: [{
-                type: Input
             }] } });
 
 class GuiModule {