@cleavelandprice/ngx-lib 4.8.3 → 4.8.5

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

@@ -5,7 +5,7 @@ import { inject, viewChild, input, model, debounced, signal, computed, ChangeDet
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { switchMap, of } from 'rxjs';
 import { SharePointService } from '@cleavelandprice/ngx-lib/sharepoint';
-import * as i2 from '@progress/kendo-angular-buttons';
+import * as i2$1 from '@progress/kendo-angular-buttons';
 import { KENDO_BUTTONS, ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@progress/kendo-angular-dialog';
 import { KENDO_DIALOGS, DialogsModule } from '@progress/kendo-angular-dialog';
@@ -15,13 +15,15 @@ import * as i4 from '@progress/kendo-angular-label';
 import { KENDO_LABELS, LabelModule } from '@progress/kendo-angular-label';
 import * as i5 from '@progress/kendo-angular-layout';
 import { KENDO_TABSTRIP, TabStripModule } from '@progress/kendo-angular-layout';
-import * as i6 from '@progress/kendo-angular-icons';
+import * as i2 from '@progress/kendo-angular-icons';
 import { KENDO_ICONS, IconsModule, SVGIconModule } from '@progress/kendo-angular-icons';
-import { filterClearIcon, questionCircleIcon, usersIcon, userIcon } from '@progress/kendo-svg-icons';
+import { userIcon, filterClearIcon, questionCircleIcon, usersIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import { NgClass, CommonModule } from '@angular/common';
 import * as i1 from '@progress/kendo-angular-grid';
 import { GridComponent, KENDO_GRID, GridModule } from '@progress/kendo-angular-grid';
 import { process } from '@progress/kendo-data-query';
+import * as i2$2 from '@progress/kendo-angular-tooltip';
+import { KENDO_TOOLTIPS } from '@progress/kendo-angular-tooltip';
 import { ReactiveFormsModule } from '@angular/forms';
 
 const USER_CHOOSER_DEFAULT_SETTINGS = {
@@ -82,6 +84,7 @@ class UserChooserList {
             ...USER_CHOOSER_DEFAULT_SETTINGS
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.userIcon = userIcon;
         this.data = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.photoClass = input('user-chooser-photo', /* @ts-ignore */
@@ -144,16 +147,14 @@ class UserChooserList {
                 .data
                 .filter(data => !this.hideUnselected() || this.selectedAccountNames().some(s => s.toLowerCase() === data.sAMAccountName.toLowerCase())));
         });
-        afterNextRender(() => {
-            this.selectedCount.set(this.grid()?.selectionService.selected?.length ?? 0);
-            this.selectionChangeSubscription = this.grid()?.selectionService.changes.subscribe((event) => {
-                this.selectedCount.set(this.grid()?.selectionService.selected?.length ?? 0);
-            });
-        });
+        afterNextRender(() => this.selectedCount.set(this.grid()?.selectionService.selected?.length ?? 0));
     }
-    ngOnDestroy() {
-        this.selectionChangeSubscription?.unsubscribe();
+    selectedKeysChange(keys) {
+        this.selectedCount.set(keys.length);
     }
+    /*ngOnDestroy() {
+      this.selectionChangeSubscription?.unsubscribe();
+    }*/
     photo(user) {
         return this.#resolvedPhotos()
             .find(p => p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase())
@@ -176,15 +177,16 @@ class UserChooserList {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserChooserList, isStandalone: true, selector: "user-chooser-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, photoClass: { classPropertyName: "photoClass", publicName: "photoClass", isSignal: true, isRequired: false, transformFunction: null }, selectedAccountNames: { classPropertyName: "selectedAccountNames", publicName: "selectedAccountNames", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, hideUnselected: { classPropertyName: "hideUnselected", publicName: "hideUnselected", isSignal: true, isRequired: false, transformFunction: null }, photos: { classPropertyName: "photos", publicName: "photos", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedAccountNames: "selectedAccountNamesChange" }, viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-grid #grid [kendoGridBinding]=\"gridData()\"\r\n    [rowClass]=\"rowClassCallback.bind(this)\"\r\n    [filterable]=\"settings().filterMode === 'Column' || settings().filterMode === 'Both'\"\r\n    [groupable]=\"settings().groupable!\"\r\n    [sortable]=\"settings().sortable!\"\r\n    [pageSize]=\"settings().pageable! ? settings().pageSize! : 0\"\r\n    [pageable]=\"settings().pageable!\"\r\n    [height]=\"settings().height!\"\r\n    [selectable]=\"settings().selectionSettings!\"\r\n    [kendoGridSelectBy]=\"caseInsensitiveSelectBy\"\r\n    [(selectedKeys)]=\"selectedAccountNames\">\r\n    \r\n    <!-- Checkbox is we are in checkbox selection mode -->\r\n    @if (settings().selectionSettings?.checkboxOnly ?? false) {\r\n        <kendo-grid-column [width]=\"30\">\r\n            <ng-template kendoGridCellTemplate let-rowIndex=\"rowIndex\">\r\n                <kendo-checkbox [kendoGridSelectionCheckbox]=\"rowIndex\"></kendo-checkbox>\r\n            </ng-template>\r\n        </kendo-grid-column>\r\n    }\r\n\r\n    @if (mode() === 'users') {\r\n        <!-- Optional user photo -->\r\n        @if (settings().displayPhotos ?? false) {\r\n            <kendo-grid-column [width]=\"settings().photoColumnWidth ?? 40\">\r\n                <ng-template kendoGridCellTemplate let-dataItem>\r\n                    @if (photo(dataItem)) {\r\n                        <img [src]=\"photo(dataItem)!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    }\r\n                </ng-template>\r\n            </kendo-grid-column>\r\n        }\r\n        \r\n        <!-- Columns -->\r\n        @for (column of settings().userColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    } @else if (mode() === 'groups') {\r\n        <!-- Columns -->\r\n        @for (column of settings().groupColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    }\r\n</kendo-grid>", styles: [".user-chooser-photo{width:2rem;height:2rem;border-radius:100%}.disabled{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: i1.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "directive", type: i1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserChooserList, isStandalone: true, selector: "user-chooser-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, photoClass: { classPropertyName: "photoClass", publicName: "photoClass", isSignal: true, isRequired: false, transformFunction: null }, selectedAccountNames: { classPropertyName: "selectedAccountNames", publicName: "selectedAccountNames", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, hideUnselected: { classPropertyName: "hideUnselected", publicName: "hideUnselected", isSignal: true, isRequired: false, transformFunction: null }, photos: { classPropertyName: "photos", publicName: "photos", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedAccountNames: "selectedAccountNamesChange" }, viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-grid #grid [kendoGridBinding]=\"gridData()\"\r\n    [rowClass]=\"rowClassCallback.bind(this)\"\r\n    [filterable]=\"settings().filterMode === 'Column' || settings().filterMode === 'Both'\"\r\n    [groupable]=\"settings().groupable!\"\r\n    [sortable]=\"settings().sortable!\"\r\n    [pageSize]=\"settings().pageable! ? settings().pageSize! : 0\"\r\n    [pageable]=\"settings().pageable!\"\r\n    [height]=\"settings().height!\"\r\n    [selectable]=\"settings().selectionSettings!\"\r\n    [kendoGridSelectBy]=\"caseInsensitiveSelectBy\"\r\n    [(selectedKeys)]=\"selectedAccountNames\"\r\n    (selectedKeysChange)=\"selectedKeysChange($event)\">\r\n    \r\n    <!-- Checkbox is we are in checkbox selection mode -->\r\n    @if (settings().selectionSettings?.checkboxOnly ?? false) {\r\n        <kendo-grid-column [width]=\"30\">\r\n            <ng-template kendoGridCellTemplate let-rowIndex=\"rowIndex\">\r\n                <kendo-checkbox [kendoGridSelectionCheckbox]=\"rowIndex\"></kendo-checkbox>\r\n            </ng-template>\r\n        </kendo-grid-column>\r\n    }\r\n\r\n    @if (mode() === 'users') {\r\n        <!-- Optional user photo -->\r\n        @if (settings().displayPhotos ?? false) {\r\n            <kendo-grid-column [width]=\"settings().photoColumnWidth ?? 40\">\r\n                <ng-template kendoGridCellTemplate let-dataItem>\r\n                    @if (photo(dataItem)) {\r\n                        <img [src]=\"photo(dataItem)!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    } @else {\r\n                        <kendo-svg-icon [icon]=\"userIcon\" size=\"small\" [ngClass]=\"photoClass()\" />\r\n                    }\r\n                </ng-template>\r\n            </kendo-grid-column>\r\n        }\r\n        \r\n        <!-- Columns -->\r\n        @for (column of settings().userColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    } @else if (mode() === 'groups') {\r\n        <!-- Columns -->\r\n        @for (column of settings().groupColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    }\r\n</kendo-grid>", styles: [".user-chooser-photo{width:2rem;height:2rem;border-radius:100%}.disabled{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: i1.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "directive", type: i1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserList, decorators: [{
             type: Component,
             args: [{ selector: 'user-chooser-list', imports: [
                         NgClass,
-                        KENDO_GRID
-                    ], encapsulation: ViewEncapsulation.None // Required for rowClassCallback
-                    , template: "<kendo-grid #grid [kendoGridBinding]=\"gridData()\"\r\n    [rowClass]=\"rowClassCallback.bind(this)\"\r\n    [filterable]=\"settings().filterMode === 'Column' || settings().filterMode === 'Both'\"\r\n    [groupable]=\"settings().groupable!\"\r\n    [sortable]=\"settings().sortable!\"\r\n    [pageSize]=\"settings().pageable! ? settings().pageSize! : 0\"\r\n    [pageable]=\"settings().pageable!\"\r\n    [height]=\"settings().height!\"\r\n    [selectable]=\"settings().selectionSettings!\"\r\n    [kendoGridSelectBy]=\"caseInsensitiveSelectBy\"\r\n    [(selectedKeys)]=\"selectedAccountNames\">\r\n    \r\n    <!-- Checkbox is we are in checkbox selection mode -->\r\n    @if (settings().selectionSettings?.checkboxOnly ?? false) {\r\n        <kendo-grid-column [width]=\"30\">\r\n            <ng-template kendoGridCellTemplate let-rowIndex=\"rowIndex\">\r\n                <kendo-checkbox [kendoGridSelectionCheckbox]=\"rowIndex\"></kendo-checkbox>\r\n            </ng-template>\r\n        </kendo-grid-column>\r\n    }\r\n\r\n    @if (mode() === 'users') {\r\n        <!-- Optional user photo -->\r\n        @if (settings().displayPhotos ?? false) {\r\n            <kendo-grid-column [width]=\"settings().photoColumnWidth ?? 40\">\r\n                <ng-template kendoGridCellTemplate let-dataItem>\r\n                    @if (photo(dataItem)) {\r\n                        <img [src]=\"photo(dataItem)!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    }\r\n                </ng-template>\r\n            </kendo-grid-column>\r\n        }\r\n        \r\n        <!-- Columns -->\r\n        @for (column of settings().userColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    } @else if (mode() === 'groups') {\r\n        <!-- Columns -->\r\n        @for (column of settings().groupColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    }\r\n</kendo-grid>", styles: [".user-chooser-photo{width:2rem;height:2rem;border-radius:100%}.disabled{opacity:.5}\n"] }]
+                        KENDO_GRID,
+                        KENDO_ICONS
+                    ], standalone: true, encapsulation: ViewEncapsulation.None // Required for rowClassCallback
+                    , template: "<kendo-grid #grid [kendoGridBinding]=\"gridData()\"\r\n    [rowClass]=\"rowClassCallback.bind(this)\"\r\n    [filterable]=\"settings().filterMode === 'Column' || settings().filterMode === 'Both'\"\r\n    [groupable]=\"settings().groupable!\"\r\n    [sortable]=\"settings().sortable!\"\r\n    [pageSize]=\"settings().pageable! ? settings().pageSize! : 0\"\r\n    [pageable]=\"settings().pageable!\"\r\n    [height]=\"settings().height!\"\r\n    [selectable]=\"settings().selectionSettings!\"\r\n    [kendoGridSelectBy]=\"caseInsensitiveSelectBy\"\r\n    [(selectedKeys)]=\"selectedAccountNames\"\r\n    (selectedKeysChange)=\"selectedKeysChange($event)\">\r\n    \r\n    <!-- Checkbox is we are in checkbox selection mode -->\r\n    @if (settings().selectionSettings?.checkboxOnly ?? false) {\r\n        <kendo-grid-column [width]=\"30\">\r\n            <ng-template kendoGridCellTemplate let-rowIndex=\"rowIndex\">\r\n                <kendo-checkbox [kendoGridSelectionCheckbox]=\"rowIndex\"></kendo-checkbox>\r\n            </ng-template>\r\n        </kendo-grid-column>\r\n    }\r\n\r\n    @if (mode() === 'users') {\r\n        <!-- Optional user photo -->\r\n        @if (settings().displayPhotos ?? false) {\r\n            <kendo-grid-column [width]=\"settings().photoColumnWidth ?? 40\">\r\n                <ng-template kendoGridCellTemplate let-dataItem>\r\n                    @if (photo(dataItem)) {\r\n                        <img [src]=\"photo(dataItem)!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    } @else {\r\n                        <kendo-svg-icon [icon]=\"userIcon\" size=\"small\" [ngClass]=\"photoClass()\" />\r\n                    }\r\n                </ng-template>\r\n            </kendo-grid-column>\r\n        }\r\n        \r\n        <!-- Columns -->\r\n        @for (column of settings().userColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    } @else if (mode() === 'groups') {\r\n        <!-- Columns -->\r\n        @for (column of settings().groupColumns!; track column.field) {\r\n            <kendo-grid-column [field]=\"column.field\" [title]=\"column.title\"\r\n                [width]=\"column.width ?? 0\"\r\n                [hidden]=\"column.hidden ?? false\"\r\n                [filterable]=\"column.columnFilterable ?? true\"\r\n                [sortable]=\"column.sortable ?? true\"\r\n                [groupable]=\"column.groupable ?? true\" />\r\n        }\r\n    }\r\n</kendo-grid>", styles: [".user-chooser-photo{width:2rem;height:2rem;border-radius:100%}.disabled{opacity:.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { grid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GridComponent), { isSignal: true }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], photoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoClass", required: false }] }], selectedAccountNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAccountNames", required: false }] }, { type: i0.Output, args: ["selectedAccountNamesChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], hideUnselected: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideUnselected", required: false }] }], photos: [{ type: i0.Input, args: [{ isSignal: true, alias: "photos", required: false }] }] } });
 
 class UserChooserDialogComponent {
@@ -325,7 +327,7 @@ class UserChooserDialogComponent {
         this.selectedTabIndex.set(e.index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserChooserDialogComponent, isStandalone: true, selector: "user-chooser-dialog", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, users: { classPropertyName: "users", publicName: "users", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, photos: { classPropertyName: "photos", publicName: "photos", isSignal: true, isRequired: false, transformFunction: null }, photoClass: { classPropertyName: "photoClass", publicName: "photoClass", isSignal: true, isRequired: false, transformFunction: null }, selectedUsers: { classPropertyName: "selectedUsers", publicName: "selectedUsers", isSignal: true, isRequired: false, transformFunction: null }, selectedGroups: { classPropertyName: "selectedGroups", publicName: "selectedGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedUsers: "selectedUsersChange", selectedGroups: "selectedGroupsChange", close: "close" }, viewQueries: [{ propertyName: "userChooserList", first: true, predicate: ["userChooserList"], descendants: true, isSignal: true }, { propertyName: "groupChooserList", first: true, predicate: ["groupChooserList"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-dialog [width]=\"dialogWidth()\" (close)=\"close.emit('cancel')\">\r\n    <!-- Title -->\r\n    <kendo-dialog-titlebar>\r\n        <div id=\"title\" class=\"bold\">\r\n            {{ title() }}\r\n        </div>\r\n        @if (multiSelectInstructions()) {\r\n            <div id=\"multi-select-instructions\" [innerHTML]=\"multiSelectInstructions()\">\r\n            </div>\r\n        }\r\n    </kendo-dialog-titlebar>\r\n\r\n    <!-- Global filter -->\r\n    @if (settings().filterMode === 'Global' || settings().filterMode === 'Both') {\r\n        <kendo-textbox id=\"filter\" [(value)]=\"filter\" placeholder=\"Type here to filter employee list...\">\r\n            @if (filter()) {\r\n                <ng-template kendoTextBoxSuffixTemplate>\r\n                    <kendo-svgicon [icon]=\"filterClearIcon\" class=\"clear-filter\" (click)=\"filter.set('')\" />\r\n                </ng-template>\r\n            }\r\n        </kendo-textbox>\r\n    }\r\n\r\n    @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n        <!-- Groups AND Users, so we need tabs -->\r\n        <kendo-tabstrip [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\">\r\n            <!-- Users tab -->\r\n            <kendo-tabstrip-tab title=\"Users\" [selected]=\"true\" #usersTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedUsers\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n\r\n            <!-- Groups tab -->\r\n            <kendo-tabstrip-tab title=\"Groups\" #groupsTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedGroups\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n        </kendo-tabstrip>\r\n    }\r\n    @else if (resolvedUsers().length > 0) {\r\n        <!-- Users only -->\r\n        <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedUsers\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedUsersCount.set($event)\" -->\r\n    }\r\n    @else if (resolvedGroups().length > 0) {\r\n        <!-- Groups only -->\r\n         <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedGroups\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedGroupsCount.set($event)\" -->\r\n    }\r\n\r\n    <kendo-dialog-actions>\r\n        <!-- Hide unselected toggle -->\r\n        <div id=\"hide-toggle\">\r\n            @if (\r\n                    settings().displayHideUnselectedToggle &&\r\n                    (selectedUsers().length > 0 || selectedGroups().length > 0))\r\n                {\r\n                <kendo-label [for]=\"hideunselected\">Hide Unselected </kendo-label>\r\n                <kendo-switch #hideunselected (valueChange)=\"hideUnselected.set($event)\" onLabel=\"'Yes'\" offLabel=\"'No'\" />\r\n            }\r\n        </div>\r\n\r\n        <!-- Selected user count -->\r\n        <div id=\"selected-count\">\r\n            @if (settings().displaySelectedCount) {\r\n                @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s), {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n\r\n                }\r\n                @else if (resolvedUsers().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s) selected\r\n                }\r\n                @else if (resolvedGroups().length > 0) {\r\n                    {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n                }\r\n            }\r\n        </div>\r\n\r\n        <div id=\"buttons\">\r\n            <!-- Unselect All button -->\r\n            @if (\r\n                    (selectedTabIndex() === 0 && selectedUsers().length > 0) ||\r\n                    (selectedTabIndex() === 1 && selectedGroups().length > 0))\r\n                {\r\n                <button type=\"button\" kendoButton\r\n                    (click)=\"unselectAll()\">\r\n                    \r\n                    {{ settings().unselectButtonText ?? 'Unselect All' }}\r\n                </button>\r\n            }\r\n            \r\n            <!-- Cancel button -->\r\n            <button type=\"button\" kendoButton\r\n                (click)=\"close.emit(settings().cancelReturnValue)\">\r\n\r\n                {{ settings().cancelButtonText ?? 'Cancel' }}\r\n            </button>\r\n\r\n            <!-- Ok button -->\r\n            <button type=\"button\" kendoButton themeColor=\"primary\"\r\n                [disabled]=\"selectedUsers().length === 0 && selectedGroups().length === 0\"\r\n                (click)=\"close.emit(returnValue())\">\r\n\r\n                {{ settings().okButtonText ?? 'Ok' }}\r\n            </button>\r\n        </div>\r\n    </kendo-dialog-actions>\r\n</kendo-dialog>", styles: ["::ng-deep .k-dialog-title,.k-window-title{display:flex;justify-content:space-between}::ng-deep .k-dialog-title .bold,.k-window-title .bold{font-weight:700}::ng-deep .k-dialog-title #multi-select-instructions,.k-window-title #multi-select-instructions{opacity:.5}#filter{margin-bottom:1rem}#filter .clear-filter{cursor:pointer}.k-dialog-actions,.k-window-actions,.k-actions{display:flex;justify-content:space-between}.k-dialog-actions>#selected-count,.k-window-actions>#selected-count,.k-actions>#selected-count{text-align:center}.k-dialog-actions>#buttons,.k-window-actions>#buttons,.k-actions>#buttons{display:grid;grid-auto-flow:column;justify-content:end;gap:1rem}.k-dialog-actions>#buttons button,.k-window-actions>#buttons button,.k-actions>#buttons button{min-width:5rem}\n"], dependencies: [{ kind: "component", type: i1$1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle", "closable"], outputs: ["close"] }, { kind: "component", type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i3.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: i6.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: UserChooserList, selector: "user-chooser-list", inputs: ["settings", "data", "photoClass", "selectedAccountNames", "filter", "hideUnselected", "photos"], outputs: ["selectedAccountNamesChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserChooserDialogComponent, isStandalone: true, selector: "user-chooser-dialog", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, users: { classPropertyName: "users", publicName: "users", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, photos: { classPropertyName: "photos", publicName: "photos", isSignal: true, isRequired: false, transformFunction: null }, photoClass: { classPropertyName: "photoClass", publicName: "photoClass", isSignal: true, isRequired: false, transformFunction: null }, selectedUsers: { classPropertyName: "selectedUsers", publicName: "selectedUsers", isSignal: true, isRequired: false, transformFunction: null }, selectedGroups: { classPropertyName: "selectedGroups", publicName: "selectedGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedUsers: "selectedUsersChange", selectedGroups: "selectedGroupsChange", close: "close" }, viewQueries: [{ propertyName: "userChooserList", first: true, predicate: ["userChooserList"], descendants: true, isSignal: true }, { propertyName: "groupChooserList", first: true, predicate: ["groupChooserList"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-dialog [width]=\"dialogWidth()\" (close)=\"close.emit('cancel')\">\r\n    <!-- Title -->\r\n    <kendo-dialog-titlebar>\r\n        <div id=\"title\" class=\"bold\">\r\n            {{ title() }}\r\n        </div>\r\n        @if (multiSelectInstructions()) {\r\n            <div id=\"multi-select-instructions\" [innerHTML]=\"multiSelectInstructions()\">\r\n            </div>\r\n        }\r\n    </kendo-dialog-titlebar>\r\n\r\n    <!-- Global filter -->\r\n    @if (settings().filterMode === 'Global' || settings().filterMode === 'Both') {\r\n        <kendo-textbox id=\"filter\" [(value)]=\"filter\" placeholder=\"Type here to filter employee list...\">\r\n            @if (filter()) {\r\n                <ng-template kendoTextBoxSuffixTemplate>\r\n                    <kendo-svgicon [icon]=\"filterClearIcon\" class=\"clear-filter\" (click)=\"filter.set('')\" />\r\n                </ng-template>\r\n            }\r\n        </kendo-textbox>\r\n    }\r\n\r\n    @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n        <!-- Groups AND Users, so we need tabs -->\r\n        <kendo-tabstrip [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\">\r\n            <!-- Users tab -->\r\n            <kendo-tabstrip-tab title=\"Users\" [selected]=\"true\" #usersTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedUsers\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n\r\n            <!-- Groups tab -->\r\n            <kendo-tabstrip-tab title=\"Groups\" #groupsTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedGroups\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n        </kendo-tabstrip>\r\n    }\r\n    @else if (resolvedUsers().length > 0) {\r\n        <!-- Users only -->\r\n        <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedUsers\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedUsersCount.set($event)\" -->\r\n    }\r\n    @else if (resolvedGroups().length > 0) {\r\n        <!-- Groups only -->\r\n         <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedGroups\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedGroupsCount.set($event)\" -->\r\n    }\r\n\r\n    <kendo-dialog-actions>\r\n        <!-- Hide unselected toggle -->\r\n        <div id=\"hide-toggle\">\r\n            @if (\r\n                    settings().displayHideUnselectedToggle &&\r\n                    (selectedUsers().length > 0 || selectedGroups().length > 0))\r\n                {\r\n                <kendo-label [for]=\"hideunselected\">Hide Unselected </kendo-label>\r\n                <kendo-switch #hideunselected (valueChange)=\"hideUnselected.set($event)\" onLabel=\"'Yes'\" offLabel=\"'No'\" />\r\n            }\r\n        </div>\r\n\r\n        <!-- Selected user count -->\r\n        <div id=\"selected-count\">\r\n            @if (settings().displaySelectedCount) {\r\n                @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s), {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n\r\n                }\r\n                @else if (resolvedUsers().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s) selected\r\n                }\r\n                @else if (resolvedGroups().length > 0) {\r\n                    {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n                }\r\n            }\r\n        </div>\r\n\r\n        <div id=\"buttons\">\r\n            <!-- Unselect All button -->\r\n            @if (\r\n                    (selectedTabIndex() === 0 && selectedUsers().length > 0) ||\r\n                    (selectedTabIndex() === 1 && selectedGroups().length > 0))\r\n                {\r\n                <button type=\"button\" kendoButton\r\n                    (click)=\"unselectAll()\">\r\n                    \r\n                    {{ settings().unselectButtonText ?? 'Unselect All' }}\r\n                </button>\r\n            }\r\n            \r\n            <!-- Cancel button -->\r\n            <button type=\"button\" kendoButton\r\n                (click)=\"close.emit(settings().cancelReturnValue)\">\r\n\r\n                {{ settings().cancelButtonText ?? 'Cancel' }}\r\n            </button>\r\n\r\n            <!-- Ok button -->\r\n            <button type=\"button\" kendoButton themeColor=\"primary\"\r\n                [disabled]=\"selectedUsers().length === 0 && selectedGroups().length === 0\"\r\n                (click)=\"close.emit(returnValue())\">\r\n\r\n                {{ settings().okButtonText ?? 'Ok' }}\r\n            </button>\r\n        </div>\r\n    </kendo-dialog-actions>\r\n</kendo-dialog>", styles: ["::ng-deep .k-dialog-title,.k-window-title{display:flex;justify-content:space-between}::ng-deep .k-dialog-title .bold,.k-window-title .bold{font-weight:700}::ng-deep .k-dialog-title #multi-select-instructions,.k-window-title #multi-select-instructions{opacity:.5}#filter{margin-bottom:1rem}#filter .clear-filter{cursor:pointer}.k-dialog-actions,.k-window-actions,.k-actions{display:flex;justify-content:space-between}.k-dialog-actions>#selected-count,.k-window-actions>#selected-count,.k-actions>#selected-count{text-align:center}.k-dialog-actions>#buttons,.k-window-actions>#buttons,.k-actions>#buttons{display:grid;grid-auto-flow:column;justify-content:end;gap:1rem}.k-dialog-actions>#buttons button,.k-window-actions>#buttons button,.k-actions>#buttons button{min-width:5rem}\n"], dependencies: [{ kind: "component", type: i1$1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle", "closable"], outputs: ["close"] }, { kind: "component", type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i3.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: UserChooserList, selector: "user-chooser-list", inputs: ["settings", "data", "photoClass", "selectedAccountNames", "filter", "hideUnselected", "photos"], outputs: ["selectedAccountNamesChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserDialogComponent, decorators: [{
             type: Component,
@@ -337,7 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KENDO_TABSTRIP,
                         KENDO_ICONS,
                         UserChooserList
-                    ], template: "<kendo-dialog [width]=\"dialogWidth()\" (close)=\"close.emit('cancel')\">\r\n    <!-- Title -->\r\n    <kendo-dialog-titlebar>\r\n        <div id=\"title\" class=\"bold\">\r\n            {{ title() }}\r\n        </div>\r\n        @if (multiSelectInstructions()) {\r\n            <div id=\"multi-select-instructions\" [innerHTML]=\"multiSelectInstructions()\">\r\n            </div>\r\n        }\r\n    </kendo-dialog-titlebar>\r\n\r\n    <!-- Global filter -->\r\n    @if (settings().filterMode === 'Global' || settings().filterMode === 'Both') {\r\n        <kendo-textbox id=\"filter\" [(value)]=\"filter\" placeholder=\"Type here to filter employee list...\">\r\n            @if (filter()) {\r\n                <ng-template kendoTextBoxSuffixTemplate>\r\n                    <kendo-svgicon [icon]=\"filterClearIcon\" class=\"clear-filter\" (click)=\"filter.set('')\" />\r\n                </ng-template>\r\n            }\r\n        </kendo-textbox>\r\n    }\r\n\r\n    @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n        <!-- Groups AND Users, so we need tabs -->\r\n        <kendo-tabstrip [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\">\r\n            <!-- Users tab -->\r\n            <kendo-tabstrip-tab title=\"Users\" [selected]=\"true\" #usersTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedUsers\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n\r\n            <!-- Groups tab -->\r\n            <kendo-tabstrip-tab title=\"Groups\" #groupsTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedGroups\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n        </kendo-tabstrip>\r\n    }\r\n    @else if (resolvedUsers().length > 0) {\r\n        <!-- Users only -->\r\n        <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedUsers\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedUsersCount.set($event)\" -->\r\n    }\r\n    @else if (resolvedGroups().length > 0) {\r\n        <!-- Groups only -->\r\n         <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedGroups\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedGroupsCount.set($event)\" -->\r\n    }\r\n\r\n    <kendo-dialog-actions>\r\n        <!-- Hide unselected toggle -->\r\n        <div id=\"hide-toggle\">\r\n            @if (\r\n                    settings().displayHideUnselectedToggle &&\r\n                    (selectedUsers().length > 0 || selectedGroups().length > 0))\r\n                {\r\n                <kendo-label [for]=\"hideunselected\">Hide Unselected </kendo-label>\r\n                <kendo-switch #hideunselected (valueChange)=\"hideUnselected.set($event)\" onLabel=\"'Yes'\" offLabel=\"'No'\" />\r\n            }\r\n        </div>\r\n\r\n        <!-- Selected user count -->\r\n        <div id=\"selected-count\">\r\n            @if (settings().displaySelectedCount) {\r\n                @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s), {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n\r\n                }\r\n                @else if (resolvedUsers().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s) selected\r\n                }\r\n                @else if (resolvedGroups().length > 0) {\r\n                    {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n                }\r\n            }\r\n        </div>\r\n\r\n        <div id=\"buttons\">\r\n            <!-- Unselect All button -->\r\n            @if (\r\n                    (selectedTabIndex() === 0 && selectedUsers().length > 0) ||\r\n                    (selectedTabIndex() === 1 && selectedGroups().length > 0))\r\n                {\r\n                <button type=\"button\" kendoButton\r\n                    (click)=\"unselectAll()\">\r\n                    \r\n                    {{ settings().unselectButtonText ?? 'Unselect All' }}\r\n                </button>\r\n            }\r\n            \r\n            <!-- Cancel button -->\r\n            <button type=\"button\" kendoButton\r\n                (click)=\"close.emit(settings().cancelReturnValue)\">\r\n\r\n                {{ settings().cancelButtonText ?? 'Cancel' }}\r\n            </button>\r\n\r\n            <!-- Ok button -->\r\n            <button type=\"button\" kendoButton themeColor=\"primary\"\r\n                [disabled]=\"selectedUsers().length === 0 && selectedGroups().length === 0\"\r\n                (click)=\"close.emit(returnValue())\">\r\n\r\n                {{ settings().okButtonText ?? 'Ok' }}\r\n            </button>\r\n        </div>\r\n    </kendo-dialog-actions>\r\n</kendo-dialog>", styles: ["::ng-deep .k-dialog-title,.k-window-title{display:flex;justify-content:space-between}::ng-deep .k-dialog-title .bold,.k-window-title .bold{font-weight:700}::ng-deep .k-dialog-title #multi-select-instructions,.k-window-title #multi-select-instructions{opacity:.5}#filter{margin-bottom:1rem}#filter .clear-filter{cursor:pointer}.k-dialog-actions,.k-window-actions,.k-actions{display:flex;justify-content:space-between}.k-dialog-actions>#selected-count,.k-window-actions>#selected-count,.k-actions>#selected-count{text-align:center}.k-dialog-actions>#buttons,.k-window-actions>#buttons,.k-actions>#buttons{display:grid;grid-auto-flow:column;justify-content:end;gap:1rem}.k-dialog-actions>#buttons button,.k-window-actions>#buttons button,.k-actions>#buttons button{min-width:5rem}\n"] }]
+                    ], standalone: true, template: "<kendo-dialog [width]=\"dialogWidth()\" (close)=\"close.emit('cancel')\">\r\n    <!-- Title -->\r\n    <kendo-dialog-titlebar>\r\n        <div id=\"title\" class=\"bold\">\r\n            {{ title() }}\r\n        </div>\r\n        @if (multiSelectInstructions()) {\r\n            <div id=\"multi-select-instructions\" [innerHTML]=\"multiSelectInstructions()\">\r\n            </div>\r\n        }\r\n    </kendo-dialog-titlebar>\r\n\r\n    <!-- Global filter -->\r\n    @if (settings().filterMode === 'Global' || settings().filterMode === 'Both') {\r\n        <kendo-textbox id=\"filter\" [(value)]=\"filter\" placeholder=\"Type here to filter employee list...\">\r\n            @if (filter()) {\r\n                <ng-template kendoTextBoxSuffixTemplate>\r\n                    <kendo-svgicon [icon]=\"filterClearIcon\" class=\"clear-filter\" (click)=\"filter.set('')\" />\r\n                </ng-template>\r\n            }\r\n        </kendo-textbox>\r\n    }\r\n\r\n    @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n        <!-- Groups AND Users, so we need tabs -->\r\n        <kendo-tabstrip [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\">\r\n            <!-- Users tab -->\r\n            <kendo-tabstrip-tab title=\"Users\" [selected]=\"true\" #usersTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedUsers\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n\r\n            <!-- Groups tab -->\r\n            <kendo-tabstrip-tab title=\"Groups\" #groupsTab>\r\n                <ng-template kendoTabContent>\r\n                    <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n                        [photoClass]=\"photoClass()\"\r\n                        [(selectedAccountNames)]=\"selectedGroups\"\r\n                        [hideUnselected]=\"hideUnselected()\"\r\n                        [filter]=\"filter()\" />\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n        </kendo-tabstrip>\r\n    }\r\n    @else if (resolvedUsers().length > 0) {\r\n        <!-- Users only -->\r\n        <user-chooser-list #userChooserList [data]=\"resolvedUsers()\" [photos]=\"resolvedPhotos()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedUsers\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedUsersCount.set($event)\" -->\r\n    }\r\n    @else if (resolvedGroups().length > 0) {\r\n        <!-- Groups only -->\r\n         <user-chooser-list #groupChooserList [data]=\"resolvedGroups()\" [settings]=\"settings()\"\r\n            [photoClass]=\"photoClass()\"\r\n            [(selectedAccountNames)]=\"selectedGroups\"\r\n            [hideUnselected]=\"hideUnselected()\"\r\n            [filter]=\"filter()\"\r\n             /> <!-- (selectedCountChange)=\"selectedGroupsCount.set($event)\" -->\r\n    }\r\n\r\n    <kendo-dialog-actions>\r\n        <!-- Hide unselected toggle -->\r\n        <div id=\"hide-toggle\">\r\n            @if (\r\n                    settings().displayHideUnselectedToggle &&\r\n                    (selectedUsers().length > 0 || selectedGroups().length > 0))\r\n                {\r\n                <kendo-label [for]=\"hideunselected\">Hide Unselected </kendo-label>\r\n                <kendo-switch #hideunselected (valueChange)=\"hideUnselected.set($event)\" onLabel=\"'Yes'\" offLabel=\"'No'\" />\r\n            }\r\n        </div>\r\n\r\n        <!-- Selected user count -->\r\n        <div id=\"selected-count\">\r\n            @if (settings().displaySelectedCount) {\r\n                @if (resolvedUsers().length > 0 && resolvedGroups().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s), {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n\r\n                }\r\n                @else if (resolvedUsers().length > 0) {\r\n                    {{ userChooserList()?.selectedCount() }} user(s) selected\r\n                }\r\n                @else if (resolvedGroups().length > 0) {\r\n                    {{ groupChooserList()?.selectedCount() }} group(s) selected\r\n                }\r\n            }\r\n        </div>\r\n\r\n        <div id=\"buttons\">\r\n            <!-- Unselect All button -->\r\n            @if (\r\n                    (selectedTabIndex() === 0 && selectedUsers().length > 0) ||\r\n                    (selectedTabIndex() === 1 && selectedGroups().length > 0))\r\n                {\r\n                <button type=\"button\" kendoButton\r\n                    (click)=\"unselectAll()\">\r\n                    \r\n                    {{ settings().unselectButtonText ?? 'Unselect All' }}\r\n                </button>\r\n            }\r\n            \r\n            <!-- Cancel button -->\r\n            <button type=\"button\" kendoButton\r\n                (click)=\"close.emit(settings().cancelReturnValue)\">\r\n\r\n                {{ settings().cancelButtonText ?? 'Cancel' }}\r\n            </button>\r\n\r\n            <!-- Ok button -->\r\n            <button type=\"button\" kendoButton themeColor=\"primary\"\r\n                [disabled]=\"selectedUsers().length === 0 && selectedGroups().length === 0\"\r\n                (click)=\"close.emit(returnValue())\">\r\n\r\n                {{ settings().okButtonText ?? 'Ok' }}\r\n            </button>\r\n        </div>\r\n    </kendo-dialog-actions>\r\n</kendo-dialog>", styles: ["::ng-deep .k-dialog-title,.k-window-title{display:flex;justify-content:space-between}::ng-deep .k-dialog-title .bold,.k-window-title .bold{font-weight:700}::ng-deep .k-dialog-title #multi-select-instructions,.k-window-title #multi-select-instructions{opacity:.5}#filter{margin-bottom:1rem}#filter .clear-filter{cursor:pointer}.k-dialog-actions,.k-window-actions,.k-actions{display:flex;justify-content:space-between}.k-dialog-actions>#selected-count,.k-window-actions>#selected-count,.k-actions>#selected-count{text-align:center}.k-dialog-actions>#buttons,.k-window-actions>#buttons,.k-actions>#buttons{display:grid;grid-auto-flow:column;justify-content:end;gap:1rem}.k-dialog-actions>#buttons button,.k-window-actions>#buttons button,.k-actions>#buttons button{min-width:5rem}\n"] }]
         }], propDecorators: { userChooserList: [{ type: i0.ViewChild, args: ['userChooserList', { isSignal: true }] }], groupChooserList: [{ type: i0.ViewChild, args: ['groupChooserList', { isSignal: true }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], photos: [{ type: i0.Input, args: [{ isSignal: true, alias: "photos", required: false }] }], photoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoClass", required: false }] }], selectedUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedUsers", required: false }] }, { type: i0.Output, args: ["selectedUsersChange"] }], selectedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedGroups", required: false }] }, { type: i0.Output, args: ["selectedGroupsChange"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
 class UserFieldComponent {
@@ -347,6 +349,7 @@ class UserFieldComponent {
             sp: inject(SharePointService)
         };
         this.icons = {
+            close: xCircleIcon,
             user: userIcon,
             group: usersIcon,
             unknown: questionCircleIcon
@@ -410,6 +413,8 @@ class UserFieldComponent {
         ...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
         this.emptyUserNameText = input('Select user...', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyUserNameText" }] : /* istanbul ignore next */ []));
+        this.clearAllTooltip = input("Clear all", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearAllTooltip" }] : /* istanbul ignore next */ []));
         this.enableUserChooser = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "enableUserChooser" }] : /* istanbul ignore next */ []));
         this.userChooserSettings = input({
@@ -524,17 +529,28 @@ class UserFieldComponent {
         }
         this.showUserChooser.set(false);
     }
+    clearAll() {
+        this.selectedGroups.set([]);
+        this.selectedUsers.set([]);
+        this.userChooserClosed.emit({
+            users: [],
+            groups: [],
+            invalidUsers: [],
+            invalidGroups: []
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserFieldComponent, isStandalone: true, selector: "user-field", inputs: { selectedUsers: { classPropertyName: "selectedUsers", publicName: "selectedUsers", isSignal: true, isRequired: false, transformFunction: null }, selectedGroups: { classPropertyName: "selectedGroups", publicName: "selectedGroups", isSignal: true, isRequired: false, transformFunction: null }, users: { classPropertyName: "users", publicName: "users", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, photos: { classPropertyName: "photos", publicName: "photos", isSignal: true, isRequired: false, transformFunction: null }, maxItemsToDisplay: { classPropertyName: "maxItemsToDisplay", publicName: "maxItemsToDisplay", isSignal: true, isRequired: false, transformFunction: null }, groupItemsOverMax: { classPropertyName: "groupItemsOverMax", publicName: "groupItemsOverMax", isSignal: true, isRequired: false, transformFunction: null }, groupItemsOverMaxText: { classPropertyName: "groupItemsOverMaxText", publicName: "groupItemsOverMaxText", isSignal: true, isRequired: false, transformFunction: null }, ignoreInvalidAccountNames: { classPropertyName: "ignoreInvalidAccountNames", publicName: "ignoreInvalidAccountNames", isSignal: true, isRequired: false, transformFunction: null }, displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, emptyUserNameText: { classPropertyName: "emptyUserNameText", publicName: "emptyUserNameText", isSignal: true, isRequired: false, transformFunction: null }, enableUserChooser: { classPropertyName: "enableUserChooser", publicName: "enableUserChooser", isSignal: true, isRequired: false, transformFunction: null }, userChooserSettings: { classPropertyName: "userChooserSettings", publicName: "userChooserSettings", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, emptyUserNameClass: { classPropertyName: "emptyUserNameClass", publicName: "emptyUserNameClass", isSignal: true, isRequired: false, transformFunction: null }, validUserTextClass: { classPropertyName: "validUserTextClass", publicName: "validUserTextClass", isSignal: true, isRequired: false, transformFunction: null }, manySelectedClass: { classPropertyName: "manySelectedClass", publicName: "manySelectedClass", isSignal: true, isRequired: false, transformFunction: null }, invalidUserTextClass: { classPropertyName: "invalidUserTextClass", publicName: "invalidUserTextClass", isSignal: true, isRequired: false, transformFunction: null }, photoClass: { classPropertyName: "photoClass", publicName: "photoClass", isSignal: true, isRequired: false, transformFunction: null }, userChooserPhotoClass: { classPropertyName: "userChooserPhotoClass", publicName: "userChooserPhotoClass", isSignal: true, isRequired: false, transformFunction: null }, userChooserEnabledClass: { classPropertyName: "userChooserEnabledClass", publicName: "userChooserEnabledClass", isSignal: true, isRequired: false, transformFunction: null }, userChooserDisabledClass: { classPropertyName: "userChooserDisabledClass", publicName: "userChooserDisabledClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rejectedInvalidAccountNames: "rejectedInvalidAccountNames", userChooserClosed: "userChooserClosed", selectedUsers: "selectedUsersChange", selectedGroups: "selectedGroupsChange" }, ngImport: i0, template: " <div (click)=\"enableUserChooser() && showUserChooser.set(true)\"\r\n    [ngClass]=\"[wrapperClass(), enableUserChooser() ? userChooserEnabledClass() : userChooserDisabledClass()]\">\r\n\r\n    @if (userObjects().length === 0 && groupObjects().length === 0) {\r\n        <!-- No data provided, just present an empty user/group chooser -->\r\n        <div [ngClass]=\"emptyUserNameClass()\">\r\n            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n            {{ emptyUserNameText() }}\r\n        </div>\r\n    }\r\n    @else if (totalItemCount() > maxItemsToDisplay()) {\r\n        <!-- Too many items to display, just show a count -->\r\n        <div [ngClass]=\"manySelectedClass()\">\r\n            @if (groupObjects().length === 0) {\r\n                <!-- We only have Users -->\r\n                 <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} users\r\n            } @else if (groupObjects().length === 0) {\r\n                <!-- We only have Groups -->\r\n                  <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} groups\r\n            } @else {\r\n                <!-- We have both Users and Groups -->\r\n                @if (groupItemsOverMax()) {\r\n                    <!-- Lump users/groups together -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ totalItemCount() }} {{ groupItemsOverMaxText() }}\r\n                } @else {\r\n                    <!-- List how many users/groups separately -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ userObjects().length }} users\r\n                    <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ groupObjects().length }} groups\r\n                }\r\n            }\r\n        </div>\r\n\r\n    }\r\n    @else {\r\n        <!-- Display the users/groups that were passed in -->\r\n\r\n        <!-- Users -->\r\n        @for (userObject of userObjects(); track userObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (userObject.photo) {\r\n                        <img [src]=\"userObject.photo!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    } @else {\r\n                        @if (userObject.user) {\r\n                            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        } @else {\r\n                            <kendo-svg-icon [icon]=\"icons.unknown\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        }\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"userObject.user ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"userObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    \r\n        <!-- Groups -->\r\n        @for (groupObject of groupObjects(); track groupObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (groupObject.group) {\r\n                        <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    } @else {\r\n                        <kendo-svg-icon [icon]=\"icons.unknown   \" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"groupObject.group ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"groupObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n\r\n</div>\r\n\r\n<!-- Display User Chooser when the user clicks the component -->\r\n@if (showUserChooser()) {\r\n    <!--\r\n    TODO\r\n    If we want to ensure that only valid users/groups are passed in...\r\n    [selectedUsers]=\"data().filter(i => i.userOrGroup).map(i => i.accountName!)\"\r\n    -->\r\n\r\n    <user-chooser-dialog [users]=\"resolvedUsers()\" [groups]=\"resolvedGroups()\" [photos]=\"resolvedPhotos()\"\r\n        [settings]=\"userChooserSettings()\"\r\n        [photoClass]=\"userChooserPhotoClass()\"\r\n        [selectedUsers]=\"selectedUsers()\" [selectedGroups]=\"selectedGroups()\"\r\n        (close)=\"onUserChooserClosed($event)\" />\r\n}", styles: [".wrapper{display:flex;gap:.5rem}.wrapper.user-chooser-enabled{cursor:pointer}.empty-user{font-style:italic;opacity:.75;display:grid;align-items:center;grid-template-columns:auto 1fr;gap:.5rem}.many-selected{display:grid;align-items:center;grid-auto-flow:column;gap:.5rem}.user-identity{display:grid;align-items:center}.user-identity.with-photo{grid-template-columns:auto 1fr;gap:.5rem}.user-identity .empty-user{font-style:italic;opacity:.75}.user-identity .invalid-user{color:#9b0202;font-style:italic}.user-identity .user-photo{width:2rem;height:2rem;border-radius:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: UserChooserDialogComponent, selector: "user-chooser-dialog", inputs: ["settings", "users", "groups", "photos", "photoClass", "selectedUsers", "selectedGroups"], outputs: ["selectedUsersChange", "selectedGroupsChange", "close"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserFieldComponent, isStandalone: true, selector: "user-field", inputs: { selectedUsers: { classPropertyName: "selectedUsers", publicName: "selectedUsers", isSignal: true, isRequired: false, transformFunction: null }, selectedGroups: { classPropertyName: "selectedGroups", publicName: "selectedGroups", isSignal: true, isRequired: false, transformFunction: null }, users: { classPropertyName: "users", publicName: "users", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, photos: { classPropertyName: "photos", publicName: "photos", isSignal: true, isRequired: false, transformFunction: null }, maxItemsToDisplay: { classPropertyName: "maxItemsToDisplay", publicName: "maxItemsToDisplay", isSignal: true, isRequired: false, transformFunction: null }, groupItemsOverMax: { classPropertyName: "groupItemsOverMax", publicName: "groupItemsOverMax", isSignal: true, isRequired: false, transformFunction: null }, groupItemsOverMaxText: { classPropertyName: "groupItemsOverMaxText", publicName: "groupItemsOverMaxText", isSignal: true, isRequired: false, transformFunction: null }, ignoreInvalidAccountNames: { classPropertyName: "ignoreInvalidAccountNames", publicName: "ignoreInvalidAccountNames", isSignal: true, isRequired: false, transformFunction: null }, displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, emptyUserNameText: { classPropertyName: "emptyUserNameText", publicName: "emptyUserNameText", isSignal: true, isRequired: false, transformFunction: null }, clearAllTooltip: { classPropertyName: "clearAllTooltip", publicName: "clearAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, enableUserChooser: { classPropertyName: "enableUserChooser", publicName: "enableUserChooser", isSignal: true, isRequired: false, transformFunction: null }, userChooserSettings: { classPropertyName: "userChooserSettings", publicName: "userChooserSettings", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, emptyUserNameClass: { classPropertyName: "emptyUserNameClass", publicName: "emptyUserNameClass", isSignal: true, isRequired: false, transformFunction: null }, validUserTextClass: { classPropertyName: "validUserTextClass", publicName: "validUserTextClass", isSignal: true, isRequired: false, transformFunction: null }, manySelectedClass: { classPropertyName: "manySelectedClass", publicName: "manySelectedClass", isSignal: true, isRequired: false, transformFunction: null }, invalidUserTextClass: { classPropertyName: "invalidUserTextClass", publicName: "invalidUserTextClass", isSignal: true, isRequired: false, transformFunction: null }, photoClass: { classPropertyName: "photoClass", publicName: "photoClass", isSignal: true, isRequired: false, transformFunction: null }, userChooserPhotoClass: { classPropertyName: "userChooserPhotoClass", publicName: "userChooserPhotoClass", isSignal: true, isRequired: false, transformFunction: null }, userChooserEnabledClass: { classPropertyName: "userChooserEnabledClass", publicName: "userChooserEnabledClass", isSignal: true, isRequired: false, transformFunction: null }, userChooserDisabledClass: { classPropertyName: "userChooserDisabledClass", publicName: "userChooserDisabledClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rejectedInvalidAccountNames: "rejectedInvalidAccountNames", userChooserClosed: "userChooserClosed", selectedUsers: "selectedUsersChange", selectedGroups: "selectedGroupsChange" }, ngImport: i0, template: " <div (click)=\"enableUserChooser() && showUserChooser.set(true)\"\r\n    [ngClass]=\"[wrapperClass(), enableUserChooser() ? userChooserEnabledClass() : userChooserDisabledClass()]\">\r\n\r\n    @if (userObjects().length === 0 && groupObjects().length === 0) {\r\n        <!-- No data provided, just present an empty user/group chooser -->\r\n        <div [ngClass]=\"emptyUserNameClass()\">\r\n            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n            {{ emptyUserNameText() }}\r\n        </div>\r\n    }\r\n    @else if (totalItemCount() > maxItemsToDisplay()) {\r\n        <kendo-svg-icon [icon]=\"icons.close\" size=\"small\" (click)=\"$event.stopPropagation(); clearAll()\" kendoTooltip [title]=\"clearAllTooltip()\" />\r\n\r\n        <!-- Too many items to display, just show a count -->\r\n        <div [ngClass]=\"manySelectedClass()\">\r\n            @if (groupObjects().length === 0) {\r\n                <!-- We only have Users -->\r\n                 <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} users\r\n            } @else if (groupObjects().length === 0) {\r\n                <!-- We only have Groups -->\r\n                  <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} groups\r\n            } @else {\r\n                <!-- We have both Users and Groups -->\r\n                @if (groupItemsOverMax()) {\r\n                    <!-- Lump users/groups together -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ totalItemCount() }} {{ groupItemsOverMaxText() }}\r\n                } @else {\r\n                    <!-- List how many users/groups separately -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ userObjects().length }} users\r\n                    <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ groupObjects().length }} groups\r\n                }\r\n            }\r\n        </div>\r\n\r\n    }\r\n    @else {\r\n        <!-- Display the users/groups that were passed in -->\r\n\r\n        <kendo-svg-icon [icon]=\"icons.close\" size=\"small\" (click)=\"$event.stopPropagation(); clearAll()\" kendoTooltip [title]=\"clearAllTooltip()\" />\r\n\r\n        <!-- Users -->\r\n        @for (userObject of userObjects(); track userObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (userObject.photo) {\r\n                        <img [src]=\"userObject.photo!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    } @else {\r\n                        @if (userObject.user) {\r\n                            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        } @else {\r\n                            <kendo-svg-icon [icon]=\"icons.unknown\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        }\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"userObject.user ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"userObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    \r\n        <!-- Groups -->\r\n        @for (groupObject of groupObjects(); track groupObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (groupObject.group) {\r\n                        <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    } @else {\r\n                        <kendo-svg-icon [icon]=\"icons.unknown   \" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"groupObject.group ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"groupObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n\r\n</div>\r\n\r\n<!-- Display User Chooser when the user clicks the component -->\r\n@if (showUserChooser()) {\r\n    <!--\r\n    TODO\r\n    If we want to ensure that only valid users/groups are passed in...\r\n    [selectedUsers]=\"data().filter(i => i.userOrGroup).map(i => i.accountName!)\"\r\n    -->\r\n\r\n    <user-chooser-dialog [users]=\"resolvedUsers()\" [groups]=\"resolvedGroups()\" [photos]=\"resolvedPhotos()\"\r\n        [settings]=\"userChooserSettings()\"\r\n        [photoClass]=\"userChooserPhotoClass()\"\r\n        [selectedUsers]=\"selectedUsers()\" [selectedGroups]=\"selectedGroups()\"\r\n        (close)=\"onUserChooserClosed($event)\" />\r\n}", styles: [".wrapper{display:flex;gap:.5rem;align-items:center}.wrapper.user-chooser-enabled{cursor:pointer}.empty-user{font-style:italic;opacity:.75;display:grid;align-items:center;grid-template-columns:auto 1fr;gap:.5rem}.many-selected{display:grid;align-items:center;grid-auto-flow:column;gap:.5rem}.user-identity{display:grid;align-items:center}.user-identity.with-photo{grid-template-columns:auto 1fr;gap:.5rem}.user-identity .empty-user{font-style:italic;opacity:.75}.user-identity .invalid-user{color:#9b0202;font-style:italic}.user-identity .user-photo{width:2rem;height:2rem;border-radius:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "directive", type: i2$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipThemeColor", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { kind: "component", type: UserChooserDialogComponent, selector: "user-chooser-dialog", inputs: ["settings", "users", "groups", "photos", "photoClass", "selectedUsers", "selectedGroups"], outputs: ["selectedUsersChange", "selectedGroupsChange", "close"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'user-field', imports: [
                         NgClass,
                         KENDO_ICONS,
+                        KENDO_TOOLTIPS,
                         UserChooserDialogComponent
-                    ], template: " <div (click)=\"enableUserChooser() && showUserChooser.set(true)\"\r\n    [ngClass]=\"[wrapperClass(), enableUserChooser() ? userChooserEnabledClass() : userChooserDisabledClass()]\">\r\n\r\n    @if (userObjects().length === 0 && groupObjects().length === 0) {\r\n        <!-- No data provided, just present an empty user/group chooser -->\r\n        <div [ngClass]=\"emptyUserNameClass()\">\r\n            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n            {{ emptyUserNameText() }}\r\n        </div>\r\n    }\r\n    @else if (totalItemCount() > maxItemsToDisplay()) {\r\n        <!-- Too many items to display, just show a count -->\r\n        <div [ngClass]=\"manySelectedClass()\">\r\n            @if (groupObjects().length === 0) {\r\n                <!-- We only have Users -->\r\n                 <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} users\r\n            } @else if (groupObjects().length === 0) {\r\n                <!-- We only have Groups -->\r\n                  <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} groups\r\n            } @else {\r\n                <!-- We have both Users and Groups -->\r\n                @if (groupItemsOverMax()) {\r\n                    <!-- Lump users/groups together -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ totalItemCount() }} {{ groupItemsOverMaxText() }}\r\n                } @else {\r\n                    <!-- List how many users/groups separately -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ userObjects().length }} users\r\n                    <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ groupObjects().length }} groups\r\n                }\r\n            }\r\n        </div>\r\n\r\n    }\r\n    @else {\r\n        <!-- Display the users/groups that were passed in -->\r\n\r\n        <!-- Users -->\r\n        @for (userObject of userObjects(); track userObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (userObject.photo) {\r\n                        <img [src]=\"userObject.photo!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    } @else {\r\n                        @if (userObject.user) {\r\n                            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        } @else {\r\n                            <kendo-svg-icon [icon]=\"icons.unknown\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        }\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"userObject.user ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"userObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    \r\n        <!-- Groups -->\r\n        @for (groupObject of groupObjects(); track groupObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (groupObject.group) {\r\n                        <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    } @else {\r\n                        <kendo-svg-icon [icon]=\"icons.unknown   \" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"groupObject.group ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"groupObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n\r\n</div>\r\n\r\n<!-- Display User Chooser when the user clicks the component -->\r\n@if (showUserChooser()) {\r\n    <!--\r\n    TODO\r\n    If we want to ensure that only valid users/groups are passed in...\r\n    [selectedUsers]=\"data().filter(i => i.userOrGroup).map(i => i.accountName!)\"\r\n    -->\r\n\r\n    <user-chooser-dialog [users]=\"resolvedUsers()\" [groups]=\"resolvedGroups()\" [photos]=\"resolvedPhotos()\"\r\n        [settings]=\"userChooserSettings()\"\r\n        [photoClass]=\"userChooserPhotoClass()\"\r\n        [selectedUsers]=\"selectedUsers()\" [selectedGroups]=\"selectedGroups()\"\r\n        (close)=\"onUserChooserClosed($event)\" />\r\n}", styles: [".wrapper{display:flex;gap:.5rem}.wrapper.user-chooser-enabled{cursor:pointer}.empty-user{font-style:italic;opacity:.75;display:grid;align-items:center;grid-template-columns:auto 1fr;gap:.5rem}.many-selected{display:grid;align-items:center;grid-auto-flow:column;gap:.5rem}.user-identity{display:grid;align-items:center}.user-identity.with-photo{grid-template-columns:auto 1fr;gap:.5rem}.user-identity .empty-user{font-style:italic;opacity:.75}.user-identity .invalid-user{color:#9b0202;font-style:italic}.user-identity .user-photo{width:2rem;height:2rem;border-radius:100%}\n"] }]
-        }], propDecorators: { rejectedInvalidAccountNames: [{ type: i0.Output, args: ["rejectedInvalidAccountNames"] }], userChooserClosed: [{ type: i0.Output, args: ["userChooserClosed"] }], selectedUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedUsers", required: false }] }, { type: i0.Output, args: ["selectedUsersChange"] }], selectedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedGroups", required: false }] }, { type: i0.Output, args: ["selectedGroupsChange"] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], photos: [{ type: i0.Input, args: [{ isSignal: true, alias: "photos", required: false }] }], maxItemsToDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemsToDisplay", required: false }] }], groupItemsOverMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupItemsOverMax", required: false }] }], groupItemsOverMaxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupItemsOverMaxText", required: false }] }], ignoreInvalidAccountNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreInvalidAccountNames", required: false }] }], displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], emptyUserNameText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyUserNameText", required: false }] }], enableUserChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableUserChooser", required: false }] }], userChooserSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserSettings", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], emptyUserNameClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyUserNameClass", required: false }] }], validUserTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "validUserTextClass", required: false }] }], manySelectedClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "manySelectedClass", required: false }] }], invalidUserTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidUserTextClass", required: false }] }], photoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoClass", required: false }] }], userChooserPhotoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserPhotoClass", required: false }] }], userChooserEnabledClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserEnabledClass", required: false }] }], userChooserDisabledClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserDisabledClass", required: false }] }] } });
+                    ], standalone: true, template: " <div (click)=\"enableUserChooser() && showUserChooser.set(true)\"\r\n    [ngClass]=\"[wrapperClass(), enableUserChooser() ? userChooserEnabledClass() : userChooserDisabledClass()]\">\r\n\r\n    @if (userObjects().length === 0 && groupObjects().length === 0) {\r\n        <!-- No data provided, just present an empty user/group chooser -->\r\n        <div [ngClass]=\"emptyUserNameClass()\">\r\n            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n            {{ emptyUserNameText() }}\r\n        </div>\r\n    }\r\n    @else if (totalItemCount() > maxItemsToDisplay()) {\r\n        <kendo-svg-icon [icon]=\"icons.close\" size=\"small\" (click)=\"$event.stopPropagation(); clearAll()\" kendoTooltip [title]=\"clearAllTooltip()\" />\r\n\r\n        <!-- Too many items to display, just show a count -->\r\n        <div [ngClass]=\"manySelectedClass()\">\r\n            @if (groupObjects().length === 0) {\r\n                <!-- We only have Users -->\r\n                 <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} users\r\n            } @else if (groupObjects().length === 0) {\r\n                <!-- We only have Groups -->\r\n                  <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                {{ totalItemCount() }} groups\r\n            } @else {\r\n                <!-- We have both Users and Groups -->\r\n                @if (groupItemsOverMax()) {\r\n                    <!-- Lump users/groups together -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ totalItemCount() }} {{ groupItemsOverMaxText() }}\r\n                } @else {\r\n                    <!-- List how many users/groups separately -->\r\n                    <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ userObjects().length }} users\r\n                    <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    {{ groupObjects().length }} groups\r\n                }\r\n            }\r\n        </div>\r\n\r\n    }\r\n    @else {\r\n        <!-- Display the users/groups that were passed in -->\r\n\r\n        <kendo-svg-icon [icon]=\"icons.close\" size=\"small\" (click)=\"$event.stopPropagation(); clearAll()\" kendoTooltip [title]=\"clearAllTooltip()\" />\r\n\r\n        <!-- Users -->\r\n        @for (userObject of userObjects(); track userObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (userObject.photo) {\r\n                        <img [src]=\"userObject.photo!.encodedAbsUrl\" [ngClass]=\"photoClass()\" />\r\n                    } @else {\r\n                        @if (userObject.user) {\r\n                            <kendo-svg-icon [icon]=\"icons.user\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        } @else {\r\n                            <kendo-svg-icon [icon]=\"icons.unknown\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                        }\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"userObject.user ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"userObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    \r\n        <!-- Groups -->\r\n        @for (groupObject of groupObjects(); track groupObject.accountName) {\r\n            <div class=\"user-identity\" [class.with-photo]=\"displayPhoto()\">\r\n                \r\n                @if (displayPhoto()) {\r\n                    @if (groupObject.group) {\r\n                        <kendo-svg-icon [icon]=\"icons.group\" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    } @else {\r\n                        <kendo-svg-icon [icon]=\"icons.unknown   \" size=\"small\" [ngClass]=\"photoClass()\"/>\r\n                    }\r\n                }\r\n                \r\n                @if (displayName()) {\r\n                    <div id=\"name\"\r\n                        [ngClass]=\"groupObject.group ? validUserTextClass() : invalidUserTextClass()\"\r\n                        [innerText]=\"groupObject.label\">\r\n                    </div>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n\r\n</div>\r\n\r\n<!-- Display User Chooser when the user clicks the component -->\r\n@if (showUserChooser()) {\r\n    <!--\r\n    TODO\r\n    If we want to ensure that only valid users/groups are passed in...\r\n    [selectedUsers]=\"data().filter(i => i.userOrGroup).map(i => i.accountName!)\"\r\n    -->\r\n\r\n    <user-chooser-dialog [users]=\"resolvedUsers()\" [groups]=\"resolvedGroups()\" [photos]=\"resolvedPhotos()\"\r\n        [settings]=\"userChooserSettings()\"\r\n        [photoClass]=\"userChooserPhotoClass()\"\r\n        [selectedUsers]=\"selectedUsers()\" [selectedGroups]=\"selectedGroups()\"\r\n        (close)=\"onUserChooserClosed($event)\" />\r\n}", styles: [".wrapper{display:flex;gap:.5rem;align-items:center}.wrapper.user-chooser-enabled{cursor:pointer}.empty-user{font-style:italic;opacity:.75;display:grid;align-items:center;grid-template-columns:auto 1fr;gap:.5rem}.many-selected{display:grid;align-items:center;grid-auto-flow:column;gap:.5rem}.user-identity{display:grid;align-items:center}.user-identity.with-photo{grid-template-columns:auto 1fr;gap:.5rem}.user-identity .empty-user{font-style:italic;opacity:.75}.user-identity .invalid-user{color:#9b0202;font-style:italic}.user-identity .user-photo{width:2rem;height:2rem;border-radius:100%}\n"] }]
+        }], propDecorators: { rejectedInvalidAccountNames: [{ type: i0.Output, args: ["rejectedInvalidAccountNames"] }], userChooserClosed: [{ type: i0.Output, args: ["userChooserClosed"] }], selectedUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedUsers", required: false }] }, { type: i0.Output, args: ["selectedUsersChange"] }], selectedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedGroups", required: false }] }, { type: i0.Output, args: ["selectedGroupsChange"] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], photos: [{ type: i0.Input, args: [{ isSignal: true, alias: "photos", required: false }] }], maxItemsToDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemsToDisplay", required: false }] }], groupItemsOverMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupItemsOverMax", required: false }] }], groupItemsOverMaxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupItemsOverMaxText", required: false }] }], ignoreInvalidAccountNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreInvalidAccountNames", required: false }] }], displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], emptyUserNameText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyUserNameText", required: false }] }], clearAllTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllTooltip", required: false }] }], enableUserChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableUserChooser", required: false }] }], userChooserSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserSettings", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], emptyUserNameClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyUserNameClass", required: false }] }], validUserTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "validUserTextClass", required: false }] }], manySelectedClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "manySelectedClass", required: false }] }], invalidUserTextClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidUserTextClass", required: false }] }], photoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoClass", required: false }] }], userChooserPhotoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserPhotoClass", required: false }] }], userChooserEnabledClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserEnabledClass", required: false }] }], userChooserDisabledClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userChooserDisabledClass", required: false }] }] } });
 
 class KendoActiveDirectoryModule {
     static forRoot(config) {