@cleavelandprice/ngx-lib 4.8.2 → 4.8.4
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 +23 -7
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-kendo.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs +17 -11
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs +16 -13
- package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-authentication-object.mjs +19 -15
- package/fesm2022/cleavelandprice-ngx-lib-authentication-object.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs +22 -18
- package/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-authentication-token.mjs +19 -15
- package/fesm2022/cleavelandprice-ngx-lib-authentication-token.mjs.map +1 -1
- package/package.json +1 -1
- package/types/cleavelandprice-ngx-lib-active-directory-kendo.d.ts +4 -1
- package/types/cleavelandprice-ngx-lib-active-directory-material.d.ts +17 -17
- package/types/cleavelandprice-ngx-lib-authentication-object.d.ts +3 -3
- package/types/cleavelandprice-ngx-lib-authentication-sso.d.ts +3 -3
- package/types/cleavelandprice-ngx-lib-authentication-token.d.ts +3 -3
- package/types/cleavelandprice-ngx-lib-authentication.d.ts +4 -4
|
@@ -17,11 +17,13 @@ import * as i5 from '@progress/kendo-angular-layout';
|
|
|
17
17
|
import { KENDO_TABSTRIP, TabStripModule } from '@progress/kendo-angular-layout';
|
|
18
18
|
import * as i6 from '@progress/kendo-angular-icons';
|
|
19
19
|
import { KENDO_ICONS, IconsModule, SVGIconModule } from '@progress/kendo-angular-icons';
|
|
20
|
-
import { filterClearIcon, questionCircleIcon, usersIcon, userIcon } from '@progress/kendo-svg-icons';
|
|
20
|
+
import { filterClearIcon, questionCircleIcon, usersIcon, userIcon, xCircleIcon } from '@progress/kendo-svg-icons';
|
|
21
21
|
import { NgClass, CommonModule } from '@angular/common';
|
|
22
22
|
import * as i1 from '@progress/kendo-angular-grid';
|
|
23
23
|
import { GridComponent, KENDO_GRID, GridModule } from '@progress/kendo-angular-grid';
|
|
24
24
|
import { process } from '@progress/kendo-data-query';
|
|
25
|
+
import * as i2$1 from '@progress/kendo-angular-tooltip';
|
|
26
|
+
import { KENDO_TOOLTIPS } from '@progress/kendo-angular-tooltip';
|
|
25
27
|
import { ReactiveFormsModule } from '@angular/forms';
|
|
26
28
|
|
|
27
29
|
const USER_CHOOSER_DEFAULT_SETTINGS = {
|
|
@@ -183,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
183
185
|
args: [{ selector: 'user-chooser-list', imports: [
|
|
184
186
|
NgClass,
|
|
185
187
|
KENDO_GRID
|
|
186
|
-
], encapsulation: ViewEncapsulation.None // Required for rowClassCallback
|
|
188
|
+
], standalone: true, encapsulation: ViewEncapsulation.None // Required for rowClassCallback
|
|
187
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 \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"] }]
|
|
188
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 }] }] } });
|
|
189
191
|
|
|
@@ -325,7 +327,7 @@ class UserChooserDialogComponent {
|
|
|
325
327
|
this.selectedTabIndex.set(e.index);
|
|
326
328
|
}
|
|
327
329
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
328
|
-
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 kendoButton (click)=\"$event.stopPropagation(); unselectAll()\">\r\n {{ settings().unselectButtonText ?? 'Unselect All' }}\r\n </button>\r\n }\r\n \r\n <!-- Cancel button -->\r\n <button kendoButton\r\n (click)=\"$event.stopPropagation(); close.emit(settings().cancelReturnValue)\">\r\n\r\n {{ settings().cancelButtonText ?? 'Cancel' }}\r\n </button>\r\n\r\n <!-- Ok button -->\r\n <button kendoButton themeColor=\"primary\"\r\n [disabled]=\"selectedUsers().length === 0 && selectedGroups().length === 0\"\r\n (click)=\"$event.stopPropagation(); 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"] }] }); }
|
|
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.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"] }] }); }
|
|
329
331
|
}
|
|
330
332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserChooserDialogComponent, decorators: [{
|
|
331
333
|
type: Component,
|
|
@@ -337,7 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
337
339
|
KENDO_TABSTRIP,
|
|
338
340
|
KENDO_ICONS,
|
|
339
341
|
UserChooserList
|
|
340
|
-
], 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 kendoButton
|
|
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"] }]
|
|
341
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"] }] } });
|
|
342
344
|
|
|
343
345
|
class UserFieldComponent {
|
|
@@ -347,6 +349,7 @@ class UserFieldComponent {
|
|
|
347
349
|
sp: inject(SharePointService)
|
|
348
350
|
};
|
|
349
351
|
this.icons = {
|
|
352
|
+
close: xCircleIcon,
|
|
350
353
|
user: userIcon,
|
|
351
354
|
group: usersIcon,
|
|
352
355
|
unknown: questionCircleIcon
|
|
@@ -410,6 +413,8 @@ class UserFieldComponent {
|
|
|
410
413
|
...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
|
|
411
414
|
this.emptyUserNameText = input('Select user...', /* @ts-ignore */
|
|
412
415
|
...(ngDevMode ? [{ debugName: "emptyUserNameText" }] : /* istanbul ignore next */ []));
|
|
416
|
+
this.clearAllTooltip = input("Clear all", /* @ts-ignore */
|
|
417
|
+
...(ngDevMode ? [{ debugName: "clearAllTooltip" }] : /* istanbul ignore next */ []));
|
|
413
418
|
this.enableUserChooser = input(true, /* @ts-ignore */
|
|
414
419
|
...(ngDevMode ? [{ debugName: "enableUserChooser" }] : /* istanbul ignore next */ []));
|
|
415
420
|
this.userChooserSettings = input({
|
|
@@ -524,17 +529,28 @@ class UserFieldComponent {
|
|
|
524
529
|
}
|
|
525
530
|
this.showUserChooser.set(false);
|
|
526
531
|
}
|
|
532
|
+
clearAll() {
|
|
533
|
+
this.selectedGroups.set([]);
|
|
534
|
+
this.selectedUsers.set([]);
|
|
535
|
+
this.userChooserClosed.emit({
|
|
536
|
+
users: [],
|
|
537
|
+
groups: [],
|
|
538
|
+
invalidUsers: [],
|
|
539
|
+
invalidGroups: []
|
|
540
|
+
});
|
|
541
|
+
}
|
|
527
542
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
528
|
-
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"] }] }); }
|
|
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: i6.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "directive", type: i2$1.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"] }] }); }
|
|
529
544
|
}
|
|
530
545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserFieldComponent, decorators: [{
|
|
531
546
|
type: Component,
|
|
532
547
|
args: [{ selector: 'user-field', imports: [
|
|
533
548
|
NgClass,
|
|
534
549
|
KENDO_ICONS,
|
|
550
|
+
KENDO_TOOLTIPS,
|
|
535
551
|
UserChooserDialogComponent
|
|
536
|
-
], 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"] }]
|
|
537
|
-
}], 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 }] }] } });
|
|
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 <!--\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"] }]
|
|
553
|
+
}], 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 }] }] } });
|
|
538
554
|
|
|
539
555
|
class KendoActiveDirectoryModule {
|
|
540
556
|
static forRoot(config) {
|