@cleavelandprice/ngx-lib 4.8.6 → 4.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-kendo.mjs +22 -15
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-kendo.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs +6 -7
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-upload.mjs +12 -12
- package/fesm2022/cleavelandprice-ngx-lib-upload.mjs.map +1 -1
- package/package.json +1 -1
- package/types/cleavelandprice-ngx-lib-active-directory-kendo.d.ts +11 -6
- package/types/cleavelandprice-ngx-lib-upload.d.ts +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ActiveDirectoryService, ActiveDirectoryServiceOptionsToken } from '@cleavelandprice/ngx-lib/active-directory';
|
|
2
2
|
export * from '@cleavelandprice/ngx-lib/active-directory';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, viewChild, input, model, debounced, signal, computed, ChangeDetectorRef, effect, afterNextRender, ViewEncapsulation, Component,
|
|
4
|
+
import { inject, viewChild, input, model, debounced, signal, computed, output, ChangeDetectorRef, effect, afterNextRender, ViewEncapsulation, Component, Optional, SkipSelf, NgModule } from '@angular/core';
|
|
5
5
|
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
6
6
|
import { switchMap, of } from 'rxjs';
|
|
7
7
|
import { SharePointService } from '@cleavelandprice/ngx-lib/sharepoint';
|
|
@@ -116,6 +116,8 @@ class UserChooserList {
|
|
|
116
116
|
//#endregion Either passed in or pulled from the service
|
|
117
117
|
this.selectedCount = signal(0, /* @ts-ignore */
|
|
118
118
|
...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
|
|
119
|
+
this.selectedKeysChange = output(); // Emits the selected account names when the selection changes
|
|
120
|
+
this.selectionChange = output();
|
|
119
121
|
this.gridData = computed(() => this.#debouncedFilter.value() ?
|
|
120
122
|
this.#filteredData() :
|
|
121
123
|
this.data()
|
|
@@ -149,12 +151,6 @@ class UserChooserList {
|
|
|
149
151
|
});
|
|
150
152
|
afterNextRender(() => this.selectedCount.set(this.grid()?.selectionService.selected?.length ?? 0));
|
|
151
153
|
}
|
|
152
|
-
selectedKeysChange(keys) {
|
|
153
|
-
this.selectedCount.set(keys.length);
|
|
154
|
-
}
|
|
155
|
-
/*ngOnDestroy() {
|
|
156
|
-
this.selectionChangeSubscription?.unsubscribe();
|
|
157
|
-
}*/
|
|
158
154
|
photo(user) {
|
|
159
155
|
return this.#resolvedPhotos()
|
|
160
156
|
.find(p => p.accountName?.toLowerCase() === user.sAMAccountName.toLowerCase())
|
|
@@ -177,7 +173,7 @@ class UserChooserList {
|
|
|
177
173
|
};
|
|
178
174
|
}
|
|
179
175
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
180
|
-
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!important;height:2rem!important;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 }); }
|
|
176
|
+
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", selectedKeysChange: "selectedKeysChange", selectionChange: "selectionChange" }, 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 (selectionChange)=\"selectionChange.emit($event)\"\r\n (selectedKeysChange)=\"selectedCount.set($event.length); selectedKeysChange.emit($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!important;height:2rem!important;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 }); }
|
|
181
177
|
}
|
|
182
178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserList, decorators: [{
|
|
183
179
|
type: Component,
|
|
@@ -186,8 +182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
186
182
|
KENDO_GRID,
|
|
187
183
|
KENDO_ICONS
|
|
188
184
|
], standalone: true, encapsulation: ViewEncapsulation.None // Required for rowClassCallback
|
|
189
|
-
, 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!important;height:2rem!important;border-radius:100%}.disabled{opacity:.5}\n"] }]
|
|
190
|
-
}], 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 }] }] } });
|
|
185
|
+
, 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 (selectionChange)=\"selectionChange.emit($event)\"\r\n (selectedKeysChange)=\"selectedCount.set($event.length); selectedKeysChange.emit($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!important;height:2rem!important;border-radius:100%}.disabled{opacity:.5}\n"] }]
|
|
186
|
+
}], 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 }] }], selectedKeysChange: [{ type: i0.Output, args: ["selectedKeysChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
191
187
|
|
|
192
188
|
class UserChooserDialogComponent {
|
|
193
189
|
constructor() {
|
|
@@ -199,6 +195,14 @@ class UserChooserDialogComponent {
|
|
|
199
195
|
...(ngDevMode ? [{ debugName: "userChooserList" }] : /* istanbul ignore next */ []));
|
|
200
196
|
this.groupChooserList = viewChild('groupChooserList', /* @ts-ignore */
|
|
201
197
|
...(ngDevMode ? [{ debugName: "groupChooserList" }] : /* istanbul ignore next */ []));
|
|
198
|
+
this.filterTextbox = viewChild('filterTextbox', /* @ts-ignore */
|
|
199
|
+
...(ngDevMode ? [{ debugName: "filterTextbox" }] : /* istanbul ignore next */ []));
|
|
200
|
+
// Computed to determine if the user has selected more than one item when the selection mode is single
|
|
201
|
+
// This is used to disable the OK button when more than one item is selected in single selection mode
|
|
202
|
+
// This only occurs if the mode is 'single', but the dialog is displaying both tabs - which have no awareness of each other
|
|
203
|
+
this.moreThanOneSelectedError = computed(() => this.settings().selectionSettings?.mode === 'single' &&
|
|
204
|
+
(this.userChooserList()?.selectedCount() ?? 0) + (this.groupChooserList()?.selectedCount() ?? 0) > 1, /* @ts-ignore */
|
|
205
|
+
...(ngDevMode ? [{ debugName: "moreThanOneSelectedError" }] : /* istanbul ignore next */ []));
|
|
202
206
|
this.settings = input({
|
|
203
207
|
...USER_CHOOSER_DEFAULT_SETTINGS
|
|
204
208
|
}, /* @ts-ignore */
|
|
@@ -317,6 +321,9 @@ class UserChooserDialogComponent {
|
|
|
317
321
|
#usersFromService$;
|
|
318
322
|
#groupsFromService$;
|
|
319
323
|
#photosFromService$;
|
|
324
|
+
ngAfterViewInit() {
|
|
325
|
+
this.filterTextbox()?.focus();
|
|
326
|
+
}
|
|
320
327
|
unselectAll() {
|
|
321
328
|
const list = this.selectedTabIndex() === 0 ?
|
|
322
329
|
this.userChooserList :
|
|
@@ -327,7 +334,7 @@ class UserChooserDialogComponent {
|
|
|
327
334
|
this.selectedTabIndex.set(e.index);
|
|
328
335
|
}
|
|
329
336
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
330
|
-
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"] }] }); }
|
|
337
|
+
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 }, { propertyName: "filterTextbox", first: true, predicate: ["filterTextbox"], 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\" #filterTextbox [(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\r\n @if (moreThanOneSelectedError()) {\r\n <span class=\"error-message\">\r\n (too many selected)\r\n </span>\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) || moreThanOneSelectedError()\"\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}.error-message{color:red;font-size:.8rem}.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", "selectedKeysChange", "selectionChange"] }] }); }
|
|
331
338
|
}
|
|
332
339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserDialogComponent, decorators: [{
|
|
333
340
|
type: Component,
|
|
@@ -339,8 +346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
339
346
|
KENDO_TABSTRIP,
|
|
340
347
|
KENDO_ICONS,
|
|
341
348
|
UserChooserList
|
|
342
|
-
], 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"] }]
|
|
343
|
-
}], 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"] }] } });
|
|
349
|
+
], 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\" #filterTextbox [(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\r\n @if (moreThanOneSelectedError()) {\r\n <span class=\"error-message\">\r\n (too many selected)\r\n </span>\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) || moreThanOneSelectedError()\"\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}.error-message{color:red;font-size:.8rem}.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"] }]
|
|
350
|
+
}], propDecorators: { userChooserList: [{ type: i0.ViewChild, args: ['userChooserList', { isSignal: true }] }], groupChooserList: [{ type: i0.ViewChild, args: ['groupChooserList', { isSignal: true }] }], filterTextbox: [{ type: i0.ViewChild, args: ['filterTextbox', { 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"] }] } });
|
|
344
351
|
|
|
345
352
|
class UserFieldComponent {
|
|
346
353
|
constructor() {
|
|
@@ -540,7 +547,7 @@ class UserFieldComponent {
|
|
|
540
547
|
});
|
|
541
548
|
}
|
|
542
549
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
543
|
-
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"] }] }); }
|
|
550
|
+
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 <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"] }] }); }
|
|
544
551
|
}
|
|
545
552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFieldComponent, decorators: [{
|
|
546
553
|
type: Component,
|
|
@@ -549,7 +556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
549
556
|
KENDO_ICONS,
|
|
550
557
|
KENDO_TOOLTIPS,
|
|
551
558
|
UserChooserDialogComponent
|
|
552
|
-
], 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
|
|
559
|
+
], 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 <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"] }]
|
|
553
560
|
}], 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 }] }] } });
|
|
554
561
|
|
|
555
562
|
class KendoActiveDirectoryModule {
|