@cleavelandprice/ngx-lib 3.7.3 → 3.8.0

package/{fesm2020 → fesm2022}/cleavelandprice-ngx-lib-active-directory-gui.mjs

@@ -31,608 +31,607 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i10$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
-class UserChooserFilterOptions {
-    constructor() {
-        this.accountName = true;
-        this.department = true;
-        this.groupMembership = false;
-        this.phoneNumber = true;
-        this.title = true;
-    }
+class UserChooserFilterOptions {
+    constructor() {
+        this.accountName = true;
+        this.department = true;
+        this.groupMembership = false;
+        this.phoneNumber = true;
+        this.title = true;
+    }
 }
 
-var UserChooserMode;
-(function (UserChooserMode) {
-    UserChooserMode[UserChooserMode["Single"] = 0] = "Single";
-    UserChooserMode[UserChooserMode["Multiple"] = 1] = "Multiple";
+var UserChooserMode;
+(function (UserChooserMode) {
+    UserChooserMode[UserChooserMode["Single"] = 0] = "Single";
+    UserChooserMode[UserChooserMode["Multiple"] = 1] = "Multiple";
 })(UserChooserMode || (UserChooserMode = {}));
 
-class UserChooserPreProcessingGroup {
-    constructor() {
-        this.accountNames = [];
-        this.departments = [];
-        this.groups = [];
-        this.titles = [];
-    }
+class UserChooserPreProcessingGroup {
+    constructor() {
+        this.accountNames = [];
+        this.departments = [];
+        this.groups = [];
+        this.titles = [];
+    }
 }
 
-class UserChooserData {
-    constructor() {
-        // Should the dialog close automatically when the user chooses an item?
-        // Applies to single-user mode only
-        this.closeWhenSelectionMade = false;
-        // If the component is tasked with pulling Active Directory users (default setting),
-        //   should that include disabled users?
-        this.includeDisabledUsers = false;
-        // If true, the component will return an array of Active Directory User objects.
-        // If false (default), the component will return an array of user account names.
-        this.returnUserObjects = false;
-        // Should the dialog include hover tooptips for each user that displays their group membership
-        // You probably don't want this, which is why the default is false
-        this.showGroupMembershipTooltips = false;
-        // Should the user phone number be displayed next to their name in the dialog
-        this.showPhone = true;
-        // Title displayed in the dialog
-        this.title = 'Select User(s)';
-        // Single or Multi mode
-        this.mode = UserChooserMode.Single;
-        // As the user types into the filter field, the list of users is filtered.
-        // The filterOptions determine which user properties are taken into consideration for that filter.
-        // Note, displayName is always included (hard-coded), and is therefore not a filter option.
-        this.filterOptions = new UserChooserFilterOptions();
-        this.exclusions = new UserChooserPreProcessingGroup();
-        this.inclusions = new UserChooserPreProcessingGroup();
-        this.preSelections = new UserChooserPreProcessingGroup();
-    }
+class UserChooserData {
+    constructor() {
+        // Should the dialog close automatically when the user chooses an item?
+        // Applies to single-user mode only
+        this.closeWhenSelectionMade = false;
+        // If the component is tasked with pulling Active Directory users (default setting),
+        //   should that include disabled users?
+        this.includeDisabledUsers = false;
+        // If true, the component will return an array of Active Directory User objects.
+        // If false (default), the component will return an array of user account names.
+        this.returnUserObjects = false;
+        // Should the dialog include hover tooptips for each user that displays their group membership
+        // You probably don't want this, which is why the default is false
+        this.showGroupMembershipTooltips = false;
+        // Should the user phone number be displayed next to their name in the dialog
+        this.showPhone = true;
+        // Title displayed in the dialog
+        this.title = 'Select User(s)';
+        // Single or Multi mode
+        this.mode = UserChooserMode.Single;
+        // As the user types into the filter field, the list of users is filtered.
+        // The filterOptions determine which user properties are taken into consideration for that filter.
+        // Note, displayName is always included (hard-coded), and is therefore not a filter option.
+        this.filterOptions = new UserChooserFilterOptions();
+        this.exclusions = new UserChooserPreProcessingGroup();
+        this.inclusions = new UserChooserPreProcessingGroup();
+        this.preSelections = new UserChooserPreProcessingGroup();
+    }
 }
 
-class UserChooserComponent {
-    //#endregion
-    //#region Lifecycle
-    constructor(data, dialogRef, activeDirectoryService, sharePointService) {
-        this.data = data;
-        this.dialogRef = dialogRef;
-        this.activeDirectoryService = activeDirectoryService;
-        this.sharePointService = sharePointService;
-        this.filterInputFocused = false;
-        this.filterForm = new FormGroup({
-            filter: new FormControl()
-        });
-        this.data = {
-            ...new UserChooserData(),
-            ...data
-        };
-    }
-    //#endregion
-    //#region Properties
-    get isMultiMode() {
-        return this.data.mode === UserChooserMode.Multiple;
-    }
-    get selectedOptions() {
-        return this.selectionList?.options.filter(o => o.selected) ?? [];
-    }
-    get selectedUsers() {
-        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 ||
-            this.data.exclusions.groups.length > 0 ||
-            this.data.inclusions.groups.length > 0 ||
-            this.data.preSelections.groups.length > 0 ||
-            this.data.filterOptions.groupMembership;
-    }
-    ngOnInit() {
-        this.getData();
-        this.listenForFilterChanges();
-    }
-    ngAfterViewChecked() {
-        if (this.filterInputFocused || !this.filterInput) {
-            // Control not ready yet, or it has already been given focus
-            return;
-        }
-        this.filterInputFocused = true;
-        this.filterInput?.nativeElement.focus();
-    }
-    //#endregion
-    //#region Events
-    listSelectionChanged(options) {
-        if (this.data.mode === UserChooserMode.Single &&
-            this.selectedOptions.length &&
-            this.data.closeWhenSelectionMade) {
-            this.close();
-        }
-    }
-    optionSelectionChanged(option) {
-        const user = this.dataSource?.data
-            .find(u => u.sAMAccountName.toLocaleLowerCase() === option.value.sAMAccountName.toLowerCase());
-        if (user) {
-            user.selected = option.selected;
-        }
-    }
-    hideUnselectedChanged(selected) {
-        this.filterForm.get('filter')?.setValue(selected ? '{selected:true}' : null);
-    }
-    selectAll() {
-        this.selectionList?.selectAll();
-        if (this.selectionList?.options) {
-            this.listSelectionChanged(this.selectionList?.options.toArray());
-        }
-    }
-    deselectAll() {
-        this.selectionList?.deselectAll();
-    }
-    //#endregion
-    //#region Utilities
-    getData() {
-        const dataObservables = [
-            this.data.users ?
-                // Users were passed in
-                of(this.data.users) :
-                // Users need to be retrieved
-                this.activeDirectoryService.getUsers(false, this.data.includeDisabledUsers, this.data.parentOu),
-            this.data.photos ?
-                // Photos were passed in
-                of(this.data.photos) :
-                // Photos need to be retrieved
-                this.sharePointService.getPhotos()
-        ];
-        // Do we need AD groups?
-        if (this.adGroupsNeeded) {
-            this.data.groups ?
-                // Groups were passed in
-                of(this.data.groups) :
-                // Groups need to be retrieved
-                dataObservables.push(this.activeDirectoryService.getGroups());
-        }
-        forkJoin(dataObservables)
-            //.subscribe(([users, photos]) => {
-            .subscribe(data => {
-            // Need groups in place before we handle exclusions/inclusions/pre-selections
-            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 = this.includeUsersByAccountName(users);
-            users = this.includeUsersByGroupName(users);
-            users = this.includeUsersByDepartment(users);
-            users = this.includeUsersByTitle(users);
-            users = this.excludeUsersByAccountName(users);
-            users = this.excludeUsersByGroupName(users);
-            users = this.excludeUsersByDepartment(users);
-            users = this.excludeUsersByTitle(users);
-            users = this.preSelectUsersByAccountName(users);
-            users = this.preSelectUsersByGroupName(users);
-            users = this.preSelectUsersByDepartment(users);
-            users = this.preSelectUsersByTitle(users);
-            this.dataSource = new MatTableDataSource(users);
-            this.photos = data[1];
-            this.setFilterPredicate();
-        });
-    }
-    close() {
-        if (!this.selectedUsers) {
-            this.dialogRef.close();
-            return;
-        }
-        const value = this.selectedUsers
-            .map(u => this.data.returnUserObjects ? u : u.sAMAccountName);
-        this.dialogRef.close(this.data.mode === UserChooserMode.Multiple ?
-            value :
-            value[0]);
-    }
-    getPhoto(user) {
-        return this.photos?.find(p => (p.employeeNumber && p.employeeNumber.toString() === user.employeeNumber) ||
-            p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase() ||
-            p.displayName?.toLowerCase() === user.displayName.toLowerCase() ||
-            p.title?.toLowerCase() === user.displayName.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());
-            if (index === -1) {
-                return;
-            }
-            users.splice(index, 1);
-        });
-        return users;
-    }
-    excludeUsersByGroupName(users) {
-        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);
-                if (index === -1) {
-                    return;
-                }
-                users.splice(index, 1);
-            });
-        });
-        return users;
-    }
-    excludeUsersByDepartment(users) {
-        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);
-            });
-        });
-        return users;
-    }
-    excludeUsersByTitle(users) {
-        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);
-            });
-        });
-        return users;
-    }
-    //#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()));
-    }
-    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()));
-    }
-    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()));
-    }
-    includeUsersByGroupName(users) {
-        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
-            .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);
-        });
-        // 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
-        // Reset 'selected' to false, and return
-        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());
-            if (!user) {
-                return;
-            }
-            user.selected = true;
-        });
-        return users;
-    }
-    preSelectUsersByDepartment(users) {
-        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));
-        return users;
-    }
-    preSelectUsersByGroupName(users) {
-        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);
-                if (!user) {
-                    return;
-                }
-                user.selected = true;
-            });
-        });
-        return users;
-    }
-    //#endregion
-    setFilterPredicate() {
-        if (!this.dataSource) {
-            return;
-        }
-        this.dataSource.filterPredicate = (user, filter) => {
-            if (filter === '{selected:true}') {
-                return user.selected;
-            }
-            else {
-                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) {
-                    filterProperties.push('sAMAccountName');
-                }
-                if (this.data.filterOptions.title) {
-                    filterProperties.push('title');
-                }
-                if (this.data.filterOptions.department) {
-                    filterProperties.push('department');
-                }
-                if (this.data.filterOptions.phoneNumber) {
-                    filterProperties.push('telephoneNumber');
-                }
-                // Match on the properties configured above
-                filterProperties
-                    .forEach(field => {
-                    // @ts-ignore
-                    if (user[field] && user[field].match(regex)) {
-                        match = true;
-                    }
-                });
-                // 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));
-                        if (group) {
-                            match = true;
-                        }
-                    });
-                }
-                return match;
-            }
-        };
-    }
-    listenForFilterChanges() {
-        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') :
-            '';
-    }
-}
-UserChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserChooserComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.ActiveDirectoryService }, { token: i3.SharePointService }], target: i0.ɵɵFactoryTarget.Component });
-UserChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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    <div *ngIf=\"!(dataSource && photos)\">\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n        <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n\n    <ng-container *ngIf=\"dataSource && photos\">\n        <form [formGroup]=\"filterForm\">\n            <mat-form-field *ngIf=\"dataSource\">\n                <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n\n                <button *ngIf=\"filterForm.value.filter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n                    <mat-icon fontIcon=\"close\"></mat-icon>\n                </button>\n            </mat-form-field>\n        </form>\n\n        <mat-selection-list [multiple]=\"isMultiMode\"\n            (selectionChange)=\"listSelectionChanged($event.options)\">\n\n            <mat-list-option *ngFor=\"let user of dataSource?.filteredData\" [value]=\"user\" [selected]=\"user.selected\"\n                (selectedChange)=\"optionSelectionChanged(option)\" #option>\n\n                <img *ngIf=\"getPhoto(user)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n\n                <mat-icon *ngIf=\"!getPhoto(user)\" matListItemAvatar class=\"no-photo\"\n                    fontIcon=\"account_circle\">\n                </mat-icon>\n            \n                <div class=\"user\">\n                    <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n                        {{ user.displayName }}\n                        <div *ngIf=\"data.showPhone && user.telephoneNumber\">{{ user.telephoneNumber }}</div>\n                    </div>\n        \n                    <div>{{ user.department }}</div>\n        \n                    <div class=\"title\">{{ user.title }}</div>\n                </div>\n            </mat-list-option>\n        </mat-selection-list>\n    </ng-container>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <ng-container *ngIf=\"dataSource && photos\">\n        <mat-slide-toggle *ngIf=\"selectedOptions.length\" (change)=\"hideUnselectedChanged($event.checked)\">\n            Hide Unselected\n        </mat-slide-toggle>\n\n        <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n            *ngIf=\"isMultiMode\">\n            <mat-icon fontIcon=\"select_all\"></mat-icon>\n            <span class=\"hide-mobile\">Select All</span>\n        </button>\n    \n        <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n            *ngIf=\"isMultiMode && selectedOptions.length\">\n            <mat-icon fontIcon=\"clear_all\"></mat-icon>\n            <span class=\"hide-mobile\">Clear All</span>\n        </button>\n\n        <button *ngIf=\"isMultiMode || !data.closeWhenSelectionMade\" 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    </ng-container>\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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i10.MatListOption, selector: "mat-list-option", inputs: ["checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i10.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i12.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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    <div *ngIf=\"!(dataSource && photos)\">\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n        <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n\n    <ng-container *ngIf=\"dataSource && photos\">\n        <form [formGroup]=\"filterForm\">\n            <mat-form-field *ngIf=\"dataSource\">\n                <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n\n                <button *ngIf=\"filterForm.value.filter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n                    <mat-icon fontIcon=\"close\"></mat-icon>\n                </button>\n            </mat-form-field>\n        </form>\n\n        <mat-selection-list [multiple]=\"isMultiMode\"\n            (selectionChange)=\"listSelectionChanged($event.options)\">\n\n            <mat-list-option *ngFor=\"let user of dataSource?.filteredData\" [value]=\"user\" [selected]=\"user.selected\"\n                (selectedChange)=\"optionSelectionChanged(option)\" #option>\n\n                <img *ngIf=\"getPhoto(user)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n\n                <mat-icon *ngIf=\"!getPhoto(user)\" matListItemAvatar class=\"no-photo\"\n                    fontIcon=\"account_circle\">\n                </mat-icon>\n            \n                <div class=\"user\">\n                    <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n                        {{ user.displayName }}\n                        <div *ngIf=\"data.showPhone && user.telephoneNumber\">{{ user.telephoneNumber }}</div>\n                    </div>\n        \n                    <div>{{ user.department }}</div>\n        \n                    <div class=\"title\">{{ user.title }}</div>\n                </div>\n            </mat-list-option>\n        </mat-selection-list>\n    </ng-container>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <ng-container *ngIf=\"dataSource && photos\">\n        <mat-slide-toggle *ngIf=\"selectedOptions.length\" (change)=\"hideUnselectedChanged($event.checked)\">\n            Hide Unselected\n        </mat-slide-toggle>\n\n        <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n            *ngIf=\"isMultiMode\">\n            <mat-icon fontIcon=\"select_all\"></mat-icon>\n            <span class=\"hide-mobile\">Select All</span>\n        </button>\n    \n        <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n            *ngIf=\"isMultiMode && selectedOptions.length\">\n            <mat-icon fontIcon=\"clear_all\"></mat-icon>\n            <span class=\"hide-mobile\">Clear All</span>\n        </button>\n\n        <button *ngIf=\"isMultiMode || !data.closeWhenSelectionMade\" 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    </ng-container>\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: function () { return [{ type: UserChooserData, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i2.ActiveDirectoryService }, { type: i3.SharePointService }]; }, propDecorators: { selectionList: [{
-                type: ViewChild,
-                args: [MatSelectionList]
-            }], filterInput: [{
-                type: ViewChild,
-                args: ['filterInput']
+class UserChooserComponent {
+    //#endregion
+    //#region Properties
+    get isMultiMode() {
+        return this.data.mode === UserChooserMode.Multiple;
+    }
+    get selectedOptions() {
+        return this.selectionList?.options.filter(o => o.selected) ?? [];
+    }
+    get selectedUsers() {
+        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 ||
+            this.data.exclusions.groups.length > 0 ||
+            this.data.inclusions.groups.length > 0 ||
+            this.data.preSelections.groups.length > 0 ||
+            this.data.filterOptions.groupMembership;
+    }
+    //#endregion
+    //#region Lifecycle
+    constructor(data, dialogRef, activeDirectoryService, sharePointService) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.activeDirectoryService = activeDirectoryService;
+        this.sharePointService = sharePointService;
+        this.filterInputFocused = false;
+        this.filterForm = new FormGroup({
+            filter: new FormControl()
+        });
+        this.data = {
+            ...new UserChooserData(),
+            ...data
+        };
+    }
+    ngOnInit() {
+        this.getData();
+        this.listenForFilterChanges();
+    }
+    ngAfterViewChecked() {
+        if (this.filterInputFocused || !this.filterInput) {
+            // Control not ready yet, or it has already been given focus
+            return;
+        }
+        this.filterInputFocused = true;
+        this.filterInput?.nativeElement.focus();
+    }
+    //#endregion
+    //#region Events
+    listSelectionChanged(options) {
+        if (this.data.mode === UserChooserMode.Single &&
+            this.selectedOptions.length &&
+            this.data.closeWhenSelectionMade) {
+            this.close();
+        }
+    }
+    optionSelectionChanged(option) {
+        const user = this.dataSource?.data
+            .find(u => u.sAMAccountName.toLocaleLowerCase() === option.value.sAMAccountName.toLowerCase());
+        if (user) {
+            user.selected = option.selected;
+        }
+    }
+    hideUnselectedChanged(selected) {
+        this.filterForm.get('filter')?.setValue(selected ? '{selected:true}' : null);
+    }
+    selectAll() {
+        this.selectionList?.selectAll();
+        if (this.selectionList?.options) {
+            this.listSelectionChanged(this.selectionList?.options.toArray());
+        }
+    }
+    deselectAll() {
+        this.selectionList?.deselectAll();
+    }
+    //#endregion
+    //#region Utilities
+    getData() {
+        const dataObservables = [
+            this.data.users ?
+                // Users were passed in
+                of(this.data.users) :
+                // Users need to be retrieved
+                this.activeDirectoryService.getUsers(false, this.data.includeDisabledUsers, this.data.parentOu),
+            this.data.photos ?
+                // Photos were passed in
+                of(this.data.photos) :
+                // Photos need to be retrieved
+                this.sharePointService.getPhotos()
+        ];
+        // Do we need AD groups?
+        if (this.adGroupsNeeded) {
+            this.data.groups ?
+                // Groups were passed in
+                of(this.data.groups) :
+                // Groups need to be retrieved
+                dataObservables.push(this.activeDirectoryService.getGroups());
+        }
+        forkJoin(dataObservables)
+            //.subscribe(([users, photos]) => {
+            .subscribe(data => {
+            // Need groups in place before we handle exclusions/inclusions/pre-selections
+            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 = this.includeUsersByAccountName(users);
+            users = this.includeUsersByGroupName(users);
+            users = this.includeUsersByDepartment(users);
+            users = this.includeUsersByTitle(users);
+            users = this.excludeUsersByAccountName(users);
+            users = this.excludeUsersByGroupName(users);
+            users = this.excludeUsersByDepartment(users);
+            users = this.excludeUsersByTitle(users);
+            users = this.preSelectUsersByAccountName(users);
+            users = this.preSelectUsersByGroupName(users);
+            users = this.preSelectUsersByDepartment(users);
+            users = this.preSelectUsersByTitle(users);
+            this.dataSource = new MatTableDataSource(users);
+            this.photos = data[1];
+            this.setFilterPredicate();
+        });
+    }
+    close() {
+        if (!this.selectedUsers) {
+            this.dialogRef.close();
+            return;
+        }
+        const value = this.selectedUsers
+            .map(u => this.data.returnUserObjects ? u : u.sAMAccountName);
+        this.dialogRef.close(this.data.mode === UserChooserMode.Multiple ?
+            value :
+            value[0]);
+    }
+    getPhoto(user) {
+        return this.photos?.find(p => (p.employeeNumber && p.employeeNumber.toString() === user.employeeNumber) ||
+            p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase() ||
+            p.displayName?.toLowerCase() === user.displayName.toLowerCase() ||
+            p.title?.toLowerCase() === user.displayName.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());
+            if (index === -1) {
+                return;
+            }
+            users.splice(index, 1);
+        });
+        return users;
+    }
+    excludeUsersByGroupName(users) {
+        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);
+                if (index === -1) {
+                    return;
+                }
+                users.splice(index, 1);
+            });
+        });
+        return users;
+    }
+    excludeUsersByDepartment(users) {
+        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);
+            });
+        });
+        return users;
+    }
+    excludeUsersByTitle(users) {
+        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);
+            });
+        });
+        return users;
+    }
+    //#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()));
+    }
+    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()));
+    }
+    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()));
+    }
+    includeUsersByGroupName(users) {
+        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
+            .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);
+        });
+        // 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
+        // Reset 'selected' to false, and return
+        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());
+            if (!user) {
+                return;
+            }
+            user.selected = true;
+        });
+        return users;
+    }
+    preSelectUsersByDepartment(users) {
+        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));
+        return users;
+    }
+    preSelectUsersByGroupName(users) {
+        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);
+                if (!user) {
+                    return;
+                }
+                user.selected = true;
+            });
+        });
+        return users;
+    }
+    //#endregion
+    setFilterPredicate() {
+        if (!this.dataSource) {
+            return;
+        }
+        this.dataSource.filterPredicate = (user, filter) => {
+            if (filter === '{selected:true}') {
+                return user.selected;
+            }
+            else {
+                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) {
+                    filterProperties.push('sAMAccountName');
+                }
+                if (this.data.filterOptions.title) {
+                    filterProperties.push('title');
+                }
+                if (this.data.filterOptions.department) {
+                    filterProperties.push('department');
+                }
+                if (this.data.filterOptions.phoneNumber) {
+                    filterProperties.push('telephoneNumber');
+                }
+                // Match on the properties configured above
+                filterProperties
+                    .forEach(field => {
+                    // @ts-ignore
+                    if (user[field] && user[field].match(regex)) {
+                        match = true;
+                    }
+                });
+                // 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));
+                        if (group) {
+                            match = true;
+                        }
+                    });
+                }
+                return match;
+            }
+        };
+    }
+    listenForFilterChanges() {
+        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: "16.0.1", ngImport: i0, type: UserChooserComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.ActiveDirectoryService }, { token: i3.SharePointService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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    <div *ngIf=\"!(dataSource && photos)\">\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n        <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n\n    <ng-container *ngIf=\"dataSource && photos\">\n        <form [formGroup]=\"filterForm\">\n            <mat-form-field *ngIf=\"dataSource\">\n                <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n\n                <button *ngIf=\"filterForm.value.filter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n                    <mat-icon fontIcon=\"close\"></mat-icon>\n                </button>\n            </mat-form-field>\n        </form>\n\n        <mat-selection-list [multiple]=\"isMultiMode\"\n            (selectionChange)=\"listSelectionChanged($event.options)\">\n\n            <mat-list-option *ngFor=\"let user of dataSource?.filteredData\" [value]=\"user\" [selected]=\"user.selected\"\n                (selectedChange)=\"optionSelectionChanged(option)\" #option>\n\n                <img *ngIf=\"getPhoto(user)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n\n                <mat-icon *ngIf=\"!getPhoto(user)\" matListItemAvatar class=\"no-photo\"\n                    fontIcon=\"account_circle\">\n                </mat-icon>\n            \n                <div class=\"user\">\n                    <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n                        {{ user.displayName }}\n                        <div *ngIf=\"data.showPhone && user.telephoneNumber\">{{ user.telephoneNumber }}</div>\n                    </div>\n        \n                    <div>{{ user.department }}</div>\n        \n                    <div class=\"title\">{{ user.title }}</div>\n                </div>\n            </mat-list-option>\n        </mat-selection-list>\n    </ng-container>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <ng-container *ngIf=\"dataSource && photos\">\n        <mat-slide-toggle *ngIf=\"selectedOptions.length\" (change)=\"hideUnselectedChanged($event.checked)\">\n            Hide Unselected\n        </mat-slide-toggle>\n\n        <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n            *ngIf=\"isMultiMode\">\n            <mat-icon fontIcon=\"select_all\"></mat-icon>\n            <span class=\"hide-mobile\">Select All</span>\n        </button>\n    \n        <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n            *ngIf=\"isMultiMode && selectedOptions.length\">\n            <mat-icon fontIcon=\"clear_all\"></mat-icon>\n            <span class=\"hide-mobile\">Clear All</span>\n        </button>\n\n        <button *ngIf=\"isMultiMode || !data.closeWhenSelectionMade\" 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    </ng-container>\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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i10.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i10.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i12.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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    <div *ngIf=\"!(dataSource && photos)\">\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n        <h2 id=\"spinner-message\">Getting users and photos...</h2>\n    </div>\n\n    <ng-container *ngIf=\"dataSource && photos\">\n        <form [formGroup]=\"filterForm\">\n            <mat-form-field *ngIf=\"dataSource\">\n                <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\n\n                <button *ngIf=\"filterForm.value.filter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\n                    <mat-icon fontIcon=\"close\"></mat-icon>\n                </button>\n            </mat-form-field>\n        </form>\n\n        <mat-selection-list [multiple]=\"isMultiMode\"\n            (selectionChange)=\"listSelectionChanged($event.options)\">\n\n            <mat-list-option *ngFor=\"let user of dataSource?.filteredData\" [value]=\"user\" [selected]=\"user.selected\"\n                (selectedChange)=\"optionSelectionChanged(option)\" #option>\n\n                <img *ngIf=\"getPhoto(user)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\n\n                <mat-icon *ngIf=\"!getPhoto(user)\" matListItemAvatar class=\"no-photo\"\n                    fontIcon=\"account_circle\">\n                </mat-icon>\n            \n                <div class=\"user\">\n                    <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\n                        {{ user.displayName }}\n                        <div *ngIf=\"data.showPhone && user.telephoneNumber\">{{ user.telephoneNumber }}</div>\n                    </div>\n        \n                    <div>{{ user.department }}</div>\n        \n                    <div class=\"title\">{{ user.title }}</div>\n                </div>\n            </mat-list-option>\n        </mat-selection-list>\n    </ng-container>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <ng-container *ngIf=\"dataSource && photos\">\n        <mat-slide-toggle *ngIf=\"selectedOptions.length\" (change)=\"hideUnselectedChanged($event.checked)\">\n            Hide Unselected\n        </mat-slide-toggle>\n\n        <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\n            *ngIf=\"isMultiMode\">\n            <mat-icon fontIcon=\"select_all\"></mat-icon>\n            <span class=\"hide-mobile\">Select All</span>\n        </button>\n    \n        <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\n            *ngIf=\"isMultiMode && selectedOptions.length\">\n            <mat-icon fontIcon=\"clear_all\"></mat-icon>\n            <span class=\"hide-mobile\">Clear All</span>\n        </button>\n\n        <button *ngIf=\"isMultiMode || !data.closeWhenSelectionMade\" 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    </ng-container>\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: function () { return [{ type: UserChooserData, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }, { type: i2.ActiveDirectoryService }, { type: i3.SharePointService }]; }, propDecorators: { selectionList: [{
+                type: ViewChild,
+                args: [MatSelectionList]
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
             }] } });
 
-class UserFormFieldComponent {
-    //#endregion
-    //#region Lifecycle
-    constructor(dialog, activeDirectoryService, sharePointService) {
-        this.dialog = dialog;
-        this.activeDirectoryService = activeDirectoryService;
-        this.sharePointService = sharePointService;
-        //#region Fields
-        this.usersSelected = new EventEmitter(); // string for Single mode, string[] for multi
-        this.userUnSelected = new EventEmitter();
-        this.placeholder = 'Select User(s)';
-        this.clickable = true;
-        this.accountNames = [];
-        this.users = undefined;
-        this.photos = undefined;
-    }
-    //#endregion
-    //#region Properties
-    get isEdge() {
-        return window.navigator.userAgent.indexOf('Edge') > -1;
-    }
-    ngOnInit() {
-        this.userChooserData = {
-            ...new 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.getData();
-    }
-    //#endregion
-    //#region Events
-    selectUser() {
-        if (!this.clickable) {
-            return;
-        }
-        const data = {
-            ...this.userChooserData,
-            users: this.users,
-            photos: this.photos,
-        };
-        this.dialog.open(UserChooserComponent, {
-            data: data
-        })
-            .afterClosed()
-            .subscribe((selected) => {
-            if (!selected) {
-                return;
-            }
-            this.accountNames = Array.isArray(selected) ?
-                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.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.userUnSelected.emit(accountName);
-    }
-    //#endregion
-    //#region Utilities
-    getData() {
-        forkJoin([
-            this.userChooserData.users ?
-                // Users were passed in
-                of(this.userChooserData.users) :
-                // Users need to be retrieved
-                this.activeDirectoryService.getUsers(false, this.userChooserData.includeDisabledUsers, this.userChooserData.parentOu),
-            this.userChooserData.photos ?
-                // Photos were passed in
-                of(this.userChooserData.photos) :
-                // Photos need to be retrieved
-                this.sharePointService.getPhotos()
-        ])
-            .subscribe(([users, photos]) => {
-            this.users = users;
-            this.photos = photos;
-        });
-    }
-    getUser(accountName) {
-        return this.users?.find(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
-    }
-    getPhoto(accountName) {
-        const user = this.getUser(accountName);
-        if (!user) {
-            return undefined;
-        }
-        return this.photos?.find(p => (p.employeeNumber && p.employeeNumber.toString() === user.employeeNumber) ||
-            p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase() ||
-            p.displayName?.toLowerCase() === user.displayName.toLowerCase() ||
-            p.title?.toLowerCase() === user.displayName.toLowerCase())?.encodedAbsUrl;
-    }
-}
-UserFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserFormFieldComponent, deps: [{ token: i1.MatDialog }, { token: i2.ActiveDirectoryService }, { token: i3.SharePointService }], target: i0.ɵɵFactoryTarget.Component });
-UserFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UserFormFieldComponent, selector: "cp-user-field", inputs: { placeholder: "placeholder", clickable: "clickable", userChooserData: "userChooserData" }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, ngImport: i0, template: "<!-- In Microsoft Edge, selectEmployee() never gets called if the input fields are disabled\n  So... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\n  It's definitely a better experience if the field IS disabled.\n  Otherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n\n<mat-progress-bar *ngIf=\"!(users && photos)\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"users && photos\" (click)=\"selectUser()\" [class.clickable]=\"clickable\">\n    <mat-form-field *ngIf=\"!accountNames?.length\">\n      <input matInput [disabled]=\"!isEdge\" [placeholder]=\"placeholder\">\n    </mat-form-field>\n  \n    <div *ngIf=\"accountNames?.length\"\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\n      <div *ngFor=\"let accountName of accountNames; let i=index\" class=\"user\">\n        <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n        <img *ngIf=\"getPhoto(accountName)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n  \n        <mat-form-field>\n            <input matInput [disabled]=\"!isEdge\" [placeholder]=\"i === 0 ? placeholder : ''\"\n                [value]=\"accountName ? getUser(accountName)?.displayName : accountName\">\n\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    </div>\n  </div>", 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}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cp-user-field', template: "<!-- In Microsoft Edge, selectEmployee() never gets called if the input fields are disabled\n  So... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\n  It's definitely a better experience if the field IS disabled.\n  Otherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n\n<mat-progress-bar *ngIf=\"!(users && photos)\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"users && photos\" (click)=\"selectUser()\" [class.clickable]=\"clickable\">\n    <mat-form-field *ngIf=\"!accountNames?.length\">\n      <input matInput [disabled]=\"!isEdge\" [placeholder]=\"placeholder\">\n    </mat-form-field>\n  \n    <div *ngIf=\"accountNames?.length\"\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\n      <div *ngFor=\"let accountName of accountNames; let i=index\" class=\"user\">\n        <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n        <img *ngIf=\"getPhoto(accountName)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n  \n        <mat-form-field>\n            <input matInput [disabled]=\"!isEdge\" [placeholder]=\"i === 0 ? placeholder : ''\"\n                [value]=\"accountName ? getUser(accountName)?.displayName : accountName\">\n\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    </div>\n  </div>", 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}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2.ActiveDirectoryService }, { type: i3.SharePointService }]; }, propDecorators: { usersSelected: [{
-                type: Output
-            }], userUnSelected: [{
-                type: Output
-            }], placeholder: [{
-                type: Input
-            }], clickable: [{
-                type: Input
-            }], userChooserData: [{
-                type: Input
+class UserFormFieldComponent {
+    //#endregion
+    //#region Properties
+    get isEdge() {
+        return window.navigator.userAgent.indexOf('Edge') > -1;
+    }
+    //#endregion
+    //#region Lifecycle
+    constructor(dialog, activeDirectoryService, sharePointService) {
+        this.dialog = dialog;
+        this.activeDirectoryService = activeDirectoryService;
+        this.sharePointService = sharePointService;
+        //#region Fields
+        this.usersSelected = new EventEmitter(); // string for Single mode, string[] for multi
+        this.userUnSelected = new EventEmitter();
+        this.placeholder = 'Select User(s)';
+        this.clickable = true;
+        this.accountNames = [];
+        this.users = undefined;
+        this.photos = undefined;
+    }
+    ngOnInit() {
+        this.userChooserData = {
+            ...new 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.getData();
+    }
+    //#endregion
+    //#region Events
+    selectUser() {
+        if (!this.clickable) {
+            return;
+        }
+        const data = {
+            ...this.userChooserData,
+            users: this.users,
+            photos: this.photos,
+        };
+        this.dialog.open(UserChooserComponent, {
+            data: data
+        })
+            .afterClosed()
+            .subscribe((selected) => {
+            if (!selected) {
+                return;
+            }
+            this.accountNames = Array.isArray(selected) ?
+                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.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.userUnSelected.emit(accountName);
+    }
+    //#endregion
+    //#region Utilities
+    getData() {
+        forkJoin([
+            this.userChooserData.users ?
+                // Users were passed in
+                of(this.userChooserData.users) :
+                // Users need to be retrieved
+                this.activeDirectoryService.getUsers(false, this.userChooserData.includeDisabledUsers, this.userChooserData.parentOu),
+            this.userChooserData.photos ?
+                // Photos were passed in
+                of(this.userChooserData.photos) :
+                // Photos need to be retrieved
+                this.sharePointService.getPhotos()
+        ])
+            .subscribe(([users, photos]) => {
+            this.users = users;
+            this.photos = photos;
+        });
+    }
+    getUser(accountName) {
+        return this.users?.find(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
+    }
+    getPhoto(accountName) {
+        const user = this.getUser(accountName);
+        if (!user) {
+            return undefined;
+        }
+        return this.photos?.find(p => (p.employeeNumber && p.employeeNumber.toString() === user.employeeNumber) ||
+            p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase() ||
+            p.displayName?.toLowerCase() === user.displayName.toLowerCase() ||
+            p.title?.toLowerCase() === user.displayName.toLowerCase())?.encodedAbsUrl;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: UserFormFieldComponent, deps: [{ token: i1.MatDialog }, { token: i2.ActiveDirectoryService }, { token: i3.SharePointService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: UserFormFieldComponent, selector: "cp-user-field", inputs: { placeholder: "placeholder", clickable: "clickable", userChooserData: "userChooserData" }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, ngImport: i0, template: "<!-- In Microsoft Edge, selectEmployee() never gets called if the input fields are disabled\n  So... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\n  It's definitely a better experience if the field IS disabled.\n  Otherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n\n<mat-progress-bar *ngIf=\"!(users && photos)\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"users && photos\" (click)=\"selectUser()\" [class.clickable]=\"clickable\">\n    <mat-form-field *ngIf=\"!accountNames?.length\">\n      <input matInput [disabled]=\"!isEdge\" [placeholder]=\"placeholder\">\n    </mat-form-field>\n  \n    <div *ngIf=\"accountNames?.length\"\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\n      <div *ngFor=\"let accountName of accountNames; let i=index\" class=\"user\">\n        <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n        <img *ngIf=\"getPhoto(accountName)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n  \n        <mat-form-field>\n            <input matInput [disabled]=\"!isEdge\" [placeholder]=\"i === 0 ? placeholder : ''\"\n                [value]=\"accountName ? getUser(accountName)?.displayName : accountName\">\n\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    </div>\n  </div>", 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}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: UserFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cp-user-field', template: "<!-- In Microsoft Edge, selectEmployee() never gets called if the input fields are disabled\n  So... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\n  It's definitely a better experience if the field IS disabled.\n  Otherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n\n<mat-progress-bar *ngIf=\"!(users && photos)\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"users && photos\" (click)=\"selectUser()\" [class.clickable]=\"clickable\">\n    <mat-form-field *ngIf=\"!accountNames?.length\">\n      <input matInput [disabled]=\"!isEdge\" [placeholder]=\"placeholder\">\n    </mat-form-field>\n  \n    <div *ngIf=\"accountNames?.length\"\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\n      <div *ngFor=\"let accountName of accountNames; let i=index\" class=\"user\">\n        <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n        <img *ngIf=\"getPhoto(accountName)\" matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n  \n        <mat-form-field>\n            <input matInput [disabled]=\"!isEdge\" [placeholder]=\"i === 0 ? placeholder : ''\"\n                [value]=\"accountName ? getUser(accountName)?.displayName : accountName\">\n\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    </div>\n  </div>", 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}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2.ActiveDirectoryService }, { type: i3.SharePointService }]; }, propDecorators: { usersSelected: [{
+                type: Output
+            }], userUnSelected: [{
+                type: Output
+            }], placeholder: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], userChooserData: [{
+                type: Input
             }] } });
 
-class GuiModule {
-    constructor(parentModule) {
-        if (parentModule) {
-            throw new Error('ActiveDirectoryGuiModule is already loaded. Import it in the AppModule only');
-        }
-    }
-    static forRoot(config) {
-        return {
-            ngModule: GuiModule,
-            providers: [
-                ActiveDirectoryService,
-                { provide: ServiceConfig, useValue: config }
-            ]
-        };
-    }
-}
-GuiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GuiModule, deps: [{ token: GuiModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
-GuiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: GuiModule, declarations: [UserChooserComponent,
-        UserFormFieldComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTooltipModule], exports: [UserChooserComponent,
-        UserFormFieldComponent] });
-GuiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GuiModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTooltipModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GuiModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        UserChooserComponent,
-                        UserFormFieldComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatListModule,
-                        MatProgressBarModule,
-                        MatProgressSpinnerModule,
-                        MatSlideToggleModule,
-                        MatTableModule,
-                        MatTooltipModule
-                    ],
-                    exports: [
-                        UserChooserComponent,
-                        UserFormFieldComponent
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: GuiModule, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
+class GuiModule {
+    static forRoot(config) {
+        return {
+            ngModule: GuiModule,
+            providers: [
+                ActiveDirectoryService,
+                { provide: ServiceConfig, useValue: config }
+            ]
+        };
+    }
+    constructor(parentModule) {
+        if (parentModule) {
+            throw new Error('ActiveDirectoryGuiModule is already loaded. Import it in the AppModule only');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: GuiModule, deps: [{ token: GuiModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: GuiModule, declarations: [UserChooserComponent,
+            UserFormFieldComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatSlideToggleModule,
+            MatTableModule,
+            MatTooltipModule], exports: [UserChooserComponent,
+            UserFormFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: GuiModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatSlideToggleModule,
+            MatTableModule,
+            MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: GuiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        UserChooserComponent,
+                        UserFormFieldComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatSlideToggleModule,
+                        MatTableModule,
+                        MatTooltipModule
+                    ],
+                    exports: [
+                        UserChooserComponent,
+                        UserFormFieldComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: GuiModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
                 }] }]; } });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { GuiModule, UserChooserComponent, UserChooserData, UserChooserFilterOptions, UserChooserMode, UserChooserPreProcessingGroup, UserFormFieldComponent };
 //# sourceMappingURL=cleavelandprice-ngx-lib-active-directory-gui.mjs.map
-//# sourceMappingURL=cleavelandprice-ngx-lib-active-directory-gui.mjs.map