@indigina/ui-kit 1.1.516 → 1.1.518

package/fesm2022/indigina-ui-kit.mjs

@@ -1037,6 +1037,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     ], template: "<div class=\"kit-textbox\"\n     [ngClass]=\"[state(), size()]\"\n     [class.disabled]=\"disabled()\"\n     [class.readonly]=\"readonly()\">\n  @if (label()) {\n    <kit-form-label class=\"label\"\n                    [for]=\"textbox\"\n                    [text]=\"label()\"\n                    [tooltip]=\"labelTooltip()\"\n    ></kit-form-label>\n  }\n  <div class=\"kit-textbox-input\">\n    @if (icon()) {\n      <kit-svg-icon class=\"kit-textbox-icon\"\n                    [icon]=\"icon()\"\n      ></kit-svg-icon>\n    }\n    <kendo-textbox #textbox\n                   [type]=\"type()\"\n                   [placeholder]=\"placeholder()\"\n                   [disabled]=\"disabled()\"\n                   [readonly]=\"readonly()\"\n                   [value]=\"defaultValue()\"\n                   [maxlength]=\"maxlength()\"\n                   [clearButton]=\"clearButton()\"\n                   (blur)=\"onInputBlur()\"\n                   (focus)=\"focused.emit()\"\n                   (valueChange)=\"onInputChange($event)\"\n    ></kendo-textbox>\n    @if (showStateIcon()) {\n      <kit-svg-icon class=\"kit-textbox-state-icon\"\n                    [icon]=\"customStateIcon() || textboxStateIcon[state()]\"\n      ></kit-svg-icon>\n    }\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"messageTemplate()\" />\n\n  @if (messageText() && !messageTemplate()) {\n    <kit-form-message [icon]=\"messageIcon()\"\n                      [message]=\"messageText()\"\n    ></kit-form-message>\n  }\n</div>\n", styles: [".kit-textbox.large .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.large .k-input{height:44px}.kit-textbox.regular .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px;border-radius:4px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textbox .k-input{padding:0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-textbox .k-input:focus-within{box-shadow:none}.kit-textbox .k-input .k-input-inner{padding:0}.kit-textbox .k-input-inner{width:100%;color:inherit;line-height:1}.kit-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox .k-input-prefix,.kit-textbox .k-input-suffix{height:0}.kit-textbox.default .kit-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.default:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-textbox.default:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-main);outline:2px solid var(--ui-kit-color-focus);outline-offset:0}.kit-textbox.warning .kit-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-textbox.warning .kit-textbox-state-icon,.kit-textbox.warning .kit-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-textbox.warning:focus-within .kit-textbox-input{outline:2px solid var(--ui-kit-color-orange-1);outline-offset:0}.kit-textbox.error .kit-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-textbox.error .kit-textbox-state-icon,.kit-textbox.error .kit-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-textbox.error:focus-within .kit-textbox-input{outline:2px solid var(--ui-kit-color-red-2);outline-offset:0}.kit-textbox.error .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-textbox.success .kit-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textbox.success:hover .kit-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-textbox.success:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-green-1);outline:2px solid var(--ui-kit-color-green-2);outline-offset:0}.kit-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .kit-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox.disabled .kit-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.disabled:hover .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}.kit-textbox.readonly{background:none}.kit-textbox.readonly .k-input{color:var(--ui-kit-color-grey-12)}.kit-textbox.readonly .k-input-inner{cursor:default}.kit-textbox.readonly:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-grey-11);outline:none}.kit-textbox.readonly:hover .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelTooltip", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }, { type: i0.Output, args: ["defaultValueChange"] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], messageTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageTemplate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], showStateIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStateIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], customStateIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStateIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], blured: [{ type: i0.Output, args: ["blured"] }], focused: [{ type: i0.Output, args: ["focused"] }], changed: [{ type: i0.Output, args: ["changed"] }], textboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextBoxComponent), { isSignal: true }] }] } });
 
+const getTextboxState = (control = null) => {
+    return control?.invalid && control?.touched ? KitTextboxState.ERROR : KitTextboxState.DEFAULT;
+};
+
 var KitFormErrorCode;
 (function (KitFormErrorCode) {
     KitFormErrorCode["Required"] = "required";
@@ -8319,7 +8323,7 @@ class KitSearchBarComponent {
         this.closeButtonClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSearchBarComponent, isStandalone: true, selector: "kit-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchString: { classPropertyName: "searchString", publicName: "searchString", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", searchButtonClick: "searchButtonClick", closeButtonClick: "closeButtonClick" }, viewQueries: [{ propertyName: "searchTextboxElementRef", first: true, predicate: ["searchTextboxElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [maxlength]=\"maxLength()\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\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: 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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSearchBarComponent, isStandalone: true, selector: "kit-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchString: { classPropertyName: "searchString", publicName: "searchString", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", searchButtonClick: "searchButtonClick", closeButtonClick: "closeButtonClick" }, viewQueries: [{ propertyName: "searchTextboxElementRef", first: true, predicate: ["searchTextboxElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [maxlength]=\"maxLength()\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox .kit-textbox-input{padding:0 55px 0 8px}.kit-search-bar .search-textbox .kit-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\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: 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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSearchBarComponent, decorators: [{
             type: Component,
@@ -8327,7 +8331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitButtonComponent,
                         KitTextboxComponent,
                         KitSvgIconComponent,
-                    ], template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [maxlength]=\"maxLength()\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"] }]
+                    ], template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [maxlength]=\"maxLength()\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox .kit-textbox-input{padding:0 55px 0 8px}.kit-search-bar .search-textbox .kit-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], searchButtonLabel: [{
@@ -8433,6 +8437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }] });
 
+const KIT_ALL_PERMISSIONS_PATH = new InjectionToken('kitAllPermissionsPath');
+
 const KIT_BASE_PATH = new InjectionToken('kitBasePath');
 const trimTrailingSlash = (path) => {
     return path.endsWith('/') ? path.slice(0, -1) : path;
@@ -8445,11 +8451,16 @@ class KitPermissionsApiService {
         this.httpClient = inject(HttpClient);
         this.basePath = inject(KIT_BASE_PATH);
         this.userPermissionsPath = inject(KIT_USER_PERMISSIONS_PATH);
+        this.allPermissionsPath = inject(KIT_ALL_PERMISSIONS_PATH);
     }
     getUserPermissions() {
         const url = `${this.basePath}/${this.userPermissionsPath}`;
         return this.httpClient.get(url);
     }
+    getAllPermissions() {
+        const url = `${this.basePath}/${this.allPermissionsPath}`;
+        return this.httpClient.get(url);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPermissionsApiService, providedIn: 'root' }); }
 }
@@ -11003,6 +11014,11 @@ const kitTranslations = {
                 error: 'An error occurred while loading data',
                 loadMore: 'Load More',
                 selectValue: 'Select value',
+                create: 'Create New',
+                delete: 'Delete',
+                confirmationDelete: 'Are you sure you want to permanently delete {{name}}?',
+                name: 'Name',
+                save: 'Save',
             },
             tree: {
                 actions: {
@@ -11080,6 +11096,13 @@ const kitTranslations = {
                 cancel: 'Cancel',
                 delete: 'Delete',
             },
+            userRoles: {
+                title: 'User\'s Roles Maintenance',
+                details: 'User\'s Role Details',
+                permissions: {
+                    maintain: 'Maintain',
+                },
+            },
         },
     },
     ru: {
@@ -11245,6 +11268,11 @@ const kitTranslations = {
                 error: 'Произошла ошибка при загрузке данных',
                 loadMore: 'Загрузить еще',
                 selectValue: 'Выберите значение',
+                create: 'Создать',
+                delete: 'Удалить',
+                confirmationDelete: 'Вы уверены, что хотите безвозвратно удалить {{name}}?',
+                name: 'Название',
+                save: 'Сохранить',
             },
             tree: {
                 actions: {
@@ -11319,6 +11347,10 @@ const kitTranslations = {
                 cancel: 'Отмена',
                 delete: 'Удалить',
             },
+            userRoles: {
+                title: 'Управление ролями пользователей',
+                details: 'Детали роли пользователя',
+            },
         },
     },
 };
@@ -15982,11 +16014,484 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     ], template: "<div class=\"kit-tree\">\n  <div class=\"kit-tree-toolbar\">\n    @if (isStructuredFormat()) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"toggleAllTitleKey() | translate\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"toggleAllIcon()\"\n                  [disabled]=\"isExpandAllDisabled()\"\n                  (clicked)=\"toggleAll()\"\n      ></kit-button>\n    }\n    <kit-button kitTooltip\n                kitTooltipFilter=\"kit-button\"\n                [title]=\"'kit.tree.actions.copyRaw' | translate\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.COPY\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                (clicked)=\"copyRawInput()\"\n    ></kit-button>\n    <kit-button kitTooltip\n                kitTooltipFilter=\"kit-button\"\n                [title]=\"'kit.tree.actions.copyPrettified' | translate\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.MAGIC_WAND\"\n                (clicked)=\"copyPrettifiedInput()\"\n    ></kit-button>\n\n    @if (isStructuredFormat()) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"toggleViewTitleKey() | translate\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"toggleViewIcon()\"\n                  [active]=\"isRawView()\"\n                  (clicked)=\"toggleRawFormattedView()\"\n      ></kit-button>\n    }\n\n    @for (action of customActions(); track action.id) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"action.label\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"action.icon\"\n                  [active]=\"activeCustomActionId() === action.id\"\n                  [disabled]=\"!!action.disabled\"\n                  (clicked)=\"onCustomActionClick(action)\"\n      ></kit-button>\n    }\n  </div>\n\n  <div class=\"kit-tree-content\">\n    @if (isCustomContentActive()) {\n      <div class=\"kit-tree-custom-content\">\n        <ng-container [ngTemplateOutlet]=\"activeTemplate()?.templateRef ?? null\"></ng-container>\n      </div>\n    } @else if (isRawView() || !isStructuredFormat()) {\n      <pre class=\"kit-tree-raw\">{{ rawContent() }}</pre>\n    } @else {\n      <kendo-treeview kendoTreeViewHierarchyBinding\n                      kendoTreeViewExpandable\n                      childrenField=\"children\"\n                      textField=\"displayKey\"\n                      expandBy=\"key\"\n                      [nodes]=\"treeNodes()\"\n                      [expandedKeys]=\"expandedKeys()\"\n                      (expandedKeysChange)=\"onExpandedKeysChange($event)\">\n        <ng-template kendoTreeViewNodeTemplate\n                     let-dataItem>\n          <div class=\"kit-tree-node\">\n            @if (dataItem.displayValue !== undefined) {\n              <div class=\"kit-tree-node-key\">{{ dataItem.displayKey }}</div>\n              <div class=\"kit-tree-node-separator\">:</div>\n              @if (!isNodeExpanded(dataItem)) {\n                <div class=\"kit-tree-node-value\">{{ dataItem.displayValue }}</div>\n              }\n            } @else {\n              <div class=\"kit-tree-node-key\">{{ dataItem.text }}</div>\n            }\n          </div>\n        </ng-template>\n      </kendo-treeview>\n    }\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px;--ui-kit-sidebar-collapsed-width: 56px;--ui-kit-sidebar-expanded-width: 256px;--ui-kit-layout-gap: 25px}.kit-tree{padding:15px;background-color:var(--ui-kit-color-white);border:1px solid var(--ui-kit-color-grey-11);border-radius:10px}.kit-tree-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tree-content{padding:15px 0 0}.kit-tree-node{display:flex;align-items:center;gap:5px;padding:3px 0;font-size:14px;font-family:monospace;line-height:1.5}.kit-tree-node-key{color:var(--ui-kit-color-grey-10);font-weight:600}.kit-tree-node-separator{color:var(--ui-kit-color-grey-10)}.kit-tree-node-value{color:var(--ui-kit-color-main)}.kit-tree-raw{margin:0;padding:10px;color:var(--ui-kit-color-grey-10);font-family:monospace;border-radius:6px;white-space:pre-wrap;word-break:break-word;background:var(--ui-kit-color-grey-8)}.kit-tree .k-treeview::-webkit-scrollbar{height:8px;width:8px;background-color:var(--ui-kit-color-white)}.kit-tree .k-treeview::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-tree .k-treeview::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-tree .k-treeview{scrollbar-color:initial}.kit-tree .k-treeview-group{padding-left:20px}.kit-tree .k-treeview-lines{margin:0;padding:0;list-style:none}.kit-tree .k-treeview-leaf{padding:0}.kit-tree .k-treeview-item{list-style:none}.kit-tree .k-treeview-item-content{display:flex;align-items:center;gap:5px;padding-inline-start:calc(var(--kendo-treeview-level, 0) * 20px)}.kit-tree .k-treeview-item-content:hover{background:none}.kit-tree .k-treeview-item-content.k-focus{box-shadow:none}.kit-tree .k-treeview-toggle{margin-inline-start:-25px;width:18px;height:18px;cursor:pointer}.kit-tree .k-treeview-toggle:hover{color:var(--ui-kit-color-main)}.kit-tree .k-treeview-toggle .k-icon{padding:0;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KitTreeContentDirective), { isSignal: true }] }] } });
 
+const KIT_ENTITY_CREATE_SERVICE = new InjectionToken('kitEntityCreateService');
+class KitCreateEntityDialogComponent extends DialogContentBase {
+    constructor() {
+        super(...arguments);
+        this.entityService = inject(KIT_ENTITY_CREATE_SERVICE);
+        this.kitFormErrors = inject(KitFormErrors);
+        this.formBuilder = inject(FormBuilder);
+        this.form = this.formBuilder.group({
+            name: this.formBuilder.control('', [
+                Validators.required,
+                kitWhitespaceValidator(),
+                Validators.maxLength(256),
+            ]),
+        });
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonType = KitButtonType;
+        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+        this.getTextboxState = getTextboxState;
+    }
+    createEntity() {
+        this.isSaving.set(true);
+        this.entityService.save({ name: this.form.controls['name'].value }).pipe(finalize(() => this.isSaving.set(false))).subscribe((data) => {
+            this.dialog.close(data);
+        });
+    }
+    getFormErrorMessages(form, controlName) {
+        return this.kitFormErrors.getErrors(form.controls[controlName]).join('. ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCreateEntityDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitCreateEntityDialogComponent, isStandalone: true, selector: "kit-create-entity-dialog", providers: [KitFormErrors], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { 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: 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCreateEntityDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-create-entity-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TranslateModule,
+                        KitTextboxComponent,
+                        KitDialogActionsComponent,
+                        KitButtonComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], 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"] }]
+        }] });
+
+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 FetchUserRoles extends KitAbstractPayloadAction {
+    static { this.type = '[KitUserRoles] Fetch User Roles'; }
+}
+class FetchUserRoleDetails extends KitAbstractPayloadAction {
+    static { this.type = '[KitUserRoles] Fetch User Role Details'; }
+}
+class DeleteUserRole extends KitAbstractPayloadAction {
+    static { this.type = '[KitUserRoles] Delete User Role'; }
+}
+class UpdateUserRole extends KitAbstractPayloadAction {
+    static { this.type = '[KitUserRoles] Update User Role'; }
+}
+
+class KitUserRolesService {
+    constructor() {
+        this.httpClient = inject(HttpClient);
+        this.baseUrl = `${trimTrailingSlash(inject(KIT_BASE_PATH))}`;
+    }
+    fetchUserRoles({ skip, take, sort, filter }) {
+        return this.httpClient.get(`${this.baseUrl}/users/roles`, { params: kitBuildHttpParams({ $skip: skip, $top: take, $orderby: kitBuildSortString(sort), $filter: kitBuildOdataFilter(filter) }) });
+    }
+    fetchUserRoleDetails(id) {
+        return this.httpClient.get(`${this.baseUrl}/users/roles/${id}`);
+    }
+    save(payload) {
+        if (!payload.id) {
+            return this.httpClient.post(`${this.baseUrl}/users/roles`, { ...payload, permissions: {} });
+        }
+        return this.httpClient.put(`${this.baseUrl}/users/roles/${payload.id}`, payload);
+    }
+    deleteUserRole(id) {
+        return this.httpClient.delete(`${this.baseUrl}/users/roles/${id}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesService, decorators: [{
+            type: Injectable
+        }] });
+
+const KIT_USER_ROLES_STATE_TOKEN = new StateToken('kitUserRoles');
+let KitUserRolesState = class KitUserRolesState {
+    constructor() {
+        this.kitUserRolesService = inject(KitUserRolesService);
+    }
+    fetchUserRoles(ctx, action) {
+        const { skip, take, filter, sort } = action.payload;
+        return this.kitUserRolesService.fetchUserRoles({ skip, take, filter, sort }).pipe(tap(data => {
+            ctx.patchState({
+                roles: {
+                    loading: false,
+                    data: data.data,
+                    total: data.total,
+                },
+            });
+        }), catchError(err => {
+            ctx.patchState({
+                roles: {
+                    loading: false,
+                    data: [],
+                    total: 0,
+                },
+            });
+            return throwError(() => err);
+        }));
+    }
+    fetchUserRoleDetails(ctx, { payload }) {
+        ctx.patchState({
+            roleDetails: { loading: true, data: null },
+        });
+        return this.kitUserRolesService.fetchUserRoleDetails(payload.id).pipe(tap(data => ctx.patchState({
+            roleDetails: {
+                loading: false,
+                data,
+            },
+        })));
+    }
+    deleteUserRole(ctx, { payload }) {
+        return this.kitUserRolesService.deleteUserRole(payload.id).pipe(tap(() => {
+            const state = ctx.getState();
+            const filteredData = state.roles.data.filter(p => p.id !== payload.id);
+            const wasDeleted = filteredData.length < state.roles.data.length;
+            ctx.patchState({
+                roles: {
+                    loading: false,
+                    data: filteredData,
+                    total: wasDeleted ? (state.roles.total ?? 1) - 1 : state.roles.total,
+                },
+                roleDetails: {
+                    data: null,
+                    loading: false,
+                },
+            });
+        }));
+    }
+    updateUserRoleDetails(ctx, { payload }) {
+        return this.kitUserRolesService.save(payload).pipe(tap(() => {
+            ctx.setState(patch({
+                roles: patch({
+                    data: updateItem(ud => ud?.id === payload.id, patch({ name: payload.name })),
+                }),
+                roleDetails: patch({
+                    data: payload,
+                }),
+            }));
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesState }); }
+};
+__decorate([
+    Action(FetchUserRoles)
+], KitUserRolesState.prototype, "fetchUserRoles", null);
+__decorate([
+    Action(FetchUserRoleDetails)
+], KitUserRolesState.prototype, "fetchUserRoleDetails", null);
+__decorate([
+    Action(DeleteUserRole)
+], KitUserRolesState.prototype, "deleteUserRole", null);
+__decorate([
+    Action(UpdateUserRole)
+], KitUserRolesState.prototype, "updateUserRoleDetails", null);
+KitUserRolesState = __decorate([
+    State({
+        name: KIT_USER_ROLES_STATE_TOKEN,
+        defaults: {
+            roles: kitApiResponseDefaultEntities(),
+            roleDetails: kitApiResponseDefaultEntities(),
+        },
+    })
+], KitUserRolesState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesState, decorators: [{
+            type: Injectable
+        }], propDecorators: { fetchUserRoles: [], fetchUserRoleDetails: [], deleteUserRole: [], updateUserRoleDetails: [] } });
+
+class KitUserRoleDetailsComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.kitDialogService = inject(KitDialogService);
+        this.translateService = inject(TranslateService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.kitFormErrors = inject(KitFormErrors);
+        this.roleId = input.required(...(ngDevMode ? [{ debugName: "roleId" }] : /* istanbul ignore next */ []));
+        this.allPermissions = input.required(...(ngDevMode ? [{ debugName: "allPermissions" }] : /* istanbul ignore next */ []));
+        this.deleted = output();
+        this.updated = output();
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonIconPosition = KitButtonIconPosition;
+        this.crudPermissionTypes = [
+            KitPermissionTypes.View,
+            KitPermissionTypes.Create,
+            KitPermissionTypes.Edit,
+            KitPermissionTypes.Delete,
+        ];
+        this.nameControl = new FormControl('', {
+            nonNullable: true,
+            validators: [
+                Validators.required,
+                Validators.maxLength(256),
+            ],
+        });
+        this.userRoleDetails = toSignal(this.store.select(KIT_USER_ROLES_STATE_TOKEN).pipe(map(({ roleDetails }) => roleDetails)), { initialValue: { loading: false, data: null } });
+        this.pendingRoleDetails = signal(null, ...(ngDevMode ? [{ debugName: "pendingRoleDetails" }] : /* istanbul ignore next */ []));
+        this.crudCategories = computed(() => this.filterCategories(true), ...(ngDevMode ? [{ debugName: "crudCategories" }] : /* istanbul ignore next */ []));
+        this.nonCrudCategories = computed(() => this.filterCategories(false), ...(ngDevMode ? [{ debugName: "nonCrudCategories" }] : /* istanbul ignore next */ []));
+        this.isNameTouched = signal(false, ...(ngDevMode ? [{ debugName: "isNameTouched" }] : /* istanbul ignore next */ []));
+        this.isDirty = computed(() => {
+            const pending = this.pendingRoleDetails();
+            const original = this.userRoleDetails().data;
+            if (!pending || !original) {
+                return false;
+            }
+            if (this.nameValue() !== original.name) {
+                return true;
+            }
+            return !this.permissionsEqual(pending.permissions, original.permissions);
+        }, ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
+        this.canSave = computed(() => this.isDirty() && this.nameStatus() === 'VALID', ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+        this.getTextboxState = getTextboxState;
+        this.nameStatus = toSignal(this.nameControl.statusChanges, { initialValue: this.nameControl.status });
+        this.nameValue = toSignal(this.nameControl.valueChanges, { initialValue: this.nameControl.value });
+        this.cancelAction = {
+            text: this.translateService.instant('Cancel'),
+            cssClass: `${KitButtonType.GHOST} ${KitButtonState.DEFAULT} ${KitButtonKind.MEDIUM}`,
+        };
+        this.deleteAction = {
+            text: this.translateService.instant('Buttons.Delete'),
+            cssClass: `${KitButtonType.PRIMARY} ${KitButtonState.ERROR} ${KitButtonKind.MEDIUM}`,
+        };
+        effect(() => {
+            const id = this.roleId();
+            this.store.dispatch(new FetchUserRoleDetails({ id }));
+            this.pendingRoleDetails.set(null);
+            this.isNameTouched.set(false);
+            this.nameControl.reset();
+        });
+        effect(() => {
+            const state = this.userRoleDetails();
+            if (!state.loading && state.data && !this.pendingRoleDetails()) {
+                this.pendingRoleDetails.set({ ...state.data, permissions: { ...state.data.permissions } });
+                this.nameControl.setValue(state.data.name);
+                this.nameControl.markAsPristine();
+            }
+        });
+    }
+    isPermissionSelected(permissions, category, type) {
+        return permissions[category]?.includes(type) ?? false;
+    }
+    togglePermission(category, type, selected) {
+        const pending = this.pendingRoleDetails();
+        if (!pending) {
+            return;
+        }
+        ;
+        const currentTypes = pending.permissions[category] ?? [];
+        const updatedTypes = selected
+            ? [
+                ...currentTypes,
+                type,
+            ]
+            : currentTypes.filter(t => t !== type);
+        this.pendingRoleDetails.set({
+            ...pending,
+            permissions: {
+                ...pending.permissions,
+                [category]: updatedTypes,
+            },
+        });
+    }
+    saveRole() {
+        const pending = this.pendingRoleDetails();
+        if (!pending) {
+            return;
+        }
+        ;
+        this.updated.emit({ ...pending, name: this.nameControl.value });
+    }
+    deleteRole(name) {
+        this.kitDialogService.openDialog({
+            title: `${this.translateService.instant('kit.common.delete')} ${name}`,
+            content: `${this.translateService.instant('kit.common.confirmationDelete', { name })}`,
+            appendTo: this.viewContainerRef,
+            actions: [
+                this.cancelAction,
+                this.deleteAction,
+            ],
+            cssClass: 'delete-group-dialog',
+        });
+        this.kitDialogService.dialogRef?.result.pipe(take(1)).subscribe(action => {
+            if (action === this.deleteAction) {
+                this.deleted.emit();
+            }
+        });
+    }
+    getNameErrorMessages() {
+        return this.kitFormErrors.getErrors(this.nameControl).join('. ');
+    }
+    isCrudCategory(types) {
+        if (types.length !== this.crudPermissionTypes.length) {
+            return false;
+        }
+        return this.crudPermissionTypes.every(t => types.includes(t));
+    }
+    filterCategories(crud) {
+        return Object.entries(this.allPermissions())
+            .filter(([, types]) => this.isCrudCategory(types) === crud)
+            .map(entry => ({ category: entry[0], types: entry[1] }))
+            .sort((a, b) => a.category.localeCompare(b.category));
+    }
+    permissionsEqual(a, b) {
+        const keysA = Object.keys(a).sort((x, y) => x.localeCompare(y));
+        const keysB = Object.keys(b).sort((x, y) => x.localeCompare(y));
+        if (keysA.join() !== keysB.join()) {
+            return false;
+        }
+        return keysA.every(key => {
+            const sortedA = [...(a[key] ?? [])].sort((x, y) => x.localeCompare(y)).join();
+            const sortedB = [...(b[key] ?? [])].sort((x, y) => x.localeCompare(y)).join();
+            return sortedA === sortedB;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRoleDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUserRoleDetailsComponent, isStandalone: true, selector: "kit-user-role-details", inputs: { roleId: { classPropertyName: "roleId", publicName: "roleId", isSignal: true, isRequired: true, transformFunction: null }, allPermissions: { classPropertyName: "allPermissions", publicName: "allPermissions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleted: "deleted", updated: "updated" }, providers: [KitFormErrors], ngImport: i0, template: "@if (userRoleDetails().loading) {\n  <kit-skeleton-section />\n} @else if (pendingRoleDetails()) {\n  <div class=\"user-role-details\">\n    <kit-entity-section-container>\n      <ng-container title>\n        <div class=\"details-header\">\n          <span>{{ \"kit.userRoles.details\" | translate }}</span>\n          <div class=\"details-header-actions\">\n            <kit-button [label]=\"'kit.common.save' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.PRIMARY\"\n                        [disabled]=\"!canSave()\"\n                        (clicked)=\"saveRole()\" />\n            <kit-button [label]=\"'kit.common.delete' | translate\"\n                        [icon]=\"kitSvgIcon.TRASH\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        (clicked)=\"deleteRole(pendingRoleDetails()?.name || '')\"/>\n          </div>\n        </div>\n      </ng-container>\n    </kit-entity-section-container>\n    <div class=\"details-content\">\n      <kit-textbox class=\"textbox-name\"\n                   [label]=\"'kit.common.name' | translate\"\n                   [showStateIcon]=\"false\"\n                   [formControl]=\"nameControl\"\n                   [state]=\"getTextboxState(nameControl)\"\n                   [messageText]=\"getNameErrorMessages()\" />\n\n      <div class=\"permissions\">\n        @if (crudCategories().length) {\n          <table class=\"permissions-table\">\n            <thead>\n              <tr>\n                <th></th>\n                @for (type of crudPermissionTypes; track type) {\n                  <th>{{ \"Permissions.\" + type | translate }}</th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (entry of crudCategories(); track entry.category) {\n                <tr>\n                  <td class=\"permissions-table-category\">\n                    {{ \"kit.userRoles.permissions.maintain\" | translate }} {{ \"Permissions.\" + entry.category | translate }}\n                  </td>\n                  @for (type of crudPermissionTypes; track type) {\n                    <td class=\"permissions-table-cell\">\n                      <kit-checkbox [checked]=\"isPermissionSelected(pendingRoleDetails()!.permissions, entry.category, type)\"\n                                    (changed)=\"togglePermission(entry.category, type, $event)\"\n                      />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n\n        @if (nonCrudCategories().length) {\n          <div class=\"non-crud-permissions\">\n            @for (entry of nonCrudCategories(); track entry.category) {\n              @for (type of $any(entry.types); track type) {\n                <kit-checkbox [label]=\"('Permissions.' + entry.category | translate) + ' ' + ('Permissions.' + type | translate)\"\n                              [checked]=\"isPermissionSelected(pendingRoleDetails()!.permissions, entry.category, type)\"\n                              (changed)=\"togglePermission(entry.category, type, $event)\"\n                />\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".user-role-details .details-header{display:flex;justify-content:space-between;align-items:center}.user-role-details .details-header-actions{display:flex;gap:10px}.user-role-details .details-content{padding-top:20px}.user-role-details .permissions{margin-top:15px}.user-role-details .permissions-table{width:100%;border-collapse:collapse}.user-role-details .permissions-table thead th{text-align:center;padding:8px 12px;font-weight:600}.user-role-details .permissions-table thead th:first-child{text-align:left}.user-role-details .permissions-table tbody tr:nth-child(odd){background-color:var(--ui-kit-color-white)}.user-role-details .permissions-table .permissions-table-category,.user-role-details .permissions-table .permissions-table-cell{padding:8px 12px}.user-role-details .permissions-table .permissions-table-cell{text-align:center}.user-role-details .non-crud-permissions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;padding:8px 12px;margin-top:15px}.user-role-details ::ng-deep .kit-entity-section-container{padding-bottom:10px;gap:0}.user-role-details ::ng-deep .permissions-table .kit-checkbox-input{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { 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: 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: 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: KitUserRoleDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-user-role-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        KitCheckboxComponent,
+                        KitEntitySectionContainerComponent,
+                        KitButtonComponent,
+                        KitTextboxComponent,
+                        TranslatePipe,
+                        KitSkeletonSectionComponent,
+                    ], providers: [KitFormErrors], template: "@if (userRoleDetails().loading) {\n  <kit-skeleton-section />\n} @else if (pendingRoleDetails()) {\n  <div class=\"user-role-details\">\n    <kit-entity-section-container>\n      <ng-container title>\n        <div class=\"details-header\">\n          <span>{{ \"kit.userRoles.details\" | translate }}</span>\n          <div class=\"details-header-actions\">\n            <kit-button [label]=\"'kit.common.save' | translate\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        [type]=\"kitButtonType.PRIMARY\"\n                        [disabled]=\"!canSave()\"\n                        (clicked)=\"saveRole()\" />\n            <kit-button [label]=\"'kit.common.delete' | translate\"\n                        [icon]=\"kitSvgIcon.TRASH\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [kind]=\"kitButtonKind.MEDIUM\"\n                        (clicked)=\"deleteRole(pendingRoleDetails()?.name || '')\"/>\n          </div>\n        </div>\n      </ng-container>\n    </kit-entity-section-container>\n    <div class=\"details-content\">\n      <kit-textbox class=\"textbox-name\"\n                   [label]=\"'kit.common.name' | translate\"\n                   [showStateIcon]=\"false\"\n                   [formControl]=\"nameControl\"\n                   [state]=\"getTextboxState(nameControl)\"\n                   [messageText]=\"getNameErrorMessages()\" />\n\n      <div class=\"permissions\">\n        @if (crudCategories().length) {\n          <table class=\"permissions-table\">\n            <thead>\n              <tr>\n                <th></th>\n                @for (type of crudPermissionTypes; track type) {\n                  <th>{{ \"Permissions.\" + type | translate }}</th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (entry of crudCategories(); track entry.category) {\n                <tr>\n                  <td class=\"permissions-table-category\">\n                    {{ \"kit.userRoles.permissions.maintain\" | translate }} {{ \"Permissions.\" + entry.category | translate }}\n                  </td>\n                  @for (type of crudPermissionTypes; track type) {\n                    <td class=\"permissions-table-cell\">\n                      <kit-checkbox [checked]=\"isPermissionSelected(pendingRoleDetails()!.permissions, entry.category, type)\"\n                                    (changed)=\"togglePermission(entry.category, type, $event)\"\n                      />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n\n        @if (nonCrudCategories().length) {\n          <div class=\"non-crud-permissions\">\n            @for (entry of nonCrudCategories(); track entry.category) {\n              @for (type of $any(entry.types); track type) {\n                <kit-checkbox [label]=\"('Permissions.' + entry.category | translate) + ' ' + ('Permissions.' + type | translate)\"\n                              [checked]=\"isPermissionSelected(pendingRoleDetails()!.permissions, entry.category, type)\"\n                              (changed)=\"togglePermission(entry.category, type, $event)\"\n                />\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".user-role-details .details-header{display:flex;justify-content:space-between;align-items:center}.user-role-details .details-header-actions{display:flex;gap:10px}.user-role-details .details-content{padding-top:20px}.user-role-details .permissions{margin-top:15px}.user-role-details .permissions-table{width:100%;border-collapse:collapse}.user-role-details .permissions-table thead th{text-align:center;padding:8px 12px;font-weight:600}.user-role-details .permissions-table thead th:first-child{text-align:left}.user-role-details .permissions-table tbody tr:nth-child(odd){background-color:var(--ui-kit-color-white)}.user-role-details .permissions-table .permissions-table-category,.user-role-details .permissions-table .permissions-table-cell{padding:8px 12px}.user-role-details .permissions-table .permissions-table-cell{text-align:center}.user-role-details .non-crud-permissions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;padding:8px 12px;margin-top:15px}.user-role-details ::ng-deep .kit-entity-section-container{padding-bottom:10px;gap:0}.user-role-details ::ng-deep .permissions-table .kit-checkbox-input{margin:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { roleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "roleId", required: true }] }], allPermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allPermissions", required: true }] }], deleted: [{ type: i0.Output, args: ["deleted"] }], updated: [{ type: i0.Output, args: ["updated"] }] } });
+
+const kitUserRolesConfig = new InjectionToken('KitUserRolesConfig', {
+    factory: () => {
+        return {
+            listFilters$: of([]),
+        };
+    },
+});
+
+class KitUserRolesComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.kitUserRolesService = inject(KitUserRolesService);
+        this.kitDialogService = inject(KitDialogService);
+        this.translateService = inject(TranslateService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.injector = inject(Injector);
+        this.kitExcelExportService = inject(KitExcelExportService);
+        this.kitPermissionsApiService = inject(KitPermissionsApiService);
+        this.configFilters = toSignal(inject(kitUserRolesConfig).listFilters$, { initialValue: [] });
+        this.kitCardDetailsComponent = viewChild.required((KitCardDetailsComponent));
+        this.roles$ = this.store.select(KIT_USER_ROLES_STATE_TOKEN).pipe(map(({ roles }) => kitBuildGridDataResults(roles.data, roles.loading, roles.total)));
+        this.permissions$ = this.kitPermissionsApiService.getAllPermissions();
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonIconPosition = KitButtonIconPosition;
+        this.selectedCard = signal(null, ...(ngDevMode ? [{ debugName: "selectedCard" }] : /* istanbul ignore next */ []));
+        this.cardDetailsSkeletonConfig = {
+            itemHeight: 54,
+            itemsCount: 5,
+        };
+    }
+    ngOnDestroy() {
+        this.store.dispatch(new StateReset(KitUserRolesState));
+    }
+    onDataStateChanged({ skip, take, search, filters }) {
+        const filter = {
+            logic: filters?.logic ?? KitFilterLogic.AND,
+            filters: [
+                ...(search ? [{ field: 'name', operator: 'contains', value: search }] : []),
+                ...(filters?.filters || []),
+                ...this.configFilters(),
+            ],
+        };
+        this.store.dispatch(new FetchUserRoles({ skip, take, filter, sort: defaultUserRolesSort }));
+    }
+    createNewRole() {
+        this.kitDialogService.openDialog({
+            title: `${this.translateService.instant('CreateNew')}`,
+            content: KitCreateEntityDialogComponent,
+            appendTo: this.viewContainerRef,
+        });
+        this.kitDialogService.dialogRef?.result.pipe(take(1)).subscribe((result) => {
+            if (result && 'id' in result) {
+                this.kitCardDetailsComponent().appendCard(result);
+                this.kitCardDetailsComponent().onCardClick(result);
+                requestAnimationFrame(() => this.kitCardDetailsComponent().scrollToCardById(result.id.toString()));
+            }
+        });
+    }
+    deleteRole(id) {
+        this.store.dispatch(new DeleteUserRole({ id })).subscribe(() => {
+            this.kitCardDetailsComponent().deleteCard(id);
+        });
+    }
+    updateRole(role) {
+        this.store.dispatch(new UpdateUserRole(role)).subscribe(() => {
+            this.kitCardDetailsComponent().updateSpecificCardData({ id: role.id, name: role.name });
+        });
+    }
+    exportExcel() {
+        const configFilters = this.configFilters();
+        const filter = {
+            logic: KitFilterLogic.AND,
+            filters: [...configFilters],
+        };
+        this.kitUserRolesService.fetchUserRoles({ filter }).subscribe(data => {
+            runInInjectionContext(this.injector, () => {
+                this.kitExcelExportService.export(data.data, exportedUserRoleColumns, 'User Roles', {});
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitUserRolesComponent, isStandalone: true, selector: "kit-user-roles", providers: [
+            KitGridCellService,
+            DecimalPipe,
+            DatePipe,
+            KitExcelExportService,
+            {
+                provide: KIT_ENTITY_CREATE_SERVICE,
+                useExisting: KitUserRolesService,
+            },
+        ], viewQueries: [{ propertyName: "kitCardDetailsComponent", first: true, predicate: (KitCardDetailsComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"user-roles\">\n  <kit-card-details [cardData$]=\"roles$\"\n                    [pageSize]=\"10\"\n                    [title]=\"'kit.userRoles.title' | translate\"\n                    [cardSkeletonConfig]=\"cardDetailsSkeletonConfig\"\n                    (dataStateChanged)=\"onDataStateChanged($event)\"\n                    (cardClicked)=\"selectedCard.set($event)\">\n    <ng-template #headerActions>\n      <div class=\"header-actions\">\n        <kit-button [label]=\"'kit.export.title' | 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.common.create' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"createNewRole()\" />\n      </div>\n    </ng-template>\n\n    <ng-template #cardElement\n                 let-card>\n      <p class=\"user-roles-card-name\">\n        <kit-truncate-text>{{ card.name }}</kit-truncate-text>\n      </p>\n    </ng-template>\n\n    <ng-template #details\n                 let-activeId>\n        <div class=\"user-roles-details\">\n          <kit-user-role-details [roleId]=\"activeId\"\n                                 [allPermissions]=\"(permissions$ | async) || {}\"\n                                 (deleted)=\"deleteRole(activeId)\"\n                                 (updated)=\"updateRole($event)\" />\n        </div>\n    </ng-template>\n  </kit-card-details>\n</div>\n", styles: [".user-roles .header-actions{display:flex;gap:10px}.user-roles-card-name{margin:10px 0}\n"], dependencies: [{ kind: "component", type: KitCardDetailsComponent, selector: "kit-card-details", inputs: ["cardData$", "pageSize", "title", "cardSkeletonConfig"], outputs: ["dataStateChanged", "cardClicked"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "component", type: KitUserRoleDetailsComponent, selector: "kit-user-role-details", inputs: ["roleId", "allPermissions"], outputs: ["deleted", "updated"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserRolesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-user-roles', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        KitCardDetailsComponent,
+                        TranslatePipe,
+                        KitButtonComponent,
+                        KitTruncateTextComponent,
+                        KitUserRoleDetailsComponent,
+                        AsyncPipe,
+                    ], providers: [
+                        KitGridCellService,
+                        DecimalPipe,
+                        DatePipe,
+                        KitExcelExportService,
+                        {
+                            provide: KIT_ENTITY_CREATE_SERVICE,
+                            useExisting: KitUserRolesService,
+                        },
+                    ], template: "<div class=\"user-roles\">\n  <kit-card-details [cardData$]=\"roles$\"\n                    [pageSize]=\"10\"\n                    [title]=\"'kit.userRoles.title' | translate\"\n                    [cardSkeletonConfig]=\"cardDetailsSkeletonConfig\"\n                    (dataStateChanged)=\"onDataStateChanged($event)\"\n                    (cardClicked)=\"selectedCard.set($event)\">\n    <ng-template #headerActions>\n      <div class=\"header-actions\">\n        <kit-button [label]=\"'kit.export.title' | 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.common.create' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"createNewRole()\" />\n      </div>\n    </ng-template>\n\n    <ng-template #cardElement\n                 let-card>\n      <p class=\"user-roles-card-name\">\n        <kit-truncate-text>{{ card.name }}</kit-truncate-text>\n      </p>\n    </ng-template>\n\n    <ng-template #details\n                 let-activeId>\n        <div class=\"user-roles-details\">\n          <kit-user-role-details [roleId]=\"activeId\"\n                                 [allPermissions]=\"(permissions$ | async) || {}\"\n                                 (deleted)=\"deleteRole(activeId)\"\n                                 (updated)=\"updateRole($event)\" />\n        </div>\n    </ng-template>\n  </kit-card-details>\n</div>\n", styles: [".user-roles .header-actions{display:flex;gap:10px}.user-roles-card-name{margin:10px 0}\n"] }]
+        }], propDecorators: { kitCardDetailsComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitCardDetailsComponent), { isSignal: true }] }] } });
+
 // KitButton
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchApiTokens, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_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, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, 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, 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, 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, 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, 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, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersSettingsComponent, KitUsersSettingsEntitlementsService, KitUsersSettingsEntitlementsState, KitUsersSettingsReferenceService, KitUsersSettingsService, KitUsersSettingsState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, isKitFilterDescriptor, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchApiTokens, 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_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, 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, 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, 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, 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, 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, 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 };
 //# sourceMappingURL=indigina-ui-kit.mjs.map