@indigina/ui-kit 1.1.233 → 1.1.235

package/fesm2022/indigina-ui-kit.mjs

@@ -7957,14 +7957,16 @@ class KitGridViewsManagerComponent extends DialogContentBase {
         this.store = store;
         this.dialog = dialog;
         this.configGroup = input.required(...(ngDevMode ? [{ debugName: "configGroup" }] : []));
-        this.items = signal(this.store.selectSnapshot(KitGridViewsState.getViews()) ?? [], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.items = signal((this.store.selectSnapshot(KitGridViewsState.getViews()) ?? []).map(v => ({ ...v })), ...(ngDevMode ? [{ debugName: "items" }] : []));
         this.hasUnsavedChanges = signal(false, ...(ngDevMode ? [{ debugName: "hasUnsavedChanges" }] : []));
         this.kitButtonKind = KitButtonKind;
         this.kitButtonType = KitButtonType;
         this.kitSvgIcon = KitSvgIcon;
         this.kitSvgIconType = KitSvgIconType;
+        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
     }
     applyChanges() {
+        this.isSaving.set(true);
         const existingViews = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.views;
         const viewsToRemove = existingViews
             .filter(view => !this.items()
@@ -7985,6 +7987,7 @@ class KitGridViewsManagerComponent extends DialogContentBase {
         ]).subscribe(() => {
             this.hasUnsavedChanges.set(false);
             this.dialog.close(true);
+            this.isSaving.set(false);
         });
     }
     close() {
@@ -8007,7 +8010,7 @@ class KitGridViewsManagerComponent extends DialogContentBase {
         this.hasUnsavedChanges.set(JSON.stringify(views) !== JSON.stringify(this.items()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$e.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                [disabled]=\"isSaving()\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges() || isSaving()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
             type: Component,
@@ -8020,7 +8023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         KitDialogActionsComponent,
                         TitleCasePipe,
                         KitTruncateTextComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                [disabled]=\"isSaving()\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges() || isSaving()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"] }]
         }], ctorParameters: () => [{ type: i1$e.Store }, { type: i1$8.DialogRef }] });
 
 class KitGridViewsComponent {
@@ -8349,11 +8352,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }], ctorParameters: () => [{ type: KitSettingsApiService }], propDecorators: { fetchUserSetting: [], setSettingByKey: [] } });
 
 class KitUserSettingsComponent {
-    constructor(store, kitBreadcrumbsService) {
+    constructor(store) {
         this.store = store;
-        this.kitBreadcrumbsService = kitBreadcrumbsService;
         this.kitUserSettings = input([], ...(ngDevMode ? [{ debugName: "kitUserSettings" }] : []));
-        this.breadcrumbs = this.kitBreadcrumbsService.breadcrumbs;
+        this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : []));
         this.userSettings$ = this.store.select(KIT_USER_SETTINGS_STATE_TOKEN);
     }
     setUserSettingByKey(key, value) {
@@ -8362,19 +8364,19 @@ class KitUserSettingsComponent {
             value: JSON.stringify(value),
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitUserSettingsComponent, deps: [{ token: i1$e.Store }, { token: KitBreadcrumbsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitUserSettingsComponent, isStandalone: true, selector: "kit-user-settings", inputs: { kitUserSettings: { classPropertyName: "kitUserSettings", publicName: "kitUserSettings", isSignal: true, isRequired: false, transformFunction: null } }, providers: [KitBreadcrumbsService], ngImport: i0, template: "<kit-breadcrumbs [items]=\"breadcrumbs()\" />\n<div class=\"kit-user-settings-title\">\n  <kit-entity-title>\n    {{ \"kit.userSettings.title\" | translate }}\n  </kit-entity-title>\n</div>\n\n@if (userSettings$ | async; as userSettings) {\n  <div class=\"kit-user-settings-content\">\n    @for (setting of kitUserSettings(); track setting.key) {\n      <p class=\"text\">{{ setting.title }}</p>\n      <kit-toggle class=\"switcher\"\n                  [defaultChecked]=\"userSettings[setting.key] === 'true'\"\n                  (changed)=\"setUserSettingByKey(setting.key, $event)\" />\n    }\n  </div>\n}\n", styles: [".kit-user-settings-title{margin-top:25px;margin-bottom:25px}.kit-user-settings-content{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:10px}.kit-user-settings-content .text{color:var(--color-grey-4);font-size:14px;font-weight:400}.kit-user-settings-content .switcher{justify-self:end}\n"], dependencies: [{ kind: "ngmodule", type: KitBreadcrumbsModule }, { kind: "component", type: KitBreadcrumbsComponent, selector: "kit-breadcrumbs", inputs: ["items"] }, { kind: "ngmodule", type: KitToggleModule }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "ngmodule", type: KitEntityTitleModule }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitUserSettingsComponent, deps: [{ token: i1$e.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitUserSettingsComponent, isStandalone: true, selector: "kit-user-settings", inputs: { kitUserSettings: { classPropertyName: "kitUserSettings", publicName: "kitUserSettings", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-user-settings-title\"\n     [ngClass]=\"theme()\">\n  <kit-entity-title>\n    {{ \"kit.userSettings.title\" | translate }}\n  </kit-entity-title>\n</div>\n\n@if (userSettings$ | async; as userSettings) {\n  <div class=\"kit-user-settings-content\"\n       [ngClass]=\"theme()\">\n    @for (setting of kitUserSettings(); track setting.key) {\n      <p class=\"text\">{{ setting.title }}</p>\n      <kit-toggle class=\"switcher\"\n                  [defaultChecked]=\"userSettings[setting.key] === 'true'\"\n                  (changed)=\"setUserSettingByKey(setting.key, $event)\" />\n    }\n  </div>\n}\n", styles: [".kit-user-settings-title{margin-top:25px;margin-bottom:25px}.kit-user-settings-content{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:10px}.kit-user-settings-content .text{color:var(--color-grey-4);font-size:14px;font-weight:400}.kit-user-settings-content .switcher{justify-self:end}.kit-user-settings-content.dark .text{color:var(--ui-kit-color-white)}::ng-deep .kit-user-settings-title.dark .kit-entity-title{color:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: KitToggleModule }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "ngmodule", type: KitEntityTitleModule }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitUserSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-user-settings', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        KitBreadcrumbsModule,
                         KitToggleModule,
                         KitEntityTitleModule,
                         TranslatePipe,
                         AsyncPipe,
-                    ], providers: [KitBreadcrumbsService], template: "<kit-breadcrumbs [items]=\"breadcrumbs()\" />\n<div class=\"kit-user-settings-title\">\n  <kit-entity-title>\n    {{ \"kit.userSettings.title\" | translate }}\n  </kit-entity-title>\n</div>\n\n@if (userSettings$ | async; as userSettings) {\n  <div class=\"kit-user-settings-content\">\n    @for (setting of kitUserSettings(); track setting.key) {\n      <p class=\"text\">{{ setting.title }}</p>\n      <kit-toggle class=\"switcher\"\n                  [defaultChecked]=\"userSettings[setting.key] === 'true'\"\n                  (changed)=\"setUserSettingByKey(setting.key, $event)\" />\n    }\n  </div>\n}\n", styles: [".kit-user-settings-title{margin-top:25px;margin-bottom:25px}.kit-user-settings-content{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:10px}.kit-user-settings-content .text{color:var(--color-grey-4);font-size:14px;font-weight:400}.kit-user-settings-content .switcher{justify-self:end}\n"] }]
-        }], ctorParameters: () => [{ type: i1$e.Store }, { type: KitBreadcrumbsService }] });
+                        NgClass,
+                    ], template: "<div class=\"kit-user-settings-title\"\n     [ngClass]=\"theme()\">\n  <kit-entity-title>\n    {{ \"kit.userSettings.title\" | translate }}\n  </kit-entity-title>\n</div>\n\n@if (userSettings$ | async; as userSettings) {\n  <div class=\"kit-user-settings-content\"\n       [ngClass]=\"theme()\">\n    @for (setting of kitUserSettings(); track setting.key) {\n      <p class=\"text\">{{ setting.title }}</p>\n      <kit-toggle class=\"switcher\"\n                  [defaultChecked]=\"userSettings[setting.key] === 'true'\"\n                  (changed)=\"setUserSettingByKey(setting.key, $event)\" />\n    }\n  </div>\n}\n", styles: [".kit-user-settings-title{margin-top:25px;margin-bottom:25px}.kit-user-settings-content{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:10px}.kit-user-settings-content .text{color:var(--color-grey-4);font-size:14px;font-weight:400}.kit-user-settings-content .switcher{justify-self:end}.kit-user-settings-content.dark .text{color:var(--ui-kit-color-white)}::ng-deep .kit-user-settings-title.dark .kit-entity-title{color:var(--ui-kit-color-white)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$e.Store }] });
 
 var KitUserSettingsKeys;
 (function (KitUserSettingsKeys) {