@cleavelandprice/ngx-lib 3.1.9 → 3.1.11

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

@@ -0,0 +1,564 @@
+import * as i0 from '@angular/core';
+import { Component, Inject, ViewChild, EventEmitter, Output, Input, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i10 from '@angular/material/list';
+import { MatSelectionList, MatListModule } from '@angular/material/list';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { of, forkJoin, debounceTime } from 'rxjs';
+import * as i2 from '@cleavelandprice/ngx-lib/active-directory';
+import * as i3 from '@cleavelandprice/ngx-lib/sharepoint';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i7 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i8 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i9 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i11 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i12 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i13 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+const defaultUserChooserFilterOptionsConfig = {
+    accountName: true,
+    department: true,
+    groupMembership: false,
+    phoneNumber: true,
+    title: true
+};
+
+const defaultUserChooserPreProcessingGroupConfig = {
+    accountNames: [],
+    departments: [],
+    groups: [],
+    titles: []
+};
+
+var UserChooserMode;
+(function (UserChooserMode) {
+    UserChooserMode[UserChooserMode["Single"] = 0] = "Single";
+    UserChooserMode[UserChooserMode["Multiple"] = 1] = "Multiple";
+})(UserChooserMode || (UserChooserMode = {}));
+
+const defaultUserChooserConfig = {
+    closeWhenSelectionMade: false,
+    includeDisabledUsers: false,
+    parentOu: undefined,
+    showGroupMembershipTooltips: false,
+    showPhone: true,
+    title: 'Select User(s)',
+    mode: UserChooserMode.Single,
+    returnUserObjects: false,
+    filterOptions: defaultUserChooserFilterOptionsConfig,
+    exclusions: defaultUserChooserPreProcessingGroupConfig,
+    inclusions: defaultUserChooserPreProcessingGroupConfig,
+    preSelections: defaultUserChooserPreProcessingGroupConfig
+};
+
+class UserChooserComponent {
+    //#endregion
+    //#region Lifecycle
+    constructor(data, dialogRef, activeDirectoryService, sharePointService) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.activeDirectoryService = activeDirectoryService;
+        this.sharePointService = sharePointService;
+        //#region Fields
+        this.selectionList = null;
+        this.filterForm = new FormGroup({
+            filter: new FormControl()
+        });
+        this.dataSource = null;
+        this.photos = null;
+        this.groups = null; // May or may not get populated, depending on config data sent in
+        this.data = {
+            ...defaultUserChooserConfig,
+            ...data
+        };
+    }
+    //#endregion
+    //#region Properties
+    get isMultiMode() {
+        return this.data.mode === UserChooserMode.Multiple;
+    }
+    get selectedOptions() {
+        return this.selectionList?.options.filter(o => o.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();
+    }
+    //#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) {
+            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 = 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() {
+        this.dialogRef.close(this.selectedOptions
+            .map(o => o.value)
+            .map(u => this.data.returnUserObjects ? u : u.sAMAccountName));
+    }
+    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(500))
+            .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: "14.2.1", 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: "14.2.1", type: UserChooserComponent, selector: "user-chooser", viewQueries: [{ propertyName: "selectionList", first: true, predicate: MatSelectionList, descendants: true }], ngImport: i0, template: "<div id=\"dialog-title\">\n    <h2 mat-dialog-title>{{ data.title }}</h2>\n\n    <div>\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\">\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)\" matListAvatar alt=\"\" [src]=\"getPhoto(user)\">\n\n                <mat-icon *ngIf=\"!getPhoto(user)\" matListAvatar 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 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}.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { 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.MatListAvatarCssMatStyler, selector: "[mat-list-avatar], [matListAvatar]" }, { kind: "component", type: i10.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i10.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], 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: "14.2.1", ngImport: i0, type: UserChooserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'user-chooser', template: "<div id=\"dialog-title\">\n    <h2 mat-dialog-title>{{ data.title }}</h2>\n\n    <div>\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\">\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)\" matListAvatar alt=\"\" [src]=\"getPhoto(user)\">\n\n                <mat-icon *ngIf=\"!getPhoto(user)\" matListAvatar 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 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}.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: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }, { type: i2.ActiveDirectoryService }, { type: i3.SharePointService }]; }, propDecorators: { selectionList: [{
+                type: ViewChild,
+                args: [MatSelectionList]
+            }] } });
+
+class UserFormFieldComponent {
+    //#endregion
+    //#region Lifecycle
+    constructor(dialog, activeDirectoryService, sharePointService) {
+        this.dialog = dialog;
+        this.activeDirectoryService = activeDirectoryService;
+        this.sharePointService = sharePointService;
+        //#region Fields
+        this.usersSelected = new EventEmitter();
+        this.placeholder = 'Select User(s)';
+        this.clickable = true;
+        /*
+        @Input() mode = UserChooserMode.Multiple;
+        @Input() preSelectAccountNames = true;
+        @Input() includeDisabledUsers = false;
+        @Input() parentOu = undefined;*/
+        this.accountNames = [];
+        this.users = undefined;
+        this.photos = undefined;
+    }
+    //#endregion
+    //#region Properties
+    get isEdge() {
+        return window.navigator.userAgent.indexOf('Edge') > -1;
+    }
+    ngOnInit() {
+        this.userChooserData = {
+            ...defaultUserChooserConfig,
+            ...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(accountNames => {
+            if (!accountNames) {
+                return;
+            }
+            this.accountNames = accountNames;
+            this.usersSelected.emit(accountNames);
+        });
+    }
+    //#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: "14.2.1", 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: "14.2.1", type: UserFormFieldComponent, selector: "user-form-field", inputs: { placeholder: "placeholder", clickable: "clickable", userChooserData: "userChooserData" }, outputs: { usersSelected: "usersSelected" }, 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<div (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)\" matListAvatar 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        </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: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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.MatListAvatarCssMatStyler, selector: "[mat-list-avatar], [matListAvatar]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UserFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'user-form-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<div (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)\" matListAvatar 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        </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
+            }], placeholder: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], userChooserData: [{
+                type: Input
+            }] } });
+
+class GuiModule {
+}
+GuiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: GuiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GuiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: GuiModule, declarations: [UserChooserComponent,
+        UserFormFieldComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatSlideToggleModule,
+        MatTableModule,
+        MatTooltipModule], exports: [UserChooserComponent,
+        UserFormFieldComponent] });
+GuiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: GuiModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatSlideToggleModule,
+        MatTableModule,
+        MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: GuiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        UserChooserComponent,
+                        UserFormFieldComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatProgressSpinnerModule,
+                        MatSlideToggleModule,
+                        MatTableModule,
+                        MatTooltipModule
+                    ],
+                    exports: [
+                        UserChooserComponent,
+                        UserFormFieldComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GuiModule, UserChooserComponent, UserChooserMode, UserFormFieldComponent, defaultUserChooserConfig, defaultUserChooserFilterOptionsConfig, defaultUserChooserPreProcessingGroupConfig };
+//# sourceMappingURL=cleavelandprice-ngx-lib-active-directory-gui.mjs.map