@indigina/ui-kit 1.1.551 → 1.1.553

package/fesm2022/indigina-ui-kit.mjs

@@ -1,11 +1,11 @@
 import * as i1$7 from '@angular/common';
-import { NgClass, NgTemplateOutlet, CommonModule, DatePipe, AsyncPipe, DecimalPipe, Location, TitleCasePipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet, CommonModule, DatePipe, AsyncPipe, DecimalPipe, NgComponentOutlet, Location, TitleCasePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, Directive, model, output, viewChild, contentChild, TemplateRef, computed, effect, ElementRef, NgZone, Renderer2, forwardRef, signal, HostListener, ContentChild, NgModule, RendererFactory2, ViewChild, DOCUMENT, ViewContainerRef, DestroyRef, afterNextRender, contentChildren, linkedSignal, ContentChildren, viewChildren, QueryList, ViewChildren, Pipe, Injector, runInInjectionContext } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ButtonGroupModule, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
 import { HttpClient, HttpHeaders, HttpParams, HttpStatusCode } from '@angular/common/http';
-import { map, catchError, EMPTY, forkJoin, BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, combineLatest, tap, debounceTime, distinctUntilChanged, take, switchMap, of, finalize, throwError } from 'rxjs';
+import { map, catchError, EMPTY, forkJoin, BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, combineLatest, tap, debounceTime, distinctUntilChanged, take, switchMap, of, finalize, throwError, merge } from 'rxjs';
 import * as i1$1 from '@progress/kendo-angular-layout';
 import { ExpansionPanelComponent, ExpansionPanelModule, KENDO_LAYOUT, TileLayoutModule, DrawerComponent } from '@progress/kendo-angular-layout';
 import * as i1$3 from '@progress/kendo-angular-label';
@@ -52,11 +52,11 @@ import { StateToken, Action, State, Store, Selector, createSelector, provideStat
 import { __decorate } from 'tslib';
 import * as i2$1 from '@progress/kendo-angular-sortable';
 import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
+import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
+import { Workbook } from '@progress/kendo-ooxml';
 import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
 import { toODataString, filterBy } from '@progress/kendo-data-query';
 import { StateReset } from 'ngxs-reset-plugin';
-import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
-import { Workbook } from '@progress/kendo-ooxml';
 import { catchError as catchError$1, tap as tap$1, map as map$1 } from 'rxjs/operators';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
@@ -1049,6 +1049,7 @@ var KitFormErrorCode;
     KitFormErrorCode["Duplicate"] = "duplicate";
     KitFormErrorCode["MaxNumber"] = "max";
     KitFormErrorCode["MinNumber"] = "min";
+    KitFormErrorCode["PasswordsMismatch"] = "passwordsMismatch";
 })(KitFormErrorCode || (KitFormErrorCode = {}));
 
 class KitFormErrors {
@@ -1067,6 +1068,7 @@ class KitFormErrors {
                 minNumber: errors.min,
             }),
             [KitFormErrorCode.Duplicate]: () => this.translateService.instant('kit.formControlError.duplicate'),
+            [KitFormErrorCode.PasswordsMismatch]: () => this.translateService.instant('kit.formControlError.passwordsMismatch'),
         };
     }
     getErrors(control) {
@@ -1586,8 +1588,9 @@ class KitDropdownComponent {
      * Function that is called when dropdown list item selected
      */
     onItemSelect(item) {
-        this.selectedItem.set(item.value);
-        this.onChange(item.value);
+        const value = (this.isValuePrimitive() ? item.value : item);
+        this.selectedItem.set(value);
+        this.onChange(value);
         this.selected.emit(item);
         this.onTouched();
     }
@@ -6084,7 +6087,6 @@ class KitMultiselectComponent {
     }
     writeValue(value) {
         this.selectedItems = value;
-        this.onChange(value);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -8359,6 +8361,7 @@ class KitFileCardComponent {
         this.showViewFileButton = input(true, ...(ngDevMode ? [{ debugName: "showViewFileButton" }] : /* istanbul ignore next */ []));
         this.useUTCDateValues = input(true, ...(ngDevMode ? [{ debugName: "useUTCDateValues" }] : /* istanbul ignore next */ []));
         this.subTitle = input(...(ngDevMode ? [undefined, { debugName: "subTitle" }] : /* istanbul ignore next */ []));
+        this.subTitleColor = input(KitStatusLabelColor.ORANGE, ...(ngDevMode ? [{ debugName: "subTitleColor" }] : /* istanbul ignore next */ []));
         /**
          * An action which is emitted when view button clicked
          */
@@ -8434,9 +8437,9 @@ class KitFileCardComponent {
         return label ?? this.translateService.instant(defaultLabelKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFileCardComponent, isStandalone: true, selector: "kit-file-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, showViewFileButton: { classPropertyName: "showViewFileButton", publicName: "showViewFileButton", isSignal: true, isRequired: false, transformFunction: null }, useUTCDateValues: { classPropertyName: "useUTCDateValues", publicName: "useUTCDateValues", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFileCardComponent, isStandalone: true, selector: "kit-file-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, showViewFileButton: { classPropertyName: "showViewFileButton", publicName: "showViewFileButton", isSignal: true, isRequired: false, transformFunction: null }, useUTCDateValues: { classPropertyName: "useUTCDateValues", publicName: "useUTCDateValues", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, providers: [
             DatePipe,
-        ], queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n     [ngClass]=\"type() ? [type(), size()] : [size()]\">\n  <div class=\"kit-file-card-header\">\n    <div class=\"card-title\">{{ title() }}</div>\n    <div class=\"card-subtitle\">\n      <div class=\"card-type\">{{ label() }}</div>\n      <span>{{ subTitle() }}</span>\n    </div>\n  </div>\n\n  <kit-svg-icon class=\"kit-file-card-icon\"\n                [icon]=\"getFileIconByExtension(fileType())\">\n  </kit-svg-icon>\n\n  <div class=\"kit-file-card-info\">\n    <div class=\"info-item\">\n      @if (size() === kitFileCardSize.LARGE) {\n        <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n      }\n      <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n    </div>\n    @if (name()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ name() }}</div>\n      </div>\n    }\n    @if (formattedFileSize()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"kit-file-card-action\">\n    @if (showViewFileButton() && hasViewFileButton(fileType())) {\n      <kit-button class=\"action-button\"\n                  kitTooltip\n                  kitTooltipFilter=\".action-button\"\n                  [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n                  [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n                  [icon]=\"kitSvgIcon.EYE\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                  [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                  (clicked)=\"viewButtonClicked.emit()\"\n      ></kit-button>\n    }\n    <kit-button class=\"action-button\"\n                kitTooltip\n                kitTooltipFilter=\".action-button\"\n                [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n                [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n                [icon]=\"kitSvgIcon.DOWNLOAD\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                (clicked)=\"downloadButtonClicked.emit()\"\n    ></kit-button>\n  </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;gap:10px;align-items:center;justify-content:space-between}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 36px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .kit-file-card-action{flex-direction:column;align-items:flex-end;gap:4px;border-left:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n     [ngClass]=\"type() ? [type(), size()] : [size()]\">\n  <div class=\"kit-file-card-header\">\n    <div class=\"card-title\">{{ title() }}</div>\n    <div class=\"card-subtitle\">\n      <div class=\"card-type\">{{ label() }}</div>\n      @if (subTitle()) {\n        <kit-status-label [color]=\"subTitleColor()\">{{ subTitle() }}</kit-status-label>\n      }\n    </div>\n  </div>\n\n  <kit-svg-icon class=\"kit-file-card-icon\"\n                [icon]=\"getFileIconByExtension(fileType())\">\n  </kit-svg-icon>\n\n  <div class=\"kit-file-card-info\">\n    <div class=\"info-item\">\n      @if (size() === kitFileCardSize.LARGE) {\n        <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n      }\n      <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n    </div>\n    @if (name()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ name() }}</div>\n      </div>\n    }\n    @if (formattedFileSize()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"kit-file-card-action\">\n    @if (showViewFileButton() && hasViewFileButton(fileType())) {\n      <kit-button class=\"action-button\"\n                  kitTooltip\n                  kitTooltipFilter=\".action-button\"\n                  [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n                  [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n                  [icon]=\"kitSvgIcon.EYE\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                  [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                  (clicked)=\"viewButtonClicked.emit()\"\n      ></kit-button>\n    }\n    <kit-button class=\"action-button\"\n                kitTooltip\n                kitTooltipFilter=\".action-button\"\n                [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n                [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n                [icon]=\"kitSvgIcon.DOWNLOAD\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                (clicked)=\"downloadButtonClicked.emit()\"\n    ></kit-button>\n  </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;gap:10px;align-items:center;justify-content:space-between}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 36px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .kit-file-card-action{flex-direction:column;align-items:flex-end;gap:4px;border-left:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileCardComponent, decorators: [{
             type: Component,
@@ -8446,10 +8449,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         NgClass,
                         KitTooltipDirective,
                         TranslatePipe,
+                        KitStatusLabelComponent,
                     ], providers: [
                         DatePipe,
-                    ], template: "<div class=\"kit-file-card\"\n     [ngClass]=\"type() ? [type(), size()] : [size()]\">\n  <div class=\"kit-file-card-header\">\n    <div class=\"card-title\">{{ title() }}</div>\n    <div class=\"card-subtitle\">\n      <div class=\"card-type\">{{ label() }}</div>\n      <span>{{ subTitle() }}</span>\n    </div>\n  </div>\n\n  <kit-svg-icon class=\"kit-file-card-icon\"\n                [icon]=\"getFileIconByExtension(fileType())\">\n  </kit-svg-icon>\n\n  <div class=\"kit-file-card-info\">\n    <div class=\"info-item\">\n      @if (size() === kitFileCardSize.LARGE) {\n        <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n      }\n      <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n    </div>\n    @if (name()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ name() }}</div>\n      </div>\n    }\n    @if (formattedFileSize()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"kit-file-card-action\">\n    @if (showViewFileButton() && hasViewFileButton(fileType())) {\n      <kit-button class=\"action-button\"\n                  kitTooltip\n                  kitTooltipFilter=\".action-button\"\n                  [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n                  [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n                  [icon]=\"kitSvgIcon.EYE\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                  [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                  (clicked)=\"viewButtonClicked.emit()\"\n      ></kit-button>\n    }\n    <kit-button class=\"action-button\"\n                kitTooltip\n                kitTooltipFilter=\".action-button\"\n                [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n                [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n                [icon]=\"kitSvgIcon.DOWNLOAD\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                (clicked)=\"downloadButtonClicked.emit()\"\n    ></kit-button>\n  </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;gap:10px;align-items:center;justify-content:space-between}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 36px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .kit-file-card-action{flex-direction:column;align-items:flex-end;gap:4px;border-left:1px solid var(--ui-kit-color-grey-11)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], showViewFileButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewFileButton", required: false }] }], useUTCDateValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "useUTCDateValues", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], viewButtonClicked: [{ type: i0.Output, args: ["viewButtonClicked"] }], downloadButtonClicked: [{ type: i0.Output, args: ["downloadButtonClicked"] }], customMessages: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitFileCardMessagesComponent), { isSignal: true }] }] } });
+                    ], template: "<div class=\"kit-file-card\"\n     [ngClass]=\"type() ? [type(), size()] : [size()]\">\n  <div class=\"kit-file-card-header\">\n    <div class=\"card-title\">{{ title() }}</div>\n    <div class=\"card-subtitle\">\n      <div class=\"card-type\">{{ label() }}</div>\n      @if (subTitle()) {\n        <kit-status-label [color]=\"subTitleColor()\">{{ subTitle() }}</kit-status-label>\n      }\n    </div>\n  </div>\n\n  <kit-svg-icon class=\"kit-file-card-icon\"\n                [icon]=\"getFileIconByExtension(fileType())\">\n  </kit-svg-icon>\n\n  <div class=\"kit-file-card-info\">\n    <div class=\"info-item\">\n      @if (size() === kitFileCardSize.LARGE) {\n        <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n      }\n      <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n    </div>\n    @if (name()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ name() }}</div>\n      </div>\n    }\n    @if (formattedFileSize()) {\n      <div class=\"info-item\">\n        @if (size() === kitFileCardSize.LARGE) {\n          <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n        }\n        <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"kit-file-card-action\">\n    @if (showViewFileButton() && hasViewFileButton(fileType())) {\n      <kit-button class=\"action-button\"\n                  kitTooltip\n                  kitTooltipFilter=\".action-button\"\n                  [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n                  [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n                  [icon]=\"kitSvgIcon.EYE\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                  [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                  (clicked)=\"viewButtonClicked.emit()\"\n      ></kit-button>\n    }\n    <kit-button class=\"action-button\"\n                kitTooltip\n                kitTooltipFilter=\".action-button\"\n                [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n                [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n                [icon]=\"kitSvgIcon.DOWNLOAD\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"size() === kitFileCardSize.LARGE ? kitButtonKind.LARGE : kitButtonKind.SMALL\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                (clicked)=\"downloadButtonClicked.emit()\"\n    ></kit-button>\n  </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;gap:10px;align-items:center;justify-content:space-between}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 36px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .kit-file-card-action{flex-direction:column;align-items:flex-end;gap:4px;border-left:1px solid var(--ui-kit-color-grey-11)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], showViewFileButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewFileButton", required: false }] }], useUTCDateValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "useUTCDateValues", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], subTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitleColor", required: false }] }], viewButtonClicked: [{ type: i0.Output, args: ["viewButtonClicked"] }], downloadButtonClicked: [{ type: i0.Output, args: ["downloadButtonClicked"] }], customMessages: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitFileCardMessagesComponent), { isSignal: true }] }] } });
 
 var KitDataFieldState;
 (function (KitDataFieldState) {
@@ -9083,6 +9087,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 type: Input
             }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
+const KIT_USER_PATH = new InjectionToken('kitUserPath');
+
+const KIT_USER_APPLICATIONS_PATH = new InjectionToken('kitUserApplicationsPath');
+
+class KitUserApiService {
+    constructor() {
+        this.httpClient = inject(HttpClient);
+        this.basePath = inject(KIT_BASE_PATH);
+        this.userPath = inject(KIT_USER_PATH);
+        this.userApplicationsPath = inject(KIT_USER_APPLICATIONS_PATH);
+    }
+    getUserInfo() {
+        const url = `${this.basePath}/${this.userPath}`;
+        return this.httpClient.get(url);
+    }
+    getUserApplicationList() {
+        const url = `${this.basePath}/${this.userApplicationsPath}`;
+        return this.httpClient.get(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FetchUser {
+    static { this.type = '[User] Fetch'; }
+}
+
+const KIT_USER_STATE_TOKEN = new StateToken('user');
+let KitUserState = class KitUserState {
+    constructor() {
+        this.kitUserApiService = inject(KitUserApiService);
+    }
+    fetchUser(ctx) {
+        return this.kitUserApiService.getUserInfo().pipe(tap(user => ctx.setState({
+            data: user,
+            loading: false,
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserState }); }
+};
+__decorate([
+    Action(FetchUser)
+], KitUserState.prototype, "fetchUser", null);
+KitUserState = __decorate([
+    State({
+        name: KIT_USER_STATE_TOKEN,
+        defaults: {
+            data: null,
+            loading: true,
+        },
+    })
+], KitUserState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserState, decorators: [{
+            type: Injectable
+        }], propDecorators: { fetchUser: [] } });
+
+class KitGridCellService {
+    constructor() {
+        this.translateService = inject(TranslateService);
+        this.decimalPipe = inject(DecimalPipe);
+        this.datePipe = inject(DatePipe);
+        this.dateFormatConfig = inject(KIT_GRID_CELL_DATE_FORMAT_CONFIG, { optional: true });
+        this.store = inject(Store);
+        this.userState = this.store.selectSignal(KIT_USER_STATE_TOKEN)();
+        const dateFormatConfig = this.dateFormatConfig;
+        this.dateFormat = dateFormatConfig?.dateFormat ?? KIT_DATE_FORMAT;
+        this.dateTimeFormat = dateFormatConfig?.dateTimeFormat ?? KIT_DATETIME_FORMAT_LONG;
+    }
+    createCellValue(columnType, columnField, dataItem, translationMap = {}, defaultValue = '', valueTransforms = {}) {
+        const rawValue = this.getCellValue(dataItem, columnField);
+        const value = valueTransforms[columnField]?.(rawValue) ?? rawValue;
+        if (columnField in translationMap && value != null && value !== '') {
+            return this.translateService.instant(translationMap[columnField](value)) ?? defaultValue;
+        }
+        switch (columnType) {
+            case 'number':
+                return this.decimalPipe.transform(value) ?? defaultValue;
+            case 'plainNumber':
+                return value || defaultValue;
+            case 'date':
+                return this.datePipe.transform(value, this.dateFormat, 'UTC') ?? defaultValue;
+            case 'dateTime':
+                return this.datePipe.transform(value, this.dateTimeFormat, 'UTC') ?? defaultValue;
+            case 'dateLocal':
+                return this.datePipe.transform(value, this.dateFormat) ?? defaultValue;
+            case 'dateTimeLocal':
+                return this.datePipe.transform(value, this.dateTimeFormat) ?? defaultValue;
+            case 'dateZone':
+                return value ? formatInTimeZone(value, this.userState.data?.namedTimeZone ?? 'UTC', this.dateFormat) : defaultValue;
+            case 'dateTimeZone':
+                return value ? formatInTimeZone(value, this.userState.data?.namedTimeZone ?? 'UTC', this.dateTimeFormat) : defaultValue;
+            case 'boolean':
+                return this.translateService.instant(value ? 'common.yes' : 'common.no');
+            default:
+                return value || defaultValue;
+        }
+    }
+    getCellValue(dataItem, field) {
+        let value = dataItem[field];
+        if (!value) {
+            value = this.getNestedGridCellValue(dataItem, field);
+        }
+        return value;
+    }
+    getNestedGridCellValue(dataItem, field) {
+        const value = field.split('.').reduce((acc, key) => acc !== null && typeof acc === 'object' && key in acc
+            ? acc[key]
+            : undefined, dataItem);
+        return value === 0 ? 0 : value || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridCellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridCellService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridCellService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class KitExcelExportService {
+    constructor() {
+        this.translateService = inject(TranslateService);
+        this.store = inject(Store);
+        this.gridCellService = inject(KitGridCellService);
+    }
+    async export(data, exportedColumns, exportedFileName, translationMap, valueTransforms = {}) {
+        const userTimezone = this.store.selectSnapshot(KIT_USER_STATE_TOKEN).data?.namedTimeZone ?? 'UTC';
+        const workbook = { sheets: [{ rows: [], columns: [] }] };
+        const columns = exportedColumns.map(({ title, field }) => ({
+            value: this.translateService.instant(title || field),
+            background: '#7a7a7a',
+            color: '#fff',
+            width: 170,
+        }));
+        workbook.sheets[0].rows = this.getExportedExcelRows(columns, data, exportedColumns, translationMap, userTimezone, valueTransforms);
+        workbook.sheets[0].columns = columns;
+        const dataUrl = await new Workbook(workbook).toDataURL();
+        return saveAs(dataUrl, `${exportedFileName}.xlsx`);
+    }
+    getExportedExcelRows(columns, data, gridColumns, translationMap, userTimezone, valueTransforms = {}) {
+        const rows = [{ cells: columns, type: 'header' }];
+        for (const row of data) {
+            const rowCells = gridColumns.map((column) => {
+                const rawValue = this.gridCellService.getCellValue(row, column.field);
+                const value = valueTransforms[column.field]?.(rawValue) ?? rawValue;
+                switch (column.type) {
+                    case 'number': {
+                        return { value: (value ?? undefined) };
+                    }
+                    case 'time':
+                        return { format: column.excelFormat, value: this.timeStringToExcelFraction(value) };
+                    case 'date':
+                    case 'dateTime': {
+                        const format = column.excelFormat || (column.type === 'date' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
+                        const dateValue = value ? this.truncateToSeconds(this.convertToUtcDate(value)) : undefined;
+                        return { format, value: dateValue };
+                    }
+                    case 'dateLocal':
+                    case 'dateTimeLocal': {
+                        const format = column.excelFormat || (column.type === 'dateLocal' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
+                        const dateValue = value ? this.truncateToSeconds(new Date(value)) : undefined;
+                        return { format, value: dateValue };
+                    }
+                    case 'dateZone':
+                    case 'dateTimeZone': {
+                        const format = column.excelFormat || (column.type === 'dateZone' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
+                        const dateValue = value
+                            ? this.truncateToSeconds(toZonedTime(new Date(value), userTimezone))
+                            : undefined;
+                        return { format, value: dateValue };
+                    }
+                }
+                return { value: this.gridCellService.createCellValue(column.type, column.field, row, translationMap, '', valueTransforms) };
+            });
+            rows.push({ cells: rowCells, type: 'data' });
+        }
+        return rows;
+    }
+    timeStringToExcelFraction(time) {
+        if (!time) {
+            return '';
+        }
+        const [hoursStr, minutesStr,] = time.split(':');
+        const hours = Number.parseInt(hoursStr, 10);
+        const minutes = Number.parseInt(minutesStr, 10);
+        return (hours * 60 + minutes) / (24 * 60);
+    }
+    convertToUtcDate(dateString) {
+        const date = new Date(dateString);
+        const timezoneOffset = date.getTimezoneOffset();
+        return new Date(date.getTime() + timezoneOffset * 60 * 1000);
+    }
+    truncateToSeconds(date) {
+        const result = new Date(date);
+        result.setMilliseconds(0);
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService, decorators: [{
+            type: Injectable
+        }] });
+
 class KitCardDetailsComponent {
     constructor() {
         this.router = inject(Router);
@@ -9766,16 +9979,6 @@ const kitShouldResetGridState = ({ stateColumns, availableColumns, }) => {
     return !stateTitles.every(field => availableTitles.has(field));
 };
 
-var KitUsersSettingsServerErrorTitle;
-(function (KitUsersSettingsServerErrorTitle) {
-    KitUsersSettingsServerErrorTitle["PASSWORD_TOO_WEAK"] = "Your password is too weak.";
-    KitUsersSettingsServerErrorTitle["INVALID_USER_NAME"] = "You have specified invalid UserName.";
-})(KitUsersSettingsServerErrorTitle || (KitUsersSettingsServerErrorTitle = {}));
-const kitUsersSettingsErrorTranslationMap = {
-    [KitUsersSettingsServerErrorTitle.PASSWORD_TOO_WEAK]: 'kit.usersSettings.details.passwordTooWeak',
-    [KitUsersSettingsServerErrorTitle.INVALID_USER_NAME]: 'kit.usersSettings.details.userNameInvalid',
-};
-
 class KitFetchUsersSettings extends KitAbstractPayloadAction {
     static { this.type = '[KitUsersSettings] Fetch Users'; }
 }
@@ -9792,6 +9995,12 @@ class KitDeleteUsersSettingsUser extends KitAbstractPayloadAction {
     static { this.type = '[KitUsersSettings] Delete User'; }
 }
 
+const kitApiResponseDefaultEntities = () => ({
+    data: [],
+    total: 0,
+    loading: true,
+});
+
 const kitBuildHttpParams = (obj) => {
     let params = new HttpParams();
     Object.entries(obj).forEach(([key, value,]) => {
@@ -9803,71 +10012,96 @@ const kitBuildHttpParams = (obj) => {
     return params;
 };
 
-class KitUsersSettingsService {
+class KitHttpErrorHandlerService {
     constructor() {
-        this.httpClient = inject(HttpClient);
-        this.baseUrl = `${trimTrailingSlash(inject(KIT_BASE_PATH))}/`;
-    }
-    fetchUsers(state) {
-        const url = `${this.baseUrl}users`;
-        const { $skip, $top, $orderby, $filter } = this.getRequestParams(state);
-        return this.httpClient.get(url, { params: kitBuildHttpParams({ $skip, $top, $orderby, $filter }) });
-    }
-    fetchUserDetails(id) {
-        const url = `${this.baseUrl}users/${id}`;
-        return this.httpClient.get(url);
-    }
-    updateUserDetails(payload) {
-        const url = `${this.baseUrl}users/${payload.id}`;
-        return this.httpClient.put(url, payload);
-    }
-    createUser(payload) {
-        const url = `${this.baseUrl}users`;
-        return this.httpClient.post(url, payload);
-    }
-    deleteUser(id) {
-        const url = `${this.baseUrl}users/${id}`;
-        return this.httpClient.delete(url);
-    }
-    getRequestParams(state) {
-        const $skip = state.skip && state.skip > 0 ? state.skip : undefined;
-        const $top = state.take;
-        const $orderby = state.sort?.length
-            ? state.sort.map(sort => `${sort.field} ${sort.dir ?? KitSortDirection.ASC}`).join(',')
-            : 'name asc';
-        const $filter = state.filter
-            ? kitDataStateToODataString({ filter: state.filter }).replace('$filter=', '')
-            : undefined;
-        return {
-            $skip,
-            $top,
-            $orderby,
-            $filter,
-        };
+        this.kitNotificationService = inject(KitNotificationService);
+        this.translateService = inject(TranslateService);
+        this.router = inject(Router);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService, decorators: [{
-            type: Injectable
-        }] });
+    handleServerError(error) {
+        if (error.error instanceof ErrorEvent) {
+            this.showErrorNotification(`${this.translateService.instant('kit.http.clientError')} ${error.error.message}`);
+            return throwError(() => error);
+        }
+        switch (error.status) {
+            case HttpStatusCode.Unauthorized:
+                this.showErrorNotification(this.translateService.instant('kit.http.unauthorized'));
+                break;
+            case HttpStatusCode.Forbidden:
+                this.showErrorNotification(this.translateService.instant('kit.http.forbidden'));
+                this.router.navigate(['forbidden']);
+                break;
+            case HttpStatusCode.NotFound:
+                this.showErrorNotification(this.translateService.instant('kit.http.notFound'));
+                break;
+            case HttpStatusCode.BadRequest:
+                this.showErrorNotification(`${this.translateService.instant('kit.http.validationError')} ${error.error?.title ?? ''}`);
+                break;
+            default:
+                if (error.status >= HttpStatusCode.InternalServerError) {
+                    this.showErrorNotification(`${this.translateService.instant('kit.http.serverError')} ${error.error?.title ?? ''}`);
+                }
+        }
+        return throwError(() => error);
+    }
+    showSuccessNotification(message) {
+        this.kitNotificationService.addNotification(KitNotificationType.SUCCESS, message, true, 3000);
+    }
+    showErrorNotification(message) {
+        this.kitNotificationService.addNotification(KitNotificationType.ERROR, message);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitHttpErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitHttpErrorHandlerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitHttpErrorHandlerService, decorators: [{
+            type: Injectable
+        }] });
 
-const kitApiResponseDefaultEntities = () => ({
-    data: [],
-    total: 0,
-    loading: true,
-});
+class KitUsersService {
+    constructor() {
+        this.httpClient = inject(HttpClient);
+        this.baseUrl = `${trimTrailingSlash(inject(KIT_BASE_PATH))}/`;
+        this.kitHttpErrorHandlerService = inject(KitHttpErrorHandlerService);
+        this.translateService = inject(TranslateService);
+    }
+    fetchUsers(state) {
+        const url = `${this.baseUrl}users`;
+        const { skip, take, sort, filter } = state;
+        return this.httpClient.get(url, { params: kitBuildHttpParams({ $skip: skip, $top: take, $orderby: kitBuildSortString(sort), $filter: kitBuildOdataFilter(filter) }) }).pipe(catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
+    }
+    fetchUserDetails(id) {
+        const url = `${this.baseUrl}users/${id}`;
+        return this.httpClient.get(url).pipe(catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
+    }
+    updateUserDetails(payload) {
+        const url = `${this.baseUrl}users/${payload.id}`;
+        return this.httpClient.put(url, payload).pipe(tap(() => this.kitHttpErrorHandlerService.showSuccessNotification(this.translateService.instant('kit.http.savedSuccessfully'))), catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
+    }
+    createUser(payload) {
+        const url = `${this.baseUrl}users`;
+        return this.httpClient.post(url, payload).pipe(tap(() => this.kitHttpErrorHandlerService.showSuccessNotification(this.translateService.instant('kit.http.savedSuccessfully'))), catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
+    }
+    deleteUser(id) {
+        const url = `${this.baseUrl}users/${id}`;
+        return this.httpClient.delete(url).pipe(tap(() => this.kitHttpErrorHandlerService.showSuccessNotification(this.translateService.instant('kit.http.removedSuccessfully'))), catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersService, decorators: [{
+            type: Injectable
+        }] });
 
 const KIT_USERS_SETTINGS_STATE_TOKEN = new StateToken('usersSettings');
 let KitUsersSettingsState = class KitUsersSettingsState {
     constructor() {
-        this.kitUsersSettingsService = inject(KitUsersSettingsService);
+        this.kitUsersService = inject(KitUsersService);
     }
     fetchUsers(ctx, action) {
         ctx.patchState({
             users: { ...ctx.getState().users, loading: true },
         });
-        return this.kitUsersSettingsService.fetchUsers(action.payload).pipe(tap(data => {
+        return this.kitUsersService.fetchUsers(action.payload).pipe(tap(data => {
             ctx.patchState({
                 users: {
                     loading: false,
@@ -9890,7 +10124,7 @@ let KitUsersSettingsState = class KitUsersSettingsState {
         ctx.patchState({
             userDetails: { loading: true, data: null },
         });
-        return this.kitUsersSettingsService.fetchUserDetails(action.payload).pipe(tap(data => {
+        return this.kitUsersService.fetchUserDetails(action.payload).pipe(tap(data => {
             ctx.patchState({
                 userDetails: {
                     loading: false,
@@ -9911,7 +10145,7 @@ let KitUsersSettingsState = class KitUsersSettingsState {
                 loading: true,
             },
         });
-        return this.kitUsersSettingsService.updateUserDetails(action.payload).pipe(tap(data => {
+        return this.kitUsersService.updateUserDetails(action.payload).pipe(tap(data => {
             const state = ctx.getState();
             ctx.patchState({
                 users: {
@@ -9934,34 +10168,30 @@ let KitUsersSettingsState = class KitUsersSettingsState {
         }));
     }
     createUser(ctx, action) {
-        ctx.patchState({
-            users: {
-                ...ctx.getState().users,
-                loading: true,
-            },
-        });
-        return this.kitUsersSettingsService.createUser(action.payload).pipe(finalize(() => {
+        return this.kitUsersService.createUser(action.payload).pipe(tap(data => {
             ctx.patchState({
-                users: {
-                    ...ctx.getState().users,
+                userDetails: {
                     loading: false,
+                    data,
                 },
             });
         }));
     }
     deleteUser(ctx, action) {
-        return this.kitUsersSettingsService.deleteUser(action.payload).pipe(tap(() => {
+        return this.kitUsersService.deleteUser(action.payload).pipe(tap(() => {
             const state = ctx.getState();
-            const usersData = state.users.data ?? [];
+            const filteredData = state.users.data.filter(user => user.id !== action.payload);
+            const wasDeleted = filteredData.length < state.users.data.length;
             ctx.patchState({
                 users: {
-                    ...state.users,
-                    data: usersData.filter(user => user.id !== action.payload),
-                    total: Math.max((state.users.total ?? usersData.length) - 1, 0),
+                    loading: false,
+                    data: filteredData,
+                    total: wasDeleted ? (state.users.total ?? 1) - 1 : state.users.total,
+                },
+                userDetails: {
+                    data: null,
+                    loading: false,
                 },
-                userDetails: state.userDetails.data?.id === action.payload
-                    ? { ...state.userDetails, data: null }
-                    : state.userDetails,
             });
         }));
     }
@@ -9969,10 +10199,10 @@ let KitUsersSettingsState = class KitUsersSettingsState {
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsState }); }
 };
 __decorate([
-    Action(KitFetchUsersSettings)
+    Action(KitFetchUsersSettings, { cancelUncompleted: true })
 ], KitUsersSettingsState.prototype, "fetchUsers", null);
 __decorate([
-    Action(KitFetchUsersSettingsDetails)
+    Action(KitFetchUsersSettingsDetails, { cancelUncompleted: true })
 ], KitUsersSettingsState.prototype, "fetchUserDetails", null);
 __decorate([
     Action(KitUpdateUsersSettingsDetails)
@@ -10006,10 +10236,6 @@ var KitUsersSettingsDetailsField;
     KitUsersSettingsDetailsField["MFA"] = "mfaEnabled";
     KitUsersSettingsDetailsField["FORCE_PASSWORD"] = "forcePassword";
 })(KitUsersSettingsDetailsField || (KitUsersSettingsDetailsField = {}));
-const kitUsersSettingsDetailsFormServerErrorFieldMap = {
-    [KitUsersSettingsServerErrorTitle.PASSWORD_TOO_WEAK]: KitUsersSettingsDetailsField.PASSWORD,
-    [KitUsersSettingsServerErrorTitle.INVALID_USER_NAME]: KitUsersSettingsDetailsField.USER_NAME,
-};
 
 class KitUsersSettingsDetailsFormComponent {
     constructor() {
@@ -10017,7 +10243,8 @@ class KitUsersSettingsDetailsFormComponent {
         this.store = inject(Store);
         this.kitFormErrors = inject(KitFormErrors);
         this.destroyRef = inject(DestroyRef);
-        this.isCreatingNewUser = input(false, ...(ngDevMode ? [{ debugName: "isCreatingNewUser" }] : /* istanbul ignore next */ []));
+        this.isCreateMode = input(false, ...(ngDevMode ? [{ debugName: "isCreateMode" }] : /* istanbul ignore next */ []));
+        this.updated = output();
         this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
         this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
         this.kitUsersSettingsDetailsField = KitUsersSettingsDetailsField;
@@ -10033,55 +10260,61 @@ class KitUsersSettingsDetailsFormComponent {
             [KitUsersSettingsDetailsField.MFA]: this.formBuilder.nonNullable.control(false),
             [KitUsersSettingsDetailsField.FORCE_PASSWORD]: this.formBuilder.nonNullable.control(false),
         });
+        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+        this.lastPatchedUserId = null;
         effect(() => {
-            if (!this.isCreatingNewUser()) {
+            if (!this.isCreateMode()) {
                 const { data: userDetails, loading } = this.userDetails();
                 loading ? this.form.disable({ emitEvent: false }) : this.form.enable({ emitEvent: false });
-                if (userDetails) {
+                if (userDetails && userDetails.id !== this.lastPatchedUserId) {
+                    this.lastPatchedUserId = userDetails.id;
                     this.patchForm(userDetails);
                 }
             }
         });
     }
     ngOnInit() {
-        if (this.isCreatingNewUser()) {
+        if (this.isCreateMode()) {
             this.enablePasswordControl();
         }
     }
-    getTextboxState(textboxName) {
-        const control = this.form.get(textboxName);
-        return control?.touched && control?.invalid && control?.dirty
-            ? KitTextboxState.ERROR
-            : KitTextboxState.DEFAULT;
+    getTextboxState(form, controlName) {
+        return this.kitFormErrors.getErrors(form.controls[controlName]).length && KitTextboxState.ERROR || KitTextboxState.DEFAULT;
     }
-    getTextboxMessageText(textboxName) {
-        const control = this.form.get(textboxName);
-        if (!control || !(control.touched || control.dirty)) {
-            return undefined;
-        }
-        if (control.errors?.['serverError']) {
-            return control.errors['serverError'];
-        }
-        return this.kitFormErrors.getErrors(control)[0];
+    getFormErrorMessages(form, controlName) {
+        return this.kitFormErrors.getErrors(form.controls[controlName]).join('. ');
     }
     submit() {
-        return this.isCreatingNewUser()
+        this.isSaving.set(true);
+        return this.isCreateMode()
             ? this.createUser()
             : this.updateUser();
     }
     createUser() {
-        return this.store.dispatch(new KitCreateUsersSettingsUser(this.form.getRawValue())).pipe(takeUntilDestroyed(this.destroyRef), catchError(error => this.handleSubmitError(error)));
+        return this.store.dispatch(new KitCreateUsersSettingsUser(this.form.getRawValue())).pipe(takeUntilDestroyed(this.destroyRef), map(() => this.userDetails().data), catchError(() => {
+            this.form.setErrors({ serverError: true });
+            return EMPTY;
+        }), finalize(() => this.isSaving.set(false)));
     }
     updateUser() {
         const id = this.userDetails().data?.id;
         if (!id) {
+            this.isSaving.set(false);
             return EMPTY;
         }
         const { password, forcePassword, ...userDetails } = this.form.getRawValue();
         return this.store.dispatch(new KitUpdateUsersSettingsDetails({
             ...userDetails,
             id,
-        })).pipe(takeUntilDestroyed(this.destroyRef), catchError(error => this.handleSubmitError(error)));
+        })).pipe(takeUntilDestroyed(this.destroyRef), map(() => this.userDetails().data), tap(updatedUser => {
+            this.form.markAsPristine();
+            if (updatedUser) {
+                this.updated.emit(updatedUser);
+            }
+        }), catchError(() => {
+            this.form.setErrors({ serverError: true });
+            return EMPTY;
+        }), finalize(() => this.isSaving.set(false)));
     }
     enablePasswordControl() {
         const passwordControl = this.form.get(KitUsersSettingsDetailsField.PASSWORD);
@@ -10100,23 +10333,8 @@ class KitUsersSettingsDetailsFormComponent {
             [KitUsersSettingsDetailsField.FORCE_PASSWORD]: false,
         }, { emitEvent: false });
     }
-    handleSubmitError(error) {
-        this.applyServerError(error?.error?.title ?? '');
-        return EMPTY;
-    }
-    applyServerError(title) {
-        const field = kitUsersSettingsDetailsFormServerErrorFieldMap[title];
-        const translationKey = kitUsersSettingsErrorTranslationMap[title];
-        const control = this.form.get(field);
-        if (!field || !translationKey || !control) {
-            return;
-        }
-        control.setErrors({ serverError: translationKey });
-        control.markAsTouched();
-        control.markAsDirty();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsDetailsFormComponent, isStandalone: true, selector: "kit-users-settings-details-form", inputs: { isCreatingNewUser: { classPropertyName: "isCreatingNewUser", publicName: "isCreatingNewUser", isSignal: true, isRequired: false, transformFunction: null } }, providers: [KitFormErrors], ngImport: i0, template: "<form class=\"kit-user-settings-details-form\"\n      [formGroup]=\"form\">\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.USER_NAME\"\n               [label]=\"'kit.usersSettings.details.loginId' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.USER_NAME)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.USER_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.FIRST_NAME\"\n               [label]=\"'kit.usersSettings.details.firstName' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.FIRST_NAME)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.FIRST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.LAST_NAME\"\n               [label]=\"'kit.usersSettings.details.lastName' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.LAST_NAME)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.LAST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.EMAIL\"\n               [label]=\"'kit.usersSettings.details.email' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.EMAIL)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.EMAIL) | translate\"></kit-textbox>\n  @if (isCreatingNewUser()) {\n    <kit-textbox type=\"password\"\n                 [formControlName]=\"kitUsersSettingsDetailsField.PASSWORD\"\n                 [label]=\"'kit.usersSettings.details.password' | translate\"\n                 [state]=\"getTextboxState(kitUsersSettingsDetailsField.PASSWORD)\"\n                 [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.PASSWORD) | translate\"></kit-textbox>\n  }\n  <div class=\"kit-user-settings-details-form-toggles\">\n    <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                [formControlName]=\"kitUsersSettingsDetailsField.MFA\"\n                [label]=\"'kit.usersSettings.details.mfa' | translate\"></kit-toggle>\n    @if (isCreatingNewUser()) {\n      <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                  [formControlName]=\"kitUsersSettingsDetailsField.FORCE_PASSWORD\"\n                  [label]=\"'kit.usersSettings.details.forcePassword' | translate\"></kit-toggle>\n    }\n  </div>\n</form>\n", styles: [".kit-user-settings-details-form{display:flex;flex-direction:column;gap:10px;width:100%}.kit-user-settings-details-form-toggles{display:flex;width:100%;gap:20px}.kit-user-settings-details-form-toggle{width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between;width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-form-label{margin:0}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsDetailsFormComponent, isStandalone: true, selector: "kit-users-settings-details-form", inputs: { isCreateMode: { classPropertyName: "isCreateMode", publicName: "isCreateMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updated: "updated" }, providers: [KitFormErrors], ngImport: i0, template: "<form class=\"kit-user-settings-details-form\"\n      [formGroup]=\"form\">\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.USER_NAME\"\n               [label]=\"'kit.usersSettings.details.loginId' | translate\"\n               [readonly]=\"!isCreateMode()\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.USER_NAME)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.USER_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.FIRST_NAME\"\n               [label]=\"'kit.usersSettings.details.firstName' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.FIRST_NAME)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.FIRST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.LAST_NAME\"\n               [label]=\"'kit.usersSettings.details.lastName' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.LAST_NAME)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.LAST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.EMAIL\"\n               [label]=\"'kit.usersSettings.details.email' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.EMAIL)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.EMAIL) | translate\"></kit-textbox>\n  @if (isCreateMode()) {\n    <kit-textbox type=\"password\"\n                 [formControlName]=\"kitUsersSettingsDetailsField.PASSWORD\"\n                 [label]=\"'kit.usersSettings.details.password' | translate\"\n                 [showStateIcon]=\"false\"\n                 [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.PASSWORD)\"\n                 [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.PASSWORD) | translate\"></kit-textbox>\n  }\n  <div class=\"kit-user-settings-details-form-toggles\">\n    <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                [formControlName]=\"kitUsersSettingsDetailsField.MFA\"\n                [label]=\"'kit.usersSettings.details.mfa' | translate\"></kit-toggle>\n    @if (isCreateMode()) {\n      <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                  [formControlName]=\"kitUsersSettingsDetailsField.FORCE_PASSWORD\"\n                  [label]=\"'kit.usersSettings.details.forcePassword' | translate\"></kit-toggle>\n    }\n  </div>\n</form>\n", styles: [".kit-user-settings-details-form{display:flex;flex-direction:column;gap:10px;width:100%}.kit-user-settings-details-form-toggles{display:flex;width:100%;gap:20px}.kit-user-settings-details-form-toggle{width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between;width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-form-label{margin:0}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsFormComponent, decorators: [{
             type: Component,
@@ -10125,49 +10343,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitTextboxComponent,
                         ReactiveFormsModule,
                         KitToggleComponent,
-                    ], providers: [KitFormErrors], template: "<form class=\"kit-user-settings-details-form\"\n      [formGroup]=\"form\">\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.USER_NAME\"\n               [label]=\"'kit.usersSettings.details.loginId' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.USER_NAME)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.USER_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.FIRST_NAME\"\n               [label]=\"'kit.usersSettings.details.firstName' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.FIRST_NAME)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.FIRST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.LAST_NAME\"\n               [label]=\"'kit.usersSettings.details.lastName' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.LAST_NAME)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.LAST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.EMAIL\"\n               [label]=\"'kit.usersSettings.details.email' | translate\"\n               [state]=\"getTextboxState(kitUsersSettingsDetailsField.EMAIL)\"\n               [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.EMAIL) | translate\"></kit-textbox>\n  @if (isCreatingNewUser()) {\n    <kit-textbox type=\"password\"\n                 [formControlName]=\"kitUsersSettingsDetailsField.PASSWORD\"\n                 [label]=\"'kit.usersSettings.details.password' | translate\"\n                 [state]=\"getTextboxState(kitUsersSettingsDetailsField.PASSWORD)\"\n                 [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.PASSWORD) | translate\"></kit-textbox>\n  }\n  <div class=\"kit-user-settings-details-form-toggles\">\n    <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                [formControlName]=\"kitUsersSettingsDetailsField.MFA\"\n                [label]=\"'kit.usersSettings.details.mfa' | translate\"></kit-toggle>\n    @if (isCreatingNewUser()) {\n      <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                  [formControlName]=\"kitUsersSettingsDetailsField.FORCE_PASSWORD\"\n                  [label]=\"'kit.usersSettings.details.forcePassword' | translate\"></kit-toggle>\n    }\n  </div>\n</form>\n", styles: [".kit-user-settings-details-form{display:flex;flex-direction:column;gap:10px;width:100%}.kit-user-settings-details-form-toggles{display:flex;width:100%;gap:20px}.kit-user-settings-details-form-toggle{width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between;width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-form-label{margin:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isCreatingNewUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCreatingNewUser", required: false }] }] } });
+                    ], providers: [KitFormErrors], template: "<form class=\"kit-user-settings-details-form\"\n      [formGroup]=\"form\">\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.USER_NAME\"\n               [label]=\"'kit.usersSettings.details.loginId' | translate\"\n               [readonly]=\"!isCreateMode()\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.USER_NAME)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.USER_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.FIRST_NAME\"\n               [label]=\"'kit.usersSettings.details.firstName' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.FIRST_NAME)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.FIRST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.LAST_NAME\"\n               [label]=\"'kit.usersSettings.details.lastName' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.LAST_NAME)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.LAST_NAME) | translate\"></kit-textbox>\n  <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.EMAIL\"\n               [label]=\"'kit.usersSettings.details.email' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.EMAIL)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.EMAIL) | translate\"></kit-textbox>\n  @if (isCreateMode()) {\n    <kit-textbox type=\"password\"\n                 [formControlName]=\"kitUsersSettingsDetailsField.PASSWORD\"\n                 [label]=\"'kit.usersSettings.details.password' | translate\"\n                 [showStateIcon]=\"false\"\n                 [state]=\"getTextboxState(form, kitUsersSettingsDetailsField.PASSWORD)\"\n                 [messageText]=\"getFormErrorMessages(form, kitUsersSettingsDetailsField.PASSWORD) | translate\"></kit-textbox>\n  }\n  <div class=\"kit-user-settings-details-form-toggles\">\n    <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                [formControlName]=\"kitUsersSettingsDetailsField.MFA\"\n                [label]=\"'kit.usersSettings.details.mfa' | translate\"></kit-toggle>\n    @if (isCreateMode()) {\n      <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n                  [formControlName]=\"kitUsersSettingsDetailsField.FORCE_PASSWORD\"\n                  [label]=\"'kit.usersSettings.details.forcePassword' | translate\"></kit-toggle>\n    }\n  </div>\n</form>\n", styles: [".kit-user-settings-details-form{display:flex;flex-direction:column;gap:10px;width:100%}.kit-user-settings-details-form-toggles{display:flex;width:100%;gap:20px}.kit-user-settings-details-form-toggle{width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between;width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-form-label{margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isCreateMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCreateMode", required: false }] }], updated: [{ type: i0.Output, args: ["updated"] }] } });
 
-class KitUsersSettingsCreateDialogComponent {
+class KitUsersSettingsCreateDialogComponent extends DialogContentBase {
     constructor() {
+        const dialog = inject(DialogRef);
+        super(dialog);
         this.destroyRef = inject(DestroyRef);
         this.detailsForm = viewChild.required(KitUsersSettingsDetailsFormComponent);
-        this.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
-        this.kitDialogType = KitDialogType;
         this.kitButtonKind = KitButtonKind;
         this.kitButtonType = KitButtonType;
     }
     get isFormDisabled() {
-        return this.detailsForm().form.pristine || this.detailsForm().form.invalid;
+        return this.detailsForm().form.pristine || this.detailsForm().form.invalid || this.detailsForm().isSaving();
     }
     onConfirm() {
-        this.detailsForm().submit().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.opened.set(false);
+        this.detailsForm().submit().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(createdUser => {
+            this.dialog.close(createdUser);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsCreateDialogComponent, isStandalone: true, selector: "kit-users-settings-create-dialog", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, viewQueries: [{ propertyName: "detailsForm", first: true, predicate: KitUsersSettingsDetailsFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (opened()) {\n  <kit-dialog class=\"kit-user-settings-create-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n      {{ \"kit.usersSettings.createDialog.title\" | translate }}\n    </kit-dialog-titlebar>\n\n    <div class=\"kit-user-settings-create-dialog-content\">\n      <kit-users-settings-details-form [isCreatingNewUser]=\"true\" />\n    </div>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"opened.set(false)\" />\n      <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}\n", styles: [".kit-user-settings-create-dialog-content{padding:15px 20px;display:flex;flex-direction:column;gap:15px}\n"], dependencies: [{ kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["type", "backUrl"] }, { kind: "component", type: KitDialogTitlebarComponent, selector: "kit-dialog-titlebar", outputs: ["closed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsDetailsFormComponent, selector: "kit-users-settings-details-form", inputs: ["isCreatingNewUser"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitUsersSettingsCreateDialogComponent, isStandalone: true, selector: "kit-users-settings-create-dialog", viewQueries: [{ propertyName: "detailsForm", first: true, predicate: KitUsersSettingsDetailsFormComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kit-user-settings-create-dialog-content\">\n  <kit-users-settings-details-form [isCreateMode]=\"true\" />\n</div>\n\n<kit-dialog-actions>\n  <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [type]=\"kitButtonType.GHOST\"\n              (clicked)=\"dialog.close()\" />\n  <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [disabled]=\"isFormDisabled\"\n              (clicked)=\"onConfirm()\" />\n</kit-dialog-actions>\n", styles: [".kit-user-settings-create-dialog-content{display:flex;flex-direction:column;gap:15px}\n"], dependencies: [{ kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsDetailsFormComponent, selector: "kit-users-settings-details-form", inputs: ["isCreateMode"], outputs: ["updated"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-users-settings-create-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        KitDialogComponent,
-                        KitDialogTitlebarComponent,
                         KitDialogActionsComponent,
                         KitButtonComponent,
                         TranslatePipe,
                         KitUsersSettingsDetailsFormComponent,
-                    ], template: "@if (opened()) {\n  <kit-dialog class=\"kit-user-settings-create-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n      {{ \"kit.usersSettings.createDialog.title\" | translate }}\n    </kit-dialog-titlebar>\n\n    <div class=\"kit-user-settings-create-dialog-content\">\n      <kit-users-settings-details-form [isCreatingNewUser]=\"true\" />\n    </div>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"opened.set(false)\" />\n      <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}\n", styles: [".kit-user-settings-create-dialog-content{padding:15px 20px;display:flex;flex-direction:column;gap:15px}\n"] }]
-        }], propDecorators: { detailsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsDetailsFormComponent), { isSignal: true }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
+                    ], template: "<div class=\"kit-user-settings-create-dialog-content\">\n  <kit-users-settings-details-form [isCreateMode]=\"true\" />\n</div>\n\n<kit-dialog-actions>\n  <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [type]=\"kitButtonType.GHOST\"\n              (clicked)=\"dialog.close()\" />\n  <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [disabled]=\"isFormDisabled\"\n              (clicked)=\"onConfirm()\" />\n</kit-dialog-actions>\n", styles: [".kit-user-settings-create-dialog-content{display:flex;flex-direction:column;gap:15px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { detailsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsDetailsFormComponent), { isSignal: true }] }] } });
 
-var KitUsersSettingsEntitlementsField;
-(function (KitUsersSettingsEntitlementsField) {
-    KitUsersSettingsEntitlementsField["IDENTITY_TYPE"] = "identityType";
-    KitUsersSettingsEntitlementsField["PARTNERS"] = "partners";
-    KitUsersSettingsEntitlementsField["ALIAS"] = "alias";
-    KitUsersSettingsEntitlementsField["ROLES"] = "roles";
-})(KitUsersSettingsEntitlementsField || (KitUsersSettingsEntitlementsField = {}));
-;
+const KIT_GRID_COLUMN_WIDTH = 170;
+const KIT_GRID_PAGE_SIZE = 10;
+
+var KitPermissionTypes;
+(function (KitPermissionTypes) {
+    KitPermissionTypes["Create"] = "Create";
+    KitPermissionTypes["Delete"] = "Delete";
+    KitPermissionTypes["Edit"] = "Edit";
+    KitPermissionTypes["View"] = "View";
+    KitPermissionTypes["Set"] = "Set";
+    KitPermissionTypes["Use"] = "Use";
+})(KitPermissionTypes || (KitPermissionTypes = {}));
+const defaultUserRolesSort = [{ field: 'name', dir: 'asc' }];
+const exportedUserRoleColumns = [
+    kitBuildGridColumn('name', 'Name', 'string', false, false, KIT_GRID_COLUMN_WIDTH),
+];
+
+class KitSkeletonSectionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSkeletonSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitSkeletonSectionComponent, isStandalone: true, selector: "kit-skeleton-section", ngImport: i0, template: "<div class=\"kit-skeleton-section\">\n  <kit-skeleton [height]=\"24\"\n                [width]=\"250\"\n  ></kit-skeleton>\n\n  <kit-skeleton [height]=\"500\"\n  ></kit-skeleton>\n</div>\n", styles: [".kit-skeleton-section{display:flex;flex-direction:column;gap:30px}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSkeletonSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-skeleton-section', imports: [
+                        KitSkeletonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-skeleton-section\">\n  <kit-skeleton [height]=\"24\"\n                [width]=\"250\"\n  ></kit-skeleton>\n\n  <kit-skeleton [height]=\"500\"\n  ></kit-skeleton>\n</div>\n", styles: [".kit-skeleton-section{display:flex;flex-direction:column;gap:30px}\n"] }]
+        }] });
+
+const kitUsersSettingsConfig = new InjectionToken('KitUsersSettingsConfig', {
+    factory: () => {
+        return {
+            scopesComponent: null,
+        };
+    },
+});
 
 var KitUsersSettingsEntitlementType;
 (function (KitUsersSettingsEntitlementType) {
@@ -10181,7 +10424,7 @@ class KitUsersSettingsReferenceService {
         this.baseUrl = `${trimTrailingSlash(inject(KIT_BASE_PATH))}/`;
     }
     getPartners() {
-        const url = `${this.baseUrl}private/partners`;
+        const url = `${this.baseUrl}partners`;
         return this.httpClient.get(url, {
             params: kitBuildHttpParams({ $orderby: 'name' }),
         }).pipe(map((response) => response.data));
@@ -10219,10 +10462,11 @@ class KitUsersSettingsEntitlementsService {
     constructor() {
         this.httpClient = inject(HttpClient);
         this.baseUrl = `${trimTrailingSlash(inject(KIT_BASE_PATH))}/`;
+        this.kitHttpErrorHandlerService = inject(KitHttpErrorHandlerService);
     }
     getUserEntitlements(id) {
         const url = `${this.baseUrl}users/${id}/identities`;
-        return this.httpClient.get(url);
+        return this.httpClient.get(url).pipe(catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
     }
     getEntitlementDetails(userId, entitlementId) {
         const url = `${this.baseUrl}users/${userId}/identities/${entitlementId}`;
@@ -10230,15 +10474,15 @@ class KitUsersSettingsEntitlementsService {
     }
     createEntitlement(userId, payload) {
         const url = `${this.baseUrl}users/${userId}/identities`;
-        return this.httpClient.post(url, payload);
+        return this.httpClient.post(url, payload).pipe(catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
     }
     updateEntitlement(userId, entitlementId, payload) {
         const url = `${this.baseUrl}users/${userId}/identities/${entitlementId}`;
-        return this.httpClient.put(url, payload);
+        return this.httpClient.put(url, payload).pipe(catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
     }
     deleteEntitlement(userId, entitlementId) {
         const url = `${this.baseUrl}users/${userId}/identities/${entitlementId}`;
-        return this.httpClient.delete(url);
+        return this.httpClient.delete(url).pipe(catchError((err) => this.kitHttpErrorHandlerService.handleServerError(err)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsService }); }
@@ -10250,14 +10494,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 const KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN = new StateToken('usersSettingsEntitlements');
 let KitUsersSettingsEntitlementsState = class KitUsersSettingsEntitlementsState {
     constructor() {
-        this.kitUsersSettingsService = inject(KitUsersSettingsEntitlementsService);
+        this.kitUserService = inject(KitUsersSettingsEntitlementsService);
     }
     fetchUserEntitlements(ctx, action) {
         const currentState = ctx.getState();
         ctx.patchState({
             userEntitlements: { ...currentState.userEntitlements, loading: true },
         });
-        return this.kitUsersSettingsService.getUserEntitlements(action.payload).pipe(tap(data => {
+        return this.kitUserService.getUserEntitlements(action.payload).pipe(tap(data => {
             ctx.patchState({
                 userEntitlements: {
                     loading: false,
@@ -10275,7 +10519,7 @@ let KitUsersSettingsEntitlementsState = class KitUsersSettingsEntitlementsState
         ctx.patchState({
             userEntitlementDetails: { loading: true, data: null },
         });
-        return this.kitUsersSettingsService.getEntitlementDetails(action.payload.userId, action.payload.entitlementId).pipe(tap(data => {
+        return this.kitUserService.getEntitlementDetails(action.payload.userId, action.payload.entitlementId).pipe(tap(data => {
             ctx.patchState({
                 userEntitlementDetails: { loading: false, data },
             });
@@ -10287,7 +10531,7 @@ let KitUsersSettingsEntitlementsState = class KitUsersSettingsEntitlementsState
         }));
     }
     deleteEntitlement(ctx, action) {
-        return this.kitUsersSettingsService.deleteEntitlement(action.payload.userId, action.payload.entitlementId).pipe(tap(() => {
+        return this.kitUserService.deleteEntitlement(action.payload.userId, action.payload.entitlementId).pipe(tap(() => {
             const currentState = ctx.getState();
             ctx.patchState({
                 userEntitlements: {
@@ -10299,7 +10543,7 @@ let KitUsersSettingsEntitlementsState = class KitUsersSettingsEntitlementsState
         }));
     }
     createEntitlement(ctx, action) {
-        return this.kitUsersSettingsService.createEntitlement(action.payload.userId, action.payload.payload).pipe(tap(data => {
+        return this.kitUserService.createEntitlement(action.payload.userId, action.payload.payload).pipe(tap(data => {
             const currentState = ctx.getState();
             ctx.patchState({
                 userEntitlements: {
@@ -10318,8 +10562,13 @@ let KitUsersSettingsEntitlementsState = class KitUsersSettingsEntitlementsState
         }));
     }
     updateEntitlement(ctx, action) {
-        return this.kitUsersSettingsService.updateEntitlement(action.payload.userId, action.payload.entitlementId, action.payload.payload).pipe(tap(data => {
+        return this.kitUserService.updateEntitlement(action.payload.userId, action.payload.entitlementId, action.payload.payload).pipe(tap(data => {
+            const currentState = ctx.getState();
             ctx.patchState({
+                userEntitlements: {
+                    ...currentState.userEntitlements,
+                    data: currentState.userEntitlements.data.map(entitlement => (entitlement.id === data.id ? { ...entitlement, alias: data.alias, type: data.type } : entitlement)),
+                },
                 userEntitlementDetails: { loading: false, data },
             });
         }), catchError(err => {
@@ -10363,94 +10612,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Injectable
         }], propDecorators: { fetchUserEntitlements: [], fetchUserEntitlementDetails: [], deleteEntitlement: [], createEntitlement: [], updateEntitlement: [] } });
 
+var KitUsersSettingsEntitlementsField;
+(function (KitUsersSettingsEntitlementsField) {
+    KitUsersSettingsEntitlementsField["IDENTITY_TYPE"] = "identityType";
+    KitUsersSettingsEntitlementsField["PARTNERS"] = "partners";
+    KitUsersSettingsEntitlementsField["ALIAS"] = "alias";
+    KitUsersSettingsEntitlementsField["ROLES"] = "roles";
+    KitUsersSettingsEntitlementsField["SCOPES"] = "scopes";
+})(KitUsersSettingsEntitlementsField || (KitUsersSettingsEntitlementsField = {}));
+;
+
 class KitUsersSettingsEntitlementsFormComponent {
     constructor() {
         this.formBuilder = inject(FormBuilder);
         this.store = inject(Store);
-        this.translateService = inject(TranslateService);
+        this.kitFormErrors = inject(KitFormErrors);
         this.referenceService = inject(KitUsersSettingsReferenceService);
+        this.config = inject(kitUsersSettingsConfig);
         this.isCreating = input(false, ...(ngDevMode ? [{ debugName: "isCreating" }] : /* istanbul ignore next */ []));
         this.showIdentityType = input.required(...(ngDevMode ? [{ debugName: "showIdentityType" }] : /* istanbul ignore next */ []));
-        this.identityTypeItems = computed(() => [
-            {
-                text: this.translateService.instant('kit.common.selectValue'),
-                value: null,
-            },
-            ...Object.values(KitUsersSettingsEntitlementType).map((value) => ({ text: value, value })),
-        ], ...(ngDevMode ? [{ debugName: "identityTypeItems" }] : /* istanbul ignore next */ []));
+        this.identityTypeItems = computed(() => Object.values(KitUsersSettingsEntitlementType).map((value) => ({ text: value, value })), ...(ngDevMode ? [{ debugName: "identityTypeItems" }] : /* istanbul ignore next */ []));
         this.kitUsersSettingsEntitlementsField = KitUsersSettingsEntitlementsField;
         this.form = this.formBuilder.group({
-            [KitUsersSettingsEntitlementsField.IDENTITY_TYPE]: this.formBuilder.control(null),
+            [KitUsersSettingsEntitlementsField.IDENTITY_TYPE]: this.formBuilder.control(null, Validators.required),
             [KitUsersSettingsEntitlementsField.PARTNERS]: this.formBuilder.control(null),
             [KitUsersSettingsEntitlementsField.ALIAS]: this.formBuilder.nonNullable.control('', Validators.required),
             [KitUsersSettingsEntitlementsField.ROLES]: this.formBuilder.control(null, Validators.required),
+            [KitUsersSettingsEntitlementsField.SCOPES]: this.formBuilder.control(null),
         });
+        this.scopesComponent = this.config.scopesComponent ?? null;
         this.kitUsersSettingsEntitlementType = KitUsersSettingsEntitlementType;
         this.roleItems = computed(() => this.roles().map((role) => ({
             text: role.name,
             value: role.id.toString(),
         })), ...(ngDevMode ? [{ debugName: "roleItems" }] : /* istanbul ignore next */ []));
-        this.partnerItems = computed(() => {
-            const partnersItems = this.partners().map((partner) => ({
-                text: partner.name,
-                value: partner.id.toString(),
-            }));
-            return [
-                {
-                    text: this.translateService.instant('kit.common.selectValue'),
-                    value: null,
-                },
-                ...partnersItems,
-            ];
-        }, ...(ngDevMode ? [{ debugName: "partnerItems" }] : /* istanbul ignore next */ []));
-        this.userEntitlements = computed(() => this.store.selectSignal(KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN)().userEntitlements, ...(ngDevMode ? [{ debugName: "userEntitlements" }] : /* istanbul ignore next */ []));
-        this.userEntitlementDetails = computed(() => (this.store.selectSignal(KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN)().userEntitlementDetails.data), ...(ngDevMode ? [{ debugName: "userEntitlementDetails" }] : /* istanbul ignore next */ []));
-        this.userId = computed(() => (this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN)().userDetails.data?.id ?? null), ...(ngDevMode ? [{ debugName: "userId" }] : /* istanbul ignore next */ []));
+        this.partnerItems = computed(() => this.partners().map((partner) => ({
+            text: partner.name,
+            value: partner.id.toString(),
+        })), ...(ngDevMode ? [{ debugName: "partnerItems" }] : /* istanbul ignore next */ []));
+        this.loading = computed(() => !this.isCreating() && (this.entitlementsState().userEntitlementDetails.loading || this.userEntitlements().loading), ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.showPartnersControl = computed(() => this.creatingFormContext().identityType === KitUsersSettingsEntitlementType.USER && this.showIdentityType(), ...(ngDevMode ? [{ debugName: "showPartnersControl" }] : /* istanbul ignore next */ []));
+        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+        this.getTextboxState = getTextboxState;
+        this.entitlementsState = this.store.selectSignal(KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN);
+        this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
+        this.userEntitlements = computed(() => this.entitlementsState().userEntitlements, ...(ngDevMode ? [{ debugName: "userEntitlements" }] : /* istanbul ignore next */ []));
+        this.userEntitlementDetails = computed(() => this.entitlementsState().userEntitlementDetails.data, ...(ngDevMode ? [{ debugName: "userEntitlementDetails" }] : /* istanbul ignore next */ []));
+        this.userId = computed(() => this.usersSettingsState().userDetails.data?.id ?? null, ...(ngDevMode ? [{ debugName: "userId" }] : /* istanbul ignore next */ []));
         this.partners = signal([], ...(ngDevMode ? [{ debugName: "partners" }] : /* istanbul ignore next */ []));
         this.roles = signal([], ...(ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []));
+        this.creatingFormContext = toSignal(merge(this.form.controls[KitUsersSettingsEntitlementsField.IDENTITY_TYPE].valueChanges, this.form.controls[KitUsersSettingsEntitlementsField.PARTNERS].valueChanges).pipe(startWith(null), map(() => ({
+            identityType: this.form.controls[KitUsersSettingsEntitlementsField.IDENTITY_TYPE].value,
+            partnerId: this.form.controls[KitUsersSettingsEntitlementsField.PARTNERS].value,
+        }))), { initialValue: { identityType: null, partnerId: null } });
         effect(() => this.updateFormFields());
         effect(() => this.loadFormData());
-        effect(() => this.updateDisabledState());
+        effect(() => this.updatePartnersValidator());
     }
-    get showPartnersControl() {
-        return this.form.get(KitUsersSettingsEntitlementsField.IDENTITY_TYPE)?.value === KitUsersSettingsEntitlementType.USER &&
-            this.showIdentityType();
+    isControlInvalid(form, controlName) {
+        return !!this.kitFormErrors.getErrors(form.controls[controlName]).length;
+    }
+    getFormErrorMessages(form, controlName) {
+        return this.kitFormErrors.getErrors(form.controls[controlName]).join('. ');
     }
     submit() {
         const userId = this.userId();
         if (!userId) {
-            return;
+            return of(false);
         }
-        if (this.isCreating()) {
-            const payload = this.buildCreatePayload();
-            this.dispatchAndMarkPristine(new KitCreateUsersSettingsEntitlement({
-                userId,
-                payload,
-            }));
-            return;
+        const formValue = this.form.getRawValue();
+        const action = this.isCreating()
+            ? new KitCreateUsersSettingsEntitlement({ userId, payload: this.buildCreatePayload(formValue) })
+            : this.buildUpdateAction(userId, formValue);
+        if (!action) {
+            return of(false);
         }
-        this.submitUpdate(userId);
+        this.isSaving.set(true);
+        return this.dispatchAndMarkPristine(action);
     }
-    submitUpdate(userId) {
-        const formValue = this.form.getRawValue();
+    buildUpdateAction(userId, formValue) {
         const entitlementDetails = this.userEntitlementDetails();
         if (!entitlementDetails) {
-            return;
+            return null;
         }
-        const updatePayload = this.buildUpdatePayload(formValue, entitlementDetails, userId);
-        this.dispatchAndMarkPristine(new KitUpdateUsersSettingsEntitlement({
+        return new KitUpdateUsersSettingsEntitlement({
             userId,
             entitlementId: entitlementDetails.id,
-            payload: updatePayload,
-        }));
+            payload: this.buildUpdatePayload(formValue, entitlementDetails, userId),
+        });
     }
-    buildCreatePayload() {
-        const formValue = this.form.getRawValue();
+    buildCreatePayload(formValue) {
         return {
             alias: formValue.alias,
             type: formValue.identityType ?? undefined,
             roles: (formValue.roles ?? []).map(Number),
             partnerId: this.resolvePartnerId(formValue.identityType, formValue.partners),
+            scopes: formValue.scopes ?? undefined,
         };
     }
     buildUpdatePayload(formValue, entitlementDetails, userId) {
@@ -10461,7 +10718,7 @@ class KitUsersSettingsEntitlementsFormComponent {
             alias: formValue.alias,
             partnerId: this.resolvePartnerId(formValue.identityType, formValue.partners),
             roles: (formValue.roles ?? []).map(Number),
-            scopes: entitlementDetails.scopes,
+            scopes: formValue.scopes ?? entitlementDetails.scopes,
         };
     }
     resolvePartnerId(identityType, partnerId) {
@@ -10471,18 +10728,10 @@ class KitUsersSettingsEntitlementsFormComponent {
         return undefined;
     }
     dispatchAndMarkPristine(action) {
-        this.store.dispatch(action).pipe(tap(() => this.form.markAsPristine())).subscribe();
-    }
-    updateDisabledState() {
-        const disabled = (!this.userEntitlementDetails() || this.userEntitlements().loading) && !this.isCreating();
-        if (disabled) {
-            this.form.get(KitUsersSettingsEntitlementsField.ALIAS)?.disable();
-            this.form.get(KitUsersSettingsEntitlementsField.ROLES)?.disable();
-        }
-        else {
-            this.form.get(KitUsersSettingsEntitlementsField.ALIAS)?.enable();
-            this.form.get(KitUsersSettingsEntitlementsField.ROLES)?.enable();
-        }
+        return this.store.dispatch(action).pipe(tap(() => this.form.markAsPristine()), map(() => true), catchError(() => {
+            this.form.setErrors({ serverError: true });
+            return of(false);
+        }), finalize(() => this.isSaving.set(false)));
     }
     updateFormFields() {
         const userEntitlementDetails = this.userEntitlementDetails();
@@ -10492,12 +10741,23 @@ class KitUsersSettingsEntitlementsFormComponent {
                 [KitUsersSettingsEntitlementsField.PARTNERS]: userEntitlementDetails.partnerId?.toString() ?? null,
                 [KitUsersSettingsEntitlementsField.ALIAS]: userEntitlementDetails.alias,
                 [KitUsersSettingsEntitlementsField.ROLES]: userEntitlementDetails.roles?.map(String) ?? null,
+                [KitUsersSettingsEntitlementsField.SCOPES]: userEntitlementDetails.scopes ?? null,
             });
             this.form.get(KitUsersSettingsEntitlementsField.IDENTITY_TYPE)?.disable();
             this.form.get(KitUsersSettingsEntitlementsField.PARTNERS)?.disable();
             this.form.markAsPristine();
         }
     }
+    updatePartnersValidator() {
+        const partnersControl = this.form.get(KitUsersSettingsEntitlementsField.PARTNERS);
+        if (this.showPartnersControl()) {
+            partnersControl?.addValidators(Validators.required);
+        }
+        else {
+            partnersControl?.removeValidators(Validators.required);
+        }
+        partnersControl?.updateValueAndValidity({ emitEvent: false });
+    }
     loadFormData() {
         const context = this.getFormDataContext();
         if (!context) {
@@ -10509,11 +10769,10 @@ class KitUsersSettingsEntitlementsFormComponent {
     }
     getFormDataContext() {
         if (this.isCreating()) {
-            const formPartnerId = Number(this.form.value[KitUsersSettingsEntitlementsField.PARTNERS]) || null;
-            const formIdentityType = this.form.value[KitUsersSettingsEntitlementsField.IDENTITY_TYPE] ?? null;
+            const { identityType, partnerId } = this.creatingFormContext();
             return {
-                partnerId: formPartnerId,
-                identityType: formIdentityType,
+                partnerId: Number(partnerId) || null,
+                identityType,
             };
         }
         const details = this.userEntitlementDetails();
@@ -10538,10 +10797,11 @@ class KitUsersSettingsEntitlementsFormComponent {
         })).subscribe();
     }
     buildRolesFilter(identityType, partnerId) {
-        const filters = [];
-        if (!identityType || (identityType === KitUsersSettingsEntitlementType.USER && !partnerId || !this.showIdentityType())) {
+        const isUserWithoutPartner = identityType === KitUsersSettingsEntitlementType.USER && !partnerId;
+        if (!identityType || !this.showIdentityType() || isUserWithoutPartner) {
             return undefined;
         }
+        const filters = [];
         if (identityType === KitUsersSettingsEntitlementType.ADMIN) {
             const adminFilter = {
                 field: 'type',
@@ -10571,7 +10831,7 @@ class KitUsersSettingsEntitlementsFormComponent {
         }).replace('$filter=', '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsEntitlementsFormComponent, isStandalone: true, selector: "kit-users-settings-entitlements-form", inputs: { isCreating: { classPropertyName: "isCreating", publicName: "isCreating", isSignal: true, isRequired: false, transformFunction: null }, showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null } }, providers: [KitFormErrors], ngImport: i0, template: "<form class=\"kit-user-settings-entitlements-form\"\n      [formGroup]=\"form\">\n  @if (showIdentityType()) {\n    <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.IDENTITY_TYPE\"\n                  [items]=\"identityTypeItems()\"\n                  [label]=\"'kit.usersSettings.entitlements.identityType' | translate\">\n    </kit-dropdown>\n  }\n  @if (showPartnersControl) {\n    <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.PARTNERS\"\n                  [items]=\"partnerItems()\"\n                  [label]=\"'kit.usersSettings.entitlements.partners' | translate\">\n    </kit-dropdown>\n  }\n  <kit-textbox [formControlName]=\"kitUsersSettingsEntitlementsField.ALIAS\"\n               [label]=\"'kit.usersSettings.entitlements.alias' | translate\">\n  </kit-textbox>\n  <kit-multiselect [formControlName]=\"kitUsersSettingsEntitlementsField.ROLES\"\n                   [items]=\"roleItems()\"\n                   [label]=\"'kit.usersSettings.entitlements.roles' | translate\">\n  </kit-multiselect>\n</form>\n", styles: [".kit-user-settings-entitlements-form{display:flex;flex-direction:column;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitMultiselectComponent, selector: "kit-multiselect", inputs: ["items", "selectedItems", "label", "disabled", "placeholder", "autoClose", "messageIcon", "messageText", "shouldAddAllAsOption", "allOptionLabel", "tagMapper", "size", "useCheckboxes", "popupClass", "listHeight", "allowCustom", "invalid", "filterable", "itemsDirection", "autoSummaryTag", "autoSummaryTagContainerClass", "fallbackGroupChipWidth", "showCheckIcon"], outputs: ["disabledChange", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsEntitlementsFormComponent, isStandalone: true, selector: "kit-users-settings-entitlements-form", inputs: { isCreating: { classPropertyName: "isCreating", publicName: "isCreating", isSignal: true, isRequired: false, transformFunction: null }, showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null } }, providers: [KitFormErrors], ngImport: i0, template: "<form [formGroup]=\"form\">\n  @if (loading()) {\n    <kit-skeleton-section />\n  }\n  <div class=\"kit-user-settings-entitlements-form\">\n    @if (showIdentityType()) {\n      <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.IDENTITY_TYPE\"\n                    [items]=\"identityTypeItems()\"\n                    [label]=\"'kit.usersSettings.entitlements.identityType' | translate\"\n                    [invalid]=\"isControlInvalid(form, kitUsersSettingsEntitlementsField.IDENTITY_TYPE)\"\n                    [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.IDENTITY_TYPE) | translate\"\n                    (selected)=\"form.get(kitUsersSettingsEntitlementsField.ROLES)?.reset()\" />\n    }\n    @if (showPartnersControl()) {\n      <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.PARTNERS\"\n                    [items]=\"partnerItems()\"\n                    [label]=\"'kit.usersSettings.entitlements.partners' | translate\"\n                    [invalid]=\"isControlInvalid(form, kitUsersSettingsEntitlementsField.PARTNERS)\"\n                    [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.PARTNERS) | translate\"\n                    (selected)=\"form.get(kitUsersSettingsEntitlementsField.ROLES)?.reset()\" />\n    }\n    <kit-textbox [formControlName]=\"kitUsersSettingsEntitlementsField.ALIAS\"\n                 [label]=\"'kit.usersSettings.entitlements.alias' | translate\"\n                 [showStateIcon]=\"false\"\n                 [state]=\"getTextboxState(form.get(kitUsersSettingsEntitlementsField.ALIAS))\"\n                 [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.ALIAS) | translate\" />\n    <kit-multiselect [formControlName]=\"kitUsersSettingsEntitlementsField.ROLES\"\n                     [items]=\"roleItems()\"\n                     [label]=\"'kit.usersSettings.entitlements.roles' | translate\"\n                     [invalid]=\"isControlInvalid(form, kitUsersSettingsEntitlementsField.ROLES)\"\n                     [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.ROLES) | translate\" />\n    @if (scopesComponent) {\n      <ng-container *ngComponentOutlet=\"scopesComponent; inputs: { form: form }\" />\n    }\n  </div>\n</form>\n", styles: [".kit-user-settings-entitlements-form{display:flex;flex-direction:column;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitMultiselectComponent, selector: "kit-multiselect", inputs: ["items", "selectedItems", "label", "disabled", "placeholder", "autoClose", "messageIcon", "messageText", "shouldAddAllAsOption", "allOptionLabel", "tagMapper", "size", "useCheckboxes", "popupClass", "listHeight", "allowCustom", "invalid", "filterable", "itemsDirection", "autoSummaryTag", "autoSummaryTagContainerClass", "fallbackGroupChipWidth", "showCheckIcon"], outputs: ["disabledChange", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: KitSkeletonSectionComponent, selector: "kit-skeleton-section" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsFormComponent, decorators: [{
             type: Component,
@@ -10581,11 +10841,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitDropdownComponent,
                         KitMultiselectComponent,
                         ReactiveFormsModule,
-                    ], providers: [KitFormErrors], template: "<form class=\"kit-user-settings-entitlements-form\"\n      [formGroup]=\"form\">\n  @if (showIdentityType()) {\n    <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.IDENTITY_TYPE\"\n                  [items]=\"identityTypeItems()\"\n                  [label]=\"'kit.usersSettings.entitlements.identityType' | translate\">\n    </kit-dropdown>\n  }\n  @if (showPartnersControl) {\n    <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.PARTNERS\"\n                  [items]=\"partnerItems()\"\n                  [label]=\"'kit.usersSettings.entitlements.partners' | translate\">\n    </kit-dropdown>\n  }\n  <kit-textbox [formControlName]=\"kitUsersSettingsEntitlementsField.ALIAS\"\n               [label]=\"'kit.usersSettings.entitlements.alias' | translate\">\n  </kit-textbox>\n  <kit-multiselect [formControlName]=\"kitUsersSettingsEntitlementsField.ROLES\"\n                   [items]=\"roleItems()\"\n                   [label]=\"'kit.usersSettings.entitlements.roles' | translate\">\n  </kit-multiselect>\n</form>\n", styles: [".kit-user-settings-entitlements-form{display:flex;flex-direction:column;gap:10px;width:100%}\n"] }]
+                        NgComponentOutlet,
+                        KitSkeletonSectionComponent,
+                    ], providers: [KitFormErrors], template: "<form [formGroup]=\"form\">\n  @if (loading()) {\n    <kit-skeleton-section />\n  }\n  <div class=\"kit-user-settings-entitlements-form\">\n    @if (showIdentityType()) {\n      <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.IDENTITY_TYPE\"\n                    [items]=\"identityTypeItems()\"\n                    [label]=\"'kit.usersSettings.entitlements.identityType' | translate\"\n                    [invalid]=\"isControlInvalid(form, kitUsersSettingsEntitlementsField.IDENTITY_TYPE)\"\n                    [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.IDENTITY_TYPE) | translate\"\n                    (selected)=\"form.get(kitUsersSettingsEntitlementsField.ROLES)?.reset()\" />\n    }\n    @if (showPartnersControl()) {\n      <kit-dropdown [formControlName]=\"kitUsersSettingsEntitlementsField.PARTNERS\"\n                    [items]=\"partnerItems()\"\n                    [label]=\"'kit.usersSettings.entitlements.partners' | translate\"\n                    [invalid]=\"isControlInvalid(form, kitUsersSettingsEntitlementsField.PARTNERS)\"\n                    [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.PARTNERS) | translate\"\n                    (selected)=\"form.get(kitUsersSettingsEntitlementsField.ROLES)?.reset()\" />\n    }\n    <kit-textbox [formControlName]=\"kitUsersSettingsEntitlementsField.ALIAS\"\n                 [label]=\"'kit.usersSettings.entitlements.alias' | translate\"\n                 [showStateIcon]=\"false\"\n                 [state]=\"getTextboxState(form.get(kitUsersSettingsEntitlementsField.ALIAS))\"\n                 [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.ALIAS) | translate\" />\n    <kit-multiselect [formControlName]=\"kitUsersSettingsEntitlementsField.ROLES\"\n                     [items]=\"roleItems()\"\n                     [label]=\"'kit.usersSettings.entitlements.roles' | translate\"\n                     [invalid]=\"isControlInvalid(form, kitUsersSettingsEntitlementsField.ROLES)\"\n                     [messageText]=\"getFormErrorMessages(form, kitUsersSettingsEntitlementsField.ROLES) | translate\" />\n    @if (scopesComponent) {\n      <ng-container *ngComponentOutlet=\"scopesComponent; inputs: { form: form }\" />\n    }\n  </div>\n</form>\n", styles: [".kit-user-settings-entitlements-form{display:flex;flex-direction:column;gap:10px;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isCreating: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCreating", required: false }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: true }] }] } });
 
 class KitUsersSettingsCreateEntitlementDialogComponent {
     constructor() {
+        this.destroyRef = inject(DestroyRef);
         this.entitlementsForm = viewChild.required(KitUsersSettingsEntitlementsFormComponent);
         this.showIdentityType = input.required(...(ngDevMode ? [{ debugName: "showIdentityType" }] : /* istanbul ignore next */ []));
         this.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
@@ -10594,17 +10857,20 @@ class KitUsersSettingsCreateEntitlementDialogComponent {
         this.kitButtonType = KitButtonType;
     }
     get isFormDisabled() {
-        return this.entitlementsForm().form.pristine || this.entitlementsForm().form.invalid;
+        return this.entitlementsForm().form.pristine || this.entitlementsForm().form.invalid || this.entitlementsForm().isSaving();
     }
     onConfirm() {
-        this.entitlementsForm().submit();
-        this.opened.set(false);
+        this.entitlementsForm().submit().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(success => {
+            if (success) {
+                this.opened.set(false);
+            }
+        });
     }
     onClose() {
         this.opened.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateEntitlementDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsCreateEntitlementDialogComponent, isStandalone: true, selector: "kit-users-settings-create-entitlement-dialog", inputs: { showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, viewQueries: [{ propertyName: "entitlementsForm", first: true, predicate: KitUsersSettingsEntitlementsFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (opened()) {\n  <kit-dialog class=\"kit-user-settings-create-entitlement-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"onClose()\">\n      {{ \"kit.usersSettings.profile.createEntitlement\" | translate }}\n    </kit-dialog-titlebar>\n\n    <div class=\"kit-user-settings-create-entitlement-dialog-content\">\n      <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\"\n                                            [isCreating]=\"true\" />\n    </div>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"onClose()\" />\n      <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}\n", styles: [".kit-user-settings-create-entitlement-dialog-content{min-width:560px;padding:15px 20px}\n"], dependencies: [{ kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["type", "backUrl"] }, { kind: "component", type: KitDialogTitlebarComponent, selector: "kit-dialog-titlebar", outputs: ["closed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsEntitlementsFormComponent, selector: "kit-users-settings-entitlements-form", inputs: ["isCreating", "showIdentityType"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsCreateEntitlementDialogComponent, isStandalone: true, selector: "kit-users-settings-create-entitlement-dialog", inputs: { showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, viewQueries: [{ propertyName: "entitlementsForm", first: true, predicate: KitUsersSettingsEntitlementsFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (opened()) {\n  <kit-dialog class=\"kit-user-settings-create-entitlement-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"onClose()\">\n      {{ \"kit.usersSettings.profile.createEntitlement\" | translate }}\n    </kit-dialog-titlebar>\n\n    <div class=\"dialog-content kit-user-settings-create-entitlement-dialog-content\">\n      <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\"\n                                            [isCreating]=\"true\" />\n    </div>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"onClose()\" />\n      <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}\n", styles: [".kit-user-settings-create-entitlement-dialog-content{width:600px;padding:15px 20px}\n"], dependencies: [{ kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["type", "backUrl"] }, { kind: "component", type: KitDialogTitlebarComponent, selector: "kit-dialog-titlebar", outputs: ["closed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsEntitlementsFormComponent, selector: "kit-users-settings-entitlements-form", inputs: ["isCreating", "showIdentityType"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateEntitlementDialogComponent, decorators: [{
             type: Component,
@@ -10615,71 +10881,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitButtonComponent,
                         TranslatePipe,
                         KitUsersSettingsEntitlementsFormComponent,
-                    ], template: "@if (opened()) {\n  <kit-dialog class=\"kit-user-settings-create-entitlement-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"onClose()\">\n      {{ \"kit.usersSettings.profile.createEntitlement\" | translate }}\n    </kit-dialog-titlebar>\n\n    <div class=\"kit-user-settings-create-entitlement-dialog-content\">\n      <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\"\n                                            [isCreating]=\"true\" />\n    </div>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"onClose()\" />\n      <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}\n", styles: [".kit-user-settings-create-entitlement-dialog-content{min-width:560px;padding:15px 20px}\n"] }]
+                    ], template: "@if (opened()) {\n  <kit-dialog class=\"kit-user-settings-create-entitlement-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"onClose()\">\n      {{ \"kit.usersSettings.profile.createEntitlement\" | translate }}\n    </kit-dialog-titlebar>\n\n    <div class=\"dialog-content kit-user-settings-create-entitlement-dialog-content\">\n      <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\"\n                                            [isCreating]=\"true\" />\n    </div>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"onClose()\" />\n      <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}\n", styles: [".kit-user-settings-create-entitlement-dialog-content{width:600px;padding:15px 20px}\n"] }]
         }], propDecorators: { entitlementsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsEntitlementsFormComponent), { isSignal: true }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: true }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
 
-var KitUsersSettingsPasswordDialogField;
-(function (KitUsersSettingsPasswordDialogField) {
-    KitUsersSettingsPasswordDialogField["PASSWORD"] = "password";
-    KitUsersSettingsPasswordDialogField["REPEAT_PASSWORD"] = "repeatPassword";
-    KitUsersSettingsPasswordDialogField["FORCE_PASSWORD"] = "forcePassword";
-})(KitUsersSettingsPasswordDialogField || (KitUsersSettingsPasswordDialogField = {}));
-
-class KitUsersSettingsPasswordDialogComponent {
+class KitUsersSettingsEntitlementsComponent {
     constructor() {
-        this.kitFormErrors = inject(KitFormErrors);
-        this.formBuilder = inject(FormBuilder);
         this.store = inject(Store);
-        this.destroyRef = inject(DestroyRef);
-        this.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
-        this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
-        this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
-        this.kitDialogType = KitDialogType;
-        this.kitButtonKind = KitButtonKind;
-        this.kitButtonType = KitButtonType;
-        this.kitUsersSettingsPasswordDialogField = KitUsersSettingsPasswordDialogField;
-        this.form = this.formBuilder.group({
-            [KitUsersSettingsPasswordDialogField.PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
-            [KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
-            [KitUsersSettingsPasswordDialogField.FORCE_PASSWORD]: this.formBuilder.nonNullable.control(false),
-        }, { validators: this.passwordsMatchValidator });
+        this.entitlementsForm = viewChild(KitUsersSettingsEntitlementsFormComponent, ...(ngDevMode ? [{ debugName: "entitlementsForm" }] : /* istanbul ignore next */ []));
+        this.collapsedList = viewChild(KitCollapsedListComponent, ...(ngDevMode ? [{ debugName: "collapsedList" }] : /* istanbul ignore next */ []));
+        this.showIdentityType = input.required(...(ngDevMode ? [{ debugName: "showIdentityType" }] : /* istanbul ignore next */ []));
+        this.userEntitlements = computed(() => this.store.selectSignal(KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN)().userEntitlements, ...(ngDevMode ? [{ debugName: "userEntitlements" }] : /* istanbul ignore next */ []));
+        this.userEntitlementDetails = computed(() => this.store.selectSignal(KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN)().userEntitlementDetails, ...(ngDevMode ? [{ debugName: "userEntitlementDetails" }] : /* istanbul ignore next */ []));
+        this.userDetailsId = computed(() => (this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN)().userDetails.data?.id), ...(ngDevMode ? [{ debugName: "userDetailsId" }] : /* istanbul ignore next */ []));
+        this.entitlementItems = computed(() => this.userEntitlements().data.map(entitlement => ({ text: entitlement.alias, value: String(entitlement.id) })), ...(ngDevMode ? [{ debugName: "entitlementItems" }] : /* istanbul ignore next */ []));
+        this.selectedEntitlementId = signal(null, ...(ngDevMode ? [{ debugName: "selectedEntitlementId" }] : /* istanbul ignore next */ []));
+        this.knownEntitlementIds = [];
+        effect(() => this.fetchEntitlements());
+        effect(() => this.fetchEntitlementDetails());
+        effect(() => this.syncSelectedEntitlement());
     }
-    get isFormDisabled() {
-        return this.form.pristine || this.form.invalid;
-    }
-    getTextboxState(field) {
-        const control = this.form.get(field);
-        const isTouchedAndDirty = !!control?.touched && !!control.dirty;
-        const hasFieldError = isTouchedAndDirty && !!control?.invalid;
-        const hasMatchError = field === KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD &&
-            !!this.form.errors?.['passwordsMismatch'] &&
-            isTouchedAndDirty;
-        return hasFieldError || hasMatchError ? KitTextboxState.ERROR : KitTextboxState.DEFAULT;
-    }
-    getTextboxMessageText(field) {
-        const control = this.form.get(field);
-        if (!control || !(control.touched || control.dirty)) {
-            return undefined;
-        }
-        if (field === 'repeatPassword' && this.form.errors?.['passwordsMismatch'] && control.dirty) {
-            return 'kit.usersSettings.passwordDialog.passwordsDoNotMatch';
-        }
-        if (control.errors?.['serverError']) {
-            return control.errors['serverError'];
+    get isSaveBtnDisabled() {
+        const formComponent = this.entitlementsForm();
+        return !formComponent || formComponent.form.pristine || formComponent.form.invalid || formComponent.isSaving();
+    }
+    selectItem(item) {
+        const collapsedList = this.collapsedList();
+        if (collapsedList) {
+            collapsedList.setSelectedItem(item);
+            this.selectedEntitlementId.set(+item.value);
         }
-        return this.kitFormErrors.getErrors(control)[0];
+        ;
     }
-    onConfirm() {
+    submit() {
+        return this.entitlementsForm()?.submit() ?? of(false);
+    }
+    fetchEntitlements() {
+        const userId = this.userDetailsId();
+        if (userId) {
+            this.selectedEntitlementId.set(null);
+            this.knownEntitlementIds = [];
+            this.store.dispatch(new KitFetchUsersSettingsEntitlements(userId));
+        }
+    }
+    syncSelectedEntitlement() {
+        const entitlements = this.userEntitlements().data;
+        const previousKnownIds = this.knownEntitlementIds;
+        this.knownEntitlementIds = entitlements.map(entitlement => entitlement.id);
+        const selectedId = this.selectedEntitlementId();
+        if (selectedId === null) {
+            if (entitlements[0]) {
+                this.selectItem({ text: entitlements[0].alias, value: String(entitlements[0].id) });
+            }
+            return;
+        }
+        if (entitlements.some(entitlement => entitlement.id === selectedId)) {
+            const newEntitlement = entitlements.find(entitlement => !previousKnownIds.includes(entitlement.id));
+            if (newEntitlement) {
+                this.selectItem({ text: newEntitlement.alias, value: String(newEntitlement.id) });
+            }
+            return;
+        }
+        const previousIndex = previousKnownIds.indexOf(selectedId);
+        const nextItemToSelect = entitlements[Math.min(previousIndex, entitlements.length - 1)];
+        if (nextItemToSelect) {
+            this.selectItem({ text: nextItemToSelect.alias, value: String(nextItemToSelect.id) });
+        }
+        else {
+            this.selectedEntitlementId.set(null);
+        }
+    }
+    fetchEntitlementDetails() {
+        const entitlementId = this.selectedEntitlementId();
+        const userId = this.userDetailsId();
+        if (entitlementId && userId) {
+            this.store.dispatch(new KitFetchUsersSettingsEntitlementDetails({
+                userId,
+                entitlementId,
+            }));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsEntitlementsComponent, isStandalone: true, selector: "kit-users-settings-entitlements", inputs: { showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "entitlementsForm", first: true, predicate: KitUsersSettingsEntitlementsFormComponent, descendants: true, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-users-settings-entitlements\">\n  @if (userEntitlements().loading) {\n    <kit-skeleton-section />\n  } @else {\n    @if (userEntitlements().data.length) {\n      <kit-collapsed-list [itemList]=\"entitlementItems()\"\n                          (selectItem)=\"selectItem($event)\" />\n      <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\" />\n    } @else {\n      <kit-empty-section [text]=\"'kit.usersSettings.entitlements.empty' | translate\" />\n    }\n  }\n</div>\n", styles: [".kit-users-settings-entitlements{display:flex;flex-direction:column;gap:16px}\n"], dependencies: [{ kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "component", type: KitUsersSettingsEntitlementsFormComponent, selector: "kit-users-settings-entitlements-form", inputs: ["isCreating", "showIdentityType"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text", "size"] }, { kind: "component", type: KitSkeletonSectionComponent, selector: "kit-skeleton-section" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-users-settings-entitlements', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        KitCollapsedListComponent,
+                        KitUsersSettingsEntitlementsFormComponent,
+                        KitEmptySectionComponent,
+                        TranslatePipe,
+                        KitSkeletonSectionComponent,
+                    ], template: "<div class=\"kit-users-settings-entitlements\">\n  @if (userEntitlements().loading) {\n    <kit-skeleton-section />\n  } @else {\n    @if (userEntitlements().data.length) {\n      <kit-collapsed-list [itemList]=\"entitlementItems()\"\n                          (selectItem)=\"selectItem($event)\" />\n      <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\" />\n    } @else {\n      <kit-empty-section [text]=\"'kit.usersSettings.entitlements.empty' | translate\" />\n    }\n  }\n</div>\n", styles: [".kit-users-settings-entitlements{display:flex;flex-direction:column;gap:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { entitlementsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsEntitlementsFormComponent), { isSignal: true }] }], collapsedList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitCollapsedListComponent), { isSignal: true }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: true }] }] } });
+
+var KitUsersSettingsPasswordDialogField;
+(function (KitUsersSettingsPasswordDialogField) {
+    KitUsersSettingsPasswordDialogField["PASSWORD"] = "password";
+    KitUsersSettingsPasswordDialogField["REPEAT_PASSWORD"] = "repeatPassword";
+    KitUsersSettingsPasswordDialogField["FORCE_PASSWORD"] = "forcePassword";
+})(KitUsersSettingsPasswordDialogField || (KitUsersSettingsPasswordDialogField = {}));
+
+class KitUsersSettingsPasswordDialogComponent extends DialogContentBase {
+    constructor() {
+        const dialog = inject(DialogRef);
+        super(dialog);
+        this.kitFormErrors = inject(KitFormErrors);
+        this.formBuilder = inject(FormBuilder);
+        this.store = inject(Store);
+        this.destroyRef = inject(DestroyRef);
+        this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
+        this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
+        this.kitDialogType = KitDialogType;
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonType = KitButtonType;
+        this.kitUsersSettingsPasswordDialogField = KitUsersSettingsPasswordDialogField;
+        this.form = this.formBuilder.group({
+            [KitUsersSettingsPasswordDialogField.PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
+            [KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
+            [KitUsersSettingsPasswordDialogField.FORCE_PASSWORD]: this.formBuilder.nonNullable.control(false),
+        }, { validators: this.passwordsMatchValidator });
+        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+    }
+    get isFormDisabled() {
+        return this.form.pristine || this.form.invalid || this.isSaving();
+    }
+    getTextboxState(form, controlName) {
+        return this.getFieldErrors(form, controlName).length && KitTextboxState.ERROR || KitTextboxState.DEFAULT;
+    }
+    getFormErrorMessages(form, controlName) {
+        return this.getFieldErrors(form, controlName).join('. ');
+    }
+    onConfirm() {
         const userDetails = this.userDetails().data;
         if (!userDetails) {
             return;
         }
+        this.isSaving.set(true);
         this.store.dispatch(new KitUpdateUsersSettingsDetails({
             ...userDetails,
             password: this.form.get(KitUsersSettingsPasswordDialogField.PASSWORD)?.value ?? undefined,
             forcePasswordResetOnNextLogin: this.form.get(KitUsersSettingsPasswordDialogField.FORCE_PASSWORD)?.value ?? false,
-        })).pipe(catchError(error => this.handleSubmitError(error)), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.opened.set(false);
+        })).pipe(catchError(() => {
+            this.form.setErrors({ serverError: true });
+            return EMPTY;
+        }), finalize(() => this.isSaving.set(false)), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.dialog.close();
         });
     }
     passwordsMatchValidator(group) {
@@ -10687,36 +11033,29 @@ class KitUsersSettingsPasswordDialogComponent {
         const repeatPassword = group.get(KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)?.value ?? '';
         return password === repeatPassword ? null : { passwordsMismatch: true };
     }
-    handleSubmitError(error) {
-        this.applyServerError(error?.error?.title ?? '');
-        return EMPTY;
-    }
-    applyServerError(title) {
-        const translationKey = kitUsersSettingsErrorTranslationMap[title];
-        const control = this.form.get(KitUsersSettingsPasswordDialogField.PASSWORD);
-        if (!translationKey || !control) {
-            return;
+    getFieldErrors(form, controlName) {
+        const control = form.controls[controlName] ?? null;
+        const controlErrors = this.kitFormErrors.getErrors(control);
+        if (controlErrors.length) {
+            return controlErrors;
         }
-        control.setErrors({ serverError: translationKey });
-        control.markAsTouched();
-        control.markAsDirty();
+        const isRepeatPassword = controlName === KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD;
+        return isRepeatPassword && control?.dirty ? this.kitFormErrors.getErrors(form) : [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsPasswordDialogComponent, isStandalone: true, selector: "kit-users-settings-password-dialog", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, providers: [KitFormErrors], ngImport: i0, template: "@if (opened()) {\n  <kit-dialog class=\"kit-users-settings-password-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n      {{ \"kit.usersSettings.passwordDialog.title\" | translate }}\n    </kit-dialog-titlebar>\n\n    <form class=\"kit-users-settings-password-dialog-content\"\n          [formGroup]=\"form\">\n      <kit-textbox type=\"password\"\n                   class=\"kit-users-settings-password-dialog-textbox\"\n                   [formControlName]=\"kitUsersSettingsPasswordDialogField.PASSWORD\"\n                   [label]=\"'kit.usersSettings.passwordDialog.newPassword' | translate\"\n                   [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.PASSWORD)\"\n                   [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.PASSWORD) | translate\"></kit-textbox>\n      <kit-textbox type=\"password\"\n                   class=\"kit-users-settings-password-dialog-textbox\"\n                   [formControlName]=\"kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD\"\n                   [label]=\"'kit.usersSettings.passwordDialog.repeatNewPassword' | translate\"\n                   [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)\"\n                   [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD) | translate\"></kit-textbox>\n      <kit-toggle class=\"kit-users-settings-password-dialog-toggle\"\n                  [formControlName]=\"kitUsersSettingsPasswordDialogField.FORCE_PASSWORD\"\n                  [label]=\"'kit.usersSettings.passwordDialog.forcePassword' | translate\"></kit-toggle>\n    </form>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.passwordDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"opened.set(false)\" />\n      <kit-button [label]=\"'kit.usersSettings.passwordDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}", styles: [".kit-users-settings-password-dialog-content{width:400px;padding:15px 20px;display:flex;flex-direction:column;gap:15px}.kit-users-settings-password-dialog-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px}\n"], dependencies: [{ kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["type", "backUrl"] }, { kind: "component", type: KitDialogTitlebarComponent, selector: "kit-dialog-titlebar", outputs: ["closed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitUsersSettingsPasswordDialogComponent, isStandalone: true, selector: "kit-users-settings-password-dialog", providers: [KitFormErrors], usesInheritance: true, ngImport: i0, template: "<form class=\"kit-users-settings-password-dialog-content\"\n      [formGroup]=\"form\">\n  <kit-textbox type=\"password\"\n               class=\"kit-users-settings-password-dialog-textbox\"\n               [formControlName]=\"kitUsersSettingsPasswordDialogField.PASSWORD\"\n               [label]=\"'kit.usersSettings.passwordDialog.newPassword' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsPasswordDialogField.PASSWORD)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsPasswordDialogField.PASSWORD) | translate\"></kit-textbox>\n  <kit-textbox type=\"password\"\n               class=\"kit-users-settings-password-dialog-textbox\"\n               [formControlName]=\"kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD\"\n               [label]=\"'kit.usersSettings.passwordDialog.repeatNewPassword' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD) | translate\"></kit-textbox>\n  <kit-toggle class=\"kit-users-settings-password-dialog-toggle\"\n              [formControlName]=\"kitUsersSettingsPasswordDialogField.FORCE_PASSWORD\"\n              [label]=\"'kit.usersSettings.passwordDialog.forcePassword' | translate\"></kit-toggle>\n</form>\n\n<kit-dialog-actions>\n  <kit-button [label]=\"'kit.usersSettings.passwordDialog.cancel' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [type]=\"kitButtonType.GHOST\"\n              (clicked)=\"dialog.close()\" />\n  <kit-button [label]=\"'kit.usersSettings.passwordDialog.confirm' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [disabled]=\"isFormDisabled\"\n              (clicked)=\"onConfirm()\" />\n</kit-dialog-actions>\n", styles: [".kit-users-settings-password-dialog-content{width:600px;display:flex;flex-direction:column;gap:15px}.kit-users-settings-password-dialog-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px}\n"], dependencies: [{ kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsPasswordDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-users-settings-password-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        KitDialogComponent,
-                        KitDialogTitlebarComponent,
                         KitDialogActionsComponent,
                         KitButtonComponent,
                         TranslatePipe,
                         KitTextboxComponent,
                         ReactiveFormsModule,
                         KitToggleComponent,
-                    ], providers: [KitFormErrors], template: "@if (opened()) {\n  <kit-dialog class=\"kit-users-settings-password-dialog\"\n              [type]=\"kitDialogType.Declarative\">\n    <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n      {{ \"kit.usersSettings.passwordDialog.title\" | translate }}\n    </kit-dialog-titlebar>\n\n    <form class=\"kit-users-settings-password-dialog-content\"\n          [formGroup]=\"form\">\n      <kit-textbox type=\"password\"\n                   class=\"kit-users-settings-password-dialog-textbox\"\n                   [formControlName]=\"kitUsersSettingsPasswordDialogField.PASSWORD\"\n                   [label]=\"'kit.usersSettings.passwordDialog.newPassword' | translate\"\n                   [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.PASSWORD)\"\n                   [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.PASSWORD) | translate\"></kit-textbox>\n      <kit-textbox type=\"password\"\n                   class=\"kit-users-settings-password-dialog-textbox\"\n                   [formControlName]=\"kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD\"\n                   [label]=\"'kit.usersSettings.passwordDialog.repeatNewPassword' | translate\"\n                   [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)\"\n                   [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD) | translate\"></kit-textbox>\n      <kit-toggle class=\"kit-users-settings-password-dialog-toggle\"\n                  [formControlName]=\"kitUsersSettingsPasswordDialogField.FORCE_PASSWORD\"\n                  [label]=\"'kit.usersSettings.passwordDialog.forcePassword' | translate\"></kit-toggle>\n    </form>\n\n    <kit-dialog-actions>\n      <kit-button [label]=\"'kit.usersSettings.passwordDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"opened.set(false)\" />\n      <kit-button [label]=\"'kit.usersSettings.passwordDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isFormDisabled\"\n                  (clicked)=\"onConfirm()\" />\n    </kit-dialog-actions>\n  </kit-dialog>\n}", styles: [".kit-users-settings-password-dialog-content{width:400px;padding:15px 20px;display:flex;flex-direction:column;gap:15px}.kit-users-settings-password-dialog-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px}\n"] }]
-        }], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
+                    ], providers: [KitFormErrors], template: "<form class=\"kit-users-settings-password-dialog-content\"\n      [formGroup]=\"form\">\n  <kit-textbox type=\"password\"\n               class=\"kit-users-settings-password-dialog-textbox\"\n               [formControlName]=\"kitUsersSettingsPasswordDialogField.PASSWORD\"\n               [label]=\"'kit.usersSettings.passwordDialog.newPassword' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsPasswordDialogField.PASSWORD)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsPasswordDialogField.PASSWORD) | translate\"></kit-textbox>\n  <kit-textbox type=\"password\"\n               class=\"kit-users-settings-password-dialog-textbox\"\n               [formControlName]=\"kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD\"\n               [label]=\"'kit.usersSettings.passwordDialog.repeatNewPassword' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form, kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)\"\n               [messageText]=\"getFormErrorMessages(form, kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD) | translate\"></kit-textbox>\n  <kit-toggle class=\"kit-users-settings-password-dialog-toggle\"\n              [formControlName]=\"kitUsersSettingsPasswordDialogField.FORCE_PASSWORD\"\n              [label]=\"'kit.usersSettings.passwordDialog.forcePassword' | translate\"></kit-toggle>\n</form>\n\n<kit-dialog-actions>\n  <kit-button [label]=\"'kit.usersSettings.passwordDialog.cancel' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [type]=\"kitButtonType.GHOST\"\n              (clicked)=\"dialog.close()\" />\n  <kit-button [label]=\"'kit.usersSettings.passwordDialog.confirm' | translate\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [disabled]=\"isFormDisabled\"\n              (clicked)=\"onConfirm()\" />\n</kit-dialog-actions>\n", styles: [".kit-users-settings-password-dialog-content{width:600px;display:flex;flex-direction:column;gap:15px}.kit-users-settings-password-dialog-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px}\n"] }]
+        }], ctorParameters: () => [] });
 
 var KitUsersSettingsProfileTab;
 (function (KitUsersSettingsProfileTab) {
@@ -10724,70 +11063,6 @@ var KitUsersSettingsProfileTab;
     KitUsersSettingsProfileTab["ENTITLEMENTS"] = "entitlements";
 })(KitUsersSettingsProfileTab || (KitUsersSettingsProfileTab = {}));
 
-class KitUsersSettingsEntitlementsComponent {
-    constructor() {
-        this.store = inject(Store);
-        this.entitlementsForm = viewChild(KitUsersSettingsEntitlementsFormComponent, ...(ngDevMode ? [{ debugName: "entitlementsForm" }] : /* istanbul ignore next */ []));
-        this.collapsedList = viewChild(KitCollapsedListComponent, ...(ngDevMode ? [{ debugName: "collapsedList" }] : /* istanbul ignore next */ []));
-        this.showIdentityType = input.required(...(ngDevMode ? [{ debugName: "showIdentityType" }] : /* istanbul ignore next */ []));
-        this.userEntitlements = computed(() => this.store.selectSignal(KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN)().userEntitlements, ...(ngDevMode ? [{ debugName: "userEntitlements" }] : /* istanbul ignore next */ []));
-        this.userDetailsId = computed(() => (this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN)().userDetails.data?.id), ...(ngDevMode ? [{ debugName: "userDetailsId" }] : /* istanbul ignore next */ []));
-        this.entitlementItems = computed(() => (this.userEntitlements().data).map(entitlement => ({ text: entitlement.alias, value: String(entitlement.id) })), ...(ngDevMode ? [{ debugName: "entitlementItems" }] : /* istanbul ignore next */ []));
-        this.selectedEntitlementId = signal(null, ...(ngDevMode ? [{ debugName: "selectedEntitlementId" }] : /* istanbul ignore next */ []));
-        effect(() => this.fetchEntitlements());
-        effect(() => this.fetchEntitlementDetails());
-        effect(() => this.selectFirstItem());
-    }
-    get isFormDisabled() {
-        const formComponent = this.entitlementsForm();
-        return !formComponent || formComponent.form.pristine || formComponent.form.invalid;
-    }
-    selectItem(item) {
-        const collapsedList = this.collapsedList();
-        if (collapsedList) {
-            collapsedList.setSelectedItem(item);
-            this.selectedEntitlementId.set(+item.value);
-        }
-        ;
-    }
-    submit() {
-        this.entitlementsForm()?.submit();
-    }
-    fetchEntitlements() {
-        const userId = this.userDetailsId();
-        if (userId) {
-            this.selectedEntitlementId.set(null);
-            this.store.dispatch(new KitFetchUsersSettingsEntitlements(userId));
-        }
-    }
-    selectFirstItem() {
-        const firstItem = this.userEntitlements().data[0];
-        if (firstItem) {
-            this.selectItem({ text: firstItem.alias, value: String(firstItem.id) });
-        }
-    }
-    fetchEntitlementDetails() {
-        const entitlementId = this.selectedEntitlementId();
-        const userId = this.userDetailsId();
-        if (entitlementId && userId) {
-            this.store.dispatch(new KitFetchUsersSettingsEntitlementDetails({
-                userId,
-                entitlementId,
-            }));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsEntitlementsComponent, isStandalone: true, selector: "kit-users-settings-entitlements", inputs: { showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "entitlementsForm", first: true, predicate: KitUsersSettingsEntitlementsFormComponent, descendants: true, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-users-settings-entitlements\">\n  @if (userEntitlements().loading) {\n    <kit-skeleton [height]=\"24\" />\n  } @else {\n    <kit-collapsed-list [itemList]=\"entitlementItems()\"\n                        (selectItem)=\"selectItem($event)\" />\n  }\n  <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\" />\n  <ng-content />\n</div>\n", styles: [".kit-users-settings-entitlements{display:flex;flex-direction:column;gap:16px}\n"], dependencies: [{ kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitUsersSettingsEntitlementsFormComponent, selector: "kit-users-settings-entitlements-form", inputs: ["isCreating", "showIdentityType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsEntitlementsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-users-settings-entitlements', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        KitCollapsedListComponent,
-                        KitSkeletonComponent,
-                        KitUsersSettingsEntitlementsFormComponent,
-                    ], template: "<div class=\"kit-users-settings-entitlements\">\n  @if (userEntitlements().loading) {\n    <kit-skeleton [height]=\"24\" />\n  } @else {\n    <kit-collapsed-list [itemList]=\"entitlementItems()\"\n                        (selectItem)=\"selectItem($event)\" />\n  }\n  <kit-users-settings-entitlements-form [showIdentityType]=\"showIdentityType()\" />\n  <ng-content />\n</div>\n", styles: [".kit-users-settings-entitlements{display:flex;flex-direction:column;gap:16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { entitlementsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsEntitlementsFormComponent), { isSignal: true }] }], collapsedList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitCollapsedListComponent), { isSignal: true }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: true }] }] } });
-
 class KitUsersSettingsProfileComponent {
     constructor() {
         this.store = inject(Store);
@@ -10798,11 +11073,14 @@ class KitUsersSettingsProfileComponent {
         this.detailsForm = viewChild(KitUsersSettingsDetailsFormComponent, ...(ngDevMode ? [{ debugName: "detailsForm" }] : /* istanbul ignore next */ []));
         this.entitlementsForm = viewChild(KitUsersSettingsEntitlementsComponent, ...(ngDevMode ? [{ debugName: "entitlementsForm" }] : /* istanbul ignore next */ []));
         this.showIdentityType = input.required(...(ngDevMode ? [{ debugName: "showIdentityType" }] : /* istanbul ignore next */ []));
-        this.saveClicked = output();
+        this.permissionCategory = input.required(...(ngDevMode ? [{ debugName: "permissionCategory" }] : /* istanbul ignore next */ []));
+        this.updated = output();
+        this.userPermissions = this.store.selectSignal(KIT_USER_PERMISSIONS_STATE_TOKEN);
+        this.userPermissionTypes = computed(() => kitGetPermissionTypesByCategory(this.permissionCategory(), this.userPermissions()) ?? [], ...(ngDevMode ? [{ debugName: "userPermissionTypes" }] : /* istanbul ignore next */ []));
+        this.permissionTypes = KitPermissionTypes;
         this.userDetails = computed(() => this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN)().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
         this.userEntitlementsDetails = computed(() => this.store.selectSignal(KIT_USERS_SETTINGS_ENTITLEMENTS_STATE_TOKEN)().userEntitlementDetails, ...(ngDevMode ? [{ debugName: "userEntitlementsDetails" }] : /* istanbul ignore next */ []));
         this.currentTab = signal(KitUsersSettingsProfileTab.DETAILS, ...(ngDevMode ? [{ debugName: "currentTab" }] : /* istanbul ignore next */ []));
-        this.isPasswordDialogOpened = signal(false, ...(ngDevMode ? [{ debugName: "isPasswordDialogOpened" }] : /* istanbul ignore next */ []));
         this.isEntitlementDialogOpened = signal(false, ...(ngDevMode ? [{ debugName: "isEntitlementDialogOpened" }] : /* istanbul ignore next */ []));
         this.kitButtonKind = KitButtonKind;
         this.kitButtonType = KitButtonType;
@@ -10822,9 +11100,10 @@ class KitUsersSettingsProfileComponent {
     get isFormDisabled() {
         if (this.currentTab() === KitUsersSettingsProfileTab.DETAILS) {
             const detailsForm = this.detailsForm();
-            return !detailsForm || detailsForm.form.pristine || detailsForm.form.invalid;
+            return !detailsForm || detailsForm.form.pristine || detailsForm.form.invalid || detailsForm.isSaving();
         }
-        return this.entitlementsForm()?.isFormDisabled ?? true;
+        const entitlementsForm = this.entitlementsForm();
+        return !entitlementsForm || entitlementsForm.isSaveBtnDisabled;
     }
     get isSaveLoading() {
         if (this.currentTab() === KitUsersSettingsProfileTab.DETAILS) {
@@ -10834,12 +11113,11 @@ class KitUsersSettingsProfileComponent {
     }
     onSave() {
         if (this.currentTab() === KitUsersSettingsProfileTab.DETAILS) {
-            this.detailsForm()?.submit();
+            this.detailsForm()?.submit().pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
         }
         else {
-            this.entitlementsForm()?.submit();
+            this.entitlementsForm()?.submit().pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
         }
-        this.saveClicked.emit();
     }
     onTabSelected(event) {
         const tabs = Object.values(KitUsersSettingsProfileTab);
@@ -10864,328 +11142,165 @@ class KitUsersSettingsProfileComponent {
             entitlementId: entitlementsDetails.id,
         })))).subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsProfileComponent, isStandalone: true, selector: "kit-users-settings-profile", inputs: { showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saveClicked: "saveClicked" }, viewQueries: [{ propertyName: "detailsForm", first: true, predicate: KitUsersSettingsDetailsFormComponent, descendants: true, isSignal: true }, { propertyName: "entitlementsForm", first: true, predicate: KitUsersSettingsEntitlementsComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-user-settings-profile\">\n  <kit-entity-section-container>\n    <ng-container title>\n      <div class=\"kit-user-settings-profile-header\">\n        <kit-tabs class=\"kit-user-settings-profile-tabs\"\n                  (tabSelected)=\"onTabSelected($event)\">\n        <kit-tab [title]=\"'kit.usersSettings.profile.tabs.details' | translate\"\n                 [selected]=\"true\" />\n        <kit-tab [title]=\"'kit.usersSettings.profile.tabs.entitlements' | translate\" />\n      </kit-tabs>\n        <div class=\"kit-user-settings-profile-actions\">\n          @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n            <kit-button [label]=\"'kit.usersSettings.profile.changePassword' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        (clicked)=\"isPasswordDialogOpened.set(true)\" />\n          } @else {\n            <kit-button [label]=\"'kit.usersSettings.profile.createEntitlement' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        [icon]=\"kitSvgIcon.PLUS\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"isEntitlementDialogOpened.set(true)\" />\n            <kit-button [label]=\"'kit.usersSettings.profile.delete' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userEntitlementsDetails().loading || !userEntitlementsDetails().data\"\n                        [icon]=\"kitSvgIcon.TRASH\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"onDeleteEntitlement()\" />\n          }\n          <kit-button [label]=\"'kit.usersSettings.profile.save' | translate\"\n                      [kind]=\"kitButtonKind.MEDIUM\"\n                      [icon]=\"kitSvgIcon.DISKETTE\"\n                      [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                      [disabled]=\"isFormDisabled || isSaveLoading\"\n                      (clicked)=\"onSave()\" />\n        </div>\n      </div>\n    </ng-container>\n  </kit-entity-section-container>\n  @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n    <kit-users-settings-details-form />\n  \n    <kit-users-settings-password-dialog [(opened)]=\"isPasswordDialogOpened\" />\n  } @else {\n    <ng-template #entitlementsExtraContent>\n      <ng-content />\n    </ng-template>\n\n    <kit-users-settings-create-entitlement-dialog [showIdentityType]=\"showIdentityType()\"\n                                                  [(opened)]=\"isEntitlementDialogOpened\">\n    </kit-users-settings-create-entitlement-dialog>\n\n    <kit-users-settings-entitlements [showIdentityType]=\"showIdentityType()\">\n      <ng-container [ngTemplateOutlet]=\"entitlementsExtraContent\" />\n    </kit-users-settings-entitlements>\n  }\n</div>", styles: [".kit-user-settings-profile-header{display:flex;align-items:center;justify-content:space-between}.kit-user-settings-profile-actions{display:flex;gap:8px}.kit-user-settings-profile ::ng-deep .kit-entity-section-container{padding-bottom:0;gap:0;margin-bottom:15px}.kit-user-settings-profile ::ng-deep .kit-user-settings-profile-tabs .k-link{display:inline-block;height:100%}\n"], dependencies: [{ kind: "component", type: KitEntitySectionContainerComponent, selector: "kit-entity-section-container" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsCreateEntitlementDialogComponent, selector: "kit-users-settings-create-entitlement-dialog", inputs: ["showIdentityType", "opened"], outputs: ["openedChange"] }, { kind: "component", type: KitUsersSettingsPasswordDialogComponent, selector: "kit-users-settings-password-dialog", inputs: ["opened"], outputs: ["openedChange"] }, { kind: "component", type: KitUsersSettingsDetailsFormComponent, selector: "kit-users-settings-details-form", inputs: ["isCreatingNewUser"] }, { kind: "component", type: KitUsersSettingsEntitlementsComponent, selector: "kit-users-settings-entitlements", inputs: ["showIdentityType"] }, { kind: "component", type: KitTabsComponent, selector: "kit-tabs", inputs: ["type", "size", "animate"], outputs: ["tabSelected"] }, { kind: "component", type: KitTabComponent, selector: "kit-tab", inputs: ["title", "icon", "iconType", "selected", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsProfileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-users-settings-profile', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        KitEntitySectionContainerComponent,
-                        KitButtonComponent,
-                        TranslatePipe,
-                        KitUsersSettingsCreateEntitlementDialogComponent,
-                        KitUsersSettingsPasswordDialogComponent,
-                        KitUsersSettingsDetailsFormComponent,
-                        KitUsersSettingsEntitlementsComponent,
-                        KitTabsComponent,
-                        KitTabComponent,
-                        NgTemplateOutlet,
-                    ], template: "<div class=\"kit-user-settings-profile\">\n  <kit-entity-section-container>\n    <ng-container title>\n      <div class=\"kit-user-settings-profile-header\">\n        <kit-tabs class=\"kit-user-settings-profile-tabs\"\n                  (tabSelected)=\"onTabSelected($event)\">\n        <kit-tab [title]=\"'kit.usersSettings.profile.tabs.details' | translate\"\n                 [selected]=\"true\" />\n        <kit-tab [title]=\"'kit.usersSettings.profile.tabs.entitlements' | translate\" />\n      </kit-tabs>\n        <div class=\"kit-user-settings-profile-actions\">\n          @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n            <kit-button [label]=\"'kit.usersSettings.profile.changePassword' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        (clicked)=\"isPasswordDialogOpened.set(true)\" />\n          } @else {\n            <kit-button [label]=\"'kit.usersSettings.profile.createEntitlement' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        [icon]=\"kitSvgIcon.PLUS\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"isEntitlementDialogOpened.set(true)\" />\n            <kit-button [label]=\"'kit.usersSettings.profile.delete' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userEntitlementsDetails().loading || !userEntitlementsDetails().data\"\n                        [icon]=\"kitSvgIcon.TRASH\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"onDeleteEntitlement()\" />\n          }\n          <kit-button [label]=\"'kit.usersSettings.profile.save' | translate\"\n                      [kind]=\"kitButtonKind.MEDIUM\"\n                      [icon]=\"kitSvgIcon.DISKETTE\"\n                      [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                      [disabled]=\"isFormDisabled || isSaveLoading\"\n                      (clicked)=\"onSave()\" />\n        </div>\n      </div>\n    </ng-container>\n  </kit-entity-section-container>\n  @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n    <kit-users-settings-details-form />\n  \n    <kit-users-settings-password-dialog [(opened)]=\"isPasswordDialogOpened\" />\n  } @else {\n    <ng-template #entitlementsExtraContent>\n      <ng-content />\n    </ng-template>\n\n    <kit-users-settings-create-entitlement-dialog [showIdentityType]=\"showIdentityType()\"\n                                                  [(opened)]=\"isEntitlementDialogOpened\">\n    </kit-users-settings-create-entitlement-dialog>\n\n    <kit-users-settings-entitlements [showIdentityType]=\"showIdentityType()\">\n      <ng-container [ngTemplateOutlet]=\"entitlementsExtraContent\" />\n    </kit-users-settings-entitlements>\n  }\n</div>", styles: [".kit-user-settings-profile-header{display:flex;align-items:center;justify-content:space-between}.kit-user-settings-profile-actions{display:flex;gap:8px}.kit-user-settings-profile ::ng-deep .kit-entity-section-container{padding-bottom:0;gap:0;margin-bottom:15px}.kit-user-settings-profile ::ng-deep .kit-user-settings-profile-tabs .k-link{display:inline-block;height:100%}\n"] }]
-        }], propDecorators: { detailsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsDetailsFormComponent), { isSignal: true }] }], entitlementsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsEntitlementsComponent), { isSignal: true }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: true }] }], saveClicked: [{ type: i0.Output, args: ["saveClicked"] }] } });
-
-class KitUsersSettingsComponent {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.store = inject(Store);
-        this.kitDialogService = inject(KitDialogService);
-        this.translateService = inject(TranslateService);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.cardDetailsComponent = viewChild.required(KitCardDetailsComponent);
-        this.deleteDialogActionsTemplate = viewChild.required('deleteDialogActions', { read: TemplateRef });
-        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.showIdentityType = input(true, ...(ngDevMode ? [{ debugName: "showIdentityType" }] : /* istanbul ignore next */ []));
-        this.saveClicked = output();
-        this.currentUserId = this.store.selectSignal((state) => state.user?.data?.id?.toString() ?? null);
-        this.isCreatingNewUser = signal(false, ...(ngDevMode ? [{ debugName: "isCreatingNewUser" }] : /* istanbul ignore next */ []));
-        this.pendingDeleteUser = signal(null, ...(ngDevMode ? [{ debugName: "pendingDeleteUser" }] : /* istanbul ignore next */ []));
-        this.cardData$ = this.store.select(KIT_USERS_SETTINGS_STATE_TOKEN).pipe(map(state => kitBuildGridDataResults(state?.users?.data ?? [], state?.users?.loading ?? false, state?.users?.total ?? 0)));
-        this.pageSize = 10;
-        this.kitSvgIcon = KitSvgIcon;
-        this.kitButtonIconPosition = KitButtonIconPosition;
-        this.kitButtonKind = KitButtonKind;
-        this.kitButtonType = KitButtonType;
-        this.kitSvgIconType = KitSvgIconType;
-    }
-    onDataStateChanged({ skip, take, search, filters }) {
-        this.store.dispatch(new KitFetchUsersSettings({
-            skip,
-            take,
-            filter: this.buildFilter(search, filters),
-        }));
-    }
-    onCardSelected(card) {
-        this.store.dispatch(new KitFetchUsersSettingsDetails(card.id));
-    }
-    isDeleteDisabled(userId) {
-        return this.currentUserId() === userId.toString();
-    }
-    getUserDisplayName(user) {
-        const fullName = [
-            user.firstName,
-            user.lastName,
-        ].filter(Boolean).join(' ').trim();
-        return fullName || user.userName;
-    }
-    onDeleteUser(user) {
-        this.pendingDeleteUser.set(user);
+    openChangePasswordDialog() {
         this.kitDialogService.openDialog({
-            title: this.translateService.instant('kit.usersSettings.deleteDialog.title'),
-            content: this.translateService.instant('kit.usersSettings.deleteDialog.content', {
-                name: this.getUserDisplayName(user),
-            }),
-            actions: this.deleteDialogActionsTemplate(),
+            title: this.translateService.instant('kit.usersSettings.passwordDialog.title'),
+            content: KitUsersSettingsPasswordDialogComponent,
             appendTo: this.viewContainerRef,
         });
     }
-    closeDeleteDialog() {
-        this.kitDialogService.closeDialog();
-        this.pendingDeleteUser.set(null);
-    }
-    confirmDeleteUser() {
-        const user = this.pendingDeleteUser();
-        if (!user) {
-            return;
-        }
-        this.store.dispatch(new KitDeleteUsersSettingsUser(user.id)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.cardDetailsComponent().deleteCard(user.id);
-            this.closeDeleteDialog();
-        });
-    }
-    buildFilter(search, filters) {
-        if (!search) {
-            return filters;
-        }
-        return {
-            logic: KitFilterLogic.AND,
-            filters: [
-                { field: 'name', operator: 'contains', value: search },
-                ...(filters?.filters ?? []),
-            ],
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitUsersSettingsComponent, isStandalone: true, selector: "kit-users-settings", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveClicked: "saveClicked" }, viewQueries: [{ propertyName: "cardDetailsComponent", first: true, predicate: KitCardDetailsComponent, descendants: true, isSignal: true }, { propertyName: "deleteDialogActionsTemplate", first: true, predicate: ["deleteDialogActions"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-users-settings\">\n  <kit-card-details [title]=\"title()\"\n                    [pageSize]=\"pageSize\"\n                    [cardData$]=\"cardData$\"\n                    (cardClicked)=\"onCardSelected($event)\"\n                    (dataStateChanged)=\"onDataStateChanged($event)\">\n    <ng-template #headerActions>\n      <kit-button [label]=\"'kit.usersSettings.details.createNewUser' | translate\"\n                  [icon]=\"kitSvgIcon.PLUS\"\n                  [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"isCreatingNewUser.set(true)\" />\n    </ng-template>\n\n    <ng-template #cardElement\n                 let-user>\n      <div class=\"kit-users-settings-card-row\">\n        <kit-truncate-text class=\"kit-users-settings-card\">{{ getUserDisplayName(user) }}</kit-truncate-text>\n        <kit-button [icon]=\"kitSvgIcon.TRASH\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    [disabled]=\"isDeleteDisabled(user.id)\"\n                    (clicked)=\"onDeleteUser(user)\" />\n      </div>\n    </ng-template>\n\n    <ng-template #details\n                 let-activeId>\n      <kit-users-settings-profile [showIdentityType]=\"showIdentityType()\"\n                                  (saveClicked)=\"saveClicked.emit()\">\n        <ng-content select=\"[extended-entitlements]\" />\n      </kit-users-settings-profile>\n    </ng-template>\n  </kit-card-details>\n\n  <kit-users-settings-create-dialog [(opened)]=\"isCreatingNewUser\" />\n\n  <ng-template #deleteDialogActions>\n    <div class=\"kit-users-settings-delete-dialog-actions\">\n      <kit-button [label]=\"'kit.usersSettings.deleteDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"closeDeleteDialog()\" />\n      <kit-button [label]=\"'kit.usersSettings.deleteDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"confirmDeleteUser()\" />\n    </div>\n  </ng-template>\n</div>\n", styles: [".kit-users-settings-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.kit-users-settings-card{margin:10px 0;min-width:0}::ng-deep .kit-users-settings-delete-dialog-actions{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: KitCardDetailsComponent, selector: "kit-card-details", inputs: ["cardData$", "pageSize", "title", "cardSkeletonConfig"], outputs: ["dataStateChanged", "cardClicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "component", type: KitUsersSettingsProfileComponent, selector: "kit-users-settings-profile", inputs: ["showIdentityType"], outputs: ["saveClicked"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsCreateDialogComponent, selector: "kit-users-settings-create-dialog", inputs: ["opened"], outputs: ["openedChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsProfileComponent, isStandalone: true, selector: "kit-users-settings-profile", inputs: { showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null }, permissionCategory: { classPropertyName: "permissionCategory", publicName: "permissionCategory", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updated: "updated" }, viewQueries: [{ propertyName: "detailsForm", first: true, predicate: KitUsersSettingsDetailsFormComponent, descendants: true, isSignal: true }, { propertyName: "entitlementsForm", first: true, predicate: KitUsersSettingsEntitlementsComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-user-settings-profile\">\n  <kit-entity-section-container>\n    <ng-container title>\n      <div class=\"kit-user-settings-profile-header\">\n        <kit-tabs class=\"kit-user-settings-profile-tabs\"\n                  (tabSelected)=\"onTabSelected($event)\">\n        <kit-tab [title]=\"'kit.usersSettings.profile.tabs.details' | translate\"\n                 [selected]=\"true\" />\n        <kit-tab *kitPermission=\"[permissionTypes.Set]; user: userPermissionTypes()\"\n                 [title]=\"'kit.usersSettings.profile.tabs.entitlements' | translate\" />\n      </kit-tabs>\n        <div class=\"kit-user-settings-profile-actions\">\n          @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n            <kit-button [label]=\"'kit.usersSettings.profile.changePassword' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        (clicked)=\"openChangePasswordDialog()\" />\n          } @else {\n            <kit-button [label]=\"'kit.usersSettings.profile.createEntitlement' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        [icon]=\"kitSvgIcon.PLUS\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"isEntitlementDialogOpened.set(true)\" />\n            <kit-button [label]=\"'kit.usersSettings.profile.delete' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userEntitlementsDetails().loading || !userEntitlementsDetails().data\"\n                        [icon]=\"kitSvgIcon.TRASH\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"onDeleteEntitlement()\" />\n          }\n          <kit-button [label]=\"'kit.usersSettings.profile.save' | translate\"\n                      [kind]=\"kitButtonKind.MEDIUM\"\n                      [icon]=\"kitSvgIcon.DISKETTE\"\n                      [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                      [disabled]=\"isFormDisabled || isSaveLoading\"\n                      (clicked)=\"onSave()\" />\n        </div>\n      </div>\n    </ng-container>\n  </kit-entity-section-container>\n  @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n    <kit-users-settings-details-form (updated)=\"updated.emit($event)\" />\n  } @else {\n    <kit-users-settings-create-entitlement-dialog [showIdentityType]=\"showIdentityType()\"\n                                                  [(opened)]=\"isEntitlementDialogOpened\" />\n    <kit-users-settings-entitlements [showIdentityType]=\"showIdentityType()\" />\n  }\n</div>\n", styles: [".kit-user-settings-profile-header{display:flex;align-items:center;justify-content:space-between}.kit-user-settings-profile-actions{display:flex;gap:8px}.kit-user-settings-profile ::ng-deep .kit-entity-section-container{padding-bottom:0;gap:0;margin-bottom:15px}.kit-user-settings-profile ::ng-deep .kit-user-settings-profile-tabs .k-link{display:inline-block;height:100%}\n"], dependencies: [{ kind: "component", type: KitEntitySectionContainerComponent, selector: "kit-entity-section-container" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsCreateEntitlementDialogComponent, selector: "kit-users-settings-create-entitlement-dialog", inputs: ["showIdentityType", "opened"], outputs: ["openedChange"] }, { kind: "component", type: KitUsersSettingsDetailsFormComponent, selector: "kit-users-settings-details-form", inputs: ["isCreateMode"], outputs: ["updated"] }, { kind: "component", type: KitUsersSettingsEntitlementsComponent, selector: "kit-users-settings-entitlements", inputs: ["showIdentityType"] }, { kind: "component", type: KitTabsComponent, selector: "kit-tabs", inputs: ["type", "size", "animate"], outputs: ["tabSelected"] }, { kind: "component", type: KitTabComponent, selector: "kit-tab", inputs: ["title", "icon", "iconType", "selected", "disabled"] }, { kind: "directive", type: KitPermissionDirective, selector: "[kitPermission]", inputs: ["kitPermission", "kitPermissionUser"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-users-settings', imports: [
-                        KitCardDetailsComponent,
-                        KitTruncateTextComponent,
-                        KitUsersSettingsProfileComponent,
-                        KitButtonComponent,
-                        TranslatePipe,
-                        KitUsersSettingsCreateDialogComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-users-settings\">\n  <kit-card-details [title]=\"title()\"\n                    [pageSize]=\"pageSize\"\n                    [cardData$]=\"cardData$\"\n                    (cardClicked)=\"onCardSelected($event)\"\n                    (dataStateChanged)=\"onDataStateChanged($event)\">\n    <ng-template #headerActions>\n      <kit-button [label]=\"'kit.usersSettings.details.createNewUser' | translate\"\n                  [icon]=\"kitSvgIcon.PLUS\"\n                  [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"isCreatingNewUser.set(true)\" />\n    </ng-template>\n\n    <ng-template #cardElement\n                 let-user>\n      <div class=\"kit-users-settings-card-row\">\n        <kit-truncate-text class=\"kit-users-settings-card\">{{ getUserDisplayName(user) }}</kit-truncate-text>\n        <kit-button [icon]=\"kitSvgIcon.TRASH\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    [disabled]=\"isDeleteDisabled(user.id)\"\n                    (clicked)=\"onDeleteUser(user)\" />\n      </div>\n    </ng-template>\n\n    <ng-template #details\n                 let-activeId>\n      <kit-users-settings-profile [showIdentityType]=\"showIdentityType()\"\n                                  (saveClicked)=\"saveClicked.emit()\">\n        <ng-content select=\"[extended-entitlements]\" />\n      </kit-users-settings-profile>\n    </ng-template>\n  </kit-card-details>\n\n  <kit-users-settings-create-dialog [(opened)]=\"isCreatingNewUser\" />\n\n  <ng-template #deleteDialogActions>\n    <div class=\"kit-users-settings-delete-dialog-actions\">\n      <kit-button [label]=\"'kit.usersSettings.deleteDialog.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"closeDeleteDialog()\" />\n      <kit-button [label]=\"'kit.usersSettings.deleteDialog.confirm' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"confirmDeleteUser()\" />\n    </div>\n  </ng-template>\n</div>\n", styles: [".kit-users-settings-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.kit-users-settings-card{margin:10px 0;min-width:0}::ng-deep .kit-users-settings-delete-dialog-actions{display:flex;justify-content:space-between}\n"] }]
-        }], propDecorators: { cardDetailsComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitCardDetailsComponent), { isSignal: true }] }], deleteDialogActionsTemplate: [{ type: i0.ViewChild, args: ['deleteDialogActions', { ...{ read: TemplateRef }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: false }] }], saveClicked: [{ type: i0.Output, args: ["saveClicked"] }] } });
-
-const KIT_USER_PATH = new InjectionToken('kitUserPath');
-
-const KIT_USER_APPLICATIONS_PATH = new InjectionToken('kitUserApplicationsPath');
-
-class KitUserApiService {
-    constructor() {
-        this.httpClient = inject(HttpClient);
-        this.basePath = inject(KIT_BASE_PATH);
-        this.userPath = inject(KIT_USER_PATH);
-        this.userApplicationsPath = inject(KIT_USER_APPLICATIONS_PATH);
-    }
-    getUserInfo() {
-        const url = `${this.basePath}/${this.userPath}`;
-        return this.httpClient.get(url);
-    }
-    getUserApplicationList() {
-        const url = `${this.basePath}/${this.userApplicationsPath}`;
-        return this.httpClient.get(url);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserApiService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserApiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class FetchUser {
-    static { this.type = '[User] Fetch'; }
-}
-
-const KIT_USER_STATE_TOKEN = new StateToken('user');
-let KitUserState = class KitUserState {
-    constructor() {
-        this.kitUserApiService = inject(KitUserApiService);
-    }
-    fetchUser(ctx) {
-        return this.kitUserApiService.getUserInfo().pipe(tap(user => ctx.setState({
-            data: user,
-            loading: false,
-        })));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserState }); }
-};
-__decorate([
-    Action(FetchUser)
-], KitUserState.prototype, "fetchUser", null);
-KitUserState = __decorate([
-    State({
-        name: KIT_USER_STATE_TOKEN,
-        defaults: {
-            data: null,
-            loading: true,
-        },
-    })
-], KitUserState);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserState, decorators: [{
-            type: Injectable
-        }], propDecorators: { fetchUser: [] } });
-
-class KitGridCellService {
-    constructor() {
-        this.translateService = inject(TranslateService);
-        this.decimalPipe = inject(DecimalPipe);
-        this.datePipe = inject(DatePipe);
-        this.dateFormatConfig = inject(KIT_GRID_CELL_DATE_FORMAT_CONFIG, { optional: true });
-        this.store = inject(Store);
-        this.userState = this.store.selectSignal(KIT_USER_STATE_TOKEN)();
-        const dateFormatConfig = this.dateFormatConfig;
-        this.dateFormat = dateFormatConfig?.dateFormat ?? KIT_DATE_FORMAT;
-        this.dateTimeFormat = dateFormatConfig?.dateTimeFormat ?? KIT_DATETIME_FORMAT_LONG;
-    }
-    createCellValue(columnType, columnField, dataItem, translationMap = {}, defaultValue = '', valueTransforms = {}) {
-        const rawValue = this.getCellValue(dataItem, columnField);
-        const value = valueTransforms[columnField]?.(rawValue) ?? rawValue;
-        if (columnField in translationMap && value != null && value !== '') {
-            return this.translateService.instant(translationMap[columnField](value)) ?? defaultValue;
-        }
-        switch (columnType) {
-            case 'number':
-                return this.decimalPipe.transform(value) ?? defaultValue;
-            case 'plainNumber':
-                return value || defaultValue;
-            case 'date':
-                return this.datePipe.transform(value, this.dateFormat, 'UTC') ?? defaultValue;
-            case 'dateTime':
-                return this.datePipe.transform(value, this.dateTimeFormat, 'UTC') ?? defaultValue;
-            case 'dateLocal':
-                return this.datePipe.transform(value, this.dateFormat) ?? defaultValue;
-            case 'dateTimeLocal':
-                return this.datePipe.transform(value, this.dateTimeFormat) ?? defaultValue;
-            case 'dateZone':
-                return value ? formatInTimeZone(value, this.userState.data?.namedTimeZone ?? 'UTC', this.dateFormat) : defaultValue;
-            case 'dateTimeZone':
-                return value ? formatInTimeZone(value, this.userState.data?.namedTimeZone ?? 'UTC', this.dateTimeFormat) : defaultValue;
-            case 'boolean':
-                return this.translateService.instant(value ? 'common.yes' : 'common.no');
-            default:
-                return value || defaultValue;
-        }
-    }
-    getCellValue(dataItem, field) {
-        let value = dataItem[field];
-        if (!value) {
-            value = this.getNestedGridCellValue(dataItem, field);
-        }
-        return value;
-    }
-    getNestedGridCellValue(dataItem, field) {
-        const value = field.split('.').reduce((acc, key) => acc !== null && typeof acc === 'object' && key in acc
-            ? acc[key]
-            : undefined, dataItem);
-        return value === 0 ? 0 : value || '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridCellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridCellService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridCellService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'kit-users-settings-profile', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        KitEntitySectionContainerComponent,
+                        KitButtonComponent,
+                        TranslatePipe,
+                        KitUsersSettingsCreateEntitlementDialogComponent,
+                        KitUsersSettingsDetailsFormComponent,
+                        KitUsersSettingsEntitlementsComponent,
+                        KitTabsComponent,
+                        KitTabComponent,
+                        KitPermissionDirective,
+                    ], template: "<div class=\"kit-user-settings-profile\">\n  <kit-entity-section-container>\n    <ng-container title>\n      <div class=\"kit-user-settings-profile-header\">\n        <kit-tabs class=\"kit-user-settings-profile-tabs\"\n                  (tabSelected)=\"onTabSelected($event)\">\n        <kit-tab [title]=\"'kit.usersSettings.profile.tabs.details' | translate\"\n                 [selected]=\"true\" />\n        <kit-tab *kitPermission=\"[permissionTypes.Set]; user: userPermissionTypes()\"\n                 [title]=\"'kit.usersSettings.profile.tabs.entitlements' | translate\" />\n      </kit-tabs>\n        <div class=\"kit-user-settings-profile-actions\">\n          @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n            <kit-button [label]=\"'kit.usersSettings.profile.changePassword' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        (clicked)=\"openChangePasswordDialog()\" />\n          } @else {\n            <kit-button [label]=\"'kit.usersSettings.profile.createEntitlement' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userDetails().loading\"\n                        [icon]=\"kitSvgIcon.PLUS\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"isEntitlementDialogOpened.set(true)\" />\n            <kit-button [label]=\"'kit.usersSettings.profile.delete' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [disabled]=\"userEntitlementsDetails().loading || !userEntitlementsDetails().data\"\n                        [icon]=\"kitSvgIcon.TRASH\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        (clicked)=\"onDeleteEntitlement()\" />\n          }\n          <kit-button [label]=\"'kit.usersSettings.profile.save' | translate\"\n                      [kind]=\"kitButtonKind.MEDIUM\"\n                      [icon]=\"kitSvgIcon.DISKETTE\"\n                      [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                      [disabled]=\"isFormDisabled || isSaveLoading\"\n                      (clicked)=\"onSave()\" />\n        </div>\n      </div>\n    </ng-container>\n  </kit-entity-section-container>\n  @if (currentTab() === kitUsersSettingsProfileTab.DETAILS) {\n    <kit-users-settings-details-form (updated)=\"updated.emit($event)\" />\n  } @else {\n    <kit-users-settings-create-entitlement-dialog [showIdentityType]=\"showIdentityType()\"\n                                                  [(opened)]=\"isEntitlementDialogOpened\" />\n    <kit-users-settings-entitlements [showIdentityType]=\"showIdentityType()\" />\n  }\n</div>\n", styles: [".kit-user-settings-profile-header{display:flex;align-items:center;justify-content:space-between}.kit-user-settings-profile-actions{display:flex;gap:8px}.kit-user-settings-profile ::ng-deep .kit-entity-section-container{padding-bottom:0;gap:0;margin-bottom:15px}.kit-user-settings-profile ::ng-deep .kit-user-settings-profile-tabs .k-link{display:inline-block;height:100%}\n"] }]
+        }], propDecorators: { detailsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsDetailsFormComponent), { isSignal: true }] }], entitlementsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsEntitlementsComponent), { isSignal: true }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: true }] }], permissionCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissionCategory", required: true }] }], updated: [{ type: i0.Output, args: ["updated"] }] } });
 
-class KitExcelExportService {
+const defaultUserSort = [{ field: 'name', dir: 'asc' }];
+const exportedUserColumns = [
+    kitBuildGridColumn('userName', 'User Name', 'string', false, false, KIT_GRID_COLUMN_WIDTH),
+    kitBuildGridColumn('name', 'Name', 'string', false, false, KIT_GRID_COLUMN_WIDTH),
+];
+
+class KitUsersSettingsComponent {
     constructor() {
-        this.translateService = inject(TranslateService);
         this.store = inject(Store);
-        this.gridCellService = inject(KitGridCellService);
+        this.kitDialogService = inject(KitDialogService);
+        this.translateService = inject(TranslateService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.kitUsersService = inject(KitUsersService);
+        this.injector = inject(Injector);
+        this.kitExcelExportService = inject(KitExcelExportService);
+        this.cardDetailsComponent = viewChild.required((KitCardDetailsComponent));
+        this.deleteDialogActionsTemplate = viewChild.required('deleteDialogActions', { read: TemplateRef });
+        this.showIdentityType = input.required(...(ngDevMode ? [{ debugName: "showIdentityType" }] : /* istanbul ignore next */ []));
+        this.permissionCategory = input.required(...(ngDevMode ? [{ debugName: "permissionCategory" }] : /* istanbul ignore next */ []));
+        this.currentUser = this.store.selectSignal(KIT_USER_STATE_TOKEN);
+        this.currentUserId = computed(() => this.currentUser()?.data?.id ?? null, ...(ngDevMode ? [{ debugName: "currentUserId" }] : /* istanbul ignore next */ []));
+        this.isCreateMode = signal(false, ...(ngDevMode ? [{ debugName: "isCreateMode" }] : /* istanbul ignore next */ []));
+        this.cardData$ = this.store.select(KIT_USERS_SETTINGS_STATE_TOKEN).pipe(map(state => kitBuildGridDataResults(state?.users?.data ?? [], state?.users?.loading ?? false, state?.users?.total ?? 0)));
+        this.pageSize = 10;
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitButtonIconPosition = KitButtonIconPosition;
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonType = KitButtonType;
+        this.kitSvgIconType = KitSvgIconType;
+        this.cardDetailsSkeletonConfig = {
+            itemHeight: 72,
+            itemsCount: 10,
+        };
+        this.cancelAction = {
+            text: this.translateService.instant('kit.common.cancel'),
+            cssClass: `${KitButtonType.GHOST} ${KitButtonState.DEFAULT} ${KitButtonKind.MEDIUM}`,
+        };
+        this.deleteAction = {
+            text: this.translateService.instant('kit.common.delete'),
+            cssClass: `${KitButtonType.PRIMARY} ${KitButtonState.ERROR} ${KitButtonKind.MEDIUM}`,
+        };
     }
-    async export(data, exportedColumns, exportedFileName, translationMap, valueTransforms = {}) {
-        const userTimezone = this.store.selectSnapshot(KIT_USER_STATE_TOKEN).data?.namedTimeZone ?? 'UTC';
-        const workbook = { sheets: [{ rows: [], columns: [] }] };
-        const columns = exportedColumns.map(({ title, field }) => ({
-            value: this.translateService.instant(title || field),
-            background: '#7a7a7a',
-            color: '#fff',
-            width: 170,
-        }));
-        workbook.sheets[0].rows = this.getExportedExcelRows(columns, data, exportedColumns, translationMap, userTimezone, valueTransforms);
-        workbook.sheets[0].columns = columns;
-        const dataUrl = await new Workbook(workbook).toDataURL();
-        return saveAs(dataUrl, `${exportedFileName}.xlsx`);
+    onDataStateChanged({ skip, take, search, filters }) {
+        const filter = {
+            logic: filters?.logic ?? KitFilterLogic.AND,
+            filters: [
+                ...(search ? [{ field: 'name', operator: 'contains', value: search }] : []),
+                ...(filters?.filters || []),
+            ],
+        };
+        this.store.dispatch(new KitFetchUsersSettings({ skip, take, filter, sort: defaultUserSort }));
     }
-    getExportedExcelRows(columns, data, gridColumns, translationMap, userTimezone, valueTransforms = {}) {
-        const rows = [{ cells: columns, type: 'header' }];
-        for (const row of data) {
-            const rowCells = gridColumns.map((column) => {
-                const rawValue = this.gridCellService.getCellValue(row, column.field);
-                const value = valueTransforms[column.field]?.(rawValue) ?? rawValue;
-                switch (column.type) {
-                    case 'number': {
-                        return { value: (value ?? undefined) };
-                    }
-                    case 'time':
-                        return { format: column.excelFormat, value: this.timeStringToExcelFraction(value) };
-                    case 'date':
-                    case 'dateTime': {
-                        const format = column.excelFormat || (column.type === 'date' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
-                        const dateValue = value ? this.truncateToSeconds(this.convertToUtcDate(value)) : undefined;
-                        return { format, value: dateValue };
-                    }
-                    case 'dateLocal':
-                    case 'dateTimeLocal': {
-                        const format = column.excelFormat || (column.type === 'dateLocal' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
-                        const dateValue = value ? this.truncateToSeconds(new Date(value)) : undefined;
-                        return { format, value: dateValue };
-                    }
-                    case 'dateZone':
-                    case 'dateTimeZone': {
-                        const format = column.excelFormat || (column.type === 'dateZone' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
-                        const dateValue = value
-                            ? this.truncateToSeconds(toZonedTime(new Date(value), userTimezone))
-                            : undefined;
-                        return { format, value: dateValue };
-                    }
-                }
-                return { value: this.gridCellService.createCellValue(column.type, column.field, row, translationMap, '', valueTransforms) };
-            });
-            rows.push({ cells: rowCells, type: 'data' });
-        }
-        return rows;
+    onCardSelected(card) {
+        this.store.dispatch(new KitFetchUsersSettingsDetails(card.id));
     }
-    timeStringToExcelFraction(time) {
-        if (!time) {
-            return '';
-        }
-        const [hoursStr, minutesStr,] = time.split(':');
-        const hours = Number.parseInt(hoursStr, 10);
-        const minutes = Number.parseInt(minutesStr, 10);
-        return (hours * 60 + minutes) / (24 * 60);
+    isDeleteDisabled(userId) {
+        return this.currentUserId() === userId;
     }
-    convertToUtcDate(dateString) {
-        const date = new Date(dateString);
-        const timezoneOffset = date.getTimezoneOffset();
-        return new Date(date.getTime() + timezoneOffset * 60 * 1000);
+    getUserDisplayName(user) {
+        const fullName = [
+            user.firstName,
+            user.lastName,
+        ].filter(Boolean).join(' ').trim();
+        return fullName;
     }
-    truncateToSeconds(date) {
-        const result = new Date(date);
-        result.setMilliseconds(0);
-        return result;
+    onDeleteUser(user) {
+        this.kitDialogService.openDialog({
+            title: this.translateService.instant('kit.usersSettings.deleteDialog.title'),
+            content: this.translateService.instant('kit.usersSettings.deleteDialog.content', {
+                name: this.getUserDisplayName(user),
+            }),
+            appendTo: this.viewContainerRef,
+            actions: [
+                this.cancelAction,
+                this.deleteAction,
+            ],
+            cssClass: 'confirmation-dialog-limited-width',
+        });
+        this.kitDialogService.dialogRef?.result.pipe(take(1)).subscribe(action => {
+            if (action === this.deleteAction) {
+                this.store.dispatch(new KitDeleteUsersSettingsUser(user.id)).subscribe(() => {
+                    this.cardDetailsComponent().deleteCard(user.id);
+                });
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService }); }
+    exportExcel() {
+        this.kitUsersService.fetchUsers({}).subscribe(data => {
+            runInInjectionContext(this.injector, () => {
+                this.kitExcelExportService.export(data.data, exportedUserColumns, 'Users', {});
+            });
+        });
+    }
+    openCreateUserDialog() {
+        this.kitDialogService.openDialog({
+            title: this.translateService.instant('kit.usersSettings.createDialog.title'),
+            content: KitUsersSettingsCreateDialogComponent,
+            appendTo: this.viewContainerRef,
+            cssClass: 'kit-user-settings-create-dialog',
+        });
+        this.kitDialogService.dialogRef?.result.pipe(take(1)).subscribe((result) => {
+            if (result && 'id' in result) {
+                this.cardDetailsComponent().appendCard(result);
+                this.cardDetailsComponent().onCardClick(result);
+                requestAnimationFrame(() => this.cardDetailsComponent().scrollToCardById(result.id.toString()));
+            }
+        });
+    }
+    updateCardData(updatedUser) {
+        this.cardDetailsComponent().updateSpecificCardData(updatedUser);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitUsersSettingsComponent, isStandalone: true, selector: "kit-users-settings", inputs: { showIdentityType: { classPropertyName: "showIdentityType", publicName: "showIdentityType", isSignal: true, isRequired: true, transformFunction: null }, permissionCategory: { classPropertyName: "permissionCategory", publicName: "permissionCategory", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            KitExcelExportService,
+            KitGridCellService,
+            DecimalPipe,
+            DatePipe,
+        ], viewQueries: [{ propertyName: "cardDetailsComponent", first: true, predicate: (KitCardDetailsComponent), descendants: true, isSignal: true }, { propertyName: "deleteDialogActionsTemplate", first: true, predicate: ["deleteDialogActions"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-users-settings\">\n  <kit-card-details [title]=\"'kit.usersSettings.title' | translate\"\n                    [pageSize]=\"pageSize\"\n                    [cardData$]=\"cardData$\"\n                    [cardSkeletonConfig]=\"cardDetailsSkeletonConfig\"\n                    (cardClicked)=\"onCardSelected($event)\"\n                    (dataStateChanged)=\"onDataStateChanged($event)\">\n    <ng-template #headerActions>\n      <div class=\"kit-users-settings-header-actions\">\n        <kit-button [label]=\"'Buttons.Export' | translate\"\n                    [icon]=\"kitSvgIcon.EXPORT\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"exportExcel()\" />\n        <kit-button [label]=\"'kit.usersSettings.details.createNewUser' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"openCreateUserDialog()\" />\n      </div>\n    </ng-template>\n\n    <ng-template #cardElement\n                 let-user>\n      <div class=\"kit-users-settings-card\">\n        <div class=\"kit-users-settings-card-text\">\n          <kit-truncate-text>{{ getUserDisplayName(user) }}</kit-truncate-text>\n          <kit-truncate-text>{{ user.userName }}</kit-truncate-text>\n        </div>\n        <kit-button [icon]=\"kitSvgIcon.TRASH\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    [disabled]=\"isDeleteDisabled(user.id)\"\n                    (clicked)=\"onDeleteUser(user)\" />\n      </div>\n    </ng-template>\n\n    <ng-template #details\n                 let-activeId>\n      <kit-users-settings-profile [showIdentityType]=\"showIdentityType()\"\n                                  [permissionCategory]=\"permissionCategory()\"\n                                  (updated)=\"updateCardData($event)\" />\n    </ng-template>\n  </kit-card-details>\n</div>\n", styles: [".kit-users-settings-header-actions{display:flex;align-items:center;gap:8px}.kit-users-settings-card{display:flex;align-items:center;justify-content:space-between;gap:8px}.kit-users-settings-card-text{max-width:150px;display:flex;flex-direction:column;gap:8px;padding:8px 5px}::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "component", type: KitCardDetailsComponent, selector: "kit-card-details", inputs: ["cardData$", "pageSize", "title", "cardSkeletonConfig"], outputs: ["dataStateChanged", "cardClicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "component", type: KitUsersSettingsProfileComponent, selector: "kit-users-settings-profile", inputs: ["showIdentityType", "permissionCategory"], outputs: ["updated"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-users-settings', imports: [
+                        KitCardDetailsComponent,
+                        KitTruncateTextComponent,
+                        KitUsersSettingsProfileComponent,
+                        KitButtonComponent,
+                        TranslatePipe,
+                    ], providers: [
+                        KitExcelExportService,
+                        KitGridCellService,
+                        DecimalPipe,
+                        DatePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-users-settings\">\n  <kit-card-details [title]=\"'kit.usersSettings.title' | translate\"\n                    [pageSize]=\"pageSize\"\n                    [cardData$]=\"cardData$\"\n                    [cardSkeletonConfig]=\"cardDetailsSkeletonConfig\"\n                    (cardClicked)=\"onCardSelected($event)\"\n                    (dataStateChanged)=\"onDataStateChanged($event)\">\n    <ng-template #headerActions>\n      <div class=\"kit-users-settings-header-actions\">\n        <kit-button [label]=\"'Buttons.Export' | translate\"\n                    [icon]=\"kitSvgIcon.EXPORT\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"exportExcel()\" />\n        <kit-button [label]=\"'kit.usersSettings.details.createNewUser' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"openCreateUserDialog()\" />\n      </div>\n    </ng-template>\n\n    <ng-template #cardElement\n                 let-user>\n      <div class=\"kit-users-settings-card\">\n        <div class=\"kit-users-settings-card-text\">\n          <kit-truncate-text>{{ getUserDisplayName(user) }}</kit-truncate-text>\n          <kit-truncate-text>{{ user.userName }}</kit-truncate-text>\n        </div>\n        <kit-button [icon]=\"kitSvgIcon.TRASH\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    [disabled]=\"isDeleteDisabled(user.id)\"\n                    (clicked)=\"onDeleteUser(user)\" />\n      </div>\n    </ng-template>\n\n    <ng-template #details\n                 let-activeId>\n      <kit-users-settings-profile [showIdentityType]=\"showIdentityType()\"\n                                  [permissionCategory]=\"permissionCategory()\"\n                                  (updated)=\"updateCardData($event)\" />\n    </ng-template>\n  </kit-card-details>\n</div>\n", styles: [".kit-users-settings-header-actions{display:flex;align-items:center;gap:8px}.kit-users-settings-card{display:flex;align-items:center;justify-content:space-between;gap:8px}.kit-users-settings-card-text{max-width:150px;display:flex;flex-direction:column;gap:8px;padding:8px 5px}::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}\n"] }]
+        }], propDecorators: { cardDetailsComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitCardDetailsComponent), { isSignal: true }] }], deleteDialogActionsTemplate: [{ type: i0.ViewChild, args: ['deleteDialogActions', { ...{ read: TemplateRef }, isSignal: true }] }], showIdentityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIdentityType", required: true }] }], permissionCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissionCategory", required: true }] }] } });
 
 const KIT_ENTITY_CREATE_SERVICE = new InjectionToken('kitEntityCreateService');
 class KitCreateEntityDialogComponent extends DialogContentBase {
@@ -11241,23 +11356,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     ], providers: [KitFormErrors], template: "<div [formGroup]=\"form\">\n  <kit-textbox class=\"textbox\"\n               formControlName=\"name\"\n               [label]=\"'Name' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form.get('name'))\"\n               [messageText]=\"getFormErrorMessages(form, 'name')\" />\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'Cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"dialog.close()\" />\n    <kit-button [label]=\"'Save' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"form.invalid || isSaving()\"\n                (clicked)=\"createEntity()\" />\n  </kit-dialog-actions>\n</div>\n", styles: ["::ng-deep .kit-dialog .k-dialog{min-width:400px}::ng-deep .kit-dialog .k-dialog .k-dialog-content{padding:20px 25px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
 
-const KIT_GRID_COLUMN_WIDTH = 170;
-const KIT_GRID_PAGE_SIZE = 10;
-
-var KitPermissionTypes;
-(function (KitPermissionTypes) {
-    KitPermissionTypes["Create"] = "Create";
-    KitPermissionTypes["Delete"] = "Delete";
-    KitPermissionTypes["Edit"] = "Edit";
-    KitPermissionTypes["View"] = "View";
-    KitPermissionTypes["Set"] = "Set";
-    KitPermissionTypes["Use"] = "Use";
-})(KitPermissionTypes || (KitPermissionTypes = {}));
-const defaultUserRolesSort = [{ field: 'name', dir: 'asc' }];
-const exportedUserRoleColumns = [
-    kitBuildGridColumn('name', 'Name', 'string', false, false, KIT_GRID_COLUMN_WIDTH),
-];
-
 class KitPartnerDetailsComponent {
     constructor() {
         this.kitDialogService = inject(KitDialogService);
@@ -11324,51 +11422,6 @@ const exportedPartnerColumns = [
     kitBuildGridColumn('name', 'Name', 'string', false, false, KIT_GRID_COLUMN_WIDTH),
 ];
 
-class KitHttpErrorHandlerService {
-    constructor() {
-        this.kitNotificationService = inject(KitNotificationService);
-        this.translateService = inject(TranslateService);
-        this.router = inject(Router);
-    }
-    handleServerError(error) {
-        if (error.error instanceof ErrorEvent) {
-            this.showErrorNotification(`${this.translateService.instant('kit.http.clientError')} ${error.error.message}`);
-            return throwError(() => error);
-        }
-        switch (error.status) {
-            case HttpStatusCode.Unauthorized:
-                this.showErrorNotification(this.translateService.instant('kit.http.unauthorized'));
-                break;
-            case HttpStatusCode.Forbidden:
-                this.showErrorNotification(this.translateService.instant('kit.http.forbidden'));
-                this.router.navigate(['forbidden']);
-                break;
-            case HttpStatusCode.NotFound:
-                this.showErrorNotification(this.translateService.instant('kit.http.notFound'));
-                break;
-            case HttpStatusCode.BadRequest:
-                this.showErrorNotification(`${this.translateService.instant('kit.http.validationError')} ${error.error?.title ?? ''}`);
-                break;
-            default:
-                if (error.status >= HttpStatusCode.InternalServerError) {
-                    this.showErrorNotification(`${this.translateService.instant('kit.http.serverError')} ${error.error?.title ?? ''}`);
-                }
-        }
-        return throwError(() => error);
-    }
-    showSuccessNotification(message) {
-        this.kitNotificationService.addNotification(KitNotificationType.SUCCESS, message, true, 3000);
-    }
-    showErrorNotification(message) {
-        this.kitNotificationService.addNotification(KitNotificationType.ERROR, message);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitHttpErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitHttpErrorHandlerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitHttpErrorHandlerService, decorators: [{
-            type: Injectable
-        }] });
-
 class KitPartnerService {
     constructor() {
         this.httpClient = inject(HttpClient);
@@ -11745,6 +11798,7 @@ const kitTranslations = {
                 closeButtonLabel: 'Close',
             },
             usersSettings: {
+                title: 'User Maintenance',
                 details: {
                     title: 'User Details',
                     loginId: 'Login ID',
@@ -11755,9 +11809,6 @@ const kitTranslations = {
                     mfa: 'Multi-Factor Authentication',
                     createNewUser: 'Create New User',
                     password: 'Password',
-                    passwordRequired: 'Password is required',
-                    passwordTooWeak: 'Your password is too weak.',
-                    userNameInvalid: 'You have specified invalid Login ID.',
                 },
                 passwordDialog: {
                     title: 'Change Password',
@@ -11765,9 +11816,6 @@ const kitTranslations = {
                     cancel: 'Cancel',
                     newPassword: 'New Password',
                     repeatNewPassword: 'Repeat New Password',
-                    newPasswordRequired: 'New password is required',
-                    repeatNewPasswordRequired: 'Please repeat the new password',
-                    passwordsDoNotMatch: 'Passwords do not match',
                     forcePassword: 'Force Password Reset',
                 },
                 createDialog: {
@@ -11792,6 +11840,7 @@ const kitTranslations = {
                     },
                 },
                 entitlements: {
+                    empty: 'No entitlements available for this user',
                     identityType: 'Identity Type',
                     partners: 'Partners',
                     alias: 'Alias',
@@ -11846,6 +11895,7 @@ const kitTranslations = {
                 selectValue: 'Select value',
                 create: 'Create New',
                 delete: 'Delete',
+                cancel: 'Cancel',
                 confirmationDelete: 'Are you sure you want to permanently delete {{name}}?',
                 name: 'Name',
                 save: 'Save',
@@ -11883,6 +11933,7 @@ const kitTranslations = {
                 duplicate: 'Duplicate value',
                 maxNumber: 'The value should be less than or equal to {{ maxNumber }}',
                 minNumber: 'The value should be greater than or equal to {{ minNumber }}',
+                passwordsMismatch: 'Passwords do not match',
             },
             liveUpdates: {
                 pause: 'Pause Live Feed',
@@ -12029,6 +12080,7 @@ const kitTranslations = {
                 closeButtonLabel: 'Закрыть',
             },
             usersSettings: {
+                title: 'Настройка пользователей',
                 details: {
                     title: 'Детали пользователя',
                     loginId: 'Логин',
@@ -12039,9 +12091,6 @@ const kitTranslations = {
                     mfa: 'Многофакторная аутентификация',
                     createNewUser: 'Создать нового пользователя',
                     password: 'Пароль',
-                    passwordRequired: 'Пароль обязателен',
-                    passwordTooWeak: 'Пароль слишком слабый.',
-                    userNameInvalid: 'Указан некорректный Логин.',
                 },
                 passwordDialog: {
                     title: 'Изменить пароль',
@@ -12049,9 +12098,6 @@ const kitTranslations = {
                     cancel: 'Отмена',
                     newPassword: 'Новый пароль',
                     repeatNewPassword: 'Повторите новый пароль',
-                    newPasswordRequired: 'Новый пароль обязателен',
-                    repeatNewPasswordRequired: 'Пожалуйста, повторите новый пароль',
-                    passwordsDoNotMatch: 'Пароли не совпадают',
                     forcePassword: 'Принудительно изменить пароль',
                 },
                 createDialog: {
@@ -12076,6 +12122,7 @@ const kitTranslations = {
                     },
                 },
                 entitlements: {
+                    empty: 'Нет доступных прав доступа для этого пользователя',
                     identityType: 'Тип удостоверения',
                     partners: 'Партнеры',
                     alias: 'Псевдоним',
@@ -12130,6 +12177,7 @@ const kitTranslations = {
                 selectValue: 'Выберите значение',
                 create: 'Создать',
                 delete: 'Удалить',
+                cancel: 'Отмена',
                 confirmationDelete: 'Вы уверены, что хотите безвозвратно удалить {{name}}?',
                 name: 'Название',
                 save: 'Сохранить',
@@ -12164,6 +12212,10 @@ const kitTranslations = {
                 required: 'Обязательно для заполнения',
                 invalidLength: 'Значение должно быть меньше, чем {{ requiredLength }} символов',
                 invalidEmailFormat: 'Невалидный имэйл',
+                duplicate: 'Дублирующее значение',
+                maxNumber: 'Значение должно быть меньше или равно {{ maxNumber }}',
+                minNumber: 'Значение должно быть больше или равно {{ minNumber }}',
+                passwordsMismatch: 'Пароли не совпадают',
             },
             liveUpdates: {
                 pause: 'Остановить обновление',
@@ -15699,17 +15751,6 @@ class KitAbstractIdPayloadAction {
     }
 }
 
-class KitSkeletonSectionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSkeletonSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitSkeletonSectionComponent, isStandalone: true, selector: "kit-skeleton-section", ngImport: i0, template: "<div class=\"kit-skeleton-section\">\n  <kit-skeleton [height]=\"24\"\n                [width]=\"250\"\n  ></kit-skeleton>\n\n  <kit-skeleton [height]=\"500\"\n  ></kit-skeleton>\n</div>\n", styles: [".kit-skeleton-section{display:flex;flex-direction:column;gap:30px}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSkeletonSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-skeleton-section', imports: [
-                        KitSkeletonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-skeleton-section\">\n  <kit-skeleton [height]=\"24\"\n                [width]=\"250\"\n  ></kit-skeleton>\n\n  <kit-skeleton [height]=\"500\"\n  ></kit-skeleton>\n</div>\n", styles: [".kit-skeleton-section{display:flex;flex-direction:column;gap:30px}\n"] }]
-        }] });
-
 class KitGridLiveUpdatesControlComponent {
     constructor() {
         this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
@@ -17115,6 +17156,7 @@ class KitUserRolesComponent {
             DecimalPipe,
             DatePipe,
             KitExcelExportService,
+            KitHttpErrorHandlerService,
             {
                 provide: KIT_ENTITY_CREATE_SERVICE,
                 useExisting: KitUserRolesService,
@@ -17135,6 +17177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         DecimalPipe,
                         DatePipe,
                         KitExcelExportService,
+                        KitHttpErrorHandlerService,
                         {
                             provide: KIT_ENTITY_CREATE_SERVICE,
                             useExisting: KitUserRolesService,
@@ -17148,5 +17191,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, DeletePartner, FetchApiTokens, FetchPartners, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_ALL_PERMISSIONS_PATH, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_ENTITY_CREATE_SERVICE, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_PARTNERS_STATE_TOKEN, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCodeEditorComponent, KitCodeEditorLanguage, KitCodeEditorMode, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCreateEntityDialogComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEmptySectionSize, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntityTitleComponent, KitExcelExportService, KitExpansionPanelComponent, KitExpansionPanelHeaderTemplateDirective, KitExpansionPanelToggleMode, KitExpansionPanelView, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardSize, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridActionComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridCheckboxColumnComponent, KitGridCheckboxColumnType, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridDropPosition, KitGridExportComponent, KitGridFiltersComponent, KitGridFiltersToggleComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitHttpErrorHandlerService, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitLocationStepperIconTheme, KitLocationStepperTheme, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectGroupTagTemplateDirective, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitOptionToggleSize, KitPageLayoutComponent, KitPartnerComponent, KitPartnerService, KitPartnerState, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSelectableCardComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineCompactComponent, KitTimelineCompactItemTheme, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTreeComponent, KitTreeContentDirective, KitTreeContentFormat, KitTreeViewMode, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserRoleDetailsComponent, KitUserRolesComponent, KitUserRolesService, KitUserRolesState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersSettingsComponent, KitUsersSettingsEntitlementsService, KitUsersSettingsEntitlementsState, KitUsersSettingsReferenceService, KitUsersSettingsService, KitUsersSettingsState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, UpdatePartnerName, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, getTextboxState, isKitFilterDescriptor, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitUserRolesConfig, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, DeletePartner, FetchApiTokens, FetchPartners, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_ALL_PERMISSIONS_PATH, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_ENTITY_CREATE_SERVICE, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_PARTNERS_STATE_TOKEN, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCodeEditorComponent, KitCodeEditorLanguage, KitCodeEditorMode, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCreateEntityDialogComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEmptySectionSize, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntityTitleComponent, KitExcelExportService, KitExpansionPanelComponent, KitExpansionPanelHeaderTemplateDirective, KitExpansionPanelToggleMode, KitExpansionPanelView, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardSize, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridActionComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridCheckboxColumnComponent, KitGridCheckboxColumnType, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridDropPosition, KitGridExportComponent, KitGridFiltersComponent, KitGridFiltersToggleComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitHttpErrorHandlerService, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitLocationStepperIconTheme, KitLocationStepperTheme, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectGroupTagTemplateDirective, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitOptionToggleSize, KitPageLayoutComponent, KitPartnerComponent, KitPartnerService, KitPartnerState, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSelectableCardComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineCompactComponent, KitTimelineCompactItemTheme, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTreeComponent, KitTreeContentDirective, KitTreeContentFormat, KitTreeViewMode, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserRoleDetailsComponent, KitUserRolesComponent, KitUserRolesService, KitUserRolesState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersService, KitUsersSettingsComponent, KitUsersSettingsEntitlementType, KitUsersSettingsEntitlementsService, KitUsersSettingsEntitlementsState, KitUsersSettingsReferenceService, KitUsersSettingsState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, UpdatePartnerName, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, getTextboxState, isKitFilterDescriptor, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitUserRolesConfig, kitUsersSettingsConfig, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
 //# sourceMappingURL=indigina-ui-kit.mjs.map