@cleavelandprice/ngx-lib 4.4.13 → 4.4.15

package/dialog/index.d.ts

@@ -1,5 +1,106 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@cleavelandprice/ngx-lib/dialog" />
-export * from './dialog.api';
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
+import * as i5 from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material/dialog';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/forms';
+import * as i3 from '@angular/material/button';
+import * as i4 from '@angular/material/checkbox';
+import * as i6 from '@angular/material/form-field';
+import * as i7 from '@angular/material/input';
+
+declare enum ConfirmationDialogMode {
+    OkCancel = 0,
+    YesNo = 1,
+    TrueFalse = 2,
+    Custom = 3
+}
+
+interface DialogBaseData {
+    customTrueFalseText?: string[];
+    checkboxMessage?: string;
+    message?: string;
+    mode?: ConfirmationDialogMode;
+    placeholder?: string;
+    title?: string;
+    value?: string;
+}
+
+declare enum DialogType {
+    Choice = 0,
+    Confirmation = 1,
+    Input = 2,
+    Message = 3
+}
+
+declare class BaseComponent implements OnInit {
+    #private;
+    DialogType: typeof DialogType;
+    dialogType: i0.InputSignal<DialogType>;
+    data: i0.InputSignal<DialogBaseData>;
+    closed: i0.OutputEmitterRef<void>;
+    ConfirmationDialogMode: typeof ConfirmationDialogMode;
+    userInput?: string;
+    checkboxValue: boolean;
+    get customTrueText(): string | undefined;
+    get customFalseText(): string | undefined;
+    get choices(): string[] | null;
+    ngOnInit(): void;
+    close(): void;
+    cancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BaseComponent, "cp-dialog-base", never, { "dialogType": { "alias": "dialogType"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+interface DialogChoiceData extends DialogBaseData {
+    choices: string[];
+}
+
+declare class ChoiceComponent {
+    services: {
+        data: DialogChoiceData;
+        dialogRef: MatDialogRef<any, any>;
+    };
+    dialogType: DialogType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChoiceComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChoiceComponent, "cp-dialog-choice", never, {}, {}, never, never, true, never>;
+}
+
+declare class ConfirmationComponent {
+    services: {
+        data: DialogBaseData;
+        dialogRef: MatDialogRef<any, any>;
+    };
+    dialogType: DialogType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmationComponent, "cp-dialog-confirmation", never, {}, {}, never, never, true, never>;
+}
+
+declare class InputComponent {
+    services: {
+        data: DialogBaseData;
+        dialogRef: MatDialogRef<any, any>;
+    };
+    dialogType: DialogType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "cp-dialog-input", never, {}, {}, never, never, true, never>;
+}
+
+declare class MessageComponent {
+    services: {
+        data: DialogBaseData;
+        dialogRef: MatDialogRef<any, any>;
+    };
+    dialogType: DialogType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "cp-dialog-message", never, {}, {}, never, never, true, never>;
+}
+
+declare class DialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DialogModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.MatButtonModule, typeof i4.MatCheckboxModule, typeof i5.MatDialogModule, typeof i6.MatFormFieldModule, typeof i7.MatInputModule, typeof BaseComponent, typeof ChoiceComponent, typeof ConfirmationComponent, typeof InputComponent, typeof MessageComponent], [typeof BaseComponent, typeof ChoiceComponent, typeof ConfirmationComponent, typeof InputComponent, typeof MessageComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DialogModule>;
+}
+
+export { BaseComponent, ChoiceComponent, ConfirmationComponent, ConfirmationDialogMode, DialogModule, DialogType, InputComponent, MessageComponent };
+export type { DialogBaseData };

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

@@ -1,10 +1,10 @@
 import { ActiveDirectoryService, ActiveDirectoryServiceOptionsToken } from '@cleavelandprice/ngx-lib/active-directory';
 export * from '@cleavelandprice/ngx-lib/active-directory';
 import * as i0 from '@angular/core';
-import { inject, viewChild, Component, ViewChild, output, input, NgModule, Optional, SkipSelf } from '@angular/core';
+import { inject, viewChild, ViewChild, Component, output, input, Optional, SkipSelf, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogActions, MatDialogClose, MatDialogContent, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatSelectionList, MatListItemAvatar, MatListOption, MatListModule } from '@angular/material/list';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { of, forkJoin, debounceTime } from 'rxjs';
@@ -61,7 +61,7 @@ class UserChooserComponent {
         this._data = { ...DefaultUserChooserData, ...this.#services.data };
         //#region Fields
         //@ViewChild(MatSelectionList) selectionList?: MatSelectionList;
-        this.selectionList = viewChild(MatSelectionList);
+        this.selectionList = viewChild(MatSelectionList, ...(ngDevMode ? [{ debugName: "selectionList" }] : []));
         //filterInput = viewChild<ElementRef>('filterInput');
         this.filterForm = new FormGroup({
             filter: new FormControl()
@@ -441,10 +441,10 @@ class UserChooserComponent {
                 .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, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: MatSelectionList, descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div id=\"dialog-title\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName ?? user.name }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!_data.allowCloseWithoutSelections && !selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width: 801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", 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: "directive", type: MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: UserChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: UserChooserComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: MatSelectionList, descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div id=\"dialog-title\">\r\n  <h2 mat-dialog-title>{{ _data.title }}</h2>\r\n\r\n  <div id=\"num-selected\">\r\n    {{ selectedOptions.length }} selected\r\n  </div>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n  @if (dataSource && photos) {\r\n    <form [formGroup]=\"filterForm\">\r\n      @if (dataSource) {\r\n        <mat-form-field>\r\n          <input matInput placeholder=\"Search\" formControlName=\"filter\" #filterInput>\r\n          @if (filterForm.value.filter) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.get('filter')?.setValue('')\">\r\n              <mat-icon fontIcon=\"close\"/>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    </form>\r\n    <mat-selection-list [multiple]=\"isMultiMode\"\r\n      (selectionChange)=\"listSelectionChanged($event.options)\">\r\n      @for (user of dataSource.filteredData; track user) {\r\n        <mat-list-option [value]=\"user\" [selected]=\"user.selected\"\r\n          (selectedChange)=\"optionSelectionChanged(option)\" #option>\r\n          @if (getPhoto(user)) {\r\n            <img matListItemAvatar alt=\"\" [src]=\"getPhoto(user)\">\r\n          } @else {\r\n            <mat-icon matListItemAvatar class=\"no-photo\"\r\n              [fontIcon]=\"isUser(user) ? 'account_circle' : 'group'\"/>\r\n          }\r\n          <div class=\"user\">\r\n            <div [matTooltip]=\"tooltip(user)\" class=\"user-name\">\r\n              {{ user.displayName ?? user.name }}\r\n              @if (isUser(user) && _data.showPhone && castUser(user).telephoneNumber) {\r\n                <div>{{ castUser(user).telephoneNumber }}</div>\r\n              }\r\n            </div>\r\n            @if (isUser(user)) {\r\n              <div>{{ castUser(user).department }}</div>\r\n              <div class=\"title\">{{ castUser(user).title }}</div>\r\n            }\r\n          </div>\r\n        </mat-list-option>\r\n      }\r\n    </mat-selection-list>\r\n  } @else {\r\n    <div>\r\n      <mat-spinner [diameter]=\"50\"/>\r\n      <h2 id=\"spinner-message\">Getting users and photos...</h2>\r\n    </div>\r\n  }\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  @if (dataSource && photos) {\r\n    @if (selectedOptions.length) {\r\n      <mat-slide-toggle (change)=\"hideUnselectedChanged($event.checked)\">\r\n        Hide Unselected\r\n      </mat-slide-toggle>\r\n    }\r\n    @if (isMultiMode) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"selectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"select_all\"/>\r\n        <span class=\"hide-mobile\">Select All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode && selectedOptions.length) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"deselectAll()\"\r\n        >\r\n        <mat-icon fontIcon=\"clear_all\"/>\r\n        <span class=\"hide-mobile\">Clear All</span>\r\n      </button>\r\n    }\r\n    @if (isMultiMode || !_data.closeWhenSelectionMade) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"close()\" matTooltip=\"Accept your selection\"\r\n        [disabled]=\"!_data.allowCloseWithoutSelections && !selectedOptions.length\">\r\n        <mat-icon fontIcon=\"check\"/>\r\n        <span class=\"hide-mobile\">Ok</span>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  <button mat-raised-button color=\"warn\" mat-dialog-close matTooltip=\"Close this window\">\r\n    <mat-icon fontIcon=\"close\"/>\r\n    <span class=\"hide-mobile\">Cancel</span>\r\n  </button>\r\n</mat-dialog-actions>", styles: ["::ng-deep .mat-tooltip{font-size:1em!important;white-space:pre-line}mat-dialog-content{min-width:50vw}#dialog-title{display:flex;justify-content:space-between}#num-selected{margin:1em 1em 0 0}mat-spinner{margin:0 auto}#spinner-message{text-align:center;padding:.5em}mat-form-field{width:100%}.title{font-style:italic;color:#757575}img,.no-photo{width:2rem;height:2rem;font-size:2.3rem!important;border-radius:100%}.hide-mobile{display:none}mat-dialog-actions{display:grid;grid-auto-flow:column;grid-gap:1em;justify-content:center}.user-name{display:flex;justify-content:space-between}.user-name>div:last-child{margin-right:10rem;font-weight:400;font-style:italic;color:#757575}@media (min-width: 801px){.user{display:grid;grid-template-columns:1fr 1fr 1fr}.user>div:first-child{font-weight:700}.hide-mobile{display:initial}}\n", ".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UserChooserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: UserChooserComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         MatButton,
@@ -478,9 +478,9 @@ class UserFormFieldComponent {
         };
         this.usersSelected = output(); // string for Single mode, string[] for multi
         this.userUnSelected = output();
-        this.placeholder = input('Select User(s)');
-        this.clickable = input(true);
-        this.userChooserData = input.required();
+        this.placeholder = input('Select User(s)', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+        this.userChooserData = input.required(...(ngDevMode ? [{ debugName: "userChooserData" }] : []));
     }
     //#region Fields
     #services;
@@ -595,10 +595,10 @@ class UserFormFieldComponent {
             p.displayName?.toLowerCase() === (user.displayName ?? user.name).toLowerCase() ||
             p.title?.toLowerCase() === (user.displayName ?? user.name).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, 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: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames?.length) {\r\n      <div [ngClass]=\"class\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", 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"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: UserFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: UserFormFieldComponent, isStandalone: true, selector: "cp-user-field", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, userChooserData: { classPropertyName: "userChooserData", publicName: "userChooserData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { usersSelected: "usersSelected", userUnSelected: "userUnSelected" }, 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 [ngClass]=\"class\">\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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UserFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: UserFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cp-user-field', imports: [
                         MatButton,
@@ -609,7 +609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         MatProgressBar,
                         MatSuffix,
                         NgClass
-                    ], standalone: true, template: "\r\n<!-- In Microsoft Edge, selectUser() never gets called if the input fields are disabled\r\nSo... I'm dynamically setting the disabled property based on whether or not the browser is Edge.\r\nIt's definitely a better experience if the field IS disabled.\r\nOtherwise, it's confusing - especially because Edge is SO SLOW to display the resulting dialog window.\r\n-->\r\n<!-- Update 8/24/2023:\r\nThe above problem also exists in Chrome now.\r\nSo instead of dynamically setting [disabled] based on browser type,\r\nI'm applying CSS to suppress mouse events on the input - thus making it bubble up to the parent control, which responds the way we want/\r\n-->\r\n\r\n@if (users && photos) {\r\n  <div (click)=\"selectUser()\" [class.clickable]=\"clickable()\">\r\n    @if (accountNames?.length) {\r\n      <div [ngClass]=\"class\">\r\n        @for (accountName of accountNames; track accountName; let i = $index) {\r\n          <div class=\"user\">\r\n            <!--<img *ngIf=\"accountName && empUtils.getEmployee(accountName)\" alt=\"\" [src]=\"empUtils.getEmployee(accountName) | employeePhotoUrl:cacheService.photos\">-->\r\n            @if (getPhoto(accountName)) {\r\n              <img matListItemAvatar alt=\"\" [src]=\"getPhoto(accountName)\">\r\n            }\r\n            @if (getGroup(accountName)) {\r\n              <mat-icon>group</mat-icon>\r\n            }\r\n            <mat-form-field>\r\n              <!-- [disabled]=\"!isEdge\" -->\r\n              <input matInput disabled [placeholder]=\"i === 0 ? placeholder() : ''\"\r\n                [value]=\"getUser(accountName)?.displayName ?? getGroup(accountName)?.displayName ?? accountName\">\r\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); unSelectUser(accountName)\">\r\n                <mat-icon fontIcon=\"close\"/>\r\n              </button>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mat-form-field>\r\n        <input matInput disabled [placeholder]=\"placeholder()\"> <!-- [disabled]=\"!isEdge\" -->\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n} @else {\r\n  <mat-progress-bar mode=\"indeterminate\"/>\r\n}", styles: [".user{display:grid;grid-template-columns:auto 1fr;grid-gap:.5em;align-items:center}.clickable,.clickable input{cursor:pointer!important}img{width:2em;height:2em;border-radius:100%}@media (min-width:801px){.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1em}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.five{grid-template-columns:repeat(5,1fr)}::ng-deep .grid mat-form-field{width:15vw}}input[disabled]{pointer-events:none}\n"] }]
+                    ], standalone: true, 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 [ngClass]=\"class\">\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 {
@@ -629,8 +629,8 @@ class MatActiveDirectoryModule {
             throw new Error('MatActiveDirectoryModule is already loaded. Import it in the AppModule only');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatActiveDirectoryModule, deps: [{ token: MatActiveDirectoryModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MatActiveDirectoryModule, deps: [{ token: MatActiveDirectoryModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -646,7 +646,7 @@ class MatActiveDirectoryModule {
             UserChooserComponent,
             UserFormFieldComponent], exports: [UserChooserComponent,
             UserFormFieldComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MatActiveDirectoryModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -662,7 +662,7 @@ class MatActiveDirectoryModule {
             UserChooserComponent,
             UserFormFieldComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatActiveDirectoryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MatActiveDirectoryModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],