@cleavelandprice/ngx-lib 4.7.13 → 4.7.15

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

@@ -1,7 +1,7 @@
 import { ActiveDirectoryService, ActiveDirectoryServiceOptionsToken } from '@cleavelandprice/ngx-lib/active-directory';
 export * from '@cleavelandprice/ngx-lib/active-directory';
 import * as i0 from '@angular/core';
-import { inject, viewChild, ViewChild, Component, output, input, forwardRef, Optional, SkipSelf, NgModule } from '@angular/core';
+import { inject, viewChild, ViewChild, ChangeDetectionStrategy, Component, output, input, forwardRef, Optional, SkipSelf, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogActions, MatDialogClose, MatDialogContent, MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -56,15 +56,16 @@ class UserChooserComponent {
             dialogRef: inject((MatDialogRef)),
             activeDirectory: inject(ActiveDirectoryService),
             sharePoint: inject(SharePointService),
-            data: inject(MAT_DIALOG_DATA)
+            data: inject(MAT_DIALOG_DATA),
         };
         this._data = { ...DefaultUserChooserData, ...this.#services.data };
         //#region Fields
         //@ViewChild(MatSelectionList) selectionList?: MatSelectionList;
-        this.selectionList = viewChild(MatSelectionList, ...(ngDevMode ? [{ debugName: "selectionList" }] : []));
+        this.selectionList = viewChild(MatSelectionList, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionList" }] : /* istanbul ignore next */ []));
         //filterInput = viewChild<ElementRef>('filterInput');
         this.filterForm = new FormGroup({
-            filter: new FormControl()
+            filter: new FormControl(),
         });
     }
     #services;
@@ -73,30 +74,29 @@ class UserChooserComponent {
             elRef.nativeElement.focus();
         }
     }
-    ;
     //#endregion
     //#region Properties
     get isMultiMode() {
         return this._data.mode === UserChooserMode.Multiple;
     }
     get selectedOptions() {
-        return this.selectionList()?.options.filter(o => o.selected) ?? [];
+        return this.selectionList()?.options.filter((o) => o.selected) ?? [];
     }
     get selectedUsers() {
-        return this.dataSource?.data?.filter(d => d.selected) ?? [];
+        return this.dataSource?.data?.filter((d) => d.selected) ?? [];
     }
     get filterValue() {
         return this.filterForm.value.filter;
     }
     get adGroupsNeeded() {
         // If any are these are true, then we need to pull AD groups for use later
-        return (this._data.showGroupMembershipTooltips ?? false) ||
+        return ((this._data.showGroupMembershipTooltips ?? false) ||
             (this._data.exclusions?.groups?.length ?? 0) > 0 ||
             (this._data.inclusions?.groups?.length ?? 0) > 0 ||
             (this._data.preSelections?.groups?.length ?? 0) > 0 ||
             this._data.filterOptions?.groupMembership ||
             (this._data.selectableGroupNames?.length ?? 0) > 0 ||
-            (this._data.groups?.length ?? 0) > 0;
+            (this._data.groups?.length ?? 0) > 0);
     }
     //#endregion
     //#region Lifecycle
@@ -114,20 +114,23 @@ class UserChooserComponent {
         }
     }
     optionSelectionChanged(option) {
-        const user = this.dataSource?.data
-            .find(u => u.sAMAccountName.toLocaleLowerCase() === option.value.sAMAccountName.toLowerCase());
+        const user = this.dataSource?.data.find((u) => u.sAMAccountName.toLocaleLowerCase() ===
+            option.value.sAMAccountName.toLowerCase());
         if (user) {
             // If we are in single user selection mode, deselect any existing selections first
             if (!this.isMultiMode && option.selected) {
                 this.dataSource?.data
-                    .filter(u => u.sAMAccountName.toLowerCase() !== option.value.sAMAccountName.toLowerCase())
-                    .forEach(u => u.selected = false);
+                    .filter((u) => u.sAMAccountName.toLowerCase() !==
+                    option.value.sAMAccountName.toLowerCase())
+                    .forEach((u) => (u.selected = false));
             }
             user.selected = option.selected;
         }
     }
     hideUnselectedChanged(selected) {
-        this.filterForm.get('filter')?.setValue(selected ? '{selected:true}' : null);
+        this.filterForm
+            .get('filter')
+            ?.setValue(selected ? '{selected:true}' : null);
     }
     selectAll() {
         this.selectionList()?.selectAll();
@@ -148,34 +151,32 @@ class UserChooserComponent {
     }
     #getData() {
         const observables$ = [
-            this._data.users?.length ?
-                // Users were passed in
-                of(this._data.users) :
-                // Users need to be retrieved
-                this.#services.activeDirectory.getUsers(this._data.appName ?? 'ngxlibADUserChooser', this._data.includeDisabledUsers, this._data.parentOu),
-            this._data.photos?.length ?
-                // Photos were passed in
-                of(this._data.photos) :
-                // Photos need to be retrieved
-                this.#services.sharePoint.getPhotos()
+            this._data.users?.length
+                ? // Users were passed in
+                    of(this._data.users)
+                : // Users need to be retrieved
+                    this.#services.activeDirectory.getUsers(this._data.appName ?? 'ngxlibADUserChooser', this._data.includeDisabledUsers, this._data.parentOu),
+            this._data.photos?.length
+                ? // Photos were passed in
+                    of(this._data.photos)
+                : // Photos need to be retrieved
+                    this.#services.sharePoint.getPhotos(),
         ];
         // Do we need AD groups?
         if (this.adGroupsNeeded) {
-            observables$.push(this._data.groups?.length ?
-                // Groups were passed in
-                of(this._data.groups) :
-                // Groups need to be retrieved
-                this.#services.activeDirectory.getGroups());
+            observables$.push(this._data.groups?.length
+                ? // Groups were passed in
+                    of(this._data.groups)
+                : // Groups need to be retrieved
+                    this.#services.activeDirectory.getGroups());
         }
         forkJoin(observables$)
             //.subscribe(([users, photos]) => {
-            .subscribe(data => {
+            .subscribe((data) => {
             // Need groups in place before we handle exclusions/inclusions/pre-selections
-            this.groups = this.adGroupsNeeded ?
-                data[2] :
-                null;
+            this.groups = this.adGroupsNeeded ? data[2] : null;
             let users = data[0];
-            users.forEach(u => u.selected = false); // In case existing data was re-used
+            users.forEach((u) => (u.selected = false)); // In case existing data was re-used
             users = this.#includeUsersByAccountName(users);
             users = this.#includeUsersByGroupName(users);
             users = this.#includeUsersByDepartment(users);
@@ -201,13 +202,12 @@ class UserChooserComponent {
                         usersAndGroups.push(...this.groups);
                     }
                     else {
-                        this._data.selectableGroupNames
-                            .forEach(groupName => {
-                            const group = this.groups.find(g => g.displayName === groupName);
+                        this._data.selectableGroupNames.forEach((groupName) => {
+                            const group = this.groups.find((g) => g.displayName === groupName);
                             if (group) {
                                 usersAndGroups.push({
                                     ...group,
-                                    selected: group.selected
+                                    selected: group.selected,
                                 });
                             }
                         });
@@ -224,26 +224,26 @@ class UserChooserComponent {
             this.#services.dialogRef.close(this._data.allowCloseWithoutSelections ? [] : undefined);
             return;
         }
-        const value = this.selectedUsers
-            .map(u => this._data.returnUserObjects ? u : u.sAMAccountName);
-        this.#services.dialogRef.close(this._data.mode === UserChooserMode.Multiple ?
-            value :
-            value[0]);
+        const value = this.selectedUsers.map((u) => this._data.returnUserObjects ? u : u.sAMAccountName);
+        this.#services.dialogRef.close(this._data.mode === UserChooserMode.Multiple ? value : value[0]);
     }
     getPhoto(user) {
         if (!this.isUser(user)) {
             return;
         }
-        return this.photos?.find(p => (p.employeeNumber && p.employeeNumber.toString() === user.employeeNumber) ||
+        return this.photos?.find((p) => (p.employeeNumber &&
+            p.employeeNumber.toString() ===
+                user.employeeNumber) ||
             p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase() ||
-            p.displayName?.toLowerCase() === (user.displayName ?? user.name).toLowerCase() ||
-            p.title?.toLowerCase() === (user.displayName ?? user.name).toLowerCase())?.encodedAbsUrl;
+            p.displayName?.toLowerCase() ===
+                (user.displayName ?? user.name).toLowerCase() ||
+            p.title?.toLowerCase() ===
+                (user.displayName ?? user.name).toLowerCase())?.encodedAbsUrl;
     }
     //#region Exclusions - won't be included in the dataSource at all
     #excludeUsersByAccountName(users) {
-        this._data.exclusions?.accountNames
-            ?.forEach(accountName => {
-            const index = users.findIndex(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
+        this._data.exclusions?.accountNames?.forEach((accountName) => {
+            const index = users.findIndex((u) => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
             if (index === -1) {
                 return;
             }
@@ -252,14 +252,13 @@ class UserChooserComponent {
         return users;
     }
     #excludeUsersByGroupName(users) {
-        this._data.exclusions?.groups
-            ?.forEach(groupName => {
-            const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
+        this._data.exclusions?.groups?.forEach((groupName) => {
+            const group = this.groups?.find((g) => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
                 return;
             }
-            group.member.forEach(groupMemberDn => {
-                const index = users.findIndex(u => u.distinguishedName === groupMemberDn);
+            group.member.forEach((groupMemberDn) => {
+                const index = users.findIndex((u) => u.distinguishedName === groupMemberDn);
                 if (index === -1) {
                     return;
                 }
@@ -269,10 +268,9 @@ class UserChooserComponent {
         return users;
     }
     #excludeUsersByDepartment(users) {
-        this._data.exclusions?.departments
-            ?.forEach(department => {
-            const excludedUsers = users.filter(u => u.department?.toLowerCase() === department.toLowerCase());
-            excludedUsers.forEach(user => {
+        this._data.exclusions?.departments?.forEach((department) => {
+            const excludedUsers = users.filter((u) => u.department?.toLowerCase() === department.toLowerCase());
+            excludedUsers.forEach((user) => {
                 const index = users.indexOf(user);
                 users.splice(index, 1);
             });
@@ -280,10 +278,9 @@ class UserChooserComponent {
         return users;
     }
     #excludeUsersByTitle(users) {
-        this._data.exclusions?.titles
-            ?.forEach(title => {
-            const excludedUsers = users.filter(u => u.title?.toLowerCase() === title.toLowerCase());
-            excludedUsers.forEach(user => {
+        this._data.exclusions?.titles?.forEach((title) => {
+            const excludedUsers = users.filter((u) => u.title?.toLowerCase() === title.toLowerCase());
+            excludedUsers.forEach((user) => {
                 const index = users.indexOf(user);
                 users.splice(index, 1);
             });
@@ -293,16 +290,16 @@ class UserChooserComponent {
     //#endregion
     //#region Inclusions - only these will be included in the dataSource
     #includeUsersByAccountName(users) {
-        return users.filter(user => !this._data.inclusions?.accountNames?.length || // No account inclusions specified
-            this._data.inclusions.accountNames.find(accountName => accountName.toLowerCase() === user.sAMAccountName.toLowerCase()));
+        return users.filter((user) => !this._data.inclusions?.accountNames?.length || // 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 || // No department inclusions specified
-            this._data.inclusions.departments.find(department => department.toLowerCase() === user.department?.toLowerCase()));
+        return users.filter((user) => !this._data.inclusions?.departments?.length || // 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 || // No title inclusions specified
-            this._data.inclusions.titles.find(title => title.toLowerCase() === user.title?.toLowerCase()));
+        return users.filter((user) => !this._data.inclusions?.titles?.length || // No title inclusions specified
+            this._data.inclusions.titles.find((title) => title.toLowerCase() === user.title?.toLowerCase()));
     }
     #includeUsersByGroupName(users) {
         if (!this._data.inclusions?.groups?.length) {
@@ -310,28 +307,26 @@ class UserChooserComponent {
         }
         // 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
-            .forEach(groupName => {
-            const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
+        this._data.inclusions.groups.forEach((groupName) => {
+            const group = this.groups?.find((g) => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
                 return;
             }
             users
-                .filter(user => group.member.find(groupMemberDn => groupMemberDn === user.distinguishedName))
-                .forEach(user => user.selected = true);
+                .filter((user) => group.member.find((groupMemberDn) => groupMemberDn === user.distinguishedName))
+                .forEach((user) => (user.selected = true));
         });
         // At this point, all of the appropriate users should have 'selected' set to true
-        const selectedUsers = users.filter(user => user.selected); // Subset of the original list
+        const selectedUsers = users.filter((user) => user.selected); // Subset of the original list
         // Reset 'selected' to false, and return
-        selectedUsers.forEach(user => user.selected = false);
+        selectedUsers.forEach((user) => (user.selected = false));
         return selectedUsers;
     }
     //#endregion
     //#region  Pre-Selections
     #preSelectUsersByAccountName(users) {
-        this._data.preSelections?.accountNames
-            ?.forEach(accountName => {
-            const user = users.find(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
+        this._data.preSelections?.accountNames?.forEach((accountName) => {
+            const user = users.find((u) => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
             if (!user) {
                 return;
             }
@@ -340,39 +335,34 @@ class UserChooserComponent {
         return users;
     }
     #preSelectGroupsByAccountName() {
-        this._data.preSelections?.accountNames
-            ?.forEach(accountName => {
-            const group = this.groups?.find(g => g.sAMAccountName.toLowerCase() === accountName.toLowerCase());
+        this._data.preSelections?.accountNames?.forEach((accountName) => {
+            const group = this.groups?.find((g) => g.sAMAccountName.toLowerCase() === accountName.toLowerCase());
             if (!group) {
                 return;
             }
             group.selected = true;
         });
-        ;
     }
     #preSelectUsersByDepartment(users) {
-        this._data.preSelections?.departments
-            ?.forEach(department => users
-            .filter(u => u.department?.toLowerCase() === department.toLowerCase())
-            .forEach(user => user.selected = true));
+        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
-            ?.forEach(title => users
-            .filter(u => u.title?.toLowerCase() === title.toLowerCase())
-            .forEach(user => user.selected = true));
+        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
-            ?.forEach(groupName => {
-            const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
+        this._data.preSelections?.groups?.forEach((groupName) => {
+            const group = this.groups?.find((g) => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
                 return;
             }
-            group.member.forEach(groupMemberDn => {
-                const user = users.find(u => u.distinguishedName === groupMemberDn);
+            group.member.forEach((groupMemberDn) => {
+                const user = users.find((u) => u.distinguishedName === groupMemberDn);
                 if (!user) {
                     return;
                 }
@@ -407,8 +397,7 @@ class UserChooserComponent {
                     filterProperties.push('telephoneNumber');
                 }
                 // Match on the properties configured above
-                filterProperties
-                    .forEach(field => {
+                filterProperties.forEach((field) => {
                     // @ts-ignore
                     if (user[field] && user[field].match(regex)) {
                         match = true;
@@ -416,8 +405,8 @@ class UserChooserComponent {
                 });
                 // Match on group membership (group name)
                 if (this._data.filterOptions?.groupMembership) {
-                    user.memberOf.forEach(groupDn => {
-                        const group = this.groups?.find(group => group.distinguishedName === groupDn && group.name.match(regex));
+                    user.memberOf.forEach((groupDn) => {
+                        const group = this.groups?.find((group) => group.distinguishedName === groupDn && group.name.match(regex));
                         if (group) {
                             match = true;
                         }
@@ -428,23 +417,26 @@ class UserChooserComponent {
         };
     }
     #listenForFilterChanges() {
-        this.filterForm.get('filter')?.valueChanges
-            .pipe(debounceTime(250))
-            .subscribe(() => this.dataSource.filter = this.filterForm.value.filter?.trim().toLowerCase());
+        this.filterForm
+            .get('filter')
+            ?.valueChanges.pipe(debounceTime(250))
+            .subscribe(() => (this.dataSource.filter = this.filterForm.value.filter
+            ?.trim()
+            .toLowerCase()));
     }
     tooltip(user) {
-        return this._data.showGroupMembershipTooltips ?
-            user.memberOf
-                .map(groupDn => this.groups
-                ?.find(group => group.distinguishedName === groupDn)?.name)
-                .sort((a, b) => a > b ? 1 : -1)
-                .join('\n') :
-            '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UserChooserComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: MatSelectionList, descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div id=\"dialog-title\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName ?? user.name }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!_data.allowCloseWithoutSelections && !selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\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: "component", type: 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: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: "directive", type: MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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],[formArray],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"] }] }); }
+        return this._data.showGroupMembershipTooltips
+            ? user.memberOf
+                .map((groupDn) => this.groups?.find((group) => group.distinguishedName === groupDn)
+                ?.name)
+                .sort((a, b) => (a > b ? 1 : -1))
+                .join('\n')
+            : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserChooserComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: MatSelectionList, descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div id=\"dialog-title\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName ?? user.name }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!_data.allowCloseWithoutSelections && !selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\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: "component", type: 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: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: "directive", type: MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserChooserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         MatButton,
@@ -462,7 +454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         MatSlideToggle,
                         MatTooltip,
                         ReactiveFormsModule,
-                    ], standalone: true, template: "<div id=\"dialog-title\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName ?? user.name }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!_data.allowCloseWithoutSelections && !selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\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"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.Eager, template: "<div id=\"dialog-title\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName ?? user.name }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!_data.allowCloseWithoutSelections && !selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\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: i0.ViewChild, args: [i0.forwardRef(() => MatSelectionList), { isSignal: true }] }], filterInput: [{
                 type: ViewChild,
                 args: ['filterInput']
@@ -474,13 +466,16 @@ class UserFormFieldComponent {
         this.#services = {
             dialog: inject(MatDialog),
             activeDirectory: inject(ActiveDirectoryService),
-            sharePoint: inject(SharePointService)
+            sharePoint: inject(SharePointService),
         };
         this.usersSelected = output(); // string for Single mode, string[] for multi
         this.userUnSelected = output();
-        this.placeholder = input('Select User(s)', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        this.clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
-        this.userChooserData = input.required(...(ngDevMode ? [{ debugName: "userChooserData" }] : []));
+        this.placeholder = input('Select User(s)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.clickable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+        this.userChooserData = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "userChooserData" }] : /* istanbul ignore next */ []));
         this.onChange = (_) => { }; // Invoked when the model has been changed
         this.onTouched = () => { }; // Invoked when the model has been touched
     }
@@ -493,19 +488,24 @@ class UserFormFieldComponent {
       return window.navigator.userAgent.indexOf('Edge') > -1;
     }*/
     get class() {
-        return this._userChooserData?.mode === UserChooserMode.Single ? '' :
-            (this.accountNames?.length ?? 0) > 4 ? 'grid five' :
-                (this.accountNames?.length ?? 0) > 3 ? 'grid four' :
-                    (this.accountNames?.length ?? 0) > 2 ? 'grid three' :
-                        (this.accountNames?.length ?? 0) > 1 ? 'grid two' :
-                            '';
+        return this._userChooserData?.mode === UserChooserMode.Single
+            ? ''
+            : (this.accountNames?.length ?? 0) > 4
+                ? 'grid five'
+                : (this.accountNames?.length ?? 0) > 3
+                    ? 'grid four'
+                    : (this.accountNames?.length ?? 0) > 2
+                        ? 'grid three'
+                        : (this.accountNames?.length ?? 0) > 1
+                            ? 'grid two'
+                            : '';
     }
     //#endregion
     //#region Lifecycle
     ngOnInit() {
         this._userChooserData = {
             ...DefaultUserChooserData,
-            ...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;
@@ -522,26 +522,28 @@ class UserFormFieldComponent {
             users: this.users,
             photos: this.photos,
         };
-        this.#services.dialog.open(UserChooserComponent, {
-            data: data
+        this.#services.dialog
+            .open(UserChooserComponent, {
+            data: data,
         })
             .afterClosed()
             .subscribe((selected) => {
             if (!selected) {
                 return;
             }
-            this.accountNames = Array.isArray(selected) ?
-                selected.map(s => typeof (s) === 'string' ? s : s.sAMAccountName) :
-                [selected].map(s => typeof (s) === 'string' ? s : s.sAMAccountName);
+            this.accountNames = Array.isArray(selected)
+                ? selected.map((s) => typeof s === 'string' ? s : s.sAMAccountName)
+                : [selected].map((s) => typeof s === 'string' ? s : s.sAMAccountName);
             // Overwrite what may have been passed in, for subsequent launches of UserChooserComponent - otherwise it just keeps getting fed stale data
             if (this._userChooserData.preSelections) {
-                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);
+        const index = this.accountNames?.findIndex((a) => a === accountName);
         this.accountNames?.splice(index ?? -1, 1);
         if (this._userChooserData.preSelections) {
             this._userChooserData.preSelections.accountNames = this.accountNames;
@@ -552,51 +554,54 @@ class UserFormFieldComponent {
     //#region Utilities
     #getData() {
         forkJoin([
-            this._userChooserData.users ?
-                // Users were passed in
-                of(this._userChooserData.users) :
-                // Users need to be retrieved
-                this.#services.activeDirectory.getUsers(this._userChooserData.appName ?? 'ngxlibADUserFormField', this._userChooserData.includeDisabledUsers, this._userChooserData.parentOu),
-            this._userChooserData.groups ?
-                // Groups were passed in
-                of(this._userChooserData.groups) :
-                // Groups need to be retrieved
-                this.#services.activeDirectory.getGroups(this._userChooserData.parentOu),
-            this._userChooserData.photos ?
-                // Photos were passed in
-                of(this._userChooserData.photos) :
-                // Photos need to be retrieved
-                this.#services.sharePoint.getPhotos()
-        ])
-            .subscribe(([users, groups, photos]) => {
+            this._userChooserData.users
+                ? // Users were passed in
+                    of(this._userChooserData.users)
+                : // Users need to be retrieved
+                    this.#services.activeDirectory.getUsers(this._userChooserData.appName ?? 'ngxlibADUserFormField', this._userChooserData.includeDisabledUsers, this._userChooserData.parentOu),
+            this._userChooserData.groups
+                ? // Groups were passed in
+                    of(this._userChooserData.groups)
+                : // Groups need to be retrieved
+                    this.#services.activeDirectory.getGroups(this._userChooserData.parentOu),
+            this._userChooserData.photos
+                ? // Photos were passed in
+                    of(this._userChooserData.photos)
+                : // Photos need to be retrieved
+                    this.#services.sharePoint.getPhotos(),
+        ]).subscribe(([users, groups, photos]) => {
             this.users = users;
             this.groups = groups;
             this.photos = photos;
         });
     }
     getUser(user) {
-        user = typeof (user) === 'string' ?
-            this.users?.find(u => u.sAMAccountName.toLowerCase() === user?.toString().toLowerCase()) :
-            user;
-        return !user ? undefined :
-            'groupType' in user ? undefined : user;
+        user =
+            typeof user === 'string'
+                ? this.users?.find((u) => u.sAMAccountName.toLowerCase() === user?.toString().toLowerCase())
+                : user;
+        return !user ? undefined : 'groupType' in user ? undefined : user;
     }
     getGroup(group) {
-        group = typeof (group) === 'string' ?
-            this.groups?.find(g => g.sAMAccountName.toLowerCase() === group?.toString().toLowerCase()) :
-            group;
-        return !group ? undefined :
-            'groupType' in group ? group : undefined;
+        group =
+            typeof group === 'string'
+                ? this.groups?.find((g) => g.sAMAccountName.toLowerCase() ===
+                    group?.toString().toLowerCase())
+                : group;
+        return !group ? undefined : 'groupType' in group ? group : undefined;
     }
     getPhoto(accountName) {
         const user = this.getUser(accountName);
         if (!user) {
             return undefined;
         }
-        return this.photos?.find(p => (p.employeeNumber && p.employeeNumber.toString() === user.employeeNumber) ||
+        return this.photos?.find((p) => (p.employeeNumber &&
+            p.employeeNumber.toString() === user.employeeNumber) ||
             p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase() ||
-            p.displayName?.toLowerCase() === (user.displayName ?? user.name).toLowerCase() ||
-            p.title?.toLowerCase() === (user.displayName ?? user.name).toLowerCase())?.encodedAbsUrl;
+            p.displayName?.toLowerCase() ===
+                (user.displayName ?? user.name).toLowerCase() ||
+            p.title?.toLowerCase() ===
+                (user.displayName ?? user.name).toLowerCase())?.encodedAbsUrl;
     }
     //#endregion
     //#region ControlValueAccessor methods
@@ -618,14 +623,16 @@ class UserFormFieldComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UserFormFieldComponent, isStandalone: true, 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" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserFormFieldComponent, isStandalone: true, 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" }, providers: [
+            {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UserFormFieldComponent),
-                multi: true
-            }], ngImport: i0, template: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\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/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames?.length) {\r\n      <div [ngClass]=\"class\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+                multi: true,
+            },
+        ], ngImport: i0, template: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\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/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames?.length) {\r\n      <div [ngClass]=\"class\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cp-user-field', imports: [
                         MatFormField,
@@ -634,12 +641,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         MatInput,
                         MatProgressBar,
                         MatSuffix,
-                        NgClass
-                    ], providers: [{
+                        NgClass,
+                    ], providers: [
+                        {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => UserFormFieldComponent),
-                            multi: true
-                        }], standalone: true, template: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\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/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames?.length) {\r\n      <div [ngClass]=\"class\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\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"] }]
+                            multi: true,
+                        },
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.Eager, template: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\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/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames?.length) {\r\n      <div [ngClass]=\"class\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\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: i0.Output, args: ["usersSelected"] }], userUnSelected: [{ type: i0.Output, args: ["userUnSelected"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], userChooserData: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserData", required: true }] }] } });
 
 class MatActiveDirectoryModule {
@@ -659,8 +668,8 @@ class MatActiveDirectoryModule {
             throw new Error('MatActiveDirectoryModule is already loaded. Import it in the AppModule only');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatActiveDirectoryModule, deps: [{ token: MatActiveDirectoryModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MatActiveDirectoryModule, deps: [{ token: MatActiveDirectoryModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -676,7 +685,7 @@ class MatActiveDirectoryModule {
             UserChooserComponent,
             UserFormFieldComponent], exports: [UserChooserComponent,
             UserFormFieldComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -692,7 +701,7 @@ class MatActiveDirectoryModule {
             UserChooserComponent,
             UserFormFieldComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatActiveDirectoryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MatActiveDirectoryModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],