@cleavelandprice/ngx-lib 4.1.2 → 4.1.3

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

@@ -19,15 +19,14 @@ import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressBar, 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;
-    }
-}
+;
+const DefaultUserChooserFilterOptions = {
+    accountName: true,
+    department: true,
+    groupMembership: false,
+    phoneNumber: true,
+    title: true
+};
 
 var UserChooserMode;
 (function (UserChooserMode) {
@@ -35,44 +34,18 @@ var UserChooserMode;
     UserChooserMode[UserChooserMode["Multiple"] = 1] = "Multiple";
 })(UserChooserMode || (UserChooserMode = {}));
 
-class UserChooserPreProcessingGroup {
-    constructor() {
-        this.accountNames = [];
-        this.departments = [];
-        this.groups = [];
-        this.titles = [];
-    }
-}
+const DefaultUserChooserData = {
+    closeWhenSelectionMade: false,
+    includeDisabledUsers: false,
+    returnUserObjects: false,
+    showGroupMembershipTooltips: false,
+    showPhone: true,
+    title: 'Select User(s)',
+    mode: UserChooserMode.Single,
+    filterOptions: DefaultUserChooserFilterOptions
+};
 
-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() {
@@ -82,7 +55,7 @@ class UserChooserComponent {
             sharePoint: inject(SharePointService),
             data: inject(MAT_DIALOG_DATA)
         };
-        this._data = { ...new UserChooserData(), ...this.#services.data };
+        this._data = { ...DefaultUserChooserData, ...this.#services.data };
         //#region Fields
         //@ViewChild(MatSelectionList) selectionList?: MatSelectionList;
         this.selectionList = viewChild(MatSelectionList);
@@ -115,10 +88,10 @@ class UserChooserComponent {
     get adGroupsNeeded() {
         // If any are these are true, then we need to pull AD groups for use later
         return this._data.showGroupMembershipTooltips ||
-            this._data.exclusions.groups.length > 0 ||
-            this._data.inclusions.groups.length > 0 ||
-            this._data.preSelections.groups.length > 0 ||
-            this._data.filterOptions.groupMembership ||
+            (this._data.exclusions?.groups?.length ?? 0) > 0 ||
+            (this._data.inclusions?.groups?.length ?? 0) > 0 ||
+            (this._data.preSelections?.groups?.length ?? 0) > 0 ||
+            this._data.filterOptions?.groupMembership ||
             (this._data.selectableGroupNames?.length ?? 0) > 0;
     }
     //#endregion
@@ -209,6 +182,7 @@ class UserChooserComponent {
             users = this.#preSelectUsersByGroupName(users);
             users = this.#preSelectUsersByDepartment(users);
             users = this.#preSelectUsersByTitle(users);
+            this.#preSelectGroupsByAccountName();
             const usersAndGroups = [
                 ...users
             ];
@@ -219,7 +193,7 @@ class UserChooserComponent {
                     if (group) {
                         usersAndGroups.push({
                             ...group,
-                            selected: false
+                            selected: group.selected
                         });
                     }
                 });
@@ -251,8 +225,8 @@ class UserChooserComponent {
     }
     //#region Exclusions - won't be included in the dataSource at all
     #excludeUsersByAccountName(users) {
-        this._data.exclusions.accountNames
-            .forEach(accountName => {
+        this._data.exclusions?.accountNames
+            ?.forEach(accountName => {
             const index = users.findIndex(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
             if (index === -1) {
                 return;
@@ -262,8 +236,8 @@ class UserChooserComponent {
         return users;
     }
     #excludeUsersByGroupName(users) {
-        this._data.exclusions.groups
-            .forEach(groupName => {
+        this._data.exclusions?.groups
+            ?.forEach(groupName => {
             const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
                 return;
@@ -279,8 +253,8 @@ class UserChooserComponent {
         return users;
     }
     #excludeUsersByDepartment(users) {
-        this._data.exclusions.departments
-            .forEach(department => {
+        this._data.exclusions?.departments
+            ?.forEach(department => {
             const excludedUsers = users.filter(u => u.department?.toLowerCase() === department.toLowerCase());
             excludedUsers.forEach(user => {
                 const index = users.indexOf(user);
@@ -290,8 +264,8 @@ class UserChooserComponent {
         return users;
     }
     #excludeUsersByTitle(users) {
-        this._data.exclusions.titles
-            .forEach(title => {
+        this._data.exclusions?.titles
+            ?.forEach(title => {
             const excludedUsers = users.filter(u => u.title?.toLowerCase() === title.toLowerCase());
             excludedUsers.forEach(user => {
                 const index = users.indexOf(user);
@@ -303,19 +277,19 @@ class UserChooserComponent {
     //#endregion
     //#region Inclusions - only these will be included in the dataSource
     #includeUsersByAccountName(users) {
-        return users.filter(user => this._data.inclusions.accountNames.length === 0 || // No account inclusions specified
+        return users.filter(user => !this._data.inclusions?.accountNames?.length || // No account inclusions specified
             this._data.inclusions.accountNames.find(accountName => accountName.toLowerCase() === user.sAMAccountName.toLowerCase()));
     }
     #includeUsersByDepartment(users) {
-        return users.filter(user => this._data.inclusions.departments.length === 0 || // No department inclusions specified
+        return users.filter(user => !this._data.inclusions?.departments?.length || // No department inclusions specified
             this._data.inclusions.departments.find(department => department.toLowerCase() === user.department?.toLowerCase()));
     }
     #includeUsersByTitle(users) {
-        return users.filter(user => this._data.inclusions.titles.length === 0 || // No title inclusions specified
+        return users.filter(user => !this._data.inclusions?.titles?.length || // No title inclusions specified
             this._data.inclusions.titles.find(title => title.toLowerCase() === user.title?.toLowerCase()));
     }
     #includeUsersByGroupName(users) {
-        if (!this._data.inclusions.groups.length) {
+        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
@@ -339,8 +313,8 @@ class UserChooserComponent {
     //#endregion
     //#region  Pre-Selections
     #preSelectUsersByAccountName(users) {
-        this._data.preSelections.accountNames
-            .forEach(accountName => {
+        this._data.preSelections?.accountNames
+            ?.forEach(accountName => {
             const user = users.find(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
             if (!user) {
                 return;
@@ -349,23 +323,34 @@ class UserChooserComponent {
         });
         return users;
     }
+    #preSelectGroupsByAccountName() {
+        this._data.preSelections?.accountNames
+            ?.forEach(accountName => {
+            const group = this.groups?.find(g => g.sAMAccountName.toLowerCase() === accountName.toLowerCase());
+            if (!group) {
+                return;
+            }
+            group.selected = true;
+        });
+        ;
+    }
     #preSelectUsersByDepartment(users) {
-        this._data.preSelections.departments
-            .forEach(department => users
+        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
+        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 => {
+        this._data.preSelections?.groups
+            ?.forEach(groupName => {
             const group = this.groups?.find(g => g.name.toLowerCase() === groupName.toLowerCase());
             if (!group) {
                 return;
@@ -393,16 +378,16 @@ class UserChooserComponent {
                 const regex = new RegExp(filter, 'i'); // Case-insensitive
                 let match = false; // The end result - whether or not a employee matches the filter
                 const filterProperties = ['displayName'];
-                if (this._data.filterOptions.accountName) {
+                if (this._data.filterOptions?.accountName) {
                     filterProperties.push('sAMAccountName');
                 }
-                if (this._data.filterOptions.title) {
+                if (this._data.filterOptions?.title) {
                     filterProperties.push('title');
                 }
-                if (this._data.filterOptions.department) {
+                if (this._data.filterOptions?.department) {
                     filterProperties.push('department');
                 }
-                if (this._data.filterOptions.phoneNumber) {
+                if (this._data.filterOptions?.phoneNumber) {
                     filterProperties.push('telephoneNumber');
                 }
                 // Match on the properties configured above
@@ -414,7 +399,7 @@ class UserChooserComponent {
                     }
                 });
                 // Match on group membership (group name)
-                if (this._data.filterOptions.groupMembership) {
+                if (this._data.filterOptions?.groupMembership) {
                     user.memberOf.forEach(groupDn => {
                         const group = this.groups?.find(group => group.distinguishedName === groupDn && group.name.match(regex));
                         if (group) {
@@ -480,7 +465,6 @@ class UserFormFieldComponent {
         this.placeholder = input('Select User(s)');
         this.clickable = input(true);
         this.userChooserData = input.required();
-        this.accountNames = [];
     }
     //#region Fields
     #services;
@@ -493,11 +477,11 @@ class UserFormFieldComponent {
     //#region Lifecycle
     ngOnInit() {
         this._userChooserData = {
-            ...new UserChooserData(),
+            ...DefaultUserChooserData,
             ...this.userChooserData()
         };
         // If users have been pre-selected in the config, store those in accountNames, which drives the UI of this component
-        this.accountNames = this._userChooserData.preSelections.accountNames;
+        this.accountNames = this._userChooserData.preSelections?.accountNames;
         this.#getData();
     }
     //#endregion
@@ -520,17 +504,21 @@ class UserFormFieldComponent {
                 return;
             }
             this.accountNames = Array.isArray(selected) ?
-                selected :
-                [selected];
+                selected.map(s => typeof (s) === 'string' ? s : s.sAMAccountName) :
+                [selected].map(s => typeof (s) === 'string' ? s : s.sAMAccountName);
             // Overwrite what may have been passed in, for subsequent launches of UserChooserComponent - otherwise it just keeps getting fed stale data
-            this._userChooserData.preSelections.accountNames = this.accountNames;
+            if (this._userChooserData.preSelections) {
+                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;
+        const index = this.accountNames?.findIndex(a => a === accountName);
+        this.accountNames?.splice(index ?? -1, 1);
+        if (this._userChooserData.preSelections) {
+            this._userChooserData.preSelections.accountNames = this.accountNames;
+        }
         this.userUnSelected.emit(accountName);
     }
     //#endregion
@@ -559,11 +547,19 @@ class UserFormFieldComponent {
             this.photos = photos;
         });
     }
-    getUser(accountName) {
-        return this.users?.find(u => u.sAMAccountName.toLowerCase() === accountName.toLowerCase());
+    getUser(user) {
+        user = typeof (user) === 'string' ?
+            this.users?.find(u => u.sAMAccountName.toLowerCase() === user?.toString().toLowerCase()) :
+            user;
+        return !user ? undefined :
+            'groupType' in user ? undefined : user;
     }
-    getGroup(accountName) {
-        return this.groups?.find(g => g.sAMAccountName.toLowerCase() === accountName.toLowerCase());
+    getGroup(group) {
+        group = typeof (group) === 'string' ?
+            this.groups?.find(g => g.sAMAccountName.toLowerCase() === group?.toString().toLowerCase()) :
+            group;
+        return !group ? undefined :
+            'groupType' in group ? group : undefined;
     }
     getPhoto(accountName) {
         const user = this.getUser(accountName);
@@ -576,7 +572,7 @@ class UserFormFieldComponent {
             p.title?.toLowerCase() === user.displayName.toLowerCase())?.encodedAbsUrl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UserFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UserFormFieldComponent, isStandalone: true, selector: "cp-user-field", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, userChooserData: { classPropertyName: "userChooserData", publicName: "userChooserData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, ngImport: i0, template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\n    @if (accountNames.length) {\n      <div\n        [class.grid]=\"accountNames.length > 1\"\n        [class.three]=\"accountNames.length > 2\"\n        [class.four]=\"accountNames.length > 3\"\n        [class.five]=\"accountNames.length > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"/>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"/>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width: 801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UserFormFieldComponent, isStandalone: true, selector: "cp-user-field", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, userChooserData: { classPropertyName: "userChooserData", publicName: "userChooserData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, ngImport: i0, template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\n    @if (accountNames?.length) {\n      <div\n        [class.grid]=\"accountNames?.length ?? 0 > 1\"\n        [class.three]=\"accountNames?.length ?? 0 > 2\"\n        [class.four]=\"accountNames?.length ?? 0 > 3\"\n        [class.five]=\"accountNames?.length ?? 0 > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"/>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"/>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width: 801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UserFormFieldComponent, decorators: [{
             type: Component,
@@ -587,7 +583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         MatIconButton,
                         MatInput,
                         MatProgressBar,
-                    ], template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\n    @if (accountNames.length) {\n      <div\n        [class.grid]=\"accountNames.length > 1\"\n        [class.three]=\"accountNames.length > 2\"\n        [class.four]=\"accountNames.length > 3\"\n        [class.five]=\"accountNames.length > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\n                [value]=\"getUser(accountName) ? getUser(accountName)?.displayName : getGroup(accountName) ? getGroup(accountName)?.displayName : accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"/>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"/>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width: 801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"] }]
+                    ], template: "\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\nIt's definitely a better experience if the field IS disabled.\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\n-->\n<!-- Update 8/24/2023:\nThe above problem also exists in Chrome now.\nSo instead of dynamically setting [disabled] based on browser type,\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\n-->\n\n@if (users && photos) {\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\n    @if (accountNames?.length) {\n      <div\n        [class.grid]=\"accountNames?.length ?? 0 > 1\"\n        [class.three]=\"accountNames?.length ?? 0 > 2\"\n        [class.four]=\"accountNames?.length ?? 0 > 3\"\n        [class.five]=\"accountNames?.length ?? 0 > 4\">\n        @for (accountName of accountNames; track accountName; let i = $index) {\n          <div class=\"user\">\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\n            @if (getPhoto(accountName)) {\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\n            }\n            @if (getGroup(accountName)) {\n              <mat-icon>group</mat-icon>\n            }\n            <mat-form-field>\n              <!-- [disabled]=\"!isEdge\" -->\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\n                <mat-icon fontIcon=\"close\"/>\n              </button>\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    } @else {\n      <mat-form-field>\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\n      </mat-form-field>\n    }\n  </div>\n} @else {\n  <mat-progress-bar mode=\"indeterminate\"/>\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width: 801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"] }]
         }] });
 
 class MatActiveDirectoryModule {
@@ -676,5 +672,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatActiveDirectoryModule, UserChooserComponent, UserChooserData, UserChooserFilterOptions, UserChooserMode, UserChooserPreProcessingGroup, UserFormFieldComponent };
+export { DefaultUserChooserData, DefaultUserChooserFilterOptions, MatActiveDirectoryModule, UserChooserComponent, UserChooserMode, UserFormFieldComponent };
 //# sourceMappingURL=cleavelandprice-ngx-lib-active-directory-material.mjs.map