@yuuvis/user-management-app 2.3.0 → 2.3.1
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.
|
@@ -293,11 +293,11 @@ class YuvUserManagementService {
|
|
|
293
293
|
getGroupDetails(id) {
|
|
294
294
|
return this.#backendService.get(`/tenant-management/api/idm/groups/${id}`, ApiBase.none);
|
|
295
295
|
}
|
|
296
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
297
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
296
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: YuvUserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
297
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: YuvUserManagementService, providedIn: 'root' });
|
|
298
298
|
}
|
|
299
299
|
_a = YuvUserManagementService;
|
|
300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: YuvUserManagementService, decorators: [{
|
|
301
301
|
type: Injectable,
|
|
302
302
|
args: [{
|
|
303
303
|
providedIn: 'root',
|
|
@@ -396,10 +396,10 @@ class ListFieldComponent extends AbstractMatFormField {
|
|
|
396
396
|
ngOnDestroy() {
|
|
397
397
|
this.onNgOnDestroy();
|
|
398
398
|
}
|
|
399
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ListFieldComponent, isStandalone: true, selector: "ymusrmgmt-list-field", inputs: { emptyLabel: "emptyLabel", value: "value" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy || null" } }, providers: [{ provide: MatFormFieldControl, useExisting: ListFieldComponent }], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (value && value.length) {\n<div class=\"list-field-items\">\n @for (item of value; track item) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n }\n</div>\n} @else {\n<span class=\"empty\">{{ emptyLabel }}</span>\n}\n", styles: [":host{display:block}.list-field-items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-s) 0;overflow:hidden}.empty{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
401
401
|
}
|
|
402
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ListFieldComponent, decorators: [{
|
|
403
403
|
type: Component,
|
|
404
404
|
args: [{ selector: 'ymusrmgmt-list-field', standalone: true, imports: [NgTemplateOutlet], providers: [{ provide: MatFormFieldControl, useExisting: ListFieldComponent }], host: {
|
|
405
405
|
'[id]': 'id',
|
|
@@ -437,10 +437,10 @@ class RoleLabelPipe {
|
|
|
437
437
|
transform(role) {
|
|
438
438
|
return resolveRoleLabel(this.#localization, role);
|
|
439
439
|
}
|
|
440
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
441
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RoleLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
441
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: RoleLabelPipe, isStandalone: true, name: "roleLabel" });
|
|
442
442
|
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RoleLabelPipe, decorators: [{
|
|
444
444
|
type: Pipe,
|
|
445
445
|
args: [{ name: 'roleLabel', standalone: true }]
|
|
446
446
|
}] });
|
|
@@ -449,10 +449,10 @@ class RoleTooltipPipe {
|
|
|
449
449
|
transform(role) {
|
|
450
450
|
return resolveRoleTooltip(this.#localization, role);
|
|
451
451
|
}
|
|
452
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
453
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
452
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RoleTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
453
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: RoleTooltipPipe, isStandalone: true, name: "roleTooltip" });
|
|
454
454
|
}
|
|
455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RoleTooltipPipe, decorators: [{
|
|
456
456
|
type: Pipe,
|
|
457
457
|
args: [{ name: 'roleTooltip', standalone: true }]
|
|
458
458
|
}] });
|
|
@@ -463,10 +463,10 @@ class SortRolesByLabelPipe {
|
|
|
463
463
|
return [];
|
|
464
464
|
return [...roles].sort((a, b) => resolveRoleLabel(this.#localization, a).localeCompare(resolveRoleLabel(this.#localization, b)));
|
|
465
465
|
}
|
|
466
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
467
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
466
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SortRolesByLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
467
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: SortRolesByLabelPipe, isStandalone: true, name: "sortRolesByLabel" });
|
|
468
468
|
}
|
|
469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
469
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SortRolesByLabelPipe, decorators: [{
|
|
470
470
|
type: Pipe,
|
|
471
471
|
args: [{ name: 'sortRolesByLabel', standalone: true }]
|
|
472
472
|
}] });
|
|
@@ -568,10 +568,10 @@ class UserDetailsComponent {
|
|
|
568
568
|
this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.common.action.copy.error'));
|
|
569
569
|
}
|
|
570
570
|
}
|
|
571
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
572
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, groupRoles: { classPropertyName: "groupRoles", publicName: "groupRoles", isSignal: true, isRequired: false, transformFunction: null }, topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editUser: "editUser" }, ngImport: i0, template: "@let displayUser = user(); @let detailsTitle = 'yuv.app.user-management.users.label.details.title' |\ntranslate; @if (displayUser) {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n <ymt-pane-header\n [icon]=\"'badge'\"\n [title]=\"'yuv.app.user-management.users.label.details.title' | translate\"\n [subtitle]=\"displayUser.username\"\n [actions]=\"headerActions\"\n [badges]=\"badges\"\n ></ymt-pane-header>\n <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n @let currentUserDetails = userDetails(); @if (currentUserDetails) {\n <form class=\"properties-form\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.id' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"displayUser.id\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.id' | translate\"\n />\n <button\n matSuffix\n class=\"copy-button\"\n type=\"button\"\n [matTooltip]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n [cdkCopyToClipboard]=\"displayUser.id\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"currentUserDetails.email\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"displayUser.firstName ?? ''\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"displayUser.lastName ?? ''\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.users.label.details.roles.direct.title' | translate\n }}</mat-label>\n <ymusrmgmt-list-field\n [value]=\"directRoles() | sortRolesByLabel\"\n [emptyLabel]=\"\n 'yuv.app.user-management.users.label.details.roles.direct.empty' | translate\n \"\n >\n <ng-template let-role>\n <ymt-badge class=\"role-badge\" severity=\"primary\" [matTooltip]=\"role | roleTooltip\">\n <span class=\"badge-label\">{{ role | roleLabel }}</span>\n </ymt-badge>\n </ng-template>\n </ymusrmgmt-list-field>\n </mat-form-field>\n\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.users.label.details.roles.inherited.title' | translate\n }}</mat-label>\n <ymusrmgmt-list-field\n [value]=\"inheritedRoles() | sortRolesByLabel\"\n [emptyLabel]=\"\n 'yuv.app.user-management.users.label.details.roles.inherited.empty' | translate\n \"\n >\n <ng-template let-role>\n @let fromCurrentGroup = isFromCurrentGroup(role); @let tooltipText = role | roleTooltip;\n <ymt-badge\n class=\"role-badge\"\n [severity]=\"fromCurrentGroup ? 'primary' : 'neutral'\"\n [outline]=\"true\"\n [matTooltip]=\"\n fromCurrentGroup\n ? ('yuv.app.user-management.users.label.details.roles.inherited.currentGroup.tooltip'\n | translate) + (tooltipText ? ' \u2013 ' + tooltipText : '')\n : tooltipText\n \"\n >\n @if (fromCurrentGroup) {\n <mat-icon>group</mat-icon>\n }\n <span class=\"badge-label\">{{ role | roleLabel }}</span>\n </ymt-badge>\n </ng-template>\n </ymusrmgmt-list-field>\n </mat-form-field>\n\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.users.label.details.groups.title' | translate\n }}</mat-label>\n <ymusrmgmt-list-field\n [value]=\"sortedGroups()\"\n [emptyLabel]=\"'yuv.app.user-management.users.label.details.groups.empty' | translate\"\n >\n <ng-template let-group>\n <button\n type=\"button\"\n class=\"group-badge-button\"\n (click)=\"openGroup(group)\"\n [matTooltip]=\"\n 'yuv.app.user-management.users.label.details.groups.open.tooltip' | translate\n \"\n [attr.aria-label]=\"\n ('yuv.app.user-management.users.label.details.groups.open.tooltip' | translate) +\n ': ' +\n group\n \"\n >\n <ymt-badge severity=\"neutral\">\n <mat-icon>group</mat-icon>\n <span class=\"badge-label\">{{ group }}</span>\n </ymt-badge>\n </button>\n </ng-template>\n </ymusrmgmt-list-field>\n </mat-form-field>\n </form>\n }\n </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #headerActions>\n <button\n mat-icon-button\n [matTooltip]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n (click)=\"editUser.emit(displayUser)\"\n >\n <mat-icon>{{ icons.actionEditUser }}</mat-icon>\n </button>\n</ng-template>\n\n<ng-template #badges>\n @if (!displayUser.enabled) {\n <ymt-badge\n severity=\"neutral\"\n [aura]=\"true\"\n [matTooltip]=\"'yuv.app.user-management.users.property.disabled' | translate\"\n >\n <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n <span>{{ 'yuv.app.user-management.users.property.disabled' | translate }}</span>\n </ymt-badge>\n } @if (displayUser.externallyManaged) {\n <ymt-badge\n severity=\"primary\"\n [aura]=\"true\"\n [matTooltip]=\"'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate\"\n >\n <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n <span>{{ 'yuv.app.user-management.users.property.identitySource.external' | translate }}</span>\n </ymt-badge>\n }\n</ng-template>\n} @else {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n <ymt-pane-body>\n <div class=\"details-empty-state\">\n <mat-icon>person_search</mat-icon>\n {{ 'yuv.app.user-management.users.label.details.empty' | translate }}\n </div>\n </ymt-pane-body>\n</ymt-pane>\n}\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host{display:block;height:100%;--main-area-padding: var(--ymt-spacing-m)}:host ymt-pane-body{display:flex;flex-flow:column;gap:var(--ymt-spacing-m)}:host .properties-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-m)}:host .properties-form .yuv-form-field{width:100%}:host .properties-form .copy-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl);border-radius:var(--ymt-corner-full);color:var(--ymt-text-color-subtle)}:host .properties-form .copy-button:hover{background-color:var(--ymt-hover-background)}:host .properties-form .copy-button mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m)}:host .role-badge{cursor:help}:host .group-badge-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;font:inherit;border-radius:var(--ymt-badge-corner, var(--ymt-corner-xs));min-width:0;max-width:100%}:host .group-badge-button:hover ymt-badge{background-color:var(--ymt-hover-background)}:host .details-empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}:host .details-empty-state mat-icon{font-size:var(--ymt-sizing-xl);width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl)}\n"], dependencies: [{ kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: ListFieldComponent, selector: "ymusrmgmt-list-field", inputs: ["emptyLabel", "value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }, { kind: "pipe", type: SortRolesByLabelPipe, name: "sortRolesByLabel" }] });
|
|
571
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UserDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
572
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, groupRoles: { classPropertyName: "groupRoles", publicName: "groupRoles", isSignal: true, isRequired: false, transformFunction: null }, topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editUser: "editUser" }, ngImport: i0, template: "@let displayUser = user(); @let detailsTitle = 'yuv.app.user-management.users.label.details.title' |\ntranslate; @if (displayUser) {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n <ymt-pane-header\n [icon]=\"'badge'\"\n [title]=\"'yuv.app.user-management.users.label.details.title' | translate\"\n [subtitle]=\"displayUser.username\"\n [actions]=\"headerActions\"\n [badges]=\"badges\"\n ></ymt-pane-header>\n <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n @let currentUserDetails = userDetails(); @if (currentUserDetails) {\n <form class=\"properties-form\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.id' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"displayUser.id\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.id' | translate\"\n />\n <button\n matSuffix\n class=\"copy-button\"\n type=\"button\"\n [matTooltip]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n [cdkCopyToClipboard]=\"displayUser.id\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"currentUserDetails.email\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"displayUser.firstName ?? ''\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n <input\n readonly\n matInput\n type=\"text\"\n [value]=\"displayUser.lastName ?? ''\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.users.label.details.roles.direct.title' | translate\n }}</mat-label>\n <ymusrmgmt-list-field\n [value]=\"directRoles() | sortRolesByLabel\"\n [emptyLabel]=\"\n 'yuv.app.user-management.users.label.details.roles.direct.empty' | translate\n \"\n >\n <ng-template let-role>\n <ymt-badge class=\"role-badge\" severity=\"primary\" [matTooltip]=\"role | roleTooltip\">\n <span class=\"badge-label\">{{ role | roleLabel }}</span>\n </ymt-badge>\n </ng-template>\n </ymusrmgmt-list-field>\n </mat-form-field>\n\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.users.label.details.roles.inherited.title' | translate\n }}</mat-label>\n <ymusrmgmt-list-field\n [value]=\"inheritedRoles() | sortRolesByLabel\"\n [emptyLabel]=\"\n 'yuv.app.user-management.users.label.details.roles.inherited.empty' | translate\n \"\n >\n <ng-template let-role>\n @let fromCurrentGroup = isFromCurrentGroup(role); @let tooltipText = role | roleTooltip;\n <ymt-badge\n class=\"role-badge\"\n [severity]=\"fromCurrentGroup ? 'primary' : 'neutral'\"\n [outline]=\"true\"\n [matTooltip]=\"\n fromCurrentGroup\n ? ('yuv.app.user-management.users.label.details.roles.inherited.currentGroup.tooltip'\n | translate) + (tooltipText ? ' \u2013 ' + tooltipText : '')\n : tooltipText\n \"\n >\n @if (fromCurrentGroup) {\n <mat-icon>group</mat-icon>\n }\n <span class=\"badge-label\">{{ role | roleLabel }}</span>\n </ymt-badge>\n </ng-template>\n </ymusrmgmt-list-field>\n </mat-form-field>\n\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.users.label.details.groups.title' | translate\n }}</mat-label>\n <ymusrmgmt-list-field\n [value]=\"sortedGroups()\"\n [emptyLabel]=\"'yuv.app.user-management.users.label.details.groups.empty' | translate\"\n >\n <ng-template let-group>\n <button\n type=\"button\"\n class=\"group-badge-button\"\n (click)=\"openGroup(group)\"\n [matTooltip]=\"\n 'yuv.app.user-management.users.label.details.groups.open.tooltip' | translate\n \"\n [attr.aria-label]=\"\n ('yuv.app.user-management.users.label.details.groups.open.tooltip' | translate) +\n ': ' +\n group\n \"\n >\n <ymt-badge severity=\"neutral\">\n <mat-icon>group</mat-icon>\n <span class=\"badge-label\">{{ group }}</span>\n </ymt-badge>\n </button>\n </ng-template>\n </ymusrmgmt-list-field>\n </mat-form-field>\n </form>\n }\n </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #headerActions>\n <button\n mat-icon-button\n [matTooltip]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n (click)=\"editUser.emit(displayUser)\"\n >\n <mat-icon>{{ icons.actionEditUser }}</mat-icon>\n </button>\n</ng-template>\n\n<ng-template #badges>\n @if (!displayUser.enabled) {\n <ymt-badge\n severity=\"neutral\"\n [aura]=\"true\"\n [matTooltip]=\"'yuv.app.user-management.users.property.disabled' | translate\"\n >\n <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n <span>{{ 'yuv.app.user-management.users.property.disabled' | translate }}</span>\n </ymt-badge>\n } @if (displayUser.externallyManaged) {\n <ymt-badge\n severity=\"primary\"\n [aura]=\"true\"\n [matTooltip]=\"'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate\"\n >\n <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n <span>{{ 'yuv.app.user-management.users.property.identitySource.external' | translate }}</span>\n </ymt-badge>\n }\n</ng-template>\n} @else {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n <ymt-pane-body>\n <div class=\"details-empty-state\">\n <mat-icon>person_search</mat-icon>\n {{ 'yuv.app.user-management.users.label.details.empty' | translate }}\n </div>\n </ymt-pane-body>\n</ymt-pane>\n}\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host{display:block;height:100%;--main-area-padding: var(--ymt-spacing-m)}:host ymt-pane-body{display:flex;flex-flow:column;gap:var(--ymt-spacing-m)}:host .properties-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-m)}:host .properties-form .yuv-form-field{width:100%}:host .properties-form .copy-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl);border-radius:var(--ymt-corner-full);color:var(--ymt-text-color-subtle)}:host .properties-form .copy-button:hover{background-color:var(--ymt-hover-background)}:host .properties-form .copy-button mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m)}:host .role-badge{cursor:help}:host .group-badge-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;font:inherit;border-radius:var(--ymt-badge-corner, var(--ymt-corner-xs));min-width:0;max-width:100%}:host .group-badge-button:hover ymt-badge{background-color:var(--ymt-hover-background)}:host .details-empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}:host .details-empty-state mat-icon{font-size:var(--ymt-sizing-xl);width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl)}\n"], dependencies: [{ kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: ListFieldComponent, selector: "ymusrmgmt-list-field", inputs: ["emptyLabel", "value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }, { kind: "pipe", type: SortRolesByLabelPipe, name: "sortRolesByLabel" }] });
|
|
573
573
|
}
|
|
574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UserDetailsComponent, decorators: [{
|
|
575
575
|
type: Component,
|
|
576
576
|
args: [{ selector: 'ymusrmgmt-user-details', imports: [
|
|
577
577
|
BusyOverlayDirective,
|
|
@@ -689,10 +689,10 @@ class RolesSelectionComponent {
|
|
|
689
689
|
isAssignedSelected(role) {
|
|
690
690
|
return this.#selectedAssignedSet().has(role);
|
|
691
691
|
}
|
|
692
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
692
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RolesSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: RolesSelectionComponent, isStandalone: true, selector: "ymusrmgmt-role-selection", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, initialRoles: { classPropertyName: "initialRoles", publicName: "initialRoles", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { rolesChange: "rolesChange" }, ngImport: i0, template: "<div class=\"role-selector\">\n <!-- Available Roles (Left) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.common.label.roles.available' | translate }}\n </div>\n <mat-selection-list\n class=\"role-list\"\n #availableList\n hideSingleSelectionIndicator=\"true\"\n [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.available' | translate\"\n >\n @for (role of availableRoles(); track role) {\n <mat-list-option\n [value]=\"role\"\n [matTooltip]=\"role | roleTooltip\"\n [selected]=\"isAvailableSelected(role)\"\n (selectedChange)=\"onAvailableSelectedChange(role, $event)\"\n (dblclick)=\"assignRole(role)\"\n (keydown.enter)=\"$event.stopPropagation(); assignRole(role)\"\n >\n {{ role | roleLabel }}\n </mat-list-option>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.common.label.roles.noAvailable' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n\n <!-- Control Buttons (Center) -->\n <div class=\"control-buttons\">\n <button\n mat-icon-button\n [disabled]=\"availableRoles().length === 0\"\n (click)=\"assignAllRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"!canAssign()\"\n (click)=\"assignRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"!canRemove()\"\n (click)=\"removeRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"assignedRoles().length === 0\"\n (click)=\"removeAllRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- Assigned Roles (Right) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.common.label.roles.assigned' | translate }}\n </div>\n <mat-selection-list\n class=\"role-list\"\n #assignedList\n hideSingleSelectionIndicator=\"true\"\n [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.assigned' | translate\"\n >\n @for (role of assignedRoles(); track role) {\n <mat-list-option\n [value]=\"role\"\n [matTooltip]=\"role | roleTooltip\"\n [selected]=\"isAssignedSelected(role)\"\n (selectedChange)=\"onAssignedSelectedChange(role, $event)\"\n (dblclick)=\"removeRole(role)\"\n (keydown.enter)=\"$event.stopPropagation(); removeRole(role)\"\n >\n {{ role | roleLabel }}\n </mat-list-option>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.common.label.roles.noAssigned' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}@container (max-width: 560px){.role-selector{flex-direction:column}.role-list-container{flex:none}.control-buttons{flex-direction:row;align-self:center}.control-buttons mat-icon{transform:rotate(90deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }] });
|
|
694
694
|
}
|
|
695
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RolesSelectionComponent, decorators: [{
|
|
696
696
|
type: Component,
|
|
697
697
|
args: [{ selector: 'ymusrmgmt-role-selection', imports: [
|
|
698
698
|
CommonModule,
|
|
@@ -703,7 +703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
703
703
|
TranslatePipe,
|
|
704
704
|
RoleLabelPipe,
|
|
705
705
|
RoleTooltipPipe,
|
|
706
|
-
], standalone: true, template: "<div class=\"role-selector\">\n <!-- Available Roles (Left) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.common.label.roles.available' | translate }}\n </div>\n <mat-selection-list\n class=\"role-list\"\n #availableList\n hideSingleSelectionIndicator=\"true\"\n [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.available' | translate\"\n >\n @for (role of availableRoles(); track role) {\n <mat-list-option\n [value]=\"role\"\n [matTooltip]=\"role | roleTooltip\"\n [selected]=\"isAvailableSelected(role)\"\n (selectedChange)=\"onAvailableSelectedChange(role, $event)\"\n (dblclick)=\"assignRole(role)\"\n (keydown.enter)=\"$event.stopPropagation(); assignRole(role)\"\n >\n {{ role | roleLabel }}\n </mat-list-option>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.common.label.roles.noAvailable' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n\n <!-- Control Buttons (Center) -->\n <div class=\"control-buttons\">\n <button\n mat-icon-button\n [disabled]=\"availableRoles().length === 0\"\n (click)=\"assignAllRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"!canAssign()\"\n (click)=\"assignRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"!canRemove()\"\n (click)=\"removeRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"assignedRoles().length === 0\"\n (click)=\"removeAllRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- Assigned Roles (Right) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.common.label.roles.assigned' | translate }}\n </div>\n <mat-selection-list\n class=\"role-list\"\n #assignedList\n hideSingleSelectionIndicator=\"true\"\n [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.assigned' | translate\"\n >\n @for (role of assignedRoles(); track role) {\n <mat-list-option\n [value]=\"role\"\n [matTooltip]=\"role | roleTooltip\"\n [selected]=\"isAssignedSelected(role)\"\n (selectedChange)=\"onAssignedSelectedChange(role, $event)\"\n (dblclick)=\"removeRole(role)\"\n (keydown.enter)=\"$event.stopPropagation(); removeRole(role)\"\n >\n {{ role | roleLabel }}\n </mat-list-option>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.common.label.roles.noAssigned' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"] }]
|
|
706
|
+
], standalone: true, template: "<div class=\"role-selector\">\n <!-- Available Roles (Left) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.common.label.roles.available' | translate }}\n </div>\n <mat-selection-list\n class=\"role-list\"\n #availableList\n hideSingleSelectionIndicator=\"true\"\n [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.available' | translate\"\n >\n @for (role of availableRoles(); track role) {\n <mat-list-option\n [value]=\"role\"\n [matTooltip]=\"role | roleTooltip\"\n [selected]=\"isAvailableSelected(role)\"\n (selectedChange)=\"onAvailableSelectedChange(role, $event)\"\n (dblclick)=\"assignRole(role)\"\n (keydown.enter)=\"$event.stopPropagation(); assignRole(role)\"\n >\n {{ role | roleLabel }}\n </mat-list-option>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.common.label.roles.noAvailable' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n\n <!-- Control Buttons (Center) -->\n <div class=\"control-buttons\">\n <button\n mat-icon-button\n [disabled]=\"availableRoles().length === 0\"\n (click)=\"assignAllRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"!canAssign()\"\n (click)=\"assignRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"!canRemove()\"\n (click)=\"removeRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button\n mat-icon-button\n [disabled]=\"assignedRoles().length === 0\"\n (click)=\"removeAllRoles()\"\n [matTooltip]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- Assigned Roles (Right) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.common.label.roles.assigned' | translate }}\n </div>\n <mat-selection-list\n class=\"role-list\"\n #assignedList\n hideSingleSelectionIndicator=\"true\"\n [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.assigned' | translate\"\n >\n @for (role of assignedRoles(); track role) {\n <mat-list-option\n [value]=\"role\"\n [matTooltip]=\"role | roleTooltip\"\n [selected]=\"isAssignedSelected(role)\"\n (selectedChange)=\"onAssignedSelectedChange(role, $event)\"\n (dblclick)=\"removeRole(role)\"\n (keydown.enter)=\"$event.stopPropagation(); removeRole(role)\"\n >\n {{ role | roleLabel }}\n </mat-list-option>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.common.label.roles.noAssigned' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}@container (max-width: 560px){.role-selector{flex-direction:column}.role-list-container{flex:none}.control-buttons{flex-direction:row;align-self:center}.control-buttons mat-icon{transform:rotate(90deg)}}\n"] }]
|
|
707
707
|
}], ctorParameters: () => [], propDecorators: { allRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "allRoles", required: true }] }], initialRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialRoles", required: true }] }], rolesChange: [{ type: i0.Output, args: ["rolesChange"] }] } });
|
|
708
708
|
|
|
709
709
|
const components$5 = [
|
|
@@ -723,8 +723,8 @@ class EditGroupComponent {
|
|
|
723
723
|
data;
|
|
724
724
|
/** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
|
|
725
725
|
static DIALOG_CONFIG = {
|
|
726
|
-
width: '
|
|
727
|
-
maxWidth: '
|
|
726
|
+
width: '900px',
|
|
727
|
+
maxWidth: '95vw',
|
|
728
728
|
};
|
|
729
729
|
#fb = inject(FormBuilder);
|
|
730
730
|
#userManagementService = inject(YuvUserManagementService);
|
|
@@ -814,10 +814,10 @@ class EditGroupComponent {
|
|
|
814
814
|
close() {
|
|
815
815
|
this.#dialogRef.close();
|
|
816
816
|
}
|
|
817
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
818
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
817
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: EditGroupComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
818
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: EditGroupComponent, isStandalone: true, selector: "ymusrmgmt-edit-group", ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"\n 'yuv.app.user-management.groups.action.edit.dialog.title'\n | translate : { name: data.group.name }\n \"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field readonly-field\">\n <mat-label class=\"readonly-label\">{{\n 'yuv.app.user-management.groups.property.name' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"name\"\n type=\"text\"\n [attr.tabindex]=\"-1\"\n readonly\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.groups.property.description' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"description\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n />\n </mat-form-field>\n <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n <ymusrmgmt-role-selection\n [allRoles]=\"allAvailableRoles()\"\n [initialRoles]=\"groupRoles()\"\n (rolesChange)=\"onRolesChange($event)\"\n >\n </ymusrmgmt-role-selection>\n </div>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
819
819
|
}
|
|
820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: EditGroupComponent, decorators: [{
|
|
821
821
|
type: Component,
|
|
822
822
|
args: [{ selector: 'ymusrmgmt-edit-group', standalone: true, imports: [...modules$5, ...components$5], template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"\n 'yuv.app.user-management.groups.action.edit.dialog.title'\n | translate : { name: data.group.name }\n \"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field readonly-field\">\n <mat-label class=\"readonly-label\">{{\n 'yuv.app.user-management.groups.property.name' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"name\"\n type=\"text\"\n [attr.tabindex]=\"-1\"\n readonly\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.groups.property.description' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"description\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n />\n </mat-form-field>\n <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n <ymusrmgmt-role-selection\n [allRoles]=\"allAvailableRoles()\"\n [initialRoles]=\"groupRoles()\"\n (rolesChange)=\"onRolesChange($event)\"\n >\n </ymusrmgmt-role-selection>\n </div>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"] }]
|
|
823
823
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -853,10 +853,10 @@ class FocusableRowDirective {
|
|
|
853
853
|
focus() {
|
|
854
854
|
this.#elementRef.nativeElement.focus();
|
|
855
855
|
}
|
|
856
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
857
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
856
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FocusableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
857
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: FocusableRowDirective, isStandalone: true, selector: "[ymusrmgmt-focusable-row]", ngImport: i0 });
|
|
858
858
|
}
|
|
859
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FocusableRowDirective, decorators: [{
|
|
860
860
|
type: Directive,
|
|
861
861
|
args: [{
|
|
862
862
|
selector: '[ymusrmgmt-focusable-row]',
|
|
@@ -1026,10 +1026,10 @@ class GroupsComponent {
|
|
|
1026
1026
|
},
|
|
1027
1027
|
});
|
|
1028
1028
|
}
|
|
1029
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1030
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1029
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GroupsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1030
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: GroupsComponent, isStandalone: true, selector: "ymusrmgmt-groups", inputs: { selectedGroupId: { classPropertyName: "selectedGroupId", publicName: "selectedGroupId", isSignal: true, isRequired: false, transformFunction: null }, topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { groupSelected: "groupSelected", groupUpdated: "groupUpdated", groupDeleted: "groupDeleted", addMembersRequested: "addMembersRequested" }, viewQueries: [{ propertyName: "rowItems", predicate: FocusableRowDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let railTitle = 'yuv.app.user-management.label.rail.title' | translate;\n<ymt-pane\n [busy]=\"busy()\"\n [topBarActions]=\"topBarActions\"\n role=\"region\"\n [attr.aria-label]=\"railTitle\"\n>\n <ymt-pane-header\n [icon]=\"'groups'\"\n [title]=\"railTitle\"\n [subtitle]=\"\n 'yuv.app.user-management.label.rail.subtitle' | translate : { count: groups().length }\n \"\n ></ymt-pane-header>\n <ymt-pane-body>\n <div\n class=\"groups-list\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-label]=\"railTitle\"\n (keydown)=\"onListKeydown($event)\"\n >\n <div\n ymusrmgmt-focusable-row\n class=\"group-item\"\n role=\"option\"\n [attr.aria-selected]=\"!selectedGroupId()\"\n [class.active]=\"!selectedGroupId()\"\n [attr.tabindex]=\"activeIndex() === 0 ? 0 : -1\"\n (click)=\"selectAllUsers()\"\n (keydown.enter)=\"selectAllUsers()\"\n (keydown.space)=\"$event.preventDefault(); selectAllUsers()\"\n >\n <span class=\"group-icon\"><mat-icon>family_group</mat-icon></span>\n <span class=\"group-name\">{{\n 'yuv.app.user-management.label.rail.usersEntry' | translate\n }}</span>\n </div>\n\n <div class=\"groups-divider\"></div>\n\n @for (group of groups(); track group.id; let i = $index) {\n <div\n ymusrmgmt-focusable-row\n class=\"group-item\"\n role=\"option\"\n [attr.aria-selected]=\"selectedGroupId() === group.id\"\n [class.active]=\"selectedGroupId() === group.id\"\n [attr.tabindex]=\"activeIndex() === i + 1 ? 0 : -1\"\n [matTooltip]=\"group.description || ''\"\n (click)=\"selectGroup(group)\"\n (keydown.enter)=\"selectGroup(group)\"\n (keydown.space)=\"$event.preventDefault(); selectGroup(group)\"\n >\n <span class=\"group-icon\"><mat-icon>group</mat-icon></span>\n <span class=\"group-name\">{{ group.name }}</span>\n <button\n mat-icon-button\n class=\"group-actions\"\n [matMenuTriggerFor]=\"groupRowMenu\"\n [matMenuTriggerData]=\"{ group: group }\"\n [matTooltip]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n [tabIndex]=\"activeIndex() === i + 1 ? 0 : -1\"\n (click)=\"$event.stopPropagation(); selectGroup(group)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n }\n </div>\n </ymt-pane-body>\n</ymt-pane>\n\n<mat-menu #groupRowMenu=\"matMenu\">\n <ng-template matMenuContent let-group=\"group\">\n @for (action of getGroupRowActions(group); track action.id) {\n <button mat-menu-item [disabled]=\"action.disabled\" (click)=\"action.callback?.(action)\">\n <mat-icon>{{ action.icon }}</mat-icon>\n <span>{{ action.label }}</span>\n </button>\n }\n </ng-template>\n</mat-menu>\n", styles: [":host{display:block;height:100%}.groups-list{padding:var(--ymt-spacing-xs)}.group-item{display:flex;align-items:center;gap:.625rem;padding:var(--ymt-spacing-xs) .625rem;border-radius:var(--ymt-corner-xs);cursor:pointer;margin-bottom:var(--ymt-spacing-3xs)}.group-item:hover{background-color:var(--ymt-hover-background)}.group-item.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host(:not(:focus-within)) .group-item.active{background-color:var(--ymt-selection-background);color:var(--ymt-on-selection-background)}.group-item .group-icon{width:var(--ymt-sizing-l);height:var(--ymt-sizing-l);border-radius:var(--ymt-corner-full);background-color:var(--ymt-surface-container-high);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ymt-text-color-subtle)}.group-item .group-icon mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}.group-item.active .group-icon{background-color:var(--ymt-surface);color:var(--ymt-primary)}:host(:not(:focus-within)) .group-item.active .group-icon{color:var(--ymt-text-color-subtle)}.group-item .group-name{flex:1;min-width:0;font:var(--ymt-font-title-smallest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-item .group-actions{flex-shrink:0;color:inherit;width:var(--ymt-sizing-l);height:var(--ymt-sizing-l);padding:0}.group-item .group-actions mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.groups-divider{height:var(--ymt-outline-width);background-color:var(--ymt-outline-variant);margin:.375rem .625rem .625rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "directive", type: FocusableRowDirective, selector: "[ymusrmgmt-focusable-row]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1031
1031
|
}
|
|
1032
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GroupsComponent, decorators: [{
|
|
1033
1033
|
type: Component,
|
|
1034
1034
|
args: [{ selector: 'ymusrmgmt-groups', standalone: true, imports: [
|
|
1035
1035
|
MatButtonModule,
|
|
@@ -1062,10 +1062,10 @@ class PaneToggleButtonComponent {
|
|
|
1062
1062
|
tooltip = input.required(...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
1063
1063
|
rotated = input(false, ...(ngDevMode ? [{ debugName: "rotated" }] : /* istanbul ignore next */ []));
|
|
1064
1064
|
toggled = output();
|
|
1065
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1066
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1065
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PaneToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: PaneToggleButtonComponent, isStandalone: true, selector: "ymusrmgmt-pane-toggle-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, rotated: { classPropertyName: "rotated", publicName: "rotated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<button\n ymtIconButton\n icon-button-size=\"small\"\n [style.transform]=\"rotated() ? 'rotate(180deg)' : null\"\n [matTooltip]=\"tooltip()\"\n [attr.aria-label]=\"tooltip()\"\n (click)=\"toggled.emit()\"\n>\n <mat-icon>{{ icon() }}</mat-icon>\n</button>\n", styles: ["button{opacity:calc(1 - var(--ymt-disabled-opacity))}button:focus,button:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] });
|
|
1067
1067
|
}
|
|
1068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PaneToggleButtonComponent, decorators: [{
|
|
1069
1069
|
type: Component,
|
|
1070
1070
|
args: [{ selector: 'ymusrmgmt-pane-toggle-button', standalone: true, imports: [MatIconModule, MatTooltipModule, YmtIconButtonDirective], template: "<button\n ymtIconButton\n icon-button-size=\"small\"\n [style.transform]=\"rotated() ? 'rotate(180deg)' : null\"\n [matTooltip]=\"tooltip()\"\n [attr.aria-label]=\"tooltip()\"\n (click)=\"toggled.emit()\"\n>\n <mat-icon>{{ icon() }}</mat-icon>\n</button>\n", styles: ["button{opacity:calc(1 - var(--ymt-disabled-opacity))}button:focus,button:hover{opacity:1}\n"] }]
|
|
1071
1071
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], rotated: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotated", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
|
|
@@ -1087,10 +1087,10 @@ class PaneGutterComponent {
|
|
|
1087
1087
|
* gutter whose collapsed pane sits to the left, so the label flows outward toward that edge. */
|
|
1088
1088
|
flipLabel = input(false, ...(ngDevMode ? [{ debugName: "flipLabel" }] : /* istanbul ignore next */ []));
|
|
1089
1089
|
expand = output();
|
|
1090
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1091
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1090
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PaneGutterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1091
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: PaneGutterComponent, isStandalone: true, selector: "ymusrmgmt-pane-gutter", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, flipLabel: { classPropertyName: "flipLabel", publicName: "flipLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expand: "expand" }, ngImport: i0, template: "<ymt-pane>\n <ymt-pane-body>\n <div\n class=\"pane-gutter\"\n role=\"button\"\n tabindex=\"0\"\n [matTooltip]=\"tooltip()\"\n [attr.aria-label]=\"tooltip()\"\n (click)=\"expand.emit()\"\n (keydown.enter)=\"expand.emit()\"\n (keydown.space)=\"$event.preventDefault(); expand.emit()\"\n >\n <mat-icon class=\"icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n <span class=\"label\" [class.label--btt]=\"flipLabel()\">{{ label() }}</span>\n </div>\n </ymt-pane-body>\n</ymt-pane>\n", styles: [":host{display:flex;flex:0 0 var(--ymt-sizing-3xl);width:var(--ymt-sizing-3xl)}ymt-pane{width:100%}.pane-gutter{height:100%;display:flex;flex-flow:column;align-items:center;gap:var(--ymt-spacing-s);padding-block-start:var(--ymt-spacing-xs);opacity:calc(1 - var(--ymt-disabled-opacity));cursor:pointer}.pane-gutter .icon{height:var(--ymt-sizing-s);width:var(--ymt-sizing-s);font-size:var(--ymt-sizing-s);line-height:1}.pane-gutter .label{font:var(--ymt-font-body-subtle);writing-mode:vertical-rl;white-space:nowrap}.pane-gutter .label--btt{transform:rotate(180deg)}.pane-gutter:focus,.pane-gutter:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }] });
|
|
1092
1092
|
}
|
|
1093
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1093
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PaneGutterComponent, decorators: [{
|
|
1094
1094
|
type: Component,
|
|
1095
1095
|
args: [{ selector: 'ymusrmgmt-pane-gutter', standalone: true, imports: [MatIconModule, MatTooltipModule, YmtPanesModule], template: "<ymt-pane>\n <ymt-pane-body>\n <div\n class=\"pane-gutter\"\n role=\"button\"\n tabindex=\"0\"\n [matTooltip]=\"tooltip()\"\n [attr.aria-label]=\"tooltip()\"\n (click)=\"expand.emit()\"\n (keydown.enter)=\"expand.emit()\"\n (keydown.space)=\"$event.preventDefault(); expand.emit()\"\n >\n <mat-icon class=\"icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n <span class=\"label\" [class.label--btt]=\"flipLabel()\">{{ label() }}</span>\n </div>\n </ymt-pane-body>\n</ymt-pane>\n", styles: [":host{display:flex;flex:0 0 var(--ymt-sizing-3xl);width:var(--ymt-sizing-3xl)}ymt-pane{width:100%}.pane-gutter{height:100%;display:flex;flex-flow:column;align-items:center;gap:var(--ymt-spacing-s);padding-block-start:var(--ymt-spacing-xs);opacity:calc(1 - var(--ymt-disabled-opacity));cursor:pointer}.pane-gutter .icon{height:var(--ymt-sizing-s);width:var(--ymt-sizing-s);font-size:var(--ymt-sizing-s);line-height:1}.pane-gutter .label{font:var(--ymt-font-body-subtle);writing-mode:vertical-rl;white-space:nowrap}.pane-gutter .label--btt{transform:rotate(180deg)}.pane-gutter:focus,.pane-gutter:hover{opacity:1}\n"] }]
|
|
1096
1096
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], flipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipLabel", required: false }] }], expand: [{ type: i0.Output, args: ["expand"] }] } });
|
|
@@ -1135,10 +1135,10 @@ class UserAvatarComponent {
|
|
|
1135
1135
|
* them on every change-detection pass (not just when `user()` changes) would be wasted work. */
|
|
1136
1136
|
avatarColor = computed(() => getAvatarColor(this.user()), ...(ngDevMode ? [{ debugName: "avatarColor" }] : /* istanbul ignore next */ []));
|
|
1137
1137
|
initials = computed(() => getInitials(this.user()), ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
1138
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1138
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: UserAvatarComponent, isStandalone: true, selector: "ymusrmgmt-user-avatar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, showBadges: { classPropertyName: "showBadges", publicName: "showBadges", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"user-avatar\"\n [class.is-disabled]=\"!user().enabled\"\n [style.background]=\"avatarColor().background\"\n [style.color]=\"avatarColor().color\"\n>\n <span>{{ initials() }}</span>\n @if (showBadges() && !user().enabled) { @let disabledLabel =\n 'yuv.app.user-management.users.property.disabled' | translate;\n <span\n class=\"avatar-disabled-badge\"\n [matTooltip]=\"disabledLabel\"\n [attr.aria-label]=\"disabledLabel\"\n >\n <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n </span>\n } @if (showBadges() && user().externallyManaged) { @let externalLabel =\n 'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate;\n <span class=\"avatar-source-badge\" [matTooltip]=\"externalLabel\" [attr.aria-label]=\"externalLabel\">\n <mat-icon aria-hidden=\"true\">{{ icons.sourceExternal }}</mat-icon>\n </span>\n }\n</div>\n", styles: [":host{display:contents}.user-avatar{position:relative;width:var(--ymt-sizing-2xl);height:var(--ymt-sizing-2xl);border-radius:var(--ymt-corner-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8125rem;font-weight:600;letter-spacing:.01em;-webkit-user-select:none;user-select:none}.user-avatar.is-disabled{filter:grayscale(1);opacity:.6}.avatar-disabled-badge{position:absolute;right:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-disabled-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-disabled-badge{background-color:var(--ymt-surface-container-high)}.avatar-disabled-badge mat-icon{color:var(--ymt-text-color-subtle)}.avatar-source-badge{position:absolute;left:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-source-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-source-badge{background-color:var(--ymt-primary-container)}.avatar-source-badge mat-icon{color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1140
1140
|
}
|
|
1141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UserAvatarComponent, decorators: [{
|
|
1142
1142
|
type: Component,
|
|
1143
1143
|
args: [{ selector: 'ymusrmgmt-user-avatar', standalone: true, imports: [MatIconModule, MatTooltipModule, TranslatePipe], template: "<div\n class=\"user-avatar\"\n [class.is-disabled]=\"!user().enabled\"\n [style.background]=\"avatarColor().background\"\n [style.color]=\"avatarColor().color\"\n>\n <span>{{ initials() }}</span>\n @if (showBadges() && !user().enabled) { @let disabledLabel =\n 'yuv.app.user-management.users.property.disabled' | translate;\n <span\n class=\"avatar-disabled-badge\"\n [matTooltip]=\"disabledLabel\"\n [attr.aria-label]=\"disabledLabel\"\n >\n <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n </span>\n } @if (showBadges() && user().externallyManaged) { @let externalLabel =\n 'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate;\n <span class=\"avatar-source-badge\" [matTooltip]=\"externalLabel\" [attr.aria-label]=\"externalLabel\">\n <mat-icon aria-hidden=\"true\">{{ icons.sourceExternal }}</mat-icon>\n </span>\n }\n</div>\n", styles: [":host{display:contents}.user-avatar{position:relative;width:var(--ymt-sizing-2xl);height:var(--ymt-sizing-2xl);border-radius:var(--ymt-corner-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8125rem;font-weight:600;letter-spacing:.01em;-webkit-user-select:none;user-select:none}.user-avatar.is-disabled{filter:grayscale(1);opacity:.6}.avatar-disabled-badge{position:absolute;right:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-disabled-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-disabled-badge{background-color:var(--ymt-surface-container-high)}.avatar-disabled-badge mat-icon{color:var(--ymt-text-color-subtle)}.avatar-source-badge{position:absolute;left:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-source-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-source-badge{background-color:var(--ymt-primary-container)}.avatar-source-badge mat-icon{color:var(--ymt-on-primary-container)}\n"] }]
|
|
1144
1144
|
}], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], showBadges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBadges", required: false }] }] } });
|
|
@@ -1159,10 +1159,10 @@ class GlobalAddButtonComponent {
|
|
|
1159
1159
|
action: () => this.createGroup.emit(),
|
|
1160
1160
|
},
|
|
1161
1161
|
];
|
|
1162
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1162
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GlobalAddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: GlobalAddButtonComponent, isStandalone: true, selector: "ymusrmgmt-global-add-button", outputs: { createUser: "createUser", createGroup: "createGroup" }, host: { classAttribute: "ymusrmgmt-global-add" }, ngImport: i0, template: "<button\n mat-mini-fab\n [matTooltip]=\"'yuv.app.user-management.common.action.add.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.add.label' | translate\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon>add</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"global-add-button-menu\">\n @for (item of menuItems; track item.label) {\n <button mat-menu-item (click)=\"item.action()\">\n <mat-icon>{{ item.icon }}</mat-icon>\n <span>{{ item.label }}</span>\n </button>\n }\n</mat-menu>\n", styles: [".global-add-button-menu{border:var(--ymt-outline-width) solid var(--ymt-primary-container);--mat-menu-container-color: var(--ymt-primary-container);--mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--ymt-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent);--mat-menu-item-label-text-color: var(--ymt-on-primary-container);--mat-menu-item-icon-color: var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1164
1164
|
}
|
|
1165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GlobalAddButtonComponent, decorators: [{
|
|
1166
1166
|
type: Component,
|
|
1167
1167
|
args: [{ selector: 'ymusrmgmt-global-add-button', standalone: true, imports: [TranslatePipe, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule], encapsulation: ViewEncapsulation.None, host: {
|
|
1168
1168
|
class: 'ymusrmgmt-global-add',
|
|
@@ -1264,10 +1264,10 @@ class CreateUserComponent {
|
|
|
1264
1264
|
this.changedInput.set(value);
|
|
1265
1265
|
});
|
|
1266
1266
|
}
|
|
1267
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1268
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1267
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CreateUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: CreateUserComponent, isStandalone: true, selector: "ymusrmgmt-create-user", ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.users.action.create.label' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.username' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"username\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"email\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"firstname\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"lastname\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n />\n </mat-form-field>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1269
1269
|
}
|
|
1270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CreateUserComponent, decorators: [{
|
|
1271
1271
|
type: Component,
|
|
1272
1272
|
args: [{ selector: 'ymusrmgmt-create-user', standalone: true, imports: [...modules$4, ...components$4], template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.users.action.create.label' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.username' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"username\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"email\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"firstname\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"lastname\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n />\n </mat-form-field>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"] }]
|
|
1273
1273
|
}] });
|
|
@@ -1289,8 +1289,8 @@ const modules$3 = [
|
|
|
1289
1289
|
class CreateGroupComponent {
|
|
1290
1290
|
/** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
|
|
1291
1291
|
static DIALOG_CONFIG = {
|
|
1292
|
-
width: '
|
|
1293
|
-
maxWidth: '
|
|
1292
|
+
width: '900px',
|
|
1293
|
+
maxWidth: '95vw',
|
|
1294
1294
|
};
|
|
1295
1295
|
#fb = inject(FormBuilder);
|
|
1296
1296
|
#userManagementService = inject(YuvUserManagementService);
|
|
@@ -1374,10 +1374,10 @@ class CreateGroupComponent {
|
|
|
1374
1374
|
this.form.patchValue({ roles: roles });
|
|
1375
1375
|
this.roles.markAsTouched(); // Mark as touched to trigger validation display
|
|
1376
1376
|
}
|
|
1377
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1378
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1377
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CreateGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1378
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: CreateGroupComponent, isStandalone: true, selector: "ymusrmgmt-create-group", ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.groups.action.create.label' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.groups.property.name' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"name\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.groups.property.description' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"description\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n />\n </mat-form-field>\n <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n <ymusrmgmt-role-selection\n [allRoles]=\"allAvailableRoles()\"\n [initialRoles]=\"groupRoles()\"\n (rolesChange)=\"onRolesChange($event)\"\n >\n </ymusrmgmt-role-selection>\n </div>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1379
1379
|
}
|
|
1380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CreateGroupComponent, decorators: [{
|
|
1381
1381
|
type: Component,
|
|
1382
1382
|
args: [{ selector: 'ymusrmgmt-create-group', standalone: true, imports: [...modules$3, ...components$3], template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.groups.action.create.label' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ 'yuv.app.user-management.groups.property.name' | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"name\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\n 'yuv.app.user-management.groups.property.description' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"description\"\n type=\"text\"\n [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n />\n </mat-form-field>\n <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n <ymusrmgmt-role-selection\n [allRoles]=\"allAvailableRoles()\"\n [initialRoles]=\"groupRoles()\"\n (rolesChange)=\"onRolesChange($event)\"\n >\n </ymusrmgmt-role-selection>\n </div>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"] }]
|
|
1383
1383
|
}], ctorParameters: () => [] });
|
|
@@ -1603,12 +1603,12 @@ class SettingsComponent {
|
|
|
1603
1603
|
close() {
|
|
1604
1604
|
this.#dialogRef.close();
|
|
1605
1605
|
}
|
|
1606
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1607
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SettingsComponent, isStandalone: true, selector: "ymusrmgmt-settings", ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.settings.label.dialog.title' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <ng-template\n #editableField\n let-labelKey=\"labelKey\"\n let-control=\"control\"\n let-type=\"type\"\n let-placeholder=\"placeholder\"\n let-autocomplete=\"autocomplete\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"control\"\n [type]=\"type || 'text'\"\n [placeholder]=\"placeholder || ''\"\n [autocomplete]=\"autocomplete || 'off'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n </mat-form-field>\n </ng-template>\n <ng-template\n #readonlyField\n let-labelKey=\"labelKey\"\n let-value=\"value\"\n let-type=\"type\"\n let-copyable=\"copyable\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n readonly\n [type]=\"type || 'text'\"\n [attr.tabindex]=\"-1\"\n [value]=\"value || '\u2014'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n @if (copyable && value) {\n <button\n matSuffix\n mat-icon-button\n class=\"copy-button\"\n type=\"button\"\n [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [cdkCopyToClipboard]=\"value\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n }\n </mat-form-field>\n </ng-template>\n\n @if (!showForm()) {\n <div class=\"empty-state\">\n <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">admin_panel_settings</mat-icon>\n <p class=\"empty-state-title\">\n {{ 'yuv.app.user-management.settings.oidc.label.notConfigured' | translate }}\n </p>\n <p class=\"empty-state-description\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.description' | translate }}\n </p>\n <button ymtButton=\"primary\" type=\"button\" (click)=\"startAdd()\">\n {{ 'yuv.app.user-management.settings.oidc.action.setup.label' | translate }}\n </button>\n </div>\n } @else {\n <mat-tab-group yuvTabGuardDisable>\n <mat-tab [label]=\"'yuv.app.user-management.settings.oidc.tab.authentication' | translate\">\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.hint' | translate }}\n </p>\n <form [formGroup]=\"form\">\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.displayName',\n control: displayName,\n placeholder: 'e.g. Microsoft Entra ID'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.discoveryUrl',\n control: discoveryUrl,\n placeholder:\n 'e.g. https://login.microsoftonline.com/<entra-tenant-id>/v2.0/.well-known/openid-configuration'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientId',\n control: clientId,\n placeholder: 'e.g. yuuvis'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientSecret',\n control: clientSecret,\n type: 'password',\n autocomplete: 'new-password'\n }\n \"\n ></ng-container>\n @if (redirectUri(); as uri) {\n <hr class=\"divider\" />\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.property.redirectUri.hint' | translate }}\n </p>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.redirectUri',\n value: uri,\n copyable: true\n }\n \"\n ></ng-container>\n }\n </form>\n </mat-tab>\n <mat-tab\n [label]=\"'yuv.app.user-management.settings.oidc.label.section.provisioning' | translate\"\n >\n @if (scimProvisioning(); as scimProvisioning) { @if (provider(); as oidcProvider) {\n <p class=\"hint\">\n {{\n 'yuv.app.user-management.settings.oidc.label.provisioning.hint'\n | translate : { provider: oidcProvider.displayName }\n }}\n </p>\n }\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl',\n value: tenantUrl(),\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl',\n value: scimProvisioning.tokenEndpoint,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientName',\n value: scimProvisioning.clientId,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret',\n value: scimProvisioning.clientSecret,\n type: 'password',\n copyable: true\n }\n \"\n ></ng-container>\n } @else {\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.provisioning.unavailable' | translate }}\n </p>\n }\n </mat-tab>\n </mat-tab-group>\n } @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n @if (provider()) {\n <!--\n `ymt-button--danger` is added explicitly (not just relying on `ymtButton=\"danger\"`):\n YmtButtonDirective has a bug where its own dynamically-added `ymt-button--danger` class gets\n wiped when it creates the underlying MatButton (which overwrites the host's `class`\n attribute) and never restored, since the directive's `ngOnInit` snapshots \"classes to\n restore\" before adding it. A class already present in the template survives that wipe, so\n this is what actually makes the button render with danger colors. Don't remove it as a\n seeming duplicate.\n -->\n <button\n ymtButton=\"danger\"\n class=\"ymt-button--danger footer-start\"\n [disabled]=\"busy()\"\n (click)=\"revert()\"\n >\n <mat-icon>reset_wrench</mat-icon>\n {{ 'yuv.app.user-management.settings.oidc.action.reset.label' | translate }}\n </button>\n }\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.settings.action.button.cancel' | translate }}\n </button>\n @if (showForm()) {\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"configure()\">\n {{ 'yuv.app.user-management.settings.oidc.action.save.label' | translate }}\n </button>\n }\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main{min-height:var(--ymt-sizing-7xl)}:host main .yuv-form-field input::placeholder{color:var(--ymt-text-color-subtle, inherit);font-size:.9em;opacity:1}:host main .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l);justify-content:center;min-height:var(--ymt-sizing-7xl)}:host main .empty-state .empty-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host main .empty-state .empty-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host main .empty-state .empty-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:80ch;margin:0}:host main .divider{border:none;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);margin:var(--ymt-spacing-m) 0}:host main ::ng-deep .mat-mdc-tab-body-content{padding-top:var(--ymt-spacing-m)}:host footer{display:flex;flex:1;align-items:center;gap:calc(var(--ymt-font-body) / 2)}:host footer .footer-start{margin-inline-end:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: TabGuardDirective, selector: "mat-tab-group[yuvTabGuardDisable]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1606
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1607
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SettingsComponent, isStandalone: true, selector: "ymusrmgmt-settings", ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.settings.label.dialog.title' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <ng-template\n #editableField\n let-labelKey=\"labelKey\"\n let-control=\"control\"\n let-type=\"type\"\n let-placeholder=\"placeholder\"\n let-autocomplete=\"autocomplete\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"control\"\n [type]=\"type || 'text'\"\n [placeholder]=\"placeholder || ''\"\n [autocomplete]=\"autocomplete || 'off'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n </mat-form-field>\n </ng-template>\n <ng-template\n #readonlyField\n let-labelKey=\"labelKey\"\n let-value=\"value\"\n let-type=\"type\"\n let-copyable=\"copyable\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n readonly\n [type]=\"type || 'text'\"\n [attr.tabindex]=\"-1\"\n [value]=\"value || '\u2014'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n @if (copyable && value) {\n <button\n matSuffix\n mat-icon-button\n class=\"copy-button\"\n type=\"button\"\n [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [cdkCopyToClipboard]=\"value\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n }\n </mat-form-field>\n </ng-template>\n\n @if (!showForm()) {\n <div class=\"empty-state\">\n <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">admin_panel_settings</mat-icon>\n <p class=\"empty-state-title\">\n {{ 'yuv.app.user-management.settings.oidc.label.notConfigured' | translate }}\n </p>\n <p class=\"empty-state-description\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.description' | translate }}\n </p>\n <button ymtButton=\"primary\" type=\"button\" (click)=\"startAdd()\">\n {{ 'yuv.app.user-management.settings.oidc.action.setup.label' | translate }}\n </button>\n </div>\n } @else {\n <mat-tab-group yuvTabGuardDisable>\n <mat-tab [label]=\"'yuv.app.user-management.settings.oidc.tab.authentication' | translate\">\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.hint' | translate }}\n </p>\n <form [formGroup]=\"form\">\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.displayName',\n control: displayName,\n placeholder: 'e.g. Microsoft Entra ID'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.discoveryUrl',\n control: discoveryUrl,\n placeholder:\n 'e.g. https://login.microsoftonline.com/<entra-tenant-id>/v2.0/.well-known/openid-configuration'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientId',\n control: clientId,\n placeholder: 'e.g. yuuvis'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientSecret',\n control: clientSecret,\n type: 'password',\n autocomplete: 'new-password'\n }\n \"\n ></ng-container>\n @if (redirectUri(); as uri) {\n <hr class=\"divider\" />\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.property.redirectUri.hint' | translate }}\n </p>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.redirectUri',\n value: uri,\n copyable: true\n }\n \"\n ></ng-container>\n }\n </form>\n </mat-tab>\n <mat-tab\n [label]=\"'yuv.app.user-management.settings.oidc.label.section.provisioning' | translate\"\n >\n @if (scimProvisioning(); as scimProvisioning) { @if (provider(); as oidcProvider) {\n <p class=\"hint\">\n {{\n 'yuv.app.user-management.settings.oidc.label.provisioning.hint'\n | translate : { provider: oidcProvider.displayName }\n }}\n </p>\n }\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl',\n value: tenantUrl(),\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl',\n value: scimProvisioning.tokenEndpoint,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientName',\n value: scimProvisioning.clientId,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret',\n value: scimProvisioning.clientSecret,\n type: 'password',\n copyable: true\n }\n \"\n ></ng-container>\n } @else {\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.provisioning.unavailable' | translate }}\n </p>\n }\n </mat-tab>\n </mat-tab-group>\n } @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n @if (provider()) {\n <button ymtButton=\"danger\" [disabled]=\"busy()\" (click)=\"revert()\">\n <mat-icon>reset_wrench</mat-icon>\n {{ 'yuv.app.user-management.settings.oidc.action.reset.label' | translate }}\n </button>\n }\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.settings.action.button.cancel' | translate }}\n </button>\n @if (showForm()) {\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"configure()\">\n {{ 'yuv.app.user-management.settings.oidc.action.save.label' | translate }}\n </button>\n }\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main{min-height:var(--ymt-sizing-7xl)}:host main .yuv-form-field input::placeholder{color:var(--ymt-text-color-subtle, inherit);font-size:.9em;opacity:1}:host main .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l);justify-content:center;min-height:var(--ymt-sizing-7xl)}:host main .empty-state .empty-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host main .empty-state .empty-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host main .empty-state .empty-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:80ch;margin:0}:host main .divider{border:none;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);margin:var(--ymt-spacing-m) 0}:host main ::ng-deep .mat-mdc-tab-body-content{padding-top:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: TabGuardDirective, selector: "mat-tab-group[yuvTabGuardDisable]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1608
1608
|
}
|
|
1609
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1609
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SettingsComponent, decorators: [{
|
|
1610
1610
|
type: Component,
|
|
1611
|
-
args: [{ selector: 'ymusrmgmt-settings', standalone: true, imports: [...modules$2, ...components$2], template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.settings.label.dialog.title' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <ng-template\n #editableField\n let-labelKey=\"labelKey\"\n let-control=\"control\"\n let-type=\"type\"\n let-placeholder=\"placeholder\"\n let-autocomplete=\"autocomplete\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"control\"\n [type]=\"type || 'text'\"\n [placeholder]=\"placeholder || ''\"\n [autocomplete]=\"autocomplete || 'off'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n </mat-form-field>\n </ng-template>\n <ng-template\n #readonlyField\n let-labelKey=\"labelKey\"\n let-value=\"value\"\n let-type=\"type\"\n let-copyable=\"copyable\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n readonly\n [type]=\"type || 'text'\"\n [attr.tabindex]=\"-1\"\n [value]=\"value || '\u2014'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n @if (copyable && value) {\n <button\n matSuffix\n mat-icon-button\n class=\"copy-button\"\n type=\"button\"\n [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [cdkCopyToClipboard]=\"value\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n }\n </mat-form-field>\n </ng-template>\n\n @if (!showForm()) {\n <div class=\"empty-state\">\n <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">admin_panel_settings</mat-icon>\n <p class=\"empty-state-title\">\n {{ 'yuv.app.user-management.settings.oidc.label.notConfigured' | translate }}\n </p>\n <p class=\"empty-state-description\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.description' | translate }}\n </p>\n <button ymtButton=\"primary\" type=\"button\" (click)=\"startAdd()\">\n {{ 'yuv.app.user-management.settings.oidc.action.setup.label' | translate }}\n </button>\n </div>\n } @else {\n <mat-tab-group yuvTabGuardDisable>\n <mat-tab [label]=\"'yuv.app.user-management.settings.oidc.tab.authentication' | translate\">\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.hint' | translate }}\n </p>\n <form [formGroup]=\"form\">\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.displayName',\n control: displayName,\n placeholder: 'e.g. Microsoft Entra ID'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.discoveryUrl',\n control: discoveryUrl,\n placeholder:\n 'e.g. https://login.microsoftonline.com/<entra-tenant-id>/v2.0/.well-known/openid-configuration'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientId',\n control: clientId,\n placeholder: 'e.g. yuuvis'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientSecret',\n control: clientSecret,\n type: 'password',\n autocomplete: 'new-password'\n }\n \"\n ></ng-container>\n @if (redirectUri(); as uri) {\n <hr class=\"divider\" />\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.property.redirectUri.hint' | translate }}\n </p>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.redirectUri',\n value: uri,\n copyable: true\n }\n \"\n ></ng-container>\n }\n </form>\n </mat-tab>\n <mat-tab\n [label]=\"'yuv.app.user-management.settings.oidc.label.section.provisioning' | translate\"\n >\n @if (scimProvisioning(); as scimProvisioning) { @if (provider(); as oidcProvider) {\n <p class=\"hint\">\n {{\n 'yuv.app.user-management.settings.oidc.label.provisioning.hint'\n | translate : { provider: oidcProvider.displayName }\n }}\n </p>\n }\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl',\n value: tenantUrl(),\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl',\n value: scimProvisioning.tokenEndpoint,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientName',\n value: scimProvisioning.clientId,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret',\n value: scimProvisioning.clientSecret,\n type: 'password',\n copyable: true\n }\n \"\n ></ng-container>\n } @else {\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.provisioning.unavailable' | translate }}\n </p>\n }\n </mat-tab>\n </mat-tab-group>\n } @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n @if (provider()) {\n <!--\n `ymt-button--danger` is added explicitly (not just relying on `ymtButton=\"danger\"`):\n YmtButtonDirective has a bug where its own dynamically-added `ymt-button--danger` class gets\n wiped when it creates the underlying MatButton (which overwrites the host's `class`\n attribute) and never restored, since the directive's `ngOnInit` snapshots \"classes to\n restore\" before adding it. A class already present in the template survives that wipe, so\n this is what actually makes the button render with danger colors. Don't remove it as a\n seeming duplicate.\n -->\n <button\n ymtButton=\"danger\"\n class=\"ymt-button--danger footer-start\"\n [disabled]=\"busy()\"\n (click)=\"revert()\"\n >\n <mat-icon>reset_wrench</mat-icon>\n {{ 'yuv.app.user-management.settings.oidc.action.reset.label' | translate }}\n </button>\n }\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.settings.action.button.cancel' | translate }}\n </button>\n @if (showForm()) {\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"configure()\">\n {{ 'yuv.app.user-management.settings.oidc.action.save.label' | translate }}\n </button>\n }\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main{min-height:var(--ymt-sizing-7xl)}:host main .yuv-form-field input::placeholder{color:var(--ymt-text-color-subtle, inherit);font-size:.9em;opacity:1}:host main .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l);justify-content:center;min-height:var(--ymt-sizing-7xl)}:host main .empty-state .empty-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host main .empty-state .empty-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host main .empty-state .empty-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:80ch;margin:0}:host main .divider{border:none;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);margin:var(--ymt-spacing-m) 0}:host main ::ng-deep .mat-mdc-tab-body-content{padding-top:var(--ymt-spacing-m)}:host footer{display:flex;flex:1;align-items:center;gap:calc(var(--ymt-font-body) / 2)}:host footer .footer-start{margin-inline-end:auto}\n"] }]
|
|
1611
|
+
args: [{ selector: 'ymusrmgmt-settings', standalone: true, imports: [...modules$2, ...components$2], template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"'yuv.app.user-management.settings.label.dialog.title' | translate\"\n>\n <main class=\"yuv-dialog-content\">\n <ng-template\n #editableField\n let-labelKey=\"labelKey\"\n let-control=\"control\"\n let-type=\"type\"\n let-placeholder=\"placeholder\"\n let-autocomplete=\"autocomplete\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n [formControl]=\"control\"\n [type]=\"type || 'text'\"\n [placeholder]=\"placeholder || ''\"\n [autocomplete]=\"autocomplete || 'off'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n </mat-form-field>\n </ng-template>\n <ng-template\n #readonlyField\n let-labelKey=\"labelKey\"\n let-value=\"value\"\n let-type=\"type\"\n let-copyable=\"copyable\"\n >\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{ labelKey | translate }}</mat-label>\n <input\n matInput\n readonly\n [type]=\"type || 'text'\"\n [attr.tabindex]=\"-1\"\n [value]=\"value || '\u2014'\"\n [attr.aria-label]=\"labelKey | translate\"\n />\n @if (copyable && value) {\n <button\n matSuffix\n mat-icon-button\n class=\"copy-button\"\n type=\"button\"\n [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n [cdkCopyToClipboard]=\"value\"\n (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n }\n </mat-form-field>\n </ng-template>\n\n @if (!showForm()) {\n <div class=\"empty-state\">\n <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">admin_panel_settings</mat-icon>\n <p class=\"empty-state-title\">\n {{ 'yuv.app.user-management.settings.oidc.label.notConfigured' | translate }}\n </p>\n <p class=\"empty-state-description\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.description' | translate }}\n </p>\n <button ymtButton=\"primary\" type=\"button\" (click)=\"startAdd()\">\n {{ 'yuv.app.user-management.settings.oidc.action.setup.label' | translate }}\n </button>\n </div>\n } @else {\n <mat-tab-group yuvTabGuardDisable>\n <mat-tab [label]=\"'yuv.app.user-management.settings.oidc.tab.authentication' | translate\">\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.setup.hint' | translate }}\n </p>\n <form [formGroup]=\"form\">\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.displayName',\n control: displayName,\n placeholder: 'e.g. Microsoft Entra ID'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.discoveryUrl',\n control: discoveryUrl,\n placeholder:\n 'e.g. https://login.microsoftonline.com/<entra-tenant-id>/v2.0/.well-known/openid-configuration'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientId',\n control: clientId,\n placeholder: 'e.g. yuuvis'\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n editableField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.clientSecret',\n control: clientSecret,\n type: 'password',\n autocomplete: 'new-password'\n }\n \"\n ></ng-container>\n @if (redirectUri(); as uri) {\n <hr class=\"divider\" />\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.property.redirectUri.hint' | translate }}\n </p>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.property.redirectUri',\n value: uri,\n copyable: true\n }\n \"\n ></ng-container>\n }\n </form>\n </mat-tab>\n <mat-tab\n [label]=\"'yuv.app.user-management.settings.oidc.label.section.provisioning' | translate\"\n >\n @if (scimProvisioning(); as scimProvisioning) { @if (provider(); as oidcProvider) {\n <p class=\"hint\">\n {{\n 'yuv.app.user-management.settings.oidc.label.provisioning.hint'\n | translate : { provider: oidcProvider.displayName }\n }}\n </p>\n }\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl',\n value: tenantUrl(),\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl',\n value: scimProvisioning.tokenEndpoint,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientName',\n value: scimProvisioning.clientId,\n copyable: true\n }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n readonlyField;\n context: {\n labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret',\n value: scimProvisioning.clientSecret,\n type: 'password',\n copyable: true\n }\n \"\n ></ng-container>\n } @else {\n <p class=\"hint\">\n {{ 'yuv.app.user-management.settings.oidc.label.provisioning.unavailable' | translate }}\n </p>\n }\n </mat-tab>\n </mat-tab-group>\n } @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n @if (provider()) {\n <button ymtButton=\"danger\" [disabled]=\"busy()\" (click)=\"revert()\">\n <mat-icon>reset_wrench</mat-icon>\n {{ 'yuv.app.user-management.settings.oidc.action.reset.label' | translate }}\n </button>\n }\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.settings.action.button.cancel' | translate }}\n </button>\n @if (showForm()) {\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"configure()\">\n {{ 'yuv.app.user-management.settings.oidc.action.save.label' | translate }}\n </button>\n }\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main{min-height:var(--ymt-sizing-7xl)}:host main .yuv-form-field input::placeholder{color:var(--ymt-text-color-subtle, inherit);font-size:.9em;opacity:1}:host main .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l);justify-content:center;min-height:var(--ymt-sizing-7xl)}:host main .empty-state .empty-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host main .empty-state .empty-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host main .empty-state .empty-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:80ch;margin:0}:host main .divider{border:none;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);margin:var(--ymt-spacing-m) 0}:host main ::ng-deep .mat-mdc-tab-body-content{padding-top:var(--ymt-spacing-m)}\n"] }]
|
|
1612
1612
|
}], ctorParameters: () => [] });
|
|
1613
1613
|
|
|
1614
1614
|
/**
|
|
@@ -1643,10 +1643,10 @@ class HighlightableOptionDirective {
|
|
|
1643
1643
|
setInactiveStyles() {
|
|
1644
1644
|
this.active.set(false);
|
|
1645
1645
|
}
|
|
1646
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1647
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
1646
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: HighlightableOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1647
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: HighlightableOptionDirective, isStandalone: true, selector: "[ymusrmgmt-highlightable-option]", host: { properties: { "class.active": "active()" } }, exportAs: ["ymusrmgmtHighlightableOption"], ngImport: i0 });
|
|
1648
1648
|
}
|
|
1649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1649
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: HighlightableOptionDirective, decorators: [{
|
|
1650
1650
|
type: Directive,
|
|
1651
1651
|
args: [{
|
|
1652
1652
|
selector: '[ymusrmgmt-highlightable-option]',
|
|
@@ -1779,10 +1779,10 @@ class AddGroupMembersComponent {
|
|
|
1779
1779
|
close() {
|
|
1780
1780
|
this.#dialogRef.close();
|
|
1781
1781
|
}
|
|
1782
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1783
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: AddGroupMembersComponent, isStandalone: true, selector: "ymusrmgmt-add-group-members", viewQueries: [{ propertyName: "candidateOptions", predicate: HighlightableOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"\n 'yuv.app.user-management.groups.action.addMembers.dialog.title'\n | translate : { name: data.group.name }\n \"\n>\n <!-- Shared avatar + name/username anatomy for both the search-result and selected-users rows below. -->\n <ng-template #userInfo let-user>\n <ymusrmgmt-user-avatar [user]=\"user\" />\n <span class=\"names\">\n <span class=\"username\">{{ user.username }}</span>\n <span class=\"name-row\">\n <span class=\"name\">{{ user.firstName }} {{ user.lastName }}</span>\n </span>\n </span>\n </ng-template>\n\n <main class=\"yuv-dialog-content\">\n <div class=\"search-column\">\n <div class=\"search-row\">\n <mat-icon aria-hidden=\"true\" class=\"icon\">search</mat-icon>\n <input\n class=\"input\"\n type=\"text\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n aria-controls=\"search-result-list\"\n [attr.aria-activedescendant]=\"activeOptionId() || null\"\n [formControl]=\"searchControl\"\n (keydown)=\"onSearchKeydown($event)\"\n [placeholder]=\"\n 'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n \"\n [attr.aria-label]=\"\n 'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n \"\n />\n </div>\n\n <div class=\"search-result\" id=\"search-result-list\" role=\"listbox\" tabindex=\"-1\">\n @for (user of candidateResults(); track user.id) {\n <button\n ymusrmgmt-highlightable-option\n #option=\"ymusrmgmtHighlightableOption\"\n [attr.aria-selected]=\"option.active()\"\n type=\"button\"\n id=\"add-group-members-option-{{ user.id }}\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"user\"\n [class.user--inactive]=\"!user.enabled\"\n (click)=\"select(user)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"userInfo\"\n [ngTemplateOutletContext]=\"{ $implicit: user }\"\n />\n </button>\n } @empty {\n <div class=\"empty-message\">\n {{\n (searchTerm()\n ? 'yuv.app.user-management.groups.action.addMembers.empty.noResults'\n : 'yuv.app.user-management.groups.action.addMembers.empty.allAdded'\n ) | translate\n }}\n </div>\n }\n </div>\n </div>\n\n <div class=\"selected-users\">\n @for (user of selectedUsers(); track user.id) {\n <div class=\"user\" [class.user--inactive]=\"!user.enabled\">\n <ng-container\n [ngTemplateOutlet]=\"userInfo\"\n [ngTemplateOutletContext]=\"{ $implicit: user }\"\n />\n <button\n type=\"button\"\n class=\"chip-remove\"\n (click)=\"deselect(user)\"\n [matTooltip]=\"\n 'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n \"\n [attr.aria-label]=\"\n 'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n \"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.groups.action.addMembers.empty.noneSelected' | translate }}\n </div>\n }\n </div>\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"addMembers()\">\n {{ 'yuv.app.user-management.groups.action.addMembers.button.add' | translate }}\n @if (selectedUsers().length > 0) {\n <ymt-badge class=\"count\" severity=\"neutral\">{{ selectedUsers().length }}</ymt-badge>\n }\n </button>\n </footer>\n</yuv-dialog>\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}yuv-dialog{flex:1;min-height:0}:host{box-sizing:border-box;--ymt-dialog-content-display: flex}:host ::ng-deep mat-dialog-content{max-height:90vh}:host main{display:flex;flex-direction:row;height:100%;overflow:hidden;background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m)}:host main .user{display:flex;align-items:center;gap:var(--ymt-spacing-s);width:100%;font:inherit;color:var(--ymt-text-color)}:host main .user .names{display:flex;flex:1;flex-direction:column;gap:var(--ymt-spacing-4xs);min-width:0}:host main .user .name-row{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);min-width:0}:host main .user .name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host main .user .username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main .user.user--inactive .name,:host main .user.user--inactive .username{opacity:.6}:host main .search-column{display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host main .search-column .search-row{position:relative;flex-shrink:0}:host main .search-column .search-row .icon{position:absolute;left:var(--ymt-spacing-s);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ymt-text-color-subtle);font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s)}:host main .search-column .search-row .input{display:block;width:100%;border:none;outline:none;background:none;font:inherit;color:var(--ymt-text-color);padding:var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s) calc(var(--ymt-sizing-s) + 2 * var(--ymt-spacing-s))}:host main .search-column .search-result{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:0 0 0 var(--ymt-corner-s)}:host main .search-column .search-result .user{text-align:left;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:none;border:none;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant);cursor:pointer}:host main .search-column .search-result .user:last-child{border-bottom:none}:host main .search-column .search-result .user:hover{background-color:var(--ymt-hover-background)}:host main .search-column .search-result .user.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host main .search-column .search-result .user.active .name,:host main .search-column .search-result .user.active .username{color:var(--ymt-on-primary-container)}:host main .selected-users{display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow-y:auto;padding:var(--ymt-spacing-s);border-left:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user{padding:var(--ymt-spacing-xs) 0;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user:last-child{border-bottom:none}:host main .selected-users .chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);padding:0;border:none;border-radius:var(--ymt-corner-full);background:transparent;color:var(--ymt-text-color-subtle);cursor:pointer}:host main .selected-users .chip-remove:hover{background-color:var(--ymt-hover-background)}:host main .selected-users .chip-remove mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}:host main .empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "component", type: UserAvatarComponent, selector: "ymusrmgmt-user-avatar", inputs: ["user", "showBadges"] }, { kind: "directive", type: HighlightableOptionDirective, selector: "[ymusrmgmt-highlightable-option]", exportAs: ["ymusrmgmtHighlightableOption"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AddGroupMembersComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
1783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: AddGroupMembersComponent, isStandalone: true, selector: "ymusrmgmt-add-group-members", viewQueries: [{ propertyName: "candidateOptions", predicate: HighlightableOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"\n 'yuv.app.user-management.groups.action.addMembers.dialog.title'\n | translate : { name: data.group.name }\n \"\n>\n <!-- Shared avatar + name/username anatomy for both the search-result and selected-users rows below. -->\n <ng-template #userInfo let-user>\n <ymusrmgmt-user-avatar [user]=\"user\" />\n <span class=\"names\">\n <span class=\"username\">{{ user.username }}</span>\n <span class=\"name-row\">\n <span class=\"name\">{{ user.firstName }} {{ user.lastName }}</span>\n </span>\n </span>\n </ng-template>\n\n <main class=\"yuv-dialog-content\">\n <div class=\"search-column\">\n <div class=\"search-row\">\n <mat-icon aria-hidden=\"true\" class=\"icon\">search</mat-icon>\n <input\n class=\"input\"\n type=\"text\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n aria-controls=\"search-result-list\"\n [attr.aria-activedescendant]=\"activeOptionId() || null\"\n [formControl]=\"searchControl\"\n (keydown)=\"onSearchKeydown($event)\"\n [placeholder]=\"\n 'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n \"\n [attr.aria-label]=\"\n 'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n \"\n />\n </div>\n\n <div class=\"search-result\" id=\"search-result-list\" role=\"listbox\" tabindex=\"-1\">\n @for (user of candidateResults(); track user.id) {\n <button\n ymusrmgmt-highlightable-option\n #option=\"ymusrmgmtHighlightableOption\"\n [attr.aria-selected]=\"option.active()\"\n type=\"button\"\n id=\"add-group-members-option-{{ user.id }}\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"user\"\n [class.user--inactive]=\"!user.enabled\"\n (click)=\"select(user)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"userInfo\"\n [ngTemplateOutletContext]=\"{ $implicit: user }\"\n />\n </button>\n } @empty {\n <div class=\"empty-message\">\n {{\n (searchTerm()\n ? 'yuv.app.user-management.groups.action.addMembers.empty.noResults'\n : 'yuv.app.user-management.groups.action.addMembers.empty.allAdded'\n ) | translate\n }}\n </div>\n }\n </div>\n </div>\n\n <div class=\"selected-users\">\n @for (user of selectedUsers(); track user.id) {\n <div class=\"user\" [class.user--inactive]=\"!user.enabled\">\n <ng-container\n [ngTemplateOutlet]=\"userInfo\"\n [ngTemplateOutletContext]=\"{ $implicit: user }\"\n />\n <button\n type=\"button\"\n class=\"chip-remove\"\n (click)=\"deselect(user)\"\n [matTooltip]=\"\n 'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n \"\n [attr.aria-label]=\"\n 'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n \"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.groups.action.addMembers.empty.noneSelected' | translate }}\n </div>\n }\n </div>\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"addMembers()\">\n {{ 'yuv.app.user-management.groups.action.addMembers.button.add' | translate }}\n @if (selectedUsers().length > 0) {\n <ymt-badge class=\"count\" severity=\"neutral\">{{ selectedUsers().length }}</ymt-badge>\n }\n </button>\n </footer>\n</yuv-dialog>\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}yuv-dialog{flex:1;min-height:0}:host{box-sizing:border-box;--ymt-dialog-content-display: flex}:host ::ng-deep mat-dialog-content{max-height:90vh}:host main{display:flex;flex-direction:row;height:100%;overflow:hidden;background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m)}:host main .user{display:flex;align-items:center;gap:var(--ymt-spacing-s);width:100%;font:inherit;color:var(--ymt-text-color)}:host main .user .names{display:flex;flex:1;flex-direction:column;gap:var(--ymt-spacing-4xs);min-width:0}:host main .user .name-row{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);min-width:0}:host main .user .name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host main .user .username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main .user.user--inactive .name,:host main .user.user--inactive .username{opacity:.6}:host main .search-column{display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host main .search-column .search-row{position:relative;flex-shrink:0}:host main .search-column .search-row .icon{position:absolute;left:var(--ymt-spacing-s);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ymt-text-color-subtle);font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s)}:host main .search-column .search-row .input{display:block;width:100%;border:none;outline:none;background:none;font:inherit;color:var(--ymt-text-color);padding:var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s) calc(var(--ymt-sizing-s) + 2 * var(--ymt-spacing-s))}:host main .search-column .search-result{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:0 0 0 var(--ymt-corner-s)}:host main .search-column .search-result .user{text-align:left;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:none;border:none;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant);cursor:pointer}:host main .search-column .search-result .user:last-child{border-bottom:none}:host main .search-column .search-result .user:hover{background-color:var(--ymt-hover-background)}:host main .search-column .search-result .user.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host main .search-column .search-result .user.active .name,:host main .search-column .search-result .user.active .username{color:var(--ymt-on-primary-container)}:host main .selected-users{display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow-y:auto;padding:var(--ymt-spacing-s);border-left:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user{padding:var(--ymt-spacing-xs) 0;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user:last-child{border-bottom:none}:host main .selected-users .chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);padding:0;border:none;border-radius:var(--ymt-corner-full);background:transparent;color:var(--ymt-text-color-subtle);cursor:pointer}:host main .selected-users .chip-remove:hover{background-color:var(--ymt-hover-background)}:host main .selected-users .chip-remove mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}:host main .empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "component", type: UserAvatarComponent, selector: "ymusrmgmt-user-avatar", inputs: ["user", "showBadges"] }, { kind: "directive", type: HighlightableOptionDirective, selector: "[ymusrmgmt-highlightable-option]", exportAs: ["ymusrmgmtHighlightableOption"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1784
1784
|
}
|
|
1785
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AddGroupMembersComponent, decorators: [{
|
|
1786
1786
|
type: Component,
|
|
1787
1787
|
args: [{ selector: 'ymusrmgmt-add-group-members', standalone: true, imports: [...modules$1, ...components$1], template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"\n 'yuv.app.user-management.groups.action.addMembers.dialog.title'\n | translate : { name: data.group.name }\n \"\n>\n <!-- Shared avatar + name/username anatomy for both the search-result and selected-users rows below. -->\n <ng-template #userInfo let-user>\n <ymusrmgmt-user-avatar [user]=\"user\" />\n <span class=\"names\">\n <span class=\"username\">{{ user.username }}</span>\n <span class=\"name-row\">\n <span class=\"name\">{{ user.firstName }} {{ user.lastName }}</span>\n </span>\n </span>\n </ng-template>\n\n <main class=\"yuv-dialog-content\">\n <div class=\"search-column\">\n <div class=\"search-row\">\n <mat-icon aria-hidden=\"true\" class=\"icon\">search</mat-icon>\n <input\n class=\"input\"\n type=\"text\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n aria-controls=\"search-result-list\"\n [attr.aria-activedescendant]=\"activeOptionId() || null\"\n [formControl]=\"searchControl\"\n (keydown)=\"onSearchKeydown($event)\"\n [placeholder]=\"\n 'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n \"\n [attr.aria-label]=\"\n 'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n \"\n />\n </div>\n\n <div class=\"search-result\" id=\"search-result-list\" role=\"listbox\" tabindex=\"-1\">\n @for (user of candidateResults(); track user.id) {\n <button\n ymusrmgmt-highlightable-option\n #option=\"ymusrmgmtHighlightableOption\"\n [attr.aria-selected]=\"option.active()\"\n type=\"button\"\n id=\"add-group-members-option-{{ user.id }}\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"user\"\n [class.user--inactive]=\"!user.enabled\"\n (click)=\"select(user)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"userInfo\"\n [ngTemplateOutletContext]=\"{ $implicit: user }\"\n />\n </button>\n } @empty {\n <div class=\"empty-message\">\n {{\n (searchTerm()\n ? 'yuv.app.user-management.groups.action.addMembers.empty.noResults'\n : 'yuv.app.user-management.groups.action.addMembers.empty.allAdded'\n ) | translate\n }}\n </div>\n }\n </div>\n </div>\n\n <div class=\"selected-users\">\n @for (user of selectedUsers(); track user.id) {\n <div class=\"user\" [class.user--inactive]=\"!user.enabled\">\n <ng-container\n [ngTemplateOutlet]=\"userInfo\"\n [ngTemplateOutletContext]=\"{ $implicit: user }\"\n />\n <button\n type=\"button\"\n class=\"chip-remove\"\n (click)=\"deselect(user)\"\n [matTooltip]=\"\n 'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n \"\n [attr.aria-label]=\"\n 'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n \"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n } @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.groups.action.addMembers.empty.noneSelected' | translate }}\n </div>\n }\n </div>\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"addMembers()\">\n {{ 'yuv.app.user-management.groups.action.addMembers.button.add' | translate }}\n @if (selectedUsers().length > 0) {\n <ymt-badge class=\"count\" severity=\"neutral\">{{ selectedUsers().length }}</ymt-badge>\n }\n </button>\n </footer>\n</yuv-dialog>\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}yuv-dialog{flex:1;min-height:0}:host{box-sizing:border-box;--ymt-dialog-content-display: flex}:host ::ng-deep mat-dialog-content{max-height:90vh}:host main{display:flex;flex-direction:row;height:100%;overflow:hidden;background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m)}:host main .user{display:flex;align-items:center;gap:var(--ymt-spacing-s);width:100%;font:inherit;color:var(--ymt-text-color)}:host main .user .names{display:flex;flex:1;flex-direction:column;gap:var(--ymt-spacing-4xs);min-width:0}:host main .user .name-row{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);min-width:0}:host main .user .name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host main .user .username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main .user.user--inactive .name,:host main .user.user--inactive .username{opacity:.6}:host main .search-column{display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host main .search-column .search-row{position:relative;flex-shrink:0}:host main .search-column .search-row .icon{position:absolute;left:var(--ymt-spacing-s);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ymt-text-color-subtle);font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s)}:host main .search-column .search-row .input{display:block;width:100%;border:none;outline:none;background:none;font:inherit;color:var(--ymt-text-color);padding:var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s) calc(var(--ymt-sizing-s) + 2 * var(--ymt-spacing-s))}:host main .search-column .search-result{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:0 0 0 var(--ymt-corner-s)}:host main .search-column .search-result .user{text-align:left;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:none;border:none;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant);cursor:pointer}:host main .search-column .search-result .user:last-child{border-bottom:none}:host main .search-column .search-result .user:hover{background-color:var(--ymt-hover-background)}:host main .search-column .search-result .user.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host main .search-column .search-result .user.active .name,:host main .search-column .search-result .user.active .username{color:var(--ymt-on-primary-container)}:host main .selected-users{display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow-y:auto;padding:var(--ymt-spacing-s);border-left:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user{padding:var(--ymt-spacing-xs) 0;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user:last-child{border-bottom:none}:host main .selected-users .chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);padding:0;border:none;border-radius:var(--ymt-corner-full);background:transparent;color:var(--ymt-text-color-subtle);cursor:pointer}:host main .selected-users .chip-remove:hover{background-color:var(--ymt-hover-background)}:host main .selected-users .chip-remove mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}:host main .empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"] }]
|
|
1788
1788
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -1807,8 +1807,8 @@ class EditUserComponent {
|
|
|
1807
1807
|
data;
|
|
1808
1808
|
/** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
|
|
1809
1809
|
static DIALOG_CONFIG = {
|
|
1810
|
-
width: '
|
|
1811
|
-
maxWidth: '
|
|
1810
|
+
width: '900px',
|
|
1811
|
+
maxWidth: '95vw',
|
|
1812
1812
|
};
|
|
1813
1813
|
#fb = inject(FormBuilder);
|
|
1814
1814
|
#userManagementService = inject(YuvUserManagementService);
|
|
@@ -1920,10 +1920,10 @@ class EditUserComponent {
|
|
|
1920
1920
|
close() {
|
|
1921
1921
|
this.#dialogRef.close();
|
|
1922
1922
|
}
|
|
1923
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1923
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: EditUserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
1924
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: EditUserComponent, isStandalone: true, selector: "ymusrmgmt-edit-user", ngImport: i0, template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"\n 'yuv.app.user-management.users.action.edit.dialog.title'\n | translate : { username: data.user.username }\n \"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n @if (externallyManaged()) {\n <p class=\"hint\">\n {{ 'yuv.app.user-management.users.action.edit.identitySource.external.hint' | translate }}\n </p>\n }\n <mat-form-field class=\"yuv-form-field readonly-field\">\n <mat-label class=\"readonly-label\">{{\n 'yuv.app.user-management.users.property.username' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"username\"\n type=\"text\"\n [attr.tabindex]=\"-1\"\n readonly\n [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n 'yuv.app.user-management.users.property.email' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"email\"\n type=\"text\"\n #emailField\n [readonly]=\"externallyManaged()\"\n [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n 'yuv.app.user-management.users.property.firstname' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"firstName\"\n type=\"text\"\n [readonly]=\"externallyManaged()\"\n [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n 'yuv.app.user-management.users.property.lastname' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"lastName\"\n type=\"text\"\n [readonly]=\"externallyManaged()\"\n [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n />\n </mat-form-field>\n <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n <ymusrmgmt-role-selection\n [allRoles]=\"allAvailableRoles()\"\n [initialRoles]=\"userRoles()\"\n (rolesChange)=\"onRolesChange($event)\"\n >\n </ymusrmgmt-role-selection>\n </div>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1925
1925
|
}
|
|
1926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: EditUserComponent, decorators: [{
|
|
1927
1927
|
type: Component,
|
|
1928
1928
|
args: [{ selector: 'ymusrmgmt-edit-user', standalone: true, imports: [...modules, ...components], template: "<yuv-dialog\n class=\"not-separated\"\n [yuvBusyOverlay]=\"busy()\"\n [headertitle]=\"\n 'yuv.app.user-management.users.action.edit.dialog.title'\n | translate : { username: data.user.username }\n \"\n>\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n @if (externallyManaged()) {\n <p class=\"hint\">\n {{ 'yuv.app.user-management.users.action.edit.identitySource.external.hint' | translate }}\n </p>\n }\n <mat-form-field class=\"yuv-form-field readonly-field\">\n <mat-label class=\"readonly-label\">{{\n 'yuv.app.user-management.users.property.username' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"username\"\n type=\"text\"\n [attr.tabindex]=\"-1\"\n readonly\n [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n 'yuv.app.user-management.users.property.email' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"email\"\n type=\"text\"\n #emailField\n [readonly]=\"externallyManaged()\"\n [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n 'yuv.app.user-management.users.property.firstname' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"firstName\"\n type=\"text\"\n [readonly]=\"externallyManaged()\"\n [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n />\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n 'yuv.app.user-management.users.property.lastname' | translate\n }}</mat-label>\n <input\n matInput\n [formControl]=\"lastName\"\n type=\"text\"\n [readonly]=\"externallyManaged()\"\n [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n />\n </mat-form-field>\n <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n <ymusrmgmt-role-selection\n [allRoles]=\"allAvailableRoles()\"\n [initialRoles]=\"userRoles()\"\n (rolesChange)=\"onRolesChange($event)\"\n >\n </ymusrmgmt-role-selection>\n </div>\n </form>\n @if (error()) {\n <p class=\"error\" role=\"alert\">{{ error() }}</p>\n }\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"] }]
|
|
1929
1929
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -1967,10 +1967,10 @@ class UserListPaginatorIntl extends MatPaginatorIntl {
|
|
|
1967
1967
|
ngOnDestroy() {
|
|
1968
1968
|
this.#parentSubscription.unsubscribe();
|
|
1969
1969
|
}
|
|
1970
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1971
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
1970
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UserListPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1971
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UserListPaginatorIntl });
|
|
1972
1972
|
}
|
|
1973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: UserListPaginatorIntl, decorators: [{
|
|
1974
1974
|
type: Injectable
|
|
1975
1975
|
}], ctorParameters: () => [] });
|
|
1976
1976
|
class YuvUserManagementComponent {
|
|
@@ -2619,15 +2619,15 @@ class YuvUserManagementComponent {
|
|
|
2619
2619
|
openSettings() {
|
|
2620
2620
|
this.#dialog.open(SettingsComponent, SettingsComponent.DIALOG_CONFIG);
|
|
2621
2621
|
}
|
|
2622
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2623
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2622
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", providers: [
|
|
2624
2624
|
{
|
|
2625
2625
|
provide: MatPaginatorIntl,
|
|
2626
2626
|
useClass: UserListPaginatorIntl,
|
|
2627
2627
|
},
|
|
2628
2628
|
], viewQueries: [{ propertyName: "rowItems", predicate: FocusableRowDirective, descendants: true, isSignal: true }, { propertyName: "userDetailsComponent", first: true, predicate: UserDetailsComponent, descendants: true }, { propertyName: "groupsComponent", first: true, predicate: GroupsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n <div class=\"usrmgmt-header-actions\">\n <ymusrmgmt-global-add-button (createUser)=\"createNewUser()\" (createGroup)=\"createNewGroup()\" />\n <button\n mat-icon-button\n class=\"usrmgmt-settings-button\"\n [matTooltip]=\"'yuv.app.user-management.navigation.action.settings.tooltip' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.navigation.action.settings.label' | translate\"\n (click)=\"openSettings()\"\n >\n <mat-icon>{{ icons.actionSettings }}</mat-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n <!-- querySubmit (Enter / the search button), not queryChange - queryChange fires debounced on\n every keystroke, which used to refresh the list while still typing. clearInput (the X\n button) still needs its own binding since it doesn't also emit querySubmit. -->\n <yuv-simple-search\n [query]=\"searchBoxQuery()\"\n (querySubmit)=\"onQueryChange($event)\"\n (clearInput)=\"onQueryChange({ term: '' })\"\n ></yuv-simple-search>\n</ng-template>\n\n<main\n class=\"usrmgmt-main__content\"\n [attr.aria-label]=\"'yuv.app.user-management.content.label.aria' | translate\"\n>\n @if (!split.isAreaVisible(Area.GROUPS)) {\n <ymusrmgmt-pane-gutter\n icon=\"left_panel_open\"\n [flipLabel]=\"true\"\n [label]=\"'yuv.app.user-management.label.rail.title' | translate\"\n [tooltip]=\"'yuv.app.user-management.label.pane.showGroups.tooltip' | translate\"\n (expand)=\"split.showArea(Area.GROUPS)\"\n />\n }\n\n <yuv-split-view #split [layoutSettingsID]=\"layoutSettingsID\" class=\"content-split\">\n <ng-template yuvSplitArea [size]=\"20\">\n <ng-template #groupPaneTopBarActions>\n <ymusrmgmt-pane-toggle-button\n icon=\"left_panel_close\"\n [tooltip]=\"'yuv.app.user-management.label.pane.hideGroups.tooltip' | translate\"\n (toggled)=\"split.hideArea(Area.GROUPS)\"\n />\n </ng-template>\n\n <ymusrmgmt-groups\n [selectedGroupId]=\"selectedGroupId()\"\n [topBarActions]=\"groupPaneTopBarActions\"\n (groupSelected)=\"onGroupSelected($event)\"\n (groupUpdated)=\"onGroupUpdated($event)\"\n (groupDeleted)=\"onGroupDeleted($event)\"\n (addMembersRequested)=\"openAddGroupMembersDialog($event)\"\n >\n </ymusrmgmt-groups>\n </ng-template>\n\n <ng-template yuvSplitArea [size]=\"60\">\n <!-- `groupId` is the scope itself, known the moment a group is picked; `group` is that\n group's record, which arrives a beat later (see `selectedGroupDetails`). Anything\n structural keys off `groupId`, anything showing the group's own content off `group`. -->\n @let groupId = selectedGroupId(); @let group = selectedGroupDetails(); @let enabled =\n enabledFilter();\n <!-- The list pane's own title, shared by its `aria-label` and its visible header. -->\n @let listTitle = (groupId ? 'yuv.app.user-management.label.list.groupMembersTitle' :\n 'yuv.app.user-management.label.list.title' ) | translate;\n <ng-template #userListTopBarActions>\n @let groupsVisible = split.isAreaVisible(Area.GROUPS);\n <ymusrmgmt-pane-toggle-button\n align=\"start\"\n icon=\"left_panel_close\"\n [rotated]=\"!groupsVisible\"\n [tooltip]=\"\n (groupsVisible\n ? 'yuv.app.user-management.label.pane.hideGroups.tooltip'\n : 'yuv.app.user-management.label.pane.showGroups.tooltip'\n ) | translate\n \"\n (toggled)=\"split.toggleArea(Area.GROUPS)\"\n />\n @let detailsVisible = split.isAreaVisible(Area.DETAILS);\n <ymusrmgmt-pane-toggle-button\n icon=\"right_panel_close\"\n [rotated]=\"!detailsVisible\"\n [tooltip]=\"\n (detailsVisible\n ? 'yuv.app.user-management.label.pane.hideUserDetails.tooltip'\n : 'yuv.app.user-management.label.pane.showUserDetails.tooltip'\n ) | translate\n \"\n (toggled)=\"split.toggleArea(Area.DETAILS)\"\n />\n </ng-template>\n\n <!-- Enabled/disabled filtering isn't supported for group members - only offered while viewing \"All users\". -->\n <ng-template #userFilterActions>\n @if (!groupId) {\n <button\n mat-icon-button\n class=\"user-filter-trigger\"\n [class.active]=\"enabled !== undefined\"\n [matMenuTriggerFor]=\"userFilterMenu\"\n [matTooltip]=\"'yuv.app.user-management.label.filter.tooltip' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.label.filter.tooltip' | translate\"\n >\n <mat-icon>filter_list</mat-icon>\n </button>\n } @else if (group) {\n <button\n mat-icon-button\n (click)=\"openAddGroupMembersDialog(group)\"\n [matTooltip]=\"'yuv.app.user-management.groups.action.addMembers.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.groups.action.addMembers.label' | translate\"\n >\n <mat-icon>{{ icons.actionAddGroupMembers }}</mat-icon>\n </button>\n }\n </ng-template>\n\n <ymt-pane\n [busy]=\"busy()\"\n [yuvBusyOverlay]=\"busy()\"\n [topBarActions]=\"userListTopBarActions\"\n role=\"region\"\n [attr.aria-label]=\"listTitle\"\n >\n <ymt-pane-header\n [icon]=\"groupId ? 'group' : 'family_group'\"\n [title]=\"listTitle\"\n [actions]=\"userFilterActions\"\n >\n <ng-template #yuvPaneHeaderSubtitle>\n <span class=\"pane-subtitle\">\n <span>\n @if (groupId) {\n {{ group?.name }}\n } @else if (enabled === true) {\n {{ 'yuv.app.user-management.label.filter.enabled' | translate }}\n } @else if (enabled === false) {\n {{ 'yuv.app.user-management.label.filter.disabled' | translate }}\n } @else {\n {{ 'yuv.app.user-management.label.rail.allUsers' | translate }}\n }\n </span>\n @if (searchTerm(); as term) {\n <span class=\"search-hint\">{{\n 'yuv.app.user-management.label.search.filtered' | translate : { term }\n }}</span>\n }\n </span>\n </ng-template>\n </ymt-pane-header>\n <ymt-pane-body>\n <mat-table\n [dataSource]=\"dataSource()\"\n class=\"user-table mat-elevation-z8\"\n row\n (keydown)=\"onTableKeydown($event)\"\n >\n <ng-container matColumnDef=\"avatar\">\n <mat-header-cell *matHeaderCellDef />\n <mat-cell *matCellDef=\"let element\">\n <ymusrmgmt-user-avatar [user]=\"element\" />\n </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"user\">\n <mat-header-cell *matHeaderCellDef>{{\n 'yuv.app.user-management.users.property.user' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\">\n <div class=\"user-identity\">\n <span class=\"user-username-row\">\n <span class=\"user-username\">{{ element.username }}</span>\n </span>\n <span class=\"user-name-row\">\n <span class=\"user-name\">{{ element.firstName }} {{ element.lastName }}</span>\n </span>\n </div>\n </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"email\">\n <mat-header-cell *matHeaderCellDef>{{\n 'yuv.app.user-management.users.property.email' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\" class=\"user-email\">\n {{ element.email }}\n </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <mat-header-cell *matHeaderCellDef />\n <mat-cell\n *matCellDef=\"let element; let i = index\"\n class=\"user-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"rowMenu\"\n [matMenuTriggerData]=\"{ user: element }\"\n [matTooltip]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n [attr.aria-label]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n [tabIndex]=\"activeRowIndex() === i ? 0 : -1\"\n (click)=\"select(element)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n </mat-cell>\n </ng-container>\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row\n ymusrmgmt-focusable-row\n *matRowDef=\"let row; columns: displayedColumns; let i = index\"\n (click.single)=\"select(row); focusRow(i)\"\n [attr.tabindex]=\"activeRowIndex() === i ? 0 : -1\"\n (keydown.enter)=\"select(row)\"\n (keydown.space)=\"$event.preventDefault(); select(row)\"\n [class.selected-row]=\"activeRowIndex() === i\"\n [class.user-row--inactive]=\"!row.enabled\"\n class=\"user-row\"\n >\n </mat-row>\n <ng-template matNoDataRow>\n @if (!busy() && selectedGroupDetails(); as group) {\n <div class=\"empty-group-state\">\n <span class=\"empty-group-state-icon\"\n ><mat-icon aria-hidden=\"true\">group_off</mat-icon></span\n >\n <h3 class=\"empty-group-state-title\">\n {{ 'yuv.app.user-management.label.emptyGroup.title' | translate }}\n </h3>\n <p class=\"empty-group-state-description\">\n {{\n 'yuv.app.user-management.label.emptyGroup.description'\n | translate : { name: group.name }\n }}\n </p>\n <button ymtButton=\"primary\" (click)=\"openAddGroupMembersDialog(group)\">\n <mat-icon>{{ icons.actionAddGroupMembers }}</mat-icon>\n {{ 'yuv.app.user-management.groups.action.addMembers.label' | translate }}\n </button>\n </div>\n }\n </ng-template>\n </mat-table>\n </ymt-pane-body>\n <ymt-pane-footer>\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination.total\"\n [pageIndex]=\"pagination.page\"\n [pageSize]=\"pageSize()\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.aria-label]=\"\n 'yuv.app.user-management.users.label.navigation.pagination.aria' | translate\n \"\n (page)=\"onChangePage($event)\"\n ></mat-paginator>\n </ymt-pane-footer>\n </ymt-pane>\n </ng-template>\n\n <ng-template yuvSplitArea [size]=\"20\">\n <ng-template #userDetailsPaneTopBarActions>\n <ymusrmgmt-pane-toggle-button\n align=\"start\"\n icon=\"right_panel_close\"\n [tooltip]=\"'yuv.app.user-management.label.pane.hideUserDetails.tooltip' | translate\"\n (toggled)=\"split.hideArea(Area.DETAILS)\"\n />\n </ng-template>\n\n <ymusrmgmt-user-details\n [user]=\"selectedUser()\"\n [groupRoles]=\"selectedGroupRoles()\"\n [topBarActions]=\"userDetailsPaneTopBarActions\"\n (editUser)=\"editUser($event)\"\n />\n </ng-template>\n </yuv-split-view>\n\n @if (!split.isAreaVisible(Area.DETAILS)) {\n <ymusrmgmt-pane-gutter\n icon=\"right_panel_open\"\n [label]=\"'yuv.app.user-management.users.label.details.title' | translate\"\n [tooltip]=\"'yuv.app.user-management.label.pane.showUserDetails.tooltip' | translate\"\n (expand)=\"split.showArea(Area.DETAILS)\"\n />\n }\n</main>\n\n<mat-menu #rowMenu=\"matMenu\">\n <ng-template matMenuContent let-user=\"user\">\n @for (action of rowActionsFor(user); track action.id) {\n <button mat-menu-item [disabled]=\"action.disabled\" (click)=\"action.callback?.(action)\">\n <mat-icon>{{ action.icon }}</mat-icon>\n <span>{{ action.label }}</span>\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<mat-menu #userFilterMenu=\"matMenu\">\n <button mat-menu-item (click)=\"onEnabledFilterSelected(undefined)\">\n <mat-icon>{{\n enabledFilter() === undefined ? 'radio_button_checked' : 'radio_button_unchecked'\n }}</mat-icon>\n <span>{{ 'yuv.app.user-management.label.rail.allUsers' | translate }}</span>\n </button>\n <button mat-menu-item (click)=\"onEnabledFilterSelected(true)\">\n <mat-icon>{{\n enabledFilter() === true ? 'radio_button_checked' : 'radio_button_unchecked'\n }}</mat-icon>\n <span>{{ 'yuv.app.user-management.label.filter.enabled' | translate }}</span>\n </button>\n <button mat-menu-item (click)=\"onEnabledFilterSelected(false)\">\n <mat-icon>{{\n enabledFilter() === false ? 'radio_button_checked' : 'radio_button_unchecked'\n }}</mat-icon>\n <span>{{ 'yuv.app.user-management.label.filter.disabled' | translate }}</span>\n </button>\n</mat-menu>\n", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);--mat-table-header-headline-font: var(--ymt-font-headline-small-font);--mat-table-header-headline-size: var(--ymt-font-headline-small-size);--mat-table-header-headline-weight: var(--ymt-font-headline-small-weight);display:flex;flex-flow:column;height:100%;overflow:hidden}:host .usrmgmt-main__content{flex:1;min-height:0;display:flex;flex-flow:row;overflow:hidden;gap:var(--ymt-spacing-s);padding:var(--ymt-spacing-m)}:host .content-split{flex:1;min-width:0}:host ymt-pane-footer{--footer-block-padding: 0;--footer-inline-padding: 0}:host .paginator{flex:1;background:transparent}:host .pane-subtitle{display:inline-flex;align-items:baseline;gap:var(--ymt-spacing-2xs);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .user-filter-trigger.active{color:var(--ymt-primary)}:host .user-table{overflow:auto;height:100%}:host .user-row{height:3.75rem}:host .user-row:hover:not(.selected-row){background-color:var(--ymt-hover-background)}:host .user-row.user-row--inactive .user-username,:host .user-row.user-row--inactive .user-name,:host .user-row.user-row--inactive .user-email{opacity:.6}:host .mat-column-avatar{flex:0 0 var(--ymt-sizing-6xl)}:host .mat-column-user{flex:1.75 1 0;min-width:0}:host .mat-column-email{flex:1.25 1 0;min-width:0}:host .mat-column-actions{flex:0 0 4.5rem;justify-content:flex-end;padding-right:var(--ymt-sizing-xs)}:host .user-actions{display:flex}:host .user-identity{display:flex;flex-direction:column;gap:var(--ymt-spacing-3xs);line-height:1.25;min-width:0}:host .user-identity .user-name-row,:host .user-identity .user-username-row{display:flex;align-items:center;gap:.375rem;min-width:0}:host .user-identity .user-name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host .user-identity .user-username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .user-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .user-row.selected-row{background-color:var(--ymt-selection-background)}:host .user-table:focus-within .user-row.selected-row{background-color:var(--ymt-primary-container)}:host .user-table:focus-within .user-row.selected-row .user-name,:host .user-table:focus-within .user-row.selected-row .user-username,:host .user-table:focus-within .user-row.selected-row .user-email{color:var(--ymt-on-primary-container)}:host .user-table:focus-within .user-row.selected-row .user-actions button{--mat-icon-button-icon-color: var(--ymt-on-primary-container)}:host .empty-group-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l)}:host .empty-group-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .empty-group-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host .empty-group-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:32ch;margin:0}.usrmgmt-header-actions{display:flex;align-items:center;width:100%}.usrmgmt-header-actions .usrmgmt-settings-button{margin-inline-start:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SimpleSearchComponent, selector: "yuv-simple-search", inputs: ["query"], outputs: ["querySubmit", "clearInput", "targetSelectionChanged", "queryChange", "typeAggregation"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: UserDetailsComponent, selector: "ymusrmgmt-user-details", inputs: ["user", "groupRoles", "topBarActions"], outputs: ["editUser"] }, { kind: "component", type: GroupsComponent, selector: "ymusrmgmt-groups", inputs: ["selectedGroupId", "topBarActions"], outputs: ["groupSelected", "groupUpdated", "groupDeleted", "addMembersRequested"] }, { kind: "component", type: PaneToggleButtonComponent, selector: "ymusrmgmt-pane-toggle-button", inputs: ["icon", "tooltip", "rotated"], outputs: ["toggled"] }, { kind: "component", type: PaneGutterComponent, selector: "ymusrmgmt-pane-gutter", inputs: ["icon", "label", "tooltip", "flipLabel"], outputs: ["expand"] }, { kind: "component", type: UserAvatarComponent, selector: "ymusrmgmt-user-avatar", inputs: ["user", "showBadges"] }, { kind: "component", type: GlobalAddButtonComponent, selector: "ymusrmgmt-global-add-button", outputs: ["createUser", "createGroup"] }, { kind: "directive", type: FocusableRowDirective, selector: "[ymusrmgmt-focusable-row]" }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "component", type: i7.YmtPaneFooterComponent, selector: "ymt-pane-footer" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i8$1.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i9.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible", "lockSize"] }, { kind: "component", type: i9.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2629
2629
|
}
|
|
2630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
|
|
2631
2631
|
type: Component,
|
|
2632
2632
|
args: [{ selector: 'ymusrmgmt-root', imports: [
|
|
2633
2633
|
MatButtonModule,
|