@cleavelandprice/ngx-lib 3.14.5 → 4.0.0

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

@@ -1,660 +0,0 @@
-import { ActiveDirectoryService, ServiceConfig } from '@cleavelandprice/ngx-lib/active-directory';
-export * from '@cleavelandprice/ngx-lib/active-directory';
-import * as i0 from '@angular/core';
-import { inject, Component, ViewChild, EventEmitter, input, Output, NgModule, Optional, SkipSelf } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/dialog';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import * as i7 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 { SharePointService } from '@cleavelandprice/ngx-lib/sharepoint';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i9 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i10 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i6$1 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { CommonModule } from '@angular/common';
-
-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";
-})(UserChooserMode || (UserChooserMode = {}));
-
-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 UserChooserComponent {
-    constructor() {
-        //#region Services
-        this.dialogRef = inject((MatDialogRef));
-        this.activeDirectoryService = inject(ActiveDirectoryService);
-        this.sharePointService = inject(SharePointService);
-        this.data = inject(MAT_DIALOG_DATA);
-        this._data = { ...new UserChooserData(), ...this.data };
-        ////filterInputFocused = false;
-        this.filterForm = new FormGroup({
-            filter: new FormControl()
-        });
-    }
-    //#endregion
-    //#region Properties
-    get isMultiMode() {
-        return this._data.mode === UserChooserMode.Multiple;
-    }
-    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 ||
-            (this._data.selectableGroupNames?.length ?? 0) > 0; // debug
-    }
-    //#endregion
-    //#region Lifecycle
-    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
-    isUser(userOrGroup) {
-        return 'title' in userOrGroup;
-    }
-    castUser(userOrGroup) {
-        return userOrGroup;
-    }
-    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);
-            // debug
-            const usersAndGroups = [
-                ...users
-            ];
-            if (this._data.selectableGroupNames?.length) {
-                this._data.selectableGroupNames
-                    .forEach(groupName => {
-                    const group = this.groups.find(g => g.displayName === groupName);
-                    if (group) {
-                        usersAndGroups.push({
-                            ...group,
-                            selected: false
-                        });
-                    }
-                });
-            }
-            this.dataSource = new MatTableDataSource(usersAndGroups);
-            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) {
-        if (!this.isUser(user)) {
-            return;
-        }
-        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: "17.3.0", ngImport: i0, type: UserChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource?.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width:801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UserChooserComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<div id=\"dialog-title\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource?.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width:801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"] }]
-        }], propDecorators: { selectionList: [{
-                type: ViewChild,
-                args: [MatSelectionList]
-            }], filterInput: [{
-                type: ViewChild,
-                args: ['filterInput']
-            }] } });
-
-class UserFormFieldComponent {
-    constructor() {
-        //#region Fields
-        //#region Services
-        this.dialog = inject(MatDialog);
-        this.activeDirectoryService = inject(ActiveDirectoryService);
-        this.sharePointService = inject(SharePointService);
-        //#endregion
-        this.usersSelected = new EventEmitter(); // string for Single mode, string[] for multi
-        this.userUnSelected = new EventEmitter();
-        this.placeholder = input('Select User(s)');
-        this.clickable = input(true);
-        this.userChooserData = input.required();
-        this.accountNames = [];
-    }
-    //#endregion
-    //#region Properties
-    /*get isEdge(): boolean {
-      return window.navigator.userAgent.indexOf('Edge') > -1;
-    }*/
-    //#endregion
-    //#region Lifecycle
-    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.groups ?
-                // Groups were passed in
-                of(this._userChooserData.groups) :
-                // Groups need to be retrieved
-                this.activeDirectoryService.getGroups(this._userChooserData.parentOu),
-            this._userChooserData.photos ?
-                // Photos were passed in
-                of(this._userChooserData.photos) :
-                // Photos need to be retrieved
-                this.sharePointService.getPhotos()
-        ])
-            .subscribe(([users, groups, photos]) => {
-            this.users = users;
-            this.groups = groups;
-            this.photos = photos;
-        });
-    }
-    getUser(accountName) {
-        return this.users?.find(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
-    }
-    getGroup(accountName) {
-        return this.groups?.find(g => g.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: "17.3.0", ngImport: i0, type: UserFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: UserFormFieldComponent, selector: "cp-user-field", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, userChooserData: { classPropertyName: "userChooserData", publicName: "userChooserData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, ngImport: i0, template: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames.length) {\r\n      <div\r\n        [class.grid]=\"accountNames.length > 1\"\r\n        [class.three]=\"accountNames.length > 2\"\r\n        [class.four]=\"accountNames.length > 3\"\r\n        [class.five]=\"accountNames.length > 4\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"], dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i6$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UserFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cp-user-field', template: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames.length) {\r\n      <div\r\n        [class.grid]=\"accountNames.length > 1\"\r\n        [class.three]=\"accountNames.length > 2\"\r\n        [class.four]=\"accountNames.length > 3\"\r\n        [class.five]=\"accountNames.length > 4\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"] }]
-        }], propDecorators: { usersSelected: [{
-                type: Output
-            }], userUnSelected: [{
-                type: Output
-            }] } });
-
-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: "17.3.0", 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: "17.3.0", 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: "17.3.0", 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: "17.3.0", 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: () => [{ type: GuiModule, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { GuiModule, UserChooserComponent, UserChooserData, UserChooserFilterOptions, UserChooserMode, UserChooserPreProcessingGroup, UserFormFieldComponent };
-//# sourceMappingURL=cleavelandprice-ngx-lib-active-directory-gui.mjs.map