@indigina/ui-kit 1.1.439 → 1.1.441

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/indigina-ui-kit.mjs +1977 -1185
  2. package/fesm2022/indigina-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/indigina-ui-kit.d.ts +228 -116
package/fesm2022/indigina-ui-kit.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as i1$6 from '@angular/common';
2
2
  import { NgClass, NgTemplateOutlet, CommonModule, DatePipe, AsyncPipe, TitleCasePipe, DecimalPipe, Location } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, effect, ElementRef, NgZone, Renderer2, Directive, viewChild, model, output, forwardRef, signal, HostListener, TemplateRef, ContentChild, computed, NgModule, RendererFactory2, ViewChild, DOCUMENT, ViewContainerRef, DestroyRef, contentChild, contentChildren, ContentChildren, viewChildren, Pipe, Injector, runInInjectionContext } from '@angular/core';
4
+ import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, effect, ElementRef, NgZone, Renderer2, Directive, viewChild, model, output, forwardRef, signal, HostListener, TemplateRef, ContentChild, computed, NgModule, RendererFactory2, ViewChild, DOCUMENT, ViewContainerRef, DestroyRef, contentChild, afterNextRender, contentChildren, ContentChildren, viewChildren, Pipe, Injector, runInInjectionContext } from '@angular/core';
5
5
  import * as i1 from '@progress/kendo-angular-buttons';
6
6
  import { ButtonModule, ButtonGroupModule, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
7
7
  import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
8
- import { map, catchError, EMPTY, forkJoin, BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, combineLatest, tap, debounceTime, distinctUntilChanged, take, switchMap, of, finalize } from 'rxjs';
8
+ import { map, catchError, EMPTY, forkJoin, BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, combineLatest, tap, debounceTime, distinctUntilChanged, take, switchMap, of, finalize, throwError } from 'rxjs';
9
9
  import * as i1$2 from '@progress/kendo-angular-label';
10
10
  import { LabelModule } from '@progress/kendo-angular-label';
11
11
  import * as i1$1 from '@progress/kendo-angular-tooltip';
@@ -36,7 +36,7 @@ import * as i1$a from '@progress/kendo-angular-indicators';
36
36
  import { IndicatorsModule, KENDO_INDICATORS } from '@progress/kendo-angular-indicators';
37
37
  import * as i1$b from '@progress/kendo-angular-upload';
38
38
  import { UploadModule } from '@progress/kendo-angular-upload';
39
- import { takeUntilDestroyed, toSignal, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
39
+ import { takeUntilDestroyed, outputToObservable, toSignal, toObservable } from '@angular/core/rxjs-interop';
40
40
  import initials from 'initials';
41
41
  import * as i1$c from '@progress/kendo-angular-layout';
42
42
  import { KENDO_LAYOUT, TileLayoutModule, DrawerComponent } from '@progress/kendo-angular-layout';
@@ -49,9 +49,9 @@ import { StateToken, Action, State, Store, Selector, createSelector, provideStat
49
49
  import { __decorate } from 'tslib';
50
50
  import * as i2$1 from '@progress/kendo-angular-sortable';
51
51
  import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
52
+ import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
52
53
  import { toODataString, filterBy } from '@progress/kendo-data-query';
53
54
  import { DeviceDetectorService } from 'ngx-device-detector';
54
- import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
55
55
  import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
56
56
  import { StateReset } from 'ngxs-reset-plugin';
57
57
  import { pdf } from '@progress/kendo-drawing';
@@ -835,6 +835,7 @@ class KitTextboxComponent {
835
835
  this.showStateIcon = input(true, ...(ngDevMode ? [{ debugName: "showStateIcon" }] : /* istanbul ignore next */ []));
836
836
  this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
837
837
  this.customStateIcon = input(...(ngDevMode ? [undefined, { debugName: "customStateIcon" }] : /* istanbul ignore next */ []));
838
+ this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
838
839
  /**
839
840
  * An action which is emitted when input field lost focus
840
841
  */
@@ -896,11 +897,11 @@ class KitTextboxComponent {
896
897
  this.changed.emit(value);
897
898
  }
898
899
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
899
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitTextboxComponent, isStandalone: true, selector: "kit-textbox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelTooltip: { classPropertyName: "labelTooltip", publicName: "labelTooltip", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: true, isRequired: false, transformFunction: null }, messageTemplate: { classPropertyName: "messageTemplate", publicName: "messageTemplate", 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 }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, showStateIcon: { classPropertyName: "showStateIcon", publicName: "showStateIcon", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, customStateIcon: { classPropertyName: "customStateIcon", publicName: "customStateIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultValue: "defaultValueChange", disabled: "disabledChange", blured: "blured", focused: "focused", changed: "changed" }, providers: [{
900
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitTextboxComponent, isStandalone: true, selector: "kit-textbox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelTooltip: { classPropertyName: "labelTooltip", publicName: "labelTooltip", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: true, isRequired: false, transformFunction: null }, messageTemplate: { classPropertyName: "messageTemplate", publicName: "messageTemplate", 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 }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, showStateIcon: { classPropertyName: "showStateIcon", publicName: "showStateIcon", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, customStateIcon: { classPropertyName: "customStateIcon", publicName: "customStateIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultValue: "defaultValueChange", disabled: "disabledChange", blured: "blured", focused: "focused", changed: "changed" }, providers: [{
900
901
  provide: NG_VALUE_ACCESSOR,
901
902
  useExisting: forwardRef(() => KitTextboxComponent),
902
903
  multi: true,
903
- }], viewQueries: [{ propertyName: "textboxComponent", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, 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 [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.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"], dependencies: [{ kind: "ngmodule", type: TextBoxModule }, { kind: "component", type: i1$3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
904
+ }], viewQueries: [{ propertyName: "textboxComponent", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, 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.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"], dependencies: [{ kind: "ngmodule", type: TextBoxModule }, { kind: "component", type: i1$3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
904
905
  }
905
906
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTextboxComponent, decorators: [{
906
907
  type: Component,
@@ -915,8 +916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
915
916
  KitSvgIconComponent,
916
917
  NgClass,
917
918
  NgTemplateOutlet,
918
- ], 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 [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.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"] }]
919
- }], 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 }] }], 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 }] }] } });
919
+ ], 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.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"] }]
920
+ }], 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 }] }] } });
920
921
 
921
922
  var KitFormErrorCode;
922
923
  (function (KitFormErrorCode) {
@@ -1120,7 +1121,7 @@ class KitTextboxActionsComponent {
1120
1121
  useExisting: forwardRef(() => KitTextboxActionsComponent),
1121
1122
  multi: true,
1122
1123
  },
1123
- ], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"textbox\" />\n}\n<div class=\"kit-textbox-wrapper\">\n <kit-textbox #textbox\n class=\"textbox\"\n maxLength=\"250\"\n [disabled]=\"disabled()\"\n [defaultValue]=\"defaultValue()\"\n [placeholder]=\"placeholder()\"\n [showStateIcon]=\"false\"\n [state]=\"validationErrors().length ? kitTextboxState.ERROR : kitTextboxState.DEFAULT\"\n [messageText]=\"validationErrors().join('. ')\"\n (changed)=\"onTextboxChange($event)\" />\n @if (isTextboxFocused() && showActions()) {\n <div class=\"kit-textbox-actions\">\n <kit-button [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"isSaveDisabled()\"\n (clicked)=\"save()\" />\n <kit-button [icon]=\"kitSvgIcon.CROSS\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"revertChanges()\" />\n </div>\n }\n</div>\n", styles: [".label{display:block;margin-bottom:4px}.kit-textbox-wrapper{width:100%;display:flex;gap:10px}.kit-textbox-wrapper .textbox{width:100%}.kit-textbox-actions{display:flex;align-items:start;gap:10px}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1124
+ ], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"textbox\" />\n}\n<div class=\"kit-textbox-wrapper\">\n <kit-textbox #textbox\n class=\"textbox\"\n maxLength=\"250\"\n [disabled]=\"disabled()\"\n [defaultValue]=\"defaultValue()\"\n [placeholder]=\"placeholder()\"\n [showStateIcon]=\"false\"\n [state]=\"validationErrors().length ? kitTextboxState.ERROR : kitTextboxState.DEFAULT\"\n [messageText]=\"validationErrors().join('. ')\"\n (changed)=\"onTextboxChange($event)\" />\n @if (isTextboxFocused() && showActions()) {\n <div class=\"kit-textbox-actions\">\n <kit-button [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"isSaveDisabled()\"\n (clicked)=\"save()\" />\n <kit-button [icon]=\"kitSvgIcon.CROSS\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"revertChanges()\" />\n </div>\n }\n</div>\n", styles: [".label{display:block;margin-bottom:4px}.kit-textbox-wrapper{width:100%;display:flex;gap:10px}.kit-textbox-wrapper .textbox{width:100%}.kit-textbox-actions{display:flex;align-items:start;gap:10px}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1124
1125
  }
1125
1126
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTextboxActionsComponent, decorators: [{
1126
1127
  type: Component,
@@ -2703,7 +2704,7 @@ class KitToggleComponent {
2703
2704
  provide: NG_VALUE_ACCESSOR,
2704
2705
  useExisting: forwardRef(() => KitToggleComponent),
2705
2706
  multi: true,
2706
- }], ngImport: i0, template: "<div class=\"kit-toggle\"\n [ngClass]=\"size()\"\n [class.disabled]=\"disabled()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n ></kit-form-label>\n }\n\n <div class=\"kit-toggle-wrapper\">\n @if (leftLabel()) {\n <div class=\"toggle-label\">{{ leftLabel() }}</div>\n }\n <kendo-switch [checked]=\"defaultChecked()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (valueChange)=\"onInputStateChange($event)\"\n ></kendo-switch>\n @if (rightLabel()) {\n <div class=\"toggle-label\">{{ rightLabel() }}</div>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-toggle.regular .kit-toggle-wrapper{padding:0 20px;height:40px;border-radius:8px}.kit-toggle.regular .k-switch{width:44px;height:22px}.kit-toggle.regular .k-switch-thumb{width:18px;height:18px}.kit-toggle.regular .k-switch-off .k-switch-thumb-wrap{left:11px}.kit-toggle.regular .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 11px)}.kit-toggle.small .kit-toggle-wrapper{padding:0 8px;height:32px;border-radius:4px}.kit-toggle.small .k-switch{width:38px;height:20px}.kit-toggle.small .k-switch-thumb{width:16px;height:16px}.kit-toggle.small .k-switch-off .k-switch-thumb-wrap{left:10px}.kit-toggle.small .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 10px)}.kit-toggle .label{display:block;margin-bottom:4px}.kit-toggle-wrapper{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-toggle .toggle-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-toggle .k-switch .k-switch-track{width:100%;height:100%}.kit-toggle .k-switch-track{display:flex;align-items:center;box-shadow:none;border:none;border-radius:14px;background:var(--ui-kit-color-grey-12)}.kit-toggle .k-switch-track:hover{box-shadow:none}.kit-toggle .k-switch-thumb{border:none;border-radius:50%;background:var(--ui-kit-color-grey-13);box-shadow:0 2px 4px #00230b33}.kit-toggle .k-switch-label-on,.kit-toggle .k-switch-label-off{display:none}.kit-toggle .k-focus .k-switch-track{outline:none}.kit-toggle .k-switch-on .k-switch-track{background:var(--ui-kit-color-main)}.kit-toggle .k-disabled{opacity:1}.kit-toggle.disabled .toggle-label{color:var(--ui-kit-color-grey-12)}.kit-toggle.disabled .k-switch-track{background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "ngmodule", type: SwitchModule }, { kind: "component", type: i1$3.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2707
+ }], ngImport: i0, template: "<div class=\"kit-toggle\"\n [ngClass]=\"size()\"\n [class.disabled]=\"disabled()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n ></kit-form-label>\n }\n\n <div class=\"kit-toggle-wrapper\">\n @if (leftLabel()) {\n <div class=\"toggle-label\">{{ leftLabel() }}</div>\n }\n <kendo-switch [checked]=\"defaultChecked()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (valueChange)=\"onInputStateChange($event)\"\n ></kendo-switch>\n @if (rightLabel()) {\n <div class=\"toggle-label\">{{ rightLabel() }}</div>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-toggle.regular .kit-toggle-wrapper{padding:0 20px;height:40px;border-radius:8px}.kit-toggle.regular .k-switch{width:44px;height:22px;background:transparent}.kit-toggle.regular .k-switch-thumb{width:18px;height:18px}.kit-toggle.regular .k-switch-off .k-switch-thumb-wrap{left:11px}.kit-toggle.regular .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 11px)}.kit-toggle.small .kit-toggle-wrapper{padding:0 8px;height:32px;border-radius:4px}.kit-toggle.small .k-switch{width:38px;height:20px}.kit-toggle.small .k-switch-thumb{width:16px;height:16px}.kit-toggle.small .k-switch-off .k-switch-thumb-wrap{left:10px}.kit-toggle.small .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 10px)}.kit-toggle .label{display:block;margin-bottom:4px}.kit-toggle-wrapper{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-toggle .toggle-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-toggle .k-switch .k-switch-track{width:100%;height:100%}.kit-toggle .k-switch-track{display:flex;align-items:center;box-shadow:none;border:none;border-radius:14px;background:var(--ui-kit-color-grey-12)}.kit-toggle .k-switch-track:hover{box-shadow:none}.kit-toggle .k-switch-thumb{border:none;border-radius:50%;background:var(--ui-kit-color-grey-13);box-shadow:0 2px 4px #00230b33}.kit-toggle .k-switch-label-on,.kit-toggle .k-switch-label-off{display:none}.kit-toggle .k-focus .k-switch-track{outline:none}.kit-toggle .k-switch-on .k-switch-track{background:var(--ui-kit-color-main)}.kit-toggle .k-disabled{opacity:1}.kit-toggle.disabled .toggle-label{color:var(--ui-kit-color-grey-12)}.kit-toggle.disabled .k-switch-track{background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "ngmodule", type: SwitchModule }, { kind: "component", type: i1$3.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2707
2708
  }
2708
2709
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitToggleComponent, decorators: [{
2709
2710
  type: Component,
@@ -2716,7 +2717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
2716
2717
  provide: NG_VALUE_ACCESSOR,
2717
2718
  useExisting: forwardRef(() => KitToggleComponent),
2718
2719
  multi: true,
2719
- }], template: "<div class=\"kit-toggle\"\n [ngClass]=\"size()\"\n [class.disabled]=\"disabled()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n ></kit-form-label>\n }\n\n <div class=\"kit-toggle-wrapper\">\n @if (leftLabel()) {\n <div class=\"toggle-label\">{{ leftLabel() }}</div>\n }\n <kendo-switch [checked]=\"defaultChecked()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (valueChange)=\"onInputStateChange($event)\"\n ></kendo-switch>\n @if (rightLabel()) {\n <div class=\"toggle-label\">{{ rightLabel() }}</div>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-toggle.regular .kit-toggle-wrapper{padding:0 20px;height:40px;border-radius:8px}.kit-toggle.regular .k-switch{width:44px;height:22px}.kit-toggle.regular .k-switch-thumb{width:18px;height:18px}.kit-toggle.regular .k-switch-off .k-switch-thumb-wrap{left:11px}.kit-toggle.regular .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 11px)}.kit-toggle.small .kit-toggle-wrapper{padding:0 8px;height:32px;border-radius:4px}.kit-toggle.small .k-switch{width:38px;height:20px}.kit-toggle.small .k-switch-thumb{width:16px;height:16px}.kit-toggle.small .k-switch-off .k-switch-thumb-wrap{left:10px}.kit-toggle.small .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 10px)}.kit-toggle .label{display:block;margin-bottom:4px}.kit-toggle-wrapper{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-toggle .toggle-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-toggle .k-switch .k-switch-track{width:100%;height:100%}.kit-toggle .k-switch-track{display:flex;align-items:center;box-shadow:none;border:none;border-radius:14px;background:var(--ui-kit-color-grey-12)}.kit-toggle .k-switch-track:hover{box-shadow:none}.kit-toggle .k-switch-thumb{border:none;border-radius:50%;background:var(--ui-kit-color-grey-13);box-shadow:0 2px 4px #00230b33}.kit-toggle .k-switch-label-on,.kit-toggle .k-switch-label-off{display:none}.kit-toggle .k-focus .k-switch-track{outline:none}.kit-toggle .k-switch-on .k-switch-track{background:var(--ui-kit-color-main)}.kit-toggle .k-disabled{opacity:1}.kit-toggle.disabled .toggle-label{color:var(--ui-kit-color-grey-12)}.kit-toggle.disabled .k-switch-track{background:var(--ui-kit-color-grey-13)}\n"] }]
2720
+ }], template: "<div class=\"kit-toggle\"\n [ngClass]=\"size()\"\n [class.disabled]=\"disabled()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n ></kit-form-label>\n }\n\n <div class=\"kit-toggle-wrapper\">\n @if (leftLabel()) {\n <div class=\"toggle-label\">{{ leftLabel() }}</div>\n }\n <kendo-switch [checked]=\"defaultChecked()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (valueChange)=\"onInputStateChange($event)\"\n ></kendo-switch>\n @if (rightLabel()) {\n <div class=\"toggle-label\">{{ rightLabel() }}</div>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-toggle.regular .kit-toggle-wrapper{padding:0 20px;height:40px;border-radius:8px}.kit-toggle.regular .k-switch{width:44px;height:22px;background:transparent}.kit-toggle.regular .k-switch-thumb{width:18px;height:18px}.kit-toggle.regular .k-switch-off .k-switch-thumb-wrap{left:11px}.kit-toggle.regular .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 11px)}.kit-toggle.small .kit-toggle-wrapper{padding:0 8px;height:32px;border-radius:4px}.kit-toggle.small .k-switch{width:38px;height:20px}.kit-toggle.small .k-switch-thumb{width:16px;height:16px}.kit-toggle.small .k-switch-off .k-switch-thumb-wrap{left:10px}.kit-toggle.small .k-switch-on .k-switch-thumb-wrap{left:calc(100% - 10px)}.kit-toggle .label{display:block;margin-bottom:4px}.kit-toggle-wrapper{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-toggle .toggle-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-toggle .k-switch .k-switch-track{width:100%;height:100%}.kit-toggle .k-switch-track{display:flex;align-items:center;box-shadow:none;border:none;border-radius:14px;background:var(--ui-kit-color-grey-12)}.kit-toggle .k-switch-track:hover{box-shadow:none}.kit-toggle .k-switch-thumb{border:none;border-radius:50%;background:var(--ui-kit-color-grey-13);box-shadow:0 2px 4px #00230b33}.kit-toggle .k-switch-label-on,.kit-toggle .k-switch-label-off{display:none}.kit-toggle .k-focus .k-switch-track{outline:none}.kit-toggle .k-switch-on .k-switch-track{background:var(--ui-kit-color-main)}.kit-toggle .k-disabled{opacity:1}.kit-toggle.disabled .toggle-label{color:var(--ui-kit-color-grey-12)}.kit-toggle.disabled .k-switch-track{background:var(--ui-kit-color-grey-13)}\n"] }]
2720
2721
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }, { type: i0.Output, args: ["defaultCheckedChange"] }], leftLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftLabel", required: false }] }], rightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightLabel", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
2721
2722
 
2722
2723
  const buildRandomUUID = () => v4();
@@ -3245,7 +3246,7 @@ class KitDateRangeSingleInput {
3245
3246
  this.dateChanged.emit(range);
3246
3247
  }
3247
3248
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitDateRangeSingleInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3248
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitDateRangeSingleInput, isStandalone: true, selector: "kit-daterange-single-input", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rangeLength: { classPropertyName: "rangeLength", publicName: "rangeLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRange: "dateRangeChange", dateChanged: "dateChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["textbox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-daterange-single-input\">\n <kit-textbox #textbox\n class=\"textbox\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"true\"\n [label]=\"label()\"\n [customStateIcon]=\"kitSvgIcon.CALENDAR\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"getDisplayedStringValue()\"\n (click)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-daterange-single-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kendo-multiviewcalendar selection=\"range\"\n [value]=\"dateRange()\"\n (valueChange)=\"selectionRangeChanged($event)\" />\n </div>\n</ng-template>\n", styles: [".kit-daterange-single-input ::ng-deep .kit-textbox .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}.kit-daterange-single-input ::ng-deep .kit-textbox .k-textbox{color:inherit;width:100%}.kit-daterange-single-input ::ng-deep .kit-textbox .k-textbox .k-input-inner{cursor:pointer}.kit-daterange-single-input ::ng-deep .kit-textbox:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-daterange-single-input ::ng-deep .kit-textbox:hover .kit-svg-icon{fill:var(--ui-kit-color-hover)}\n"], dependencies: [{ kind: "component", type: i1$5.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3249
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitDateRangeSingleInput, isStandalone: true, selector: "kit-daterange-single-input", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rangeLength: { classPropertyName: "rangeLength", publicName: "rangeLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRange: "dateRangeChange", dateChanged: "dateChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["textbox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-daterange-single-input\">\n <kit-textbox #textbox\n class=\"textbox\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"true\"\n [label]=\"label()\"\n [customStateIcon]=\"kitSvgIcon.CALENDAR\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"getDisplayedStringValue()\"\n (click)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-daterange-single-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kendo-multiviewcalendar selection=\"range\"\n [value]=\"dateRange()\"\n (valueChange)=\"selectionRangeChanged($event)\" />\n </div>\n</ng-template>\n", styles: [".kit-daterange-single-input ::ng-deep .kit-textbox .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}.kit-daterange-single-input ::ng-deep .kit-textbox .k-textbox{color:inherit;width:100%}.kit-daterange-single-input ::ng-deep .kit-textbox .k-textbox .k-input-inner{cursor:pointer}.kit-daterange-single-input ::ng-deep .kit-textbox:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-daterange-single-input ::ng-deep .kit-textbox:hover .kit-svg-icon{fill:var(--ui-kit-color-hover)}\n"], dependencies: [{ kind: "component", type: i1$5.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { 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: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3249
3250
  }
3250
3251
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitDateRangeSingleInput, decorators: [{
3251
3252
  type: Component,
@@ -4420,9 +4421,22 @@ var KitMultiselectItemsDirection;
4420
4421
  })(KitMultiselectItemsDirection || (KitMultiselectItemsDirection = {}));
4421
4422
 
4422
4423
  class KitMultiselectComponent {
4424
+ get canAddAllAsOption() {
4425
+ return this.shouldAddAllAsOption() && !!this.items.length;
4426
+ }
4427
+ get isAllAsOptionAdded() {
4428
+ return this.items[0]?.value === this.allOption().value;
4429
+ }
4430
+ get hasSelectedAllOption() {
4431
+ return !!this.selectedItems?.some(item => item === this.allOption().value);
4432
+ }
4433
+ get allEnabledItems() {
4434
+ return this.items.filter(item => !item.disabled).map(item => item.value);
4435
+ }
4423
4436
  constructor() {
4424
4437
  this.elementRef = inject(ElementRef);
4425
4438
  this.translateService = inject(TranslateService);
4439
+ this.destroyRef = inject(DestroyRef);
4426
4440
  /**
4427
4441
  * An items list which is going to be rendered as multiselect items
4428
4442
  */
@@ -4442,7 +4456,9 @@ class KitMultiselectComponent {
4442
4456
  this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
4443
4457
  this.filterable = input(true, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
4444
4458
  this.itemsDirection = input(KitMultiselectItemsDirection.LTR, ...(ngDevMode ? [{ debugName: "itemsDirection" }] : /* istanbul ignore next */ []));
4445
- this.kendoMultiSelectSummaryTag = input(1, ...(ngDevMode ? [{ debugName: "kendoMultiSelectSummaryTag" }] : /* istanbul ignore next */ []));
4459
+ this.autoSummaryTag = input(false, ...(ngDevMode ? [{ debugName: "autoSummaryTag" }] : /* istanbul ignore next */ []));
4460
+ this.autoSummaryTagContainerClass = input(null, ...(ngDevMode ? [{ debugName: "autoSummaryTagContainerClass" }] : /* istanbul ignore next */ []));
4461
+ this.fallbackGroupChipWidth = input(40, ...(ngDevMode ? [{ debugName: "fallbackGroupChipWidth" }] : /* istanbul ignore next */ []));
4446
4462
  /**
4447
4463
  * An action which is emitted when value is changed
4448
4464
  */
@@ -4454,6 +4470,10 @@ class KitMultiselectComponent {
4454
4470
  value: 'all',
4455
4471
  }), ...(ngDevMode ? [{ debugName: "allOption" }] : /* istanbul ignore next */ []));
4456
4472
  this.multiSelectGroupTagTemplate = contentChild(KitMultiselectGroupTagTemplateDirective, { ...(ngDevMode ? { debugName: "multiSelectGroupTagTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
4473
+ this.autoSummaryTagValue = signal(999, ...(ngDevMode ? [{ debugName: "autoSummaryTagValue" }] : /* istanbul ignore next */ []));
4474
+ this.measuredGroupChipWidth = 0;
4475
+ this.isMeasuring = false;
4476
+ this.pendingRecalculateId = null;
4457
4477
  this.destroy$ = new Subject();
4458
4478
  /**
4459
4479
  * Function that should be called every time the form control value changes
@@ -4465,18 +4485,12 @@ class KitMultiselectComponent {
4465
4485
  */
4466
4486
  this.onTouched = () => {
4467
4487
  };
4468
- }
4469
- get canAddAllAsOption() {
4470
- return this.shouldAddAllAsOption() && !!this.items.length;
4471
- }
4472
- get isAllAsOptionAdded() {
4473
- return this.items[0]?.value === this.allOption().value;
4474
- }
4475
- get hasSelectedAllOption() {
4476
- return !!this.selectedItems?.some(item => item === this.allOption().value);
4477
- }
4478
- get allEnabledItems() {
4479
- return this.items.filter(item => !item.disabled).map(item => item.value);
4488
+ afterNextRender(() => {
4489
+ if (this.autoSummaryTag()) {
4490
+ this.setupResizeObserver();
4491
+ this.scheduleRecalculate();
4492
+ }
4493
+ });
4480
4494
  }
4481
4495
  ngOnInit() {
4482
4496
  this.elementRef.nativeElement.querySelector('.k-input-inner').readonly = true;
@@ -4499,6 +4513,9 @@ class KitMultiselectComponent {
4499
4513
  ];
4500
4514
  }
4501
4515
  }
4516
+ if (selectedItems && this.autoSummaryTag() && !this.isMeasuring) {
4517
+ this.scheduleRecalculate();
4518
+ }
4502
4519
  }
4503
4520
  ngOnDestroy() {
4504
4521
  this.destroy$.next();
@@ -4510,6 +4527,9 @@ class KitMultiselectComponent {
4510
4527
  onValueChange(value) {
4511
4528
  this.onChange(value);
4512
4529
  this.changed.emit(value);
4530
+ if (this.autoSummaryTag() && !this.isMeasuring) {
4531
+ this.scheduleRecalculate();
4532
+ }
4513
4533
  }
4514
4534
  writeValue(value) {
4515
4535
  this.selectedItems = value;
@@ -4532,6 +4552,95 @@ class KitMultiselectComponent {
4532
4552
  focus() {
4533
4553
  this.multiselectComponent().focus();
4534
4554
  }
4555
+ setupResizeObserver() {
4556
+ const containerClass = this.autoSummaryTagContainerClass();
4557
+ let containerEl = this.elementRef.nativeElement;
4558
+ if (containerClass) {
4559
+ let el = this.elementRef.nativeElement;
4560
+ while (el) {
4561
+ if (el.classList.contains(containerClass)) {
4562
+ containerEl = el;
4563
+ break;
4564
+ }
4565
+ el = el.parentElement;
4566
+ }
4567
+ }
4568
+ const observer = new ResizeObserver(() => {
4569
+ if (!this.isMeasuring) {
4570
+ this.scheduleRecalculate();
4571
+ }
4572
+ });
4573
+ observer.observe(containerEl);
4574
+ this.destroyRef.onDestroy(() => observer.disconnect());
4575
+ }
4576
+ scheduleRecalculate() {
4577
+ if (this.pendingRecalculateId !== null) {
4578
+ clearTimeout(this.pendingRecalculateId);
4579
+ }
4580
+ this.autoSummaryTagValue.set(999);
4581
+ this.pendingRecalculateId = setTimeout(() => {
4582
+ this.pendingRecalculateId = null;
4583
+ this.doMeasureAndCalculate();
4584
+ }, 0);
4585
+ }
4586
+ doMeasureAndCalculate() {
4587
+ if (this.measuredGroupChipWidth === 0 && (this.selectedItems?.length ?? 0) >= 2) {
4588
+ this.measureGroupChipWidth();
4589
+ }
4590
+ else {
4591
+ this.calculateSummaryTag();
4592
+ }
4593
+ }
4594
+ measureGroupChipWidth() {
4595
+ this.isMeasuring = true;
4596
+ this.autoSummaryTagValue.set(1);
4597
+ setTimeout(() => {
4598
+ const hostEl = this.elementRef.nativeElement;
4599
+ const groupChipEl = hostEl.querySelector('.k-chip:has(.group-tag)');
4600
+ this.measuredGroupChipWidth = groupChipEl ? groupChipEl.offsetWidth : this.fallbackGroupChipWidth();
4601
+ this.autoSummaryTagValue.set(999);
4602
+ setTimeout(() => {
4603
+ this.isMeasuring = false;
4604
+ this.calculateSummaryTag();
4605
+ }, 0);
4606
+ }, 0);
4607
+ }
4608
+ calculateSummaryTag() {
4609
+ const hostEl = this.elementRef.nativeElement.querySelector('.k-input-values');
4610
+ const hostRect = hostEl.getBoundingClientRect();
4611
+ if (!hostRect.width) {
4612
+ return;
4613
+ }
4614
+ const chips = Array.from(hostEl.querySelectorAll('.k-chip:not(:has(.group-tag))'));
4615
+ if (chips.length === 0) {
4616
+ this.autoSummaryTagValue.set(999);
4617
+ return;
4618
+ }
4619
+ const firstChipRect = chips[0].getBoundingClientRect();
4620
+ const lastChipRect = chips.at(-1)?.getBoundingClientRect();
4621
+ const allInSingleRow = lastChipRect ? lastChipRect.top === firstChipRect.top : false;
4622
+ const allFitInContainer = lastChipRect ? lastChipRect.right <= (hostRect.right - 12) : false;
4623
+ if (allInSingleRow && allFitInContainer) {
4624
+ this.autoSummaryTagValue.set(chips.length);
4625
+ return;
4626
+ }
4627
+ const groupChipWidth = this.measuredGroupChipWidth || this.fallbackGroupChipWidth();
4628
+ let fittingCount = 0;
4629
+ for (const chip of chips) {
4630
+ const chipRect = chip.getBoundingClientRect();
4631
+ const isInFirstRow = chipRect.top === firstChipRect.top;
4632
+ if (isInFirstRow && chipRect.right + groupChipWidth <= hostRect.right) {
4633
+ fittingCount++;
4634
+ }
4635
+ else {
4636
+ if (!isInFirstRow) {
4637
+ fittingCount--;
4638
+ }
4639
+ break;
4640
+ }
4641
+ }
4642
+ this.autoSummaryTagValue.set(Math.max(1, fittingCount));
4643
+ }
4535
4644
  addAllAsOption() {
4536
4645
  this.items = [
4537
4646
  this.allOption(),
@@ -4582,11 +4691,11 @@ class KitMultiselectComponent {
4582
4691
  });
4583
4692
  }
4584
4693
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4585
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMultiselectComponent, isStandalone: true, selector: "kit-multiselect", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, shouldAddAllAsOption: { classPropertyName: "shouldAddAllAsOption", publicName: "shouldAddAllAsOption", isSignal: true, isRequired: false, transformFunction: null }, allOptionLabel: { classPropertyName: "allOptionLabel", publicName: "allOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tagMapper: { classPropertyName: "tagMapper", publicName: "tagMapper", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, useCheckboxes: { classPropertyName: "useCheckboxes", publicName: "useCheckboxes", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, itemsDirection: { classPropertyName: "itemsDirection", publicName: "itemsDirection", isSignal: true, isRequired: false, transformFunction: null }, kendoMultiSelectSummaryTag: { classPropertyName: "kendoMultiSelectSummaryTag", publicName: "kendoMultiSelectSummaryTag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [{
4694
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMultiselectComponent, isStandalone: true, selector: "kit-multiselect", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, shouldAddAllAsOption: { classPropertyName: "shouldAddAllAsOption", publicName: "shouldAddAllAsOption", isSignal: true, isRequired: false, transformFunction: null }, allOptionLabel: { classPropertyName: "allOptionLabel", publicName: "allOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tagMapper: { classPropertyName: "tagMapper", publicName: "tagMapper", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, useCheckboxes: { classPropertyName: "useCheckboxes", publicName: "useCheckboxes", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, itemsDirection: { classPropertyName: "itemsDirection", publicName: "itemsDirection", isSignal: true, isRequired: false, transformFunction: null }, autoSummaryTag: { classPropertyName: "autoSummaryTag", publicName: "autoSummaryTag", isSignal: true, isRequired: false, transformFunction: null }, autoSummaryTagContainerClass: { classPropertyName: "autoSummaryTagContainerClass", publicName: "autoSummaryTagContainerClass", isSignal: true, isRequired: false, transformFunction: null }, fallbackGroupChipWidth: { classPropertyName: "fallbackGroupChipWidth", publicName: "fallbackGroupChipWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [{
4586
4695
  provide: NG_VALUE_ACCESSOR,
4587
4696
  useExisting: forwardRef(() => KitMultiselectComponent),
4588
4697
  multi: true,
4589
- }], queries: [{ propertyName: "multiSelectGroupTagTemplate", first: true, predicate: KitMultiselectGroupTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"kendoMultiSelectSummaryTag()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i1$4.SummaryTagDirective, selector: "[kendoMultiSelectSummaryTag]", inputs: ["kendoMultiSelectSummaryTag"] }, { kind: "directive", type: i1$4.GroupTagTemplateDirective, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]" }, { kind: "directive", type: i1$4.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4698
+ }], queries: [{ propertyName: "multiSelectGroupTagTemplate", first: true, predicate: KitMultiselectGroupTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i1$4.SummaryTagDirective, selector: "[kendoMultiSelectSummaryTag]", inputs: ["kendoMultiSelectSummaryTag"] }, { kind: "directive", type: i1$4.GroupTagTemplateDirective, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]" }, { kind: "directive", type: i1$4.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4590
4699
  }
4591
4700
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMultiselectComponent, decorators: [{
4592
4701
  type: Component,
@@ -4602,8 +4711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
4602
4711
  KitFormMessageComponent,
4603
4712
  KitFormLabelComponent,
4604
4713
  NgClass,
4605
- ], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"kendoMultiSelectSummaryTag()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"] }]
4606
- }], propDecorators: { items: [{
4714
+ ], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"] }]
4715
+ }], ctorParameters: () => [], propDecorators: { items: [{
4607
4716
  type: Input
4608
4717
  }], selectedItems: [{
4609
4718
  type: Input
@@ -4619,7 +4728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
4619
4728
  type: Input
4620
4729
  }], messageText: [{
4621
4730
  type: Input
4622
- }], shouldAddAllAsOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldAddAllAsOption", required: false }] }], allOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allOptionLabel", required: false }] }], tagMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagMapper", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], useCheckboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCheckboxes", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], listHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "listHeight", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], itemsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsDirection", required: false }] }], kendoMultiSelectSummaryTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "kendoMultiSelectSummaryTag", required: false }] }], changed: [{
4731
+ }], shouldAddAllAsOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldAddAllAsOption", required: false }] }], allOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allOptionLabel", required: false }] }], tagMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagMapper", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], useCheckboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCheckboxes", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], listHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "listHeight", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], itemsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsDirection", required: false }] }], autoSummaryTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSummaryTag", required: false }] }], autoSummaryTagContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSummaryTagContainerClass", required: false }] }], fallbackGroupChipWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackGroupChipWidth", required: false }] }], changed: [{
4623
4732
  type: Output
4624
4733
  }], multiselectComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MultiSelectComponent), { isSignal: true }] }], multiSelectGroupTagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitMultiselectGroupTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
4625
4734
 
@@ -6342,7 +6451,7 @@ class KitSearchBarComponent {
6342
6451
  this.closeButtonClick.emit();
6343
6452
  }
6344
6453
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6345
- 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"], 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 }); }
6454
+ 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 }); }
6346
6455
  }
6347
6456
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSearchBarComponent, decorators: [{
6348
6457
  type: Component,
@@ -6865,149 +6974,1411 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
6865
6974
  type: Input
6866
6975
  }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
6867
6976
 
6868
- const kitDataStateToODataString = (state, utcDates = false, columns) => {
6869
- const base = toODataString({ ...state, filter: undefined }, { utcDates });
6870
- const filter = state.filter && convertFiltersToOData(state.filter, utcDates, columns);
6871
- return decodeURIComponent(filter ? `${base}$filter=${filter}` : base);
6872
- };
6873
- const isKitFilterDescriptor = (filter) => {
6874
- return 'field' in filter && 'value' in filter;
6875
- };
6876
- const kitFilterBy = (data, filter) => filterBy(data, filter);
6877
- const convertFiltersToOData = (filters, utcDates, columns) => {
6878
- const oDataFilters = filters.filters.map(filter => {
6879
- if ('isCustomField' in filter && filter.isCustomField) {
6880
- return convertCustomFiltersToOData(filter, columns);
6881
- }
6882
- else {
6883
- return convertStandardFiltersToOData(filter, utcDates);
6884
- }
6885
- });
6886
- return oDataFilters.filter(Boolean).join(` ${filters.logic} `);
6887
- };
6888
- const convertStandardFiltersToOData = (filter, utcDates) => {
6889
- return toODataString({
6890
- filter: isKitFilterDescriptor(filter)
6891
- ? { logic: KitFilterLogic.AND, filters: [filter] }
6892
- : filter,
6893
- }, { utcDates }).replace(/^\$filter=/, '');
6894
- };
6895
- const convertCustomFiltersToOData = (filter, columns) => {
6896
- const internalFilter = filter.filters[0];
6897
- if (!isKitFilterDescriptor(internalFilter)) {
6898
- return '';
6899
- }
6900
- const column = columns?.find(col => col.field === internalFilter.field);
6901
- if (column?.customFieldHandler) {
6902
- return column.customFieldHandler(filter);
6903
- }
6904
- return '';
6905
- };
6906
-
6907
- var KitThemes;
6908
- (function (KitThemes) {
6909
- KitThemes["Light"] = "light";
6910
- KitThemes["Dark"] = "dark";
6911
- })(KitThemes || (KitThemes = {}));
6912
-
6913
- class KitAbstractPayloadAction {
6914
- constructor(payload) {
6915
- this.payload = payload;
6916
- }
6917
- }
6918
-
6919
- class SetSelectedMobileMenuItem extends KitAbstractPayloadAction {
6920
- static { this.type = '[KitMobileMenu] SetSelectedMobileMenuItem'; }
6921
- }
6922
-
6923
- const KIT_MOBILE_MENU_STATE_TOKEN = new StateToken('kitMobileMenu');
6924
- let KitMobileMenuState = class KitMobileMenuState {
6925
- static selectedItem(state) {
6926
- return state?.selectedItem || null;
6927
- }
6928
- setSelectedMobileMenuItem(ctx, action) {
6929
- ctx.patchState({ selectedItem: action.payload });
6930
- }
6931
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
6932
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState }); }
6933
- };
6934
- __decorate([
6935
- Action(SetSelectedMobileMenuItem)
6936
- ], KitMobileMenuState.prototype, "setSelectedMobileMenuItem", null);
6937
- __decorate([
6938
- Selector([KIT_MOBILE_MENU_STATE_TOKEN])
6939
- ], KitMobileMenuState, "selectedItem", null);
6940
- KitMobileMenuState = __decorate([
6941
- State({
6942
- name: KIT_MOBILE_MENU_STATE_TOKEN,
6943
- defaults: {
6944
- selectedItem: null,
6945
- },
6946
- })
6947
- ], KitMobileMenuState);
6948
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, decorators: [{
6949
- type: Injectable
6950
- }], propDecorators: { setSelectedMobileMenuItem: [] } });
6951
-
6952
- class KitMobileHeaderComponent {
6977
+ class KitCardDetailsComponent {
6953
6978
  constructor() {
6954
- this.store = inject(Store);
6955
- this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
6979
+ this.router = inject(Router);
6980
+ this.activatedRoute = inject(ActivatedRoute);
6981
+ this.host = inject(ElementRef);
6982
+ this.destroyRef = inject(DestroyRef);
6983
+ this.cardData$ = input.required(...(ngDevMode ? [{ debugName: "cardData$" }] : /* istanbul ignore next */ []));
6984
+ this.pageSize = input.required(...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
6985
+ this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
6986
+ this.kitCardSkeletonConfig = input({
6987
+ itemHeight: 200,
6988
+ itemsCount: 3,
6989
+ }, ...(ngDevMode ? [{ debugName: "kitCardSkeletonConfig" }] : /* istanbul ignore next */ []));
6990
+ this.dataStateChanged = output();
6991
+ this.cardClicked = output();
6992
+ this.kitTextboxComponent = viewChild.required(KitTextboxComponent);
6993
+ this.cardElement = contentChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : /* istanbul ignore next */ []));
6994
+ this.headerActions = contentChild('headerActions', ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
6995
+ this.details = contentChild('details', ...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
6956
6996
  this.kitSvgIcon = KitSvgIcon;
6957
6997
  this.kitButtonType = KitButtonType;
6958
- this.kitSvgIconType = KitSvgIconType;
6959
- this.themes = KitThemes;
6960
- this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
6998
+ this.kitButtonKind = KitButtonKind;
6999
+ this.kitButtonIconPosition = KitButtonIconPosition;
7000
+ this.kitTextboxSize = KitTextboxSize;
7001
+ this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
7002
+ this.cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
7003
+ this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
7004
+ this.dataState = signal({
7005
+ skip: 0,
7006
+ take: 0,
7007
+ }, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
7008
+ this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : /* istanbul ignore next */ []));
7009
+ this.skipNewCreatedCardFilter = computed(() => {
7010
+ return this.newCreatedCards().length ? {
7011
+ logic: KitFilterLogic.AND,
7012
+ filters: this.newCreatedCards().map(card => ({
7013
+ field: 'id',
7014
+ operator: KitFilterOperator.NEQ,
7015
+ value: card.id,
7016
+ })),
7017
+ } : {};
7018
+ }, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
7019
+ this.shouldAppendFetchedData = true;
7020
+ this.showDetails = false;
6961
7021
  }
6962
- setSelectedItem(item) {
6963
- this.store.dispatch(new SetSelectedMobileMenuItem(item));
7022
+ ngOnInit() {
7023
+ this.dataState.update(state => ({
7024
+ ...state,
7025
+ take: this.pageSize(),
7026
+ }));
7027
+ this.initCardDataSubscription();
7028
+ this.initSearchSubscription();
7029
+ this.initStateFromUrl();
6964
7030
  }
6965
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6966
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMobileHeaderComponent, isStandalone: true, selector: "kit-mobile-header", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"header\"\n [ngClass]=\"theme()\">\n @if (selectedItem()) {\n <kit-svg-icon class=\"header-icon\"\n [routerLink]=\"['/']\"\n [icon]=\"kitSvgIcon.MOBILE_HOME\"\n (click)=\"setSelectedItem(null)\" />\n\n <div class=\"header-selected-category\">\n <kit-svg-icon class=\"header-icon category\"\n [icon]=\"selectedItem()?.icon\" \n [iconClass]=\"kitSvgIconType.STROKE\" />\n <p class=\"header-selected-category-title\">{{ selectedItem()?.title }}</p>\n </div>\n } @else {\n <div class=\"header-logo\"\n [routerLink]=\"['/']\"\n (click)=\"selectedItem() && setSelectedItem(null)\">\n @if (theme() === themes.Light) {\n <img class=\"header-logo\" \n src=\"assets/config/logo.svg\" alt=\"Logo\"/>\n } @else {\n <img class=\"header-logo\" \n src=\"assets/config/logo-dark-theme.svg\" alt=\"Logo\"/>\n }\n </div>\n }\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:0 25px;height:100%;border-bottom:1px solid var(--ui-kit-color-grey-11)}.header-selected-category{display:flex;align-items:center;gap:15px}.header-selected-category-title{color:var(--ui-kit-color-navy);flex:16px;line-height:24px}.header-icon{width:38px;height:38px;cursor:pointer}.header-icon.category{fill:none;cursor:auto}.header-logo{margin:auto;width:212px;height:38px}.header.dark{background-color:var(--ui-kit-color-navy);border-bottom-color:var(--ui-kit-color-grey-14)}.header.dark .header-selected-category-title{color:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6967
- }
6968
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileHeaderComponent, decorators: [{
6969
- type: Component,
6970
- args: [{ selector: 'kit-mobile-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
6971
- KitSvgIconComponent,
6972
- NgClass,
6973
- RouterLink,
6974
- ], template: "<div class=\"header\"\n [ngClass]=\"theme()\">\n @if (selectedItem()) {\n <kit-svg-icon class=\"header-icon\"\n [routerLink]=\"['/']\"\n [icon]=\"kitSvgIcon.MOBILE_HOME\"\n (click)=\"setSelectedItem(null)\" />\n\n <div class=\"header-selected-category\">\n <kit-svg-icon class=\"header-icon category\"\n [icon]=\"selectedItem()?.icon\" \n [iconClass]=\"kitSvgIconType.STROKE\" />\n <p class=\"header-selected-category-title\">{{ selectedItem()?.title }}</p>\n </div>\n } @else {\n <div class=\"header-logo\"\n [routerLink]=\"['/']\"\n (click)=\"selectedItem() && setSelectedItem(null)\">\n @if (theme() === themes.Light) {\n <img class=\"header-logo\" \n src=\"assets/config/logo.svg\" alt=\"Logo\"/>\n } @else {\n <img class=\"header-logo\" \n src=\"assets/config/logo-dark-theme.svg\" alt=\"Logo\"/>\n }\n </div>\n }\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:0 25px;height:100%;border-bottom:1px solid var(--ui-kit-color-grey-11)}.header-selected-category{display:flex;align-items:center;gap:15px}.header-selected-category-title{color:var(--ui-kit-color-navy);flex:16px;line-height:24px}.header-icon{width:38px;height:38px;cursor:pointer}.header-icon.category{fill:none;cursor:auto}.header-logo{margin:auto;width:212px;height:38px}.header.dark{background-color:var(--ui-kit-color-navy);border-bottom-color:var(--ui-kit-color-grey-14)}.header.dark .header-selected-category-title{color:var(--ui-kit-color-white)}\n"] }]
6975
- }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
6976
-
6977
- class KitPageLayoutComponent {
6978
- constructor() {
6979
- this.kitNavigationMenuService = inject(KitNavigationMenuService);
6980
- this.deviceService = inject(DeviceDetectorService);
6981
- this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
6982
- this.sidebarContainer = viewChild('sidebarContainer', ...(ngDevMode ? [{ debugName: "sidebarContainer" }] : /* istanbul ignore next */ []));
6983
- this.topBarContainer = viewChild('topBarContainer', ...(ngDevMode ? [{ debugName: "topBarContainer" }] : /* istanbul ignore next */ []));
6984
- this.isMenuCollapsed = this.kitNavigationMenuService.getCollapsedState();
6985
- this.hasMenuSelected = this.kitNavigationMenuService.getSelectedState();
6986
- this.hasSidebar = signal(false, ...(ngDevMode ? [{ debugName: "hasSidebar" }] : /* istanbul ignore next */ []));
6987
- this.hasTopBar = signal(false, ...(ngDevMode ? [{ debugName: "hasTopBar" }] : /* istanbul ignore next */ []));
6988
- effect(() => {
6989
- const sidebar = this.sidebarContainer()?.nativeElement;
6990
- const topBar = this.topBarContainer()?.nativeElement;
6991
- this.hasSidebar.set(!!sidebar?.querySelector('[sidebar]'));
6992
- this.hasTopBar.set(!!topBar?.querySelector('[topBar]'));
6993
- });
7031
+ loadMoreData() {
7032
+ this.shouldAppendFetchedData = true;
7033
+ this.dataState.update(state => ({
7034
+ ...state,
7035
+ skip: (this.dataState()?.skip ?? 0) + this.pageSize(),
7036
+ take: this.pageSize(),
7037
+ }));
7038
+ this.updateData();
6994
7039
  }
6995
- get isMobile() {
6996
- return this.deviceService.isMobile();
7040
+ onCardClick(card) {
7041
+ const normalizedId = this.normalizeCardId(card.id);
7042
+ this.dataState.update(state => ({ ...state, activeId: normalizedId }));
7043
+ this.navigateToCard(normalizedId);
7044
+ this.cardClicked.emit({ ...card, id: normalizedId });
6997
7045
  }
6998
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6999
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitPageLayoutComponent, isStandalone: true, selector: "kit-page-layout", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidebarContainer", first: true, predicate: ["sidebarContainer"], descendants: true, isSignal: true }, { propertyName: "topBarContainer", first: true, predicate: ["topBarContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"page-layout\"\n [ngClass]=\"theme()\"\n [class.mobile]=\"isMobile\"\n [class.sidebar-expanded]=\"!isMenuCollapsed() && hasMenuSelected()\"\n [class.has-sidebar]=\"hasSidebar()\"\n [class.has-top-bar]=\"hasTopBar()\">\n\n @if (!isMobile) {\n <div class=\"sidebar\" #sidebarContainer>\n <ng-content select=\"[sidebar]\" />\n </div>\n }\n\n <div class=\"main\">\n @if (isMobile) {\n <kit-mobile-header class=\"mobile-header\"\n [theme]=\"theme()\"/>\n } @else {\n <div class=\"top-bar\" #topBarContainer>\n <ng-content select=\"[topBar]\" />\n </div>\n }\n\n <div class=\"content\">\n <ng-content select=\"[content]\" />\n </div>\n </div>\n</div>\n", styles: [".page-layout{display:flex;min-height:100%}.page-layout.has-sidebar .sidebar{position:fixed;top:0;left:0;height:100%;min-width:var(--ui-kit-sidebar-collapsed-width);background:var(--ui-kit-color-navy);overflow-x:hidden;z-index:11}.page-layout.has-sidebar .main{margin-left:var(--ui-kit-sidebar-collapsed-width)}.page-layout.has-sidebar.sidebar-expanded .main{margin-left:var(--ui-kit-sidebar-expanded-width)}.page-layout .main{display:flex;flex-direction:column;flex:1;padding:0 var(--ui-kit-layout-gap);width:0;transition:.2s ease-in-out}.page-layout.has-top-bar .top-bar,.page-layout .mobile-header{position:sticky;top:0;left:0;width:100%;height:var(--ui-kit-header-height);background:var(--ui-kit-color-grey-13);z-index:10}.page-layout .content{padding:25px 0;flex:1}.page-layout .content:has(.kit-breadcrumbs){padding-top:10px}.page-layout .content:has(.iframe-wrapper){padding:0}.page-layout.mobile .mobile-header{background-color:var(--ui-kit-color-white)}.page-layout.mobile .main{padding:0}.page-layout.mobile .content{background-color:var(--ui-kit-color-grey-13);padding:var(--ui-kit-layout-gap)}.page-layout.mobile.dark .content{background-color:var(--ui-kit-color-navy)}\n"], dependencies: [{ kind: "component", type: KitMobileHeaderComponent, selector: "kit-mobile-header", inputs: ["theme"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7000
- }
7001
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPageLayoutComponent, decorators: [{
7002
- type: Component,
7003
- args: [{ selector: 'kit-page-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
7004
- KitMobileHeaderComponent,
7005
- NgClass,
7006
- ], template: "<div class=\"page-layout\"\n [ngClass]=\"theme()\"\n [class.mobile]=\"isMobile\"\n [class.sidebar-expanded]=\"!isMenuCollapsed() && hasMenuSelected()\"\n [class.has-sidebar]=\"hasSidebar()\"\n [class.has-top-bar]=\"hasTopBar()\">\n\n @if (!isMobile) {\n <div class=\"sidebar\" #sidebarContainer>\n <ng-content select=\"[sidebar]\" />\n </div>\n }\n\n <div class=\"main\">\n @if (isMobile) {\n <kit-mobile-header class=\"mobile-header\"\n [theme]=\"theme()\"/>\n } @else {\n <div class=\"top-bar\" #topBarContainer>\n <ng-content select=\"[topBar]\" />\n </div>\n }\n\n <div class=\"content\">\n <ng-content select=\"[content]\" />\n </div>\n </div>\n</div>\n", styles: [".page-layout{display:flex;min-height:100%}.page-layout.has-sidebar .sidebar{position:fixed;top:0;left:0;height:100%;min-width:var(--ui-kit-sidebar-collapsed-width);background:var(--ui-kit-color-navy);overflow-x:hidden;z-index:11}.page-layout.has-sidebar .main{margin-left:var(--ui-kit-sidebar-collapsed-width)}.page-layout.has-sidebar.sidebar-expanded .main{margin-left:var(--ui-kit-sidebar-expanded-width)}.page-layout .main{display:flex;flex-direction:column;flex:1;padding:0 var(--ui-kit-layout-gap);width:0;transition:.2s ease-in-out}.page-layout.has-top-bar .top-bar,.page-layout .mobile-header{position:sticky;top:0;left:0;width:100%;height:var(--ui-kit-header-height);background:var(--ui-kit-color-grey-13);z-index:10}.page-layout .content{padding:25px 0;flex:1}.page-layout .content:has(.kit-breadcrumbs){padding-top:10px}.page-layout .content:has(.iframe-wrapper){padding:0}.page-layout.mobile .mobile-header{background-color:var(--ui-kit-color-white)}.page-layout.mobile .main{padding:0}.page-layout.mobile .content{background-color:var(--ui-kit-color-grey-13);padding:var(--ui-kit-layout-gap)}.page-layout.mobile.dark .content{background-color:var(--ui-kit-color-navy)}\n"] }]
7007
- }], ctorParameters: () => [], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], sidebarContainer: [{ type: i0.ViewChild, args: ['sidebarContainer', { isSignal: true }] }], topBarContainer: [{ type: i0.ViewChild, args: ['topBarContainer', { isSignal: true }] }] } });
7008
-
7009
- const KIT_USER_PATH = new InjectionToken('kitUserPath');
7010
-
7046
+ appendCard(card, navigateToCard = true) {
7047
+ this.cardData.set([
7048
+ ...this.cardData(),
7049
+ card,
7050
+ ]);
7051
+ this.newCreatedCards.set([
7052
+ ...this.newCreatedCards(),
7053
+ card,
7054
+ ]);
7055
+ this.dataState.update(state => ({
7056
+ ...state,
7057
+ filters: this.skipNewCreatedCardFilter(),
7058
+ }));
7059
+ this.total.set(this.total() + 1);
7060
+ if (navigateToCard) {
7061
+ this.onCardClick(card);
7062
+ this.showDetails = true;
7063
+ }
7064
+ }
7065
+ deleteCard(cardId) {
7066
+ this.isLoading.set(true);
7067
+ const normalizedId = this.normalizeCardId(cardId);
7068
+ const deletedIndex = this.cardData().findIndex(card => this.normalizeCardId(card.id) === normalizedId);
7069
+ this.cardData.set(this.cardData().filter(card => this.normalizeCardId(card.id) !== normalizedId));
7070
+ this.total.set(this.total() - 1);
7071
+ const remainingCards = this.cardData();
7072
+ const nextCard = remainingCards.length ? remainingCards[deletedIndex] ?? remainingCards[deletedIndex - 1] : null;
7073
+ if (!this.cardData().length) {
7074
+ this.showDetails = false;
7075
+ }
7076
+ if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
7077
+ this.removeFromNewCreatedCards(normalizedId);
7078
+ this.isLoading.set(false);
7079
+ if (nextCard) {
7080
+ this.onCardClick(nextCard);
7081
+ }
7082
+ return;
7083
+ }
7084
+ const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
7085
+ if (loadedCards >= this.total()) {
7086
+ this.isLoading.set(false);
7087
+ if (nextCard) {
7088
+ this.onCardClick(nextCard);
7089
+ }
7090
+ return;
7091
+ }
7092
+ this.showDetails = false;
7093
+ this.shouldAppendFetchedData = true;
7094
+ this.dataStateChanged.emit({
7095
+ skip: loadedCards,
7096
+ take: 1,
7097
+ filters: this.skipNewCreatedCardFilter(),
7098
+ search: this.dataState().search,
7099
+ });
7100
+ }
7101
+ updateSpecificCardData(cardData) {
7102
+ this.cardData.set(this.cardData().map(card => this.normalizeCardId(card.id) === this.normalizeCardId(cardData.id) ? cardData : card));
7103
+ }
7104
+ scrollToCardById(id) {
7105
+ const cardsEl = this.host.nativeElement.querySelector('.kit-card-details .cards');
7106
+ const el = cardsEl?.querySelector(`[data-card-id="${id}"]`) ?? null;
7107
+ el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
7108
+ }
7109
+ initSearchSubscription() {
7110
+ outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef), map((value) => value.trim())).subscribe((searchValue) => {
7111
+ this.cardData.set([]);
7112
+ this.newCreatedCards.set([]);
7113
+ this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
7114
+ this.shouldAppendFetchedData = true;
7115
+ this.showDetails = false;
7116
+ this.updateData();
7117
+ });
7118
+ }
7119
+ initStateFromUrl() {
7120
+ const { skip, search } = this.getStateFromUrl();
7121
+ if (search) {
7122
+ this.kitTextboxComponent().writeValue(search);
7123
+ if (skip && skip > 0) {
7124
+ this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize(), search });
7125
+ this.dataState.set({ skip, take: this.pageSize(), search });
7126
+ }
7127
+ else {
7128
+ this.isLoading.set(false);
7129
+ this.kitTextboxComponent().changed.emit(search);
7130
+ }
7131
+ return;
7132
+ }
7133
+ if (skip !== undefined) {
7134
+ this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize() });
7135
+ this.dataState.set({ skip, take: this.pageSize() });
7136
+ return;
7137
+ }
7138
+ this.updateData();
7139
+ }
7140
+ initCardDataSubscription() {
7141
+ const { activeId } = this.getStateFromUrl();
7142
+ this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
7143
+ if (this.shouldAppendFetchedData) {
7144
+ this.cardData.set([
7145
+ ...this.cardData(),
7146
+ ...data.results.data,
7147
+ ]);
7148
+ this.total.set(data.results.total + this.newCreatedCards().length);
7149
+ this.shouldAppendFetchedData = false;
7150
+ if (activeId && !this.dataState().activeId) {
7151
+ const activeCard = this.cardData().find(item => this.normalizeCardId(item.id) === activeId);
7152
+ if (activeCard) {
7153
+ this.selectNewLoadedCard(activeCard);
7154
+ return;
7155
+ }
7156
+ }
7157
+ if (!this.showDetails && data.results.data.length) {
7158
+ this.selectNewLoadedCard(data.results.data[0]);
7159
+ }
7160
+ }
7161
+ this.isLoading.set(false);
7162
+ });
7163
+ }
7164
+ updateData() {
7165
+ this.isLoading.set(true);
7166
+ this.setQueryParamsToUrl(this.dataState());
7167
+ this.dataStateChanged.emit(this.dataState());
7168
+ }
7169
+ normalizeCardId(id) {
7170
+ return id.toString();
7171
+ }
7172
+ removeFromNewCreatedCards(cardId) {
7173
+ this.newCreatedCards.set(this.newCreatedCards().filter(card => this.normalizeCardId(card.id) !== cardId));
7174
+ this.dataState.update(state => ({
7175
+ ...state,
7176
+ filters: this.skipNewCreatedCardFilter(),
7177
+ }));
7178
+ }
7179
+ getStateFromUrl() {
7180
+ const queryParams = this.activatedRoute.snapshot.queryParams;
7181
+ const routeParams = this.activatedRoute.snapshot.firstChild?.params ?? this.activatedRoute.snapshot.params;
7182
+ return {
7183
+ skip: queryParams?.skip && Number(queryParams.skip),
7184
+ take: queryParams?.take && Number(queryParams.take),
7185
+ search: queryParams?.search && String(queryParams.search),
7186
+ activeId: routeParams?.id && String(routeParams.id),
7187
+ };
7188
+ }
7189
+ setQueryParamsToUrl(state) {
7190
+ const queryParams = Object.keys(state).reduce((acc, key) => {
7191
+ const val = state[key];
7192
+ if (val !== undefined && val !== '' && key !== 'filters' && key !== 'activeId') {
7193
+ acc[key] = val;
7194
+ }
7195
+ return acc;
7196
+ }, {});
7197
+ this.router.navigate([], {
7198
+ relativeTo: this.activatedRoute,
7199
+ queryParams,
7200
+ queryParamsHandling: 'replace',
7201
+ });
7202
+ }
7203
+ navigateToCard(id) {
7204
+ this.router.navigate([id], {
7205
+ relativeTo: this.activatedRoute,
7206
+ queryParamsHandling: 'preserve',
7207
+ });
7208
+ }
7209
+ selectNewLoadedCard(card) {
7210
+ this.isLoading.set(false);
7211
+ this.showDetails = true;
7212
+ this.onCardClick(card);
7213
+ requestAnimationFrame(() => {
7214
+ this.scrollToCardById(card.id.toString());
7215
+ });
7216
+ }
7217
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7218
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardDetailsComponent, isStandalone: true, selector: "kit-card-details", inputs: { cardData$: { classPropertyName: "cardData$", publicName: "cardData$", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, kitCardSkeletonConfig: { classPropertyName: "kitCardSkeletonConfig", publicName: "kitCardSkeletonConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked" }, queries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: ["headerActions"], descendants: true, isSignal: true }, { propertyName: "details", first: true, predicate: ["details"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n [placeholder]=\"'kit.search.placeholder' | translate\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @if (kitCardSkeletonConfig(); as config) {\n @for (_ of [].constructor(config.itemsCount); track $index) {\n <kit-skeleton [width]=\"'100%'\"\n [height]=\"config.itemHeight\" />\n }\n }\n } @else {\n @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (cardData().length && (total() > cardData().length)) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n @if (showDetails) {\n <div class=\"details\">\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n </div>\n }\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7219
+ }
7220
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
7221
+ type: Component,
7222
+ args: [{ selector: 'kit-card-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
7223
+ AsyncPipe,
7224
+ KitSkeletonComponent,
7225
+ KitEmptySectionComponent,
7226
+ KitButtonComponent,
7227
+ TranslatePipe,
7228
+ KitTextboxComponent,
7229
+ NgTemplateOutlet,
7230
+ KitEntityTitleComponent,
7231
+ ], template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n [placeholder]=\"'kit.search.placeholder' | translate\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @if (kitCardSkeletonConfig(); as config) {\n @for (_ of [].constructor(config.itemsCount); track $index) {\n <kit-skeleton [width]=\"'100%'\"\n [height]=\"config.itemHeight\" />\n }\n }\n } @else {\n @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (cardData().length && (total() > cardData().length)) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n @if (showDetails) {\n <div class=\"details\">\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n </div>\n }\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"] }]
7232
+ }], propDecorators: { cardData$: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardData$", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], kitCardSkeletonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "kitCardSkeletonConfig", required: false }] }], dataStateChanged: [{ type: i0.Output, args: ["dataStateChanged"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], kitTextboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], cardElement: [{ type: i0.ContentChild, args: ['cardElement', { isSignal: true }] }], headerActions: [{ type: i0.ContentChild, args: ['headerActions', { isSignal: true }] }], details: [{ type: i0.ContentChild, args: ['details', { isSignal: true }] }] } });
7233
+
7234
+ class KitAbstractPayloadAction {
7235
+ constructor(payload) {
7236
+ this.payload = payload;
7237
+ }
7238
+ }
7239
+
7240
+ class SetGridSkip extends KitAbstractPayloadAction {
7241
+ static { this.type = '[Grid] SetSkip'; }
7242
+ }
7243
+ class SetGridTake extends KitAbstractPayloadAction {
7244
+ static { this.type = '[Grid] SetTake'; }
7245
+ }
7246
+ class SetGridSearch extends KitAbstractPayloadAction {
7247
+ static { this.type = '[Grid] SetSearch'; }
7248
+ }
7249
+ class RemoveGridSearch {
7250
+ static { this.type = '[Grid] RemoveSearch'; }
7251
+ }
7252
+ class SetGridSort extends KitAbstractPayloadAction {
7253
+ static { this.type = '[Grid] SetSort'; }
7254
+ }
7255
+ class SetGridColumns extends KitAbstractPayloadAction {
7256
+ static { this.type = '[Grid] SetColumns'; }
7257
+ }
7258
+ class AddGridFilter extends KitAbstractPayloadAction {
7259
+ static { this.type = '[Grid] AddFilter'; }
7260
+ }
7261
+ class RemoveGridFilter extends KitAbstractPayloadAction {
7262
+ static { this.type = '[Grid] RemoveFilter'; }
7263
+ }
7264
+ class UpdateGridFilter extends KitAbstractPayloadAction {
7265
+ static { this.type = '[Grid] UpdateFilter'; }
7266
+ }
7267
+ class SetGridFilters extends KitAbstractPayloadAction {
7268
+ static { this.type = '[Grid] SetFilters'; }
7269
+ }
7270
+ class SetGridArchive extends KitAbstractPayloadAction {
7271
+ static { this.type = '[Grid] SetArchive'; }
7272
+ }
7273
+
7274
+ const KIT_GRID_STATE_TOKEN = new StateToken('grid');
7275
+ let KitGridState = class KitGridState {
7276
+ setGridSkip(ctx, action) {
7277
+ ctx.setState(patch({
7278
+ skip: action.payload,
7279
+ }));
7280
+ }
7281
+ setGridTake(ctx, action) {
7282
+ ctx.setState(patch({
7283
+ take: action.payload,
7284
+ }));
7285
+ }
7286
+ setGridSearch(ctx, action) {
7287
+ ctx.setState(patch({
7288
+ search: action.payload,
7289
+ }));
7290
+ }
7291
+ removeGridSearch(ctx) {
7292
+ const { search, ...rest } = ctx.getState();
7293
+ ctx.setState(rest);
7294
+ }
7295
+ setGridSort(ctx, action) {
7296
+ ctx.setState(patch({
7297
+ sort: action.payload,
7298
+ }));
7299
+ }
7300
+ setGridColumns(ctx, action) {
7301
+ ctx.setState(patch({
7302
+ columns: action.payload,
7303
+ }));
7304
+ }
7305
+ addGridFilter(ctx, action) {
7306
+ const items = ctx.getState().filter;
7307
+ return of(items).pipe(tap(() => ctx.setState(patch({
7308
+ filter: append([action.payload]),
7309
+ }))));
7310
+ }
7311
+ removeGridFilter(ctx, action) {
7312
+ const items = ctx.getState().filter;
7313
+ return of(items).pipe(tap(() => ctx.setState(patch({
7314
+ filter: removeItem(item => item.field === action.payload),
7315
+ }))));
7316
+ }
7317
+ updateGridFilter(ctx, action) {
7318
+ const items = ctx.getState().filter;
7319
+ return of(items).pipe(tap(() => ctx.setState(patch({
7320
+ filter: updateItem(item => item.field === action.payload.field, action.payload),
7321
+ }))));
7322
+ }
7323
+ setGridFilters(ctx, action) {
7324
+ return of(action.payload).pipe(tap(filters => ctx.setState(patch({
7325
+ filter: filters,
7326
+ }))));
7327
+ }
7328
+ setGridArchive(ctx, action) {
7329
+ ctx.setState(patch({
7330
+ archive: action.payload,
7331
+ }));
7332
+ }
7333
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7334
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState }); }
7335
+ };
7336
+ __decorate([
7337
+ Action(SetGridSkip)
7338
+ ], KitGridState.prototype, "setGridSkip", null);
7339
+ __decorate([
7340
+ Action(SetGridTake)
7341
+ ], KitGridState.prototype, "setGridTake", null);
7342
+ __decorate([
7343
+ Action(SetGridSearch)
7344
+ ], KitGridState.prototype, "setGridSearch", null);
7345
+ __decorate([
7346
+ Action(RemoveGridSearch)
7347
+ ], KitGridState.prototype, "removeGridSearch", null);
7348
+ __decorate([
7349
+ Action(SetGridSort)
7350
+ ], KitGridState.prototype, "setGridSort", null);
7351
+ __decorate([
7352
+ Action(SetGridColumns)
7353
+ ], KitGridState.prototype, "setGridColumns", null);
7354
+ __decorate([
7355
+ Action(AddGridFilter)
7356
+ ], KitGridState.prototype, "addGridFilter", null);
7357
+ __decorate([
7358
+ Action(RemoveGridFilter)
7359
+ ], KitGridState.prototype, "removeGridFilter", null);
7360
+ __decorate([
7361
+ Action(UpdateGridFilter)
7362
+ ], KitGridState.prototype, "updateGridFilter", null);
7363
+ __decorate([
7364
+ Action(SetGridFilters)
7365
+ ], KitGridState.prototype, "setGridFilters", null);
7366
+ __decorate([
7367
+ Action(SetGridArchive)
7368
+ ], KitGridState.prototype, "setGridArchive", null);
7369
+ KitGridState = __decorate([
7370
+ State({
7371
+ name: KIT_GRID_STATE_TOKEN,
7372
+ defaults: {
7373
+ skip: 0,
7374
+ take: 10,
7375
+ sort: [],
7376
+ filter: [],
7377
+ columns: [],
7378
+ },
7379
+ })
7380
+ ], KitGridState);
7381
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, decorators: [{
7382
+ type: Injectable
7383
+ }], propDecorators: { setGridSkip: [], setGridTake: [], setGridSearch: [], removeGridSearch: [], setGridSort: [], setGridColumns: [], addGridFilter: [], removeGridFilter: [], updateGridFilter: [], setGridFilters: [], setGridArchive: [] } });
7384
+
7385
+ var KitFilterType;
7386
+ (function (KitFilterType) {
7387
+ KitFilterType["CHECKBOX"] = "checkbox";
7388
+ KitFilterType["RADIO"] = "radio";
7389
+ KitFilterType["DATE"] = "date";
7390
+ KitFilterType["TEXT"] = "text";
7391
+ KitFilterType["NUMERIC"] = "numeric";
7392
+ KitFilterType["NULL"] = "null";
7393
+ KitFilterType["GUID"] = "guid";
7394
+ KitFilterType["CUSTOM_INPUT"] = "customInput";
7395
+ })(KitFilterType || (KitFilterType = {}));
7396
+ var KitFilterDateRange;
7397
+ (function (KitFilterDateRange) {
7398
+ KitFilterDateRange["TODAY"] = "today";
7399
+ KitFilterDateRange["LAST_24_HOURS"] = "last24Hours";
7400
+ KitFilterDateRange["LAST_THREE_DAYS"] = "lastThreeDays";
7401
+ KitFilterDateRange["LAST_WEEK"] = "lastWeek";
7402
+ KitFilterDateRange["LAST_MONTH"] = "lastMonth";
7403
+ KitFilterDateRange["CUSTOM_RANGE"] = "customRange";
7404
+ })(KitFilterDateRange || (KitFilterDateRange = {}));
7405
+
7406
+ const textFilterOperators = [
7407
+ KitFilterOperator.CONTAINS,
7408
+ KitFilterOperator.EQ,
7409
+ KitFilterOperator.IS_NOT_NULL,
7410
+ KitFilterOperator.IS_NULL,
7411
+ KitFilterOperator.NEQ,
7412
+ KitFilterOperator.STARTS_WITH,
7413
+ KitFilterOperator.ENDS_WITH,
7414
+ KitFilterOperator.DOES_NOT_CONTAIN,
7415
+ ];
7416
+ const numericFilterOperators = [
7417
+ KitFilterOperator.EQ,
7418
+ KitFilterOperator.NEQ,
7419
+ KitFilterOperator.GTE,
7420
+ KitFilterOperator.GT,
7421
+ KitFilterOperator.LTE,
7422
+ KitFilterOperator.LT,
7423
+ KitFilterOperator.IS_NULL,
7424
+ KitFilterOperator.IS_NOT_NULL,
7425
+ ];
7426
+ const noValueRequiredFilterOperators = [
7427
+ KitFilterOperator.IS_NOT_NULL,
7428
+ KitFilterOperator.IS_NULL,
7429
+ ];
7430
+
7431
+ const kitDataStateToODataString = (state, utcDates = false, columns) => {
7432
+ const base = toODataString({ ...state, filter: undefined }, { utcDates });
7433
+ const filter = state.filter && convertFiltersToOData(state.filter, utcDates, columns);
7434
+ return decodeURIComponent(filter ? `${base}$filter=${filter}` : base);
7435
+ };
7436
+ const isKitFilterDescriptor = (filter) => {
7437
+ return 'field' in filter && 'value' in filter;
7438
+ };
7439
+ const kitFilterBy = (data, filter) => filterBy(data, filter);
7440
+ const convertFiltersToOData = (filters, utcDates, columns) => {
7441
+ const oDataFilters = filters.filters.map(filter => {
7442
+ if ('isCustomField' in filter && filter.isCustomField) {
7443
+ return convertCustomFiltersToOData(filter, columns);
7444
+ }
7445
+ else {
7446
+ return convertStandardFiltersToOData(filter, utcDates);
7447
+ }
7448
+ });
7449
+ return oDataFilters.filter(Boolean).join(` ${filters.logic} `);
7450
+ };
7451
+ const convertStandardFiltersToOData = (filter, utcDates) => {
7452
+ return toODataString({
7453
+ filter: isKitFilterDescriptor(filter)
7454
+ ? { logic: KitFilterLogic.AND, filters: [filter] }
7455
+ : filter,
7456
+ }, { utcDates }).replace(/^\$filter=/, '');
7457
+ };
7458
+ const convertCustomFiltersToOData = (filter, columns) => {
7459
+ const internalFilter = filter.filters[0];
7460
+ if (!isKitFilterDescriptor(internalFilter)) {
7461
+ return '';
7462
+ }
7463
+ const column = columns?.find(col => col.field === internalFilter.field);
7464
+ if (column?.customFieldHandler) {
7465
+ return column.customFieldHandler(filter);
7466
+ }
7467
+ return '';
7468
+ };
7469
+
7470
+ const convertFilterStringDate = (filters, columns, userTimeZone) => filters.map(filter => {
7471
+ if (filter.type == KitFilterType.DATE && filter.value) {
7472
+ const column = columns?.find(col => col.field === filter.field);
7473
+ const timeZoneOffset = getTimeZoneOffset(userTimeZone, column);
7474
+ const filters = filter.value.dateRange
7475
+ ? getValueFiltersByRange(filter.value.dateRange, timeZoneOffset, filter.field, column?.customRangeHandler)
7476
+ : getValueFilters(filter.value);
7477
+ return {
7478
+ ...filter,
7479
+ value: {
7480
+ ...filter.value,
7481
+ filters,
7482
+ },
7483
+ };
7484
+ }
7485
+ return filter;
7486
+ });
7487
+ const removeReadonlyPropertyFromFilters = (filters) => filters.map(({ readonly, ...item }) => item);
7488
+ const kitBuildFilterListOptions = (enumObject) => {
7489
+ return Object.values(enumObject).map(item => ({
7490
+ title: item,
7491
+ value: item,
7492
+ checked: false,
7493
+ }));
7494
+ };
7495
+ const kitBuildFilterBooleanOptions = (trueLabelKey, falseLabelKey) => {
7496
+ return [
7497
+ {
7498
+ title: trueLabelKey,
7499
+ value: true,
7500
+ checked: false,
7501
+ },
7502
+ {
7503
+ title: falseLabelKey,
7504
+ value: false,
7505
+ checked: false,
7506
+ },
7507
+ ];
7508
+ };
7509
+ const getTimeZoneOffset = (userTimeZone, column) => {
7510
+ let timeZoneOffset = 'UTC';
7511
+ if (column?.type === 'dateZone' || column?.type === 'dateTimeZone') {
7512
+ timeZoneOffset = userTimeZone;
7513
+ }
7514
+ return timeZoneOffset;
7515
+ };
7516
+ const removeFilterPrefix = (value) => value.split('$filter=')[1];
7517
+ const filterEmptyValues = (filters) => ({
7518
+ logic: filters?.logic ?? KitFilterLogic.AND,
7519
+ filters: filters?.filters.filter(item => noValueRequiredFilterOperators.includes(item.operator) || (item.value !== null && item.value !== undefined)) ?? [],
7520
+ });
7521
+ const normalizeGuidFilter = (filter) => {
7522
+ const guidFormat = /'((\{)?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(\})?)'/g;
7523
+ return filter.replace(guidFormat, '$1');
7524
+ };
7525
+ const getDatesByRange = (range, timezoneOffset = 'UTC', dateRangeHandler) => {
7526
+ const now = new Date();
7527
+ let endDate = new Date(now.setHours(0, 0, 0, 0));
7528
+ let startDate = new Date();
7529
+ switch (range) {
7530
+ case KitFilterDateRange.LAST_24_HOURS:
7531
+ endDate = new Date(now);
7532
+ startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000);
7533
+ return [
7534
+ kitNormalizeDateToUtc(startDate, timezoneOffset),
7535
+ kitNormalizeDateToUtc(endDate, timezoneOffset),
7536
+ ];
7537
+ case KitFilterDateRange.LAST_THREE_DAYS:
7538
+ startDate.setDate(now.getDate() - 3);
7539
+ break;
7540
+ case KitFilterDateRange.LAST_WEEK:
7541
+ startDate.setDate(now.getDate() - 7);
7542
+ break;
7543
+ case KitFilterDateRange.LAST_MONTH:
7544
+ startDate.setMonth(now.getMonth() - 1);
7545
+ break;
7546
+ case KitFilterDateRange.CUSTOM_RANGE:
7547
+ if (dateRangeHandler) {
7548
+ return dateRangeHandler();
7549
+ }
7550
+ break;
7551
+ }
7552
+ return [
7553
+ kitNormalizeDateToUtc(startDate, timezoneOffset),
7554
+ kitNormalizeDateToUtc(endDate, timezoneOffset, true),
7555
+ ];
7556
+ };
7557
+ const getValueFiltersByRange = (range, timezoneOffset = 'UTC', field, dateRangeHandler) => {
7558
+ const [startDate, endDate,] = getDatesByRange(range, timezoneOffset, dateRangeHandler);
7559
+ return [
7560
+ {
7561
+ operator: KitFilterOperator.GTE,
7562
+ value: startDate,
7563
+ field,
7564
+ },
7565
+ {
7566
+ operator: KitFilterOperator.LTE,
7567
+ value: endDate,
7568
+ field,
7569
+ },
7570
+ ];
7571
+ };
7572
+ const getValueFilters = (value) => {
7573
+ return value.filters.map(item => {
7574
+ const value = item.value ? new Date(item.value) : item.value;
7575
+ return {
7576
+ ...item,
7577
+ value,
7578
+ };
7579
+ });
7580
+ };
7581
+ const kitBuildOdataFilter = (filter, columns) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({ filter }, true, columns)));
7582
+ const kitBuildFilters = (filters) => ({
7583
+ logic: KitFilterLogic.AND,
7584
+ filters: filters.map(filter => {
7585
+ const cleanedFilter = filterEmptyValues(filter.value);
7586
+ return {
7587
+ ...cleanedFilter,
7588
+ isCustomField: filter.type === KitFilterType.CUSTOM_INPUT,
7589
+ };
7590
+ }),
7591
+ });
7592
+
7593
+ const kitFormatStringForSearch = (inputString) => {
7594
+ return inputString
7595
+ .split(/\s+/)
7596
+ .filter(text => !!text)
7597
+ .map(text => text + '*')
7598
+ .join(' ');
7599
+ };
7600
+
7601
+ const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField, hiddenInGrid, customFieldHandler, customRangeHandler) => ({
7602
+ field,
7603
+ title,
7604
+ sortable,
7605
+ hidden,
7606
+ width,
7607
+ filterType,
7608
+ type,
7609
+ excelFormat,
7610
+ apiField,
7611
+ hiddenInGrid,
7612
+ customFieldHandler,
7613
+ customRangeHandler,
7614
+ });
7615
+ const kitBuildGridDataResults = (data, loading, total) => ({
7616
+ results: {
7617
+ data,
7618
+ total: total ?? 0,
7619
+ },
7620
+ loading,
7621
+ });
7622
+ const kitBuildSortString = (sort, columns) => {
7623
+ const sortString = sort?.filter(({ dir }) => dir)
7624
+ .map(({ field, dir }) => {
7625
+ const column = columns?.find(col => col.field === field);
7626
+ const targetField = column?.apiField ?? field;
7627
+ return `${targetField.split('.').join('/')} ${dir}`;
7628
+ }).join(', ');
7629
+ return sortString !== '' && sortString || undefined;
7630
+ };
7631
+ const kitFetchGridData = ({ store, destroyRef, isLoading, fetchAction, fetchFromIndexAction, hasArchiveToggle, error, }) => {
7632
+ isLoading.set(true);
7633
+ const { skip, take, sort, filter, search, archive } = store.selectSnapshot(KIT_GRID_STATE_TOKEN);
7634
+ const gridState = {
7635
+ take,
7636
+ skip,
7637
+ sort,
7638
+ filter: kitBuildFilters(filter),
7639
+ };
7640
+ const isArchive = hasArchiveToggle && archive || false;
7641
+ const isSearchMode = hasArchiveToggle && !isArchive || !!search;
7642
+ const searchTerm = search && kitFormatStringForSearch(search) || undefined;
7643
+ const action = isSearchMode && fetchFromIndexAction({ ...gridState, searchTerm }) || fetchAction(gridState);
7644
+ store.dispatch(action).pipe(takeUntilDestroyed(destroyRef), finalize(() => isLoading.set(false))).subscribe({ error });
7645
+ };
7646
+ const kitFetchExportGridData = ({ fetchAction, fetchIndexAction, sort, filter, search, columns, total, hasArchiveToggle = false, archiveModeEnabled = false, }) => {
7647
+ const isArchive = hasArchiveToggle && archiveModeEnabled || false;
7648
+ const isSearchMode = hasArchiveToggle && !isArchive || !!search;
7649
+ if (isSearchMode) {
7650
+ const searchTerm = search && kitFormatStringForSearch(search) || undefined;
7651
+ return fetchIndexAction(0, total, kitBuildSortString(sort, columns), kitBuildOdataFilter(kitBuildFilters(filter)), searchTerm);
7652
+ }
7653
+ return fetchAction(0, total, kitBuildSortString(sort, columns), kitBuildOdataFilter(kitBuildFilters(filter)));
7654
+ };
7655
+ const kitShouldResetGridState = ({ stateColumns, availableColumns, }) => {
7656
+ if (!stateColumns.length) {
7657
+ return true;
7658
+ }
7659
+ const stateTitles = stateColumns.filter(col => !col.hiddenInGrid).map(col => col.title);
7660
+ const availableTitles = new Set(availableColumns.filter(col => !col.hiddenInGrid).map(col => col.title));
7661
+ return !stateTitles.every(field => availableTitles.has(field));
7662
+ };
7663
+
7664
+ var KitUsersSettingsDetailsField;
7665
+ (function (KitUsersSettingsDetailsField) {
7666
+ KitUsersSettingsDetailsField["USER_NAME"] = "userName";
7667
+ KitUsersSettingsDetailsField["FIRST_NAME"] = "firstName";
7668
+ KitUsersSettingsDetailsField["LAST_NAME"] = "lastName";
7669
+ KitUsersSettingsDetailsField["EMAIL"] = "email";
7670
+ KitUsersSettingsDetailsField["PASSWORD"] = "password";
7671
+ KitUsersSettingsDetailsField["MFA"] = "mfaEnabled";
7672
+ KitUsersSettingsDetailsField["FORCE_PASSWORD"] = "forcePassword";
7673
+ })(KitUsersSettingsDetailsField || (KitUsersSettingsDetailsField = {}));
7674
+
7675
+ var KitUsersSettingsServerErrorTitle;
7676
+ (function (KitUsersSettingsServerErrorTitle) {
7677
+ KitUsersSettingsServerErrorTitle["PASSWORD_TOO_WEAK"] = "Your password is too weak.";
7678
+ KitUsersSettingsServerErrorTitle["INVALID_USER_NAME"] = "You have specified invalid UserName.";
7679
+ })(KitUsersSettingsServerErrorTitle || (KitUsersSettingsServerErrorTitle = {}));
7680
+ const kitUsersSettingsErrorTranslationMap = {
7681
+ [KitUsersSettingsServerErrorTitle.PASSWORD_TOO_WEAK]: 'kit.usersSettings.details.passwordTooWeak',
7682
+ [KitUsersSettingsServerErrorTitle.INVALID_USER_NAME]: 'kit.usersSettings.details.userNameInvalid',
7683
+ };
7684
+
7685
+ const kitApiResponseDefaultEntities = () => ({
7686
+ data: [],
7687
+ total: 0,
7688
+ loading: true,
7689
+ });
7690
+
7691
+ class KitFetchUsersSettings extends KitAbstractPayloadAction {
7692
+ static { this.type = '[KitUsersSettings] Fetch Users'; }
7693
+ }
7694
+ class KitFetchUsersSettingsDetails extends KitAbstractPayloadAction {
7695
+ static { this.type = '[KitUsersSettings] Fetch User Details'; }
7696
+ }
7697
+ class KitUpdateUsersSettingsDetails extends KitAbstractPayloadAction {
7698
+ static { this.type = '[KitUsersSettings] Update User Details'; }
7699
+ }
7700
+ class KitCreateUsersSettingsUser extends KitAbstractPayloadAction {
7701
+ static { this.type = '[KitUsersSettings] Create User'; }
7702
+ }
7703
+ class KitDeleteUsersSettingsUser extends KitAbstractPayloadAction {
7704
+ static { this.type = '[KitUsersSettings] Delete User'; }
7705
+ }
7706
+
7707
+ const kitBuildHttpParams = (obj) => {
7708
+ let params = new HttpParams();
7709
+ Object.entries(obj).forEach(([key, value,]) => {
7710
+ if (value === undefined || value === null) {
7711
+ return;
7712
+ }
7713
+ params = params.set(key, String(value));
7714
+ });
7715
+ return params;
7716
+ };
7717
+
7718
+ class KitUsersSettingsService {
7719
+ constructor() {
7720
+ this.httpClient = inject(HttpClient);
7721
+ this.baseUrl = `${trimTrailingSlash(inject(KIT_BASE_PATH))}/`;
7722
+ }
7723
+ fetchUsers(state) {
7724
+ const url = `${this.baseUrl}users`;
7725
+ const { $skip, $top, $orderby, $filter } = this.getRequestParams(state);
7726
+ return this.httpClient.get(url, { params: kitBuildHttpParams({ $skip, $top, $orderby, $filter }) });
7727
+ }
7728
+ fetchUserDetails(id) {
7729
+ const url = `${this.baseUrl}users/${id}`;
7730
+ return this.httpClient.get(url);
7731
+ }
7732
+ updateUserDetails(payload) {
7733
+ const url = `${this.baseUrl}users/${payload.id}`;
7734
+ return this.httpClient.put(url, payload);
7735
+ }
7736
+ createUser(payload) {
7737
+ const url = `${this.baseUrl}users`;
7738
+ return this.httpClient.post(url, payload);
7739
+ }
7740
+ deleteUser(id) {
7741
+ const url = `${this.baseUrl}users/${id}`;
7742
+ return this.httpClient.delete(url);
7743
+ }
7744
+ getRequestParams(state) {
7745
+ const $skip = state.skip && state.skip > 0 ? state.skip : undefined;
7746
+ const $top = state.take;
7747
+ const $orderby = state.sort?.length
7748
+ ? state.sort.map(sort => `${sort.field} ${sort.dir ?? KitSortDirection.ASC}`).join(',')
7749
+ : 'name asc';
7750
+ const $filter = state.filter
7751
+ ? kitDataStateToODataString({ filter: state.filter }).replace('$filter=', '')
7752
+ : undefined;
7753
+ return {
7754
+ $skip,
7755
+ $top,
7756
+ $orderby,
7757
+ $filter,
7758
+ };
7759
+ }
7760
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7761
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService }); }
7762
+ }
7763
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService, decorators: [{
7764
+ type: Injectable
7765
+ }] });
7766
+
7767
+ const KIT_USERS_SETTINGS_STATE_TOKEN = new StateToken('usersSettings');
7768
+ let KitUsersSettingsState = class KitUsersSettingsState {
7769
+ constructor() {
7770
+ this.kitUsersSettingsService = inject(KitUsersSettingsService);
7771
+ }
7772
+ fetchUsers(ctx, action) {
7773
+ ctx.patchState({
7774
+ users: { ...ctx.getState().users, loading: true },
7775
+ });
7776
+ return this.kitUsersSettingsService.fetchUsers(action.payload).pipe(tap(data => {
7777
+ ctx.patchState({
7778
+ users: {
7779
+ loading: false,
7780
+ data: data.data,
7781
+ total: data.total,
7782
+ },
7783
+ });
7784
+ }), catchError(err => {
7785
+ ctx.patchState({
7786
+ users: {
7787
+ loading: false,
7788
+ data: [],
7789
+ total: 0,
7790
+ },
7791
+ });
7792
+ return throwError(() => err);
7793
+ }));
7794
+ }
7795
+ fetchUserDetails(ctx, action) {
7796
+ ctx.patchState({
7797
+ userDetails: { loading: true, data: null },
7798
+ });
7799
+ return this.kitUsersSettingsService.fetchUserDetails(action.payload).pipe(tap(data => {
7800
+ ctx.patchState({
7801
+ userDetails: {
7802
+ loading: false,
7803
+ data,
7804
+ },
7805
+ });
7806
+ }), catchError(err => {
7807
+ ctx.patchState({
7808
+ userDetails: { loading: false, data: null },
7809
+ });
7810
+ return throwError(() => err);
7811
+ }));
7812
+ }
7813
+ updateUserDetails(ctx, action) {
7814
+ ctx.patchState({
7815
+ userDetails: {
7816
+ ...ctx.getState().userDetails,
7817
+ loading: true,
7818
+ },
7819
+ });
7820
+ return this.kitUsersSettingsService.updateUserDetails(action.payload).pipe(tap(data => {
7821
+ const state = ctx.getState();
7822
+ ctx.patchState({
7823
+ users: {
7824
+ ...state.users,
7825
+ data: state.users.data.map(user => user.id === data.id ? data : user),
7826
+ },
7827
+ userDetails: {
7828
+ loading: false,
7829
+ data,
7830
+ },
7831
+ });
7832
+ }), catchError(err => {
7833
+ ctx.patchState({
7834
+ userDetails: {
7835
+ ...ctx.getState().userDetails,
7836
+ loading: false,
7837
+ },
7838
+ });
7839
+ return throwError(() => err);
7840
+ }));
7841
+ }
7842
+ createUser(ctx, action) {
7843
+ ctx.patchState({
7844
+ users: {
7845
+ ...ctx.getState().users,
7846
+ loading: true,
7847
+ },
7848
+ });
7849
+ return this.kitUsersSettingsService.createUser(action.payload).pipe(finalize(() => {
7850
+ ctx.patchState({
7851
+ users: {
7852
+ ...ctx.getState().users,
7853
+ loading: false,
7854
+ },
7855
+ });
7856
+ }));
7857
+ }
7858
+ deleteUser(ctx, action) {
7859
+ return this.kitUsersSettingsService.deleteUser(action.payload).pipe(tap(() => {
7860
+ const state = ctx.getState();
7861
+ const usersData = state.users.data ?? [];
7862
+ ctx.patchState({
7863
+ users: {
7864
+ ...state.users,
7865
+ data: usersData.filter(user => user.id !== action.payload),
7866
+ total: Math.max((state.users.total ?? usersData.length) - 1, 0),
7867
+ },
7868
+ userDetails: state.userDetails.data?.id === action.payload
7869
+ ? { ...state.userDetails, data: null }
7870
+ : state.userDetails,
7871
+ });
7872
+ }));
7873
+ }
7874
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7875
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsState }); }
7876
+ };
7877
+ __decorate([
7878
+ Action(KitFetchUsersSettings)
7879
+ ], KitUsersSettingsState.prototype, "fetchUsers", null);
7880
+ __decorate([
7881
+ Action(KitFetchUsersSettingsDetails)
7882
+ ], KitUsersSettingsState.prototype, "fetchUserDetails", null);
7883
+ __decorate([
7884
+ Action(KitUpdateUsersSettingsDetails)
7885
+ ], KitUsersSettingsState.prototype, "updateUserDetails", null);
7886
+ __decorate([
7887
+ Action(KitCreateUsersSettingsUser)
7888
+ ], KitUsersSettingsState.prototype, "createUser", null);
7889
+ __decorate([
7890
+ Action(KitDeleteUsersSettingsUser)
7891
+ ], KitUsersSettingsState.prototype, "deleteUser", null);
7892
+ KitUsersSettingsState = __decorate([
7893
+ State({
7894
+ name: KIT_USERS_SETTINGS_STATE_TOKEN,
7895
+ defaults: {
7896
+ users: kitApiResponseDefaultEntities(),
7897
+ userDetails: kitApiResponseDefaultEntities(),
7898
+ },
7899
+ })
7900
+ ], KitUsersSettingsState);
7901
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsState, decorators: [{
7902
+ type: Injectable
7903
+ }], propDecorators: { fetchUsers: [], fetchUserDetails: [], updateUserDetails: [], createUser: [], deleteUser: [] } });
7904
+
7905
+ const kitUsersSettingsDetailsFormServerErrorFieldMap = {
7906
+ [KitUsersSettingsServerErrorTitle.PASSWORD_TOO_WEAK]: KitUsersSettingsDetailsField.PASSWORD,
7907
+ [KitUsersSettingsServerErrorTitle.INVALID_USER_NAME]: KitUsersSettingsDetailsField.USER_NAME,
7908
+ };
7909
+
7910
+ class KitUsersSettingsDetailsFormComponent {
7911
+ constructor() {
7912
+ this.formBuilder = inject(FormBuilder);
7913
+ this.store = inject(Store);
7914
+ this.kitFormErrors = inject(KitFormErrors);
7915
+ this.destroyRef = inject(DestroyRef);
7916
+ this.isCreatingNewUser = input(false, ...(ngDevMode ? [{ debugName: "isCreatingNewUser" }] : /* istanbul ignore next */ []));
7917
+ this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
7918
+ this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
7919
+ this.kitUsersSettingsDetailsField = KitUsersSettingsDetailsField;
7920
+ this.form = this.formBuilder.group({
7921
+ [KitUsersSettingsDetailsField.USER_NAME]: this.formBuilder.nonNullable.control('', Validators.required),
7922
+ [KitUsersSettingsDetailsField.FIRST_NAME]: this.formBuilder.nonNullable.control('', Validators.required),
7923
+ [KitUsersSettingsDetailsField.LAST_NAME]: this.formBuilder.nonNullable.control('', Validators.required),
7924
+ [KitUsersSettingsDetailsField.EMAIL]: this.formBuilder.nonNullable.control('', [
7925
+ Validators.required,
7926
+ Validators.email,
7927
+ ]),
7928
+ [KitUsersSettingsDetailsField.PASSWORD]: this.formBuilder.nonNullable.control(''),
7929
+ [KitUsersSettingsDetailsField.MFA]: this.formBuilder.nonNullable.control(false),
7930
+ [KitUsersSettingsDetailsField.FORCE_PASSWORD]: this.formBuilder.nonNullable.control(false),
7931
+ });
7932
+ effect(() => {
7933
+ if (!this.isCreatingNewUser()) {
7934
+ const { data: userDetails, loading } = this.userDetails();
7935
+ loading ? this.form.disable({ emitEvent: false }) : this.form.enable({ emitEvent: false });
7936
+ if (userDetails) {
7937
+ this.patchForm(userDetails);
7938
+ }
7939
+ }
7940
+ });
7941
+ }
7942
+ ngOnInit() {
7943
+ if (this.isCreatingNewUser()) {
7944
+ this.enablePasswordControl();
7945
+ }
7946
+ }
7947
+ getTextboxState(textboxName) {
7948
+ const control = this.form.get(textboxName);
7949
+ return control?.touched && control?.invalid && control?.dirty
7950
+ ? KitTextboxState.ERROR
7951
+ : KitTextboxState.DEFAULT;
7952
+ }
7953
+ getTextboxMessageText(textboxName) {
7954
+ const control = this.form.get(textboxName);
7955
+ if (!control || !(control.touched || control.dirty)) {
7956
+ return undefined;
7957
+ }
7958
+ if (control.errors?.['serverError']) {
7959
+ return control.errors['serverError'];
7960
+ }
7961
+ return this.kitFormErrors.getErrors(control)[0];
7962
+ }
7963
+ submit() {
7964
+ return this.isCreatingNewUser()
7965
+ ? this.createUser()
7966
+ : this.updateUser();
7967
+ }
7968
+ createUser() {
7969
+ return this.store.dispatch(new KitCreateUsersSettingsUser(this.form.getRawValue())).pipe(takeUntilDestroyed(this.destroyRef), catchError(error => this.handleSubmitError(error)));
7970
+ }
7971
+ updateUser() {
7972
+ const id = this.userDetails().data?.id;
7973
+ if (!id) {
7974
+ return EMPTY;
7975
+ }
7976
+ const { password, forcePassword, ...userDetails } = this.form.getRawValue();
7977
+ return this.store.dispatch(new KitUpdateUsersSettingsDetails({
7978
+ ...userDetails,
7979
+ id,
7980
+ })).pipe(takeUntilDestroyed(this.destroyRef), catchError(error => this.handleSubmitError(error)));
7981
+ }
7982
+ enablePasswordControl() {
7983
+ const passwordControl = this.form.get(KitUsersSettingsDetailsField.PASSWORD);
7984
+ passwordControl?.addValidators(Validators.required);
7985
+ passwordControl?.enable({ emitEvent: false });
7986
+ passwordControl?.updateValueAndValidity({ emitEvent: false });
7987
+ }
7988
+ patchForm(userDetails) {
7989
+ this.form.reset({
7990
+ [KitUsersSettingsDetailsField.USER_NAME]: userDetails.userName,
7991
+ [KitUsersSettingsDetailsField.FIRST_NAME]: userDetails.firstName,
7992
+ [KitUsersSettingsDetailsField.LAST_NAME]: userDetails.lastName,
7993
+ [KitUsersSettingsDetailsField.EMAIL]: userDetails.email,
7994
+ [KitUsersSettingsDetailsField.PASSWORD]: '',
7995
+ [KitUsersSettingsDetailsField.MFA]: userDetails.mfaEnabled,
7996
+ [KitUsersSettingsDetailsField.FORCE_PASSWORD]: false,
7997
+ }, { emitEvent: false });
7998
+ }
7999
+ handleSubmitError(error) {
8000
+ this.applyServerError(error?.error?.title ?? '');
8001
+ return EMPTY;
8002
+ }
8003
+ applyServerError(title) {
8004
+ const field = kitUsersSettingsDetailsFormServerErrorFieldMap[title];
8005
+ const translationKey = kitUsersSettingsErrorTranslationMap[title];
8006
+ const control = this.form.get(field);
8007
+ if (!field || !translationKey || !control) {
8008
+ return;
8009
+ }
8010
+ control.setErrors({ serverError: translationKey });
8011
+ control.markAsTouched();
8012
+ control.markAsDirty();
8013
+ }
8014
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8015
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsDetailsFormComponent, isStandalone: true, selector: "kit-users-settings-details-form", inputs: { isCreatingNewUser: { classPropertyName: "isCreatingNewUser", publicName: "isCreatingNewUser", isSignal: true, isRequired: false, transformFunction: null } }, providers: [KitFormErrors], ngImport: i0, template: "<form class=\"kit-user-settings-details-form\"\n [formGroup]=\"form\">\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.USER_NAME\"\n [label]=\"'kit.usersSettings.details.loginId' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.USER_NAME)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.USER_NAME) | translate\"></kit-textbox>\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.FIRST_NAME\"\n [label]=\"'kit.usersSettings.details.firstName' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.FIRST_NAME)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.FIRST_NAME) | translate\"></kit-textbox>\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.LAST_NAME\"\n [label]=\"'kit.usersSettings.details.lastName' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.LAST_NAME)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.LAST_NAME) | translate\"></kit-textbox>\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.EMAIL\"\n [label]=\"'kit.usersSettings.details.email' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.EMAIL)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.EMAIL) | translate\"></kit-textbox>\n @if (isCreatingNewUser()) {\n <kit-textbox type=\"password\"\n [formControlName]=\"kitUsersSettingsDetailsField.PASSWORD\"\n [label]=\"'kit.usersSettings.details.password' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.PASSWORD)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.PASSWORD) | translate\"></kit-textbox>\n }\n <div class=\"kit-user-settings-details-form-toggles\">\n <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n [formControlName]=\"kitUsersSettingsDetailsField.MFA\"\n [label]=\"'kit.usersSettings.details.mfa' | translate\"></kit-toggle>\n @if (isCreatingNewUser()) {\n <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n [formControlName]=\"kitUsersSettingsDetailsField.FORCE_PASSWORD\"\n [label]=\"'kit.usersSettings.details.forcePassword' | translate\"></kit-toggle>\n }\n </div>\n</form>\n", styles: [".kit-user-settings-details-form{display:flex;flex-direction:column;gap:10px;width:100%}.kit-user-settings-details-form-toggles{display:flex;width:100%;gap:20px}.kit-user-settings-details-form-toggle{width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between;width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-form-label{margin:0}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8016
+ }
8017
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsFormComponent, decorators: [{
8018
+ type: Component,
8019
+ args: [{ selector: 'kit-users-settings-details-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
8020
+ TranslatePipe,
8021
+ KitTextboxComponent,
8022
+ ReactiveFormsModule,
8023
+ KitToggleComponent,
8024
+ ], providers: [KitFormErrors], template: "<form class=\"kit-user-settings-details-form\"\n [formGroup]=\"form\">\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.USER_NAME\"\n [label]=\"'kit.usersSettings.details.loginId' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.USER_NAME)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.USER_NAME) | translate\"></kit-textbox>\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.FIRST_NAME\"\n [label]=\"'kit.usersSettings.details.firstName' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.FIRST_NAME)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.FIRST_NAME) | translate\"></kit-textbox>\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.LAST_NAME\"\n [label]=\"'kit.usersSettings.details.lastName' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.LAST_NAME)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.LAST_NAME) | translate\"></kit-textbox>\n <kit-textbox [formControlName]=\"kitUsersSettingsDetailsField.EMAIL\"\n [label]=\"'kit.usersSettings.details.email' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.EMAIL)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.EMAIL) | translate\"></kit-textbox>\n @if (isCreatingNewUser()) {\n <kit-textbox type=\"password\"\n [formControlName]=\"kitUsersSettingsDetailsField.PASSWORD\"\n [label]=\"'kit.usersSettings.details.password' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsDetailsField.PASSWORD)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsDetailsField.PASSWORD) | translate\"></kit-textbox>\n }\n <div class=\"kit-user-settings-details-form-toggles\">\n <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n [formControlName]=\"kitUsersSettingsDetailsField.MFA\"\n [label]=\"'kit.usersSettings.details.mfa' | translate\"></kit-toggle>\n @if (isCreatingNewUser()) {\n <kit-toggle class=\"kit-user-settings-details-form-toggle\"\n [formControlName]=\"kitUsersSettingsDetailsField.FORCE_PASSWORD\"\n [label]=\"'kit.usersSettings.details.forcePassword' | translate\"></kit-toggle>\n }\n </div>\n</form>\n", styles: [".kit-user-settings-details-form{display:flex;flex-direction:column;gap:10px;width:100%}.kit-user-settings-details-form-toggles{display:flex;width:100%;gap:20px}.kit-user-settings-details-form-toggle{width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between;width:100%}.kit-user-settings-details-form-toggle ::ng-deep .kit-form-label{margin:0}\n"] }]
8025
+ }], ctorParameters: () => [], propDecorators: { isCreatingNewUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCreatingNewUser", required: false }] }] } });
8026
+
8027
+ class KitUsersSettingsCreateDialogComponent {
8028
+ constructor() {
8029
+ this.destroyRef = inject(DestroyRef);
8030
+ this.detailsForm = viewChild.required(KitUsersSettingsDetailsFormComponent);
8031
+ this.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
8032
+ this.kitDialogType = KitDialogType;
8033
+ this.kitButtonKind = KitButtonKind;
8034
+ this.kitButtonType = KitButtonType;
8035
+ }
8036
+ get isFormDisabled() {
8037
+ return this.detailsForm().form.pristine || this.detailsForm().form.invalid;
8038
+ }
8039
+ onConfirm() {
8040
+ this.detailsForm().submit().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
8041
+ this.opened.set(false);
8042
+ });
8043
+ }
8044
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8045
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsCreateDialogComponent, isStandalone: true, selector: "kit-users-settings-create-dialog", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, viewQueries: [{ propertyName: "detailsForm", first: true, predicate: KitUsersSettingsDetailsFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (opened()) {\n <kit-dialog class=\"kit-user-settings-create-dialog\"\n [type]=\"kitDialogType.Declarative\">\n <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n {{ \"kit.usersSettings.createDialog.title\" | translate }}\n </kit-dialog-titlebar>\n\n <div class=\"kit-user-settings-create-dialog-content\">\n <kit-users-settings-details-form [isCreatingNewUser]=\"true\" />\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"opened.set(false)\" />\n <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isFormDisabled\"\n (clicked)=\"onConfirm()\" />\n </kit-dialog-actions>\n </kit-dialog>\n}\n", styles: [".kit-user-settings-create-dialog-content{padding:15px 20px;display:flex;flex-direction:column;gap:15px}\n"], dependencies: [{ kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["type", "backUrl"] }, { kind: "component", type: KitDialogTitlebarComponent, selector: "kit-dialog-titlebar", outputs: ["closed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsDetailsFormComponent, selector: "kit-users-settings-details-form", inputs: ["isCreatingNewUser"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8046
+ }
8047
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateDialogComponent, decorators: [{
8048
+ type: Component,
8049
+ args: [{ selector: 'kit-users-settings-create-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
8050
+ KitDialogComponent,
8051
+ KitDialogTitlebarComponent,
8052
+ KitDialogActionsComponent,
8053
+ KitButtonComponent,
8054
+ TranslatePipe,
8055
+ KitUsersSettingsDetailsFormComponent,
8056
+ ], template: "@if (opened()) {\n <kit-dialog class=\"kit-user-settings-create-dialog\"\n [type]=\"kitDialogType.Declarative\">\n <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n {{ \"kit.usersSettings.createDialog.title\" | translate }}\n </kit-dialog-titlebar>\n\n <div class=\"kit-user-settings-create-dialog-content\">\n <kit-users-settings-details-form [isCreatingNewUser]=\"true\" />\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.usersSettings.createDialog.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"opened.set(false)\" />\n <kit-button [label]=\"'kit.usersSettings.createDialog.confirm' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isFormDisabled\"\n (clicked)=\"onConfirm()\" />\n </kit-dialog-actions>\n </kit-dialog>\n}\n", styles: [".kit-user-settings-create-dialog-content{padding:15px 20px;display:flex;flex-direction:column;gap:15px}\n"] }]
8057
+ }], propDecorators: { detailsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsDetailsFormComponent), { isSignal: true }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
8058
+
8059
+ var KitUsersSettingsPasswordDialogField;
8060
+ (function (KitUsersSettingsPasswordDialogField) {
8061
+ KitUsersSettingsPasswordDialogField["PASSWORD"] = "password";
8062
+ KitUsersSettingsPasswordDialogField["REPEAT_PASSWORD"] = "repeatPassword";
8063
+ KitUsersSettingsPasswordDialogField["FORCE_PASSWORD"] = "forcePassword";
8064
+ })(KitUsersSettingsPasswordDialogField || (KitUsersSettingsPasswordDialogField = {}));
8065
+
8066
+ class KitUsersSettingsPasswordDialogComponent {
8067
+ constructor() {
8068
+ this.kitFormErrors = inject(KitFormErrors);
8069
+ this.formBuilder = inject(FormBuilder);
8070
+ this.store = inject(Store);
8071
+ this.destroyRef = inject(DestroyRef);
8072
+ this.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
8073
+ this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
8074
+ this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
8075
+ this.kitDialogType = KitDialogType;
8076
+ this.kitButtonKind = KitButtonKind;
8077
+ this.kitButtonType = KitButtonType;
8078
+ this.kitUsersSettingsPasswordDialogField = KitUsersSettingsPasswordDialogField;
8079
+ this.form = this.formBuilder.group({
8080
+ [KitUsersSettingsPasswordDialogField.PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
8081
+ [KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
8082
+ [KitUsersSettingsPasswordDialogField.FORCE_PASSWORD]: this.formBuilder.nonNullable.control(false),
8083
+ }, { validators: this.passwordsMatchValidator });
8084
+ }
8085
+ get isFormDisabled() {
8086
+ return this.form.pristine || this.form.invalid;
8087
+ }
8088
+ getTextboxState(field) {
8089
+ const control = this.form.get(field);
8090
+ const isTouchedAndDirty = !!control?.touched && !!control.dirty;
8091
+ const hasFieldError = isTouchedAndDirty && !!control?.invalid;
8092
+ const hasMatchError = field === KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD
8093
+ && !!this.form.errors?.['passwordsMismatch']
8094
+ && isTouchedAndDirty;
8095
+ return hasFieldError || hasMatchError ? KitTextboxState.ERROR : KitTextboxState.DEFAULT;
8096
+ }
8097
+ getTextboxMessageText(field) {
8098
+ const control = this.form.get(field);
8099
+ if (!control || !(control.touched || control.dirty)) {
8100
+ return undefined;
8101
+ }
8102
+ if (field === 'repeatPassword' && this.form.errors?.['passwordsMismatch'] && control.dirty) {
8103
+ return 'kit.usersSettings.passwordDialog.passwordsDoNotMatch';
8104
+ }
8105
+ if (control.errors?.['serverError']) {
8106
+ return control.errors['serverError'];
8107
+ }
8108
+ return this.kitFormErrors.getErrors(control)[0];
8109
+ }
8110
+ onConfirm() {
8111
+ const userDetails = this.userDetails().data;
8112
+ if (!userDetails) {
8113
+ return;
8114
+ }
8115
+ this.store.dispatch(new KitUpdateUsersSettingsDetails({
8116
+ ...userDetails,
8117
+ password: this.form.get(KitUsersSettingsPasswordDialogField.PASSWORD)?.value ?? undefined,
8118
+ forcePasswordResetOnNextLogin: this.form.get(KitUsersSettingsPasswordDialogField.FORCE_PASSWORD)?.value ?? false,
8119
+ })).pipe(catchError(error => this.handleSubmitError(error)), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
8120
+ this.opened.set(false);
8121
+ });
8122
+ }
8123
+ passwordsMatchValidator(group) {
8124
+ const password = group.get(KitUsersSettingsPasswordDialogField.PASSWORD)?.value ?? '';
8125
+ const repeatPassword = group.get(KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)?.value ?? '';
8126
+ return password === repeatPassword ? null : { passwordsMismatch: true };
8127
+ }
8128
+ handleSubmitError(error) {
8129
+ this.applyServerError(error?.error?.title ?? '');
8130
+ return EMPTY;
8131
+ }
8132
+ applyServerError(title) {
8133
+ const translationKey = kitUsersSettingsErrorTranslationMap[title];
8134
+ const control = this.form.get(KitUsersSettingsPasswordDialogField.PASSWORD);
8135
+ if (!translationKey || !control) {
8136
+ return;
8137
+ }
8138
+ control.setErrors({ serverError: translationKey });
8139
+ control.markAsTouched();
8140
+ control.markAsDirty();
8141
+ }
8142
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8143
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUsersSettingsPasswordDialogComponent, isStandalone: true, selector: "kit-users-settings-password-dialog", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, providers: [KitFormErrors], ngImport: i0, template: "@if (opened()) {\n <kit-dialog class=\"kit-users-settings-password-dialog\"\n [type]=\"kitDialogType.Declarative\">\n <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n {{ \"kit.usersSettings.passwordDialog.title\" | translate }}\n </kit-dialog-titlebar>\n\n <form class=\"kit-users-settings-password-dialog-content\"\n [formGroup]=\"form\">\n <kit-textbox type=\"password\"\n class=\"kit-users-settings-password-dialog-textbox\"\n [formControlName]=\"kitUsersSettingsPasswordDialogField.PASSWORD\"\n [label]=\"'kit.usersSettings.passwordDialog.newPassword' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.PASSWORD)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.PASSWORD) | translate\"></kit-textbox>\n <kit-textbox type=\"password\"\n class=\"kit-users-settings-password-dialog-textbox\"\n [formControlName]=\"kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD\"\n [label]=\"'kit.usersSettings.passwordDialog.repeatNewPassword' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD) | translate\"></kit-textbox>\n <kit-toggle class=\"kit-users-settings-password-dialog-toggle\"\n [formControlName]=\"kitUsersSettingsPasswordDialogField.FORCE_PASSWORD\"\n [label]=\"'kit.usersSettings.passwordDialog.forcePassword' | translate\"></kit-toggle>\n </form>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.usersSettings.passwordDialog.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"opened.set(false)\" />\n <kit-button [label]=\"'kit.usersSettings.passwordDialog.confirm' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isFormDisabled\"\n (clicked)=\"onConfirm()\" />\n </kit-dialog-actions>\n </kit-dialog>\n}", styles: [".kit-users-settings-password-dialog-content{width:400px;padding:15px 20px;display:flex;flex-direction:column;gap:15px}.kit-users-settings-password-dialog-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px}\n"], dependencies: [{ kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["type", "backUrl"] }, { kind: "component", type: KitDialogTitlebarComponent, selector: "kit-dialog-titlebar", outputs: ["closed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8144
+ }
8145
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsPasswordDialogComponent, decorators: [{
8146
+ type: Component,
8147
+ args: [{ selector: 'kit-users-settings-password-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
8148
+ KitDialogComponent,
8149
+ KitDialogTitlebarComponent,
8150
+ KitDialogActionsComponent,
8151
+ KitButtonComponent,
8152
+ TranslatePipe,
8153
+ KitTextboxComponent,
8154
+ ReactiveFormsModule,
8155
+ KitToggleComponent,
8156
+ ], providers: [KitFormErrors], template: "@if (opened()) {\n <kit-dialog class=\"kit-users-settings-password-dialog\"\n [type]=\"kitDialogType.Declarative\">\n <kit-dialog-titlebar (closed)=\"opened.set(false)\">\n {{ \"kit.usersSettings.passwordDialog.title\" | translate }}\n </kit-dialog-titlebar>\n\n <form class=\"kit-users-settings-password-dialog-content\"\n [formGroup]=\"form\">\n <kit-textbox type=\"password\"\n class=\"kit-users-settings-password-dialog-textbox\"\n [formControlName]=\"kitUsersSettingsPasswordDialogField.PASSWORD\"\n [label]=\"'kit.usersSettings.passwordDialog.newPassword' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.PASSWORD)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.PASSWORD) | translate\"></kit-textbox>\n <kit-textbox type=\"password\"\n class=\"kit-users-settings-password-dialog-textbox\"\n [formControlName]=\"kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD\"\n [label]=\"'kit.usersSettings.passwordDialog.repeatNewPassword' | translate\"\n [state]=\"getTextboxState(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)\"\n [messageText]=\"getTextboxMessageText(kitUsersSettingsPasswordDialogField.REPEAT_PASSWORD) | translate\"></kit-textbox>\n <kit-toggle class=\"kit-users-settings-password-dialog-toggle\"\n [formControlName]=\"kitUsersSettingsPasswordDialogField.FORCE_PASSWORD\"\n [label]=\"'kit.usersSettings.passwordDialog.forcePassword' | translate\"></kit-toggle>\n </form>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.usersSettings.passwordDialog.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"opened.set(false)\" />\n <kit-button [label]=\"'kit.usersSettings.passwordDialog.confirm' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isFormDisabled\"\n (clicked)=\"onConfirm()\" />\n </kit-dialog-actions>\n </kit-dialog>\n}", styles: [".kit-users-settings-password-dialog-content{width:400px;padding:15px 20px;display:flex;flex-direction:column;gap:15px}.kit-users-settings-password-dialog-toggle ::ng-deep .kit-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px}\n"] }]
8157
+ }], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
8158
+
8159
+ class KitUsersSettingsDetailsComponent {
8160
+ constructor() {
8161
+ this.store = inject(Store);
8162
+ this.detailsForm = viewChild.required(KitUsersSettingsDetailsFormComponent);
8163
+ this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
8164
+ this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
8165
+ this.isPasswordDialogOpened = signal(false, ...(ngDevMode ? [{ debugName: "isPasswordDialogOpened" }] : /* istanbul ignore next */ []));
8166
+ this.kitButtonKind = KitButtonKind;
8167
+ this.kitButtonType = KitButtonType;
8168
+ this.kitSvgIcon = KitSvgIcon;
8169
+ this.kitButtonIconPosition = KitButtonIconPosition;
8170
+ }
8171
+ get isFormDisabled() {
8172
+ return this.detailsForm().form.pristine || this.detailsForm().form.invalid;
8173
+ }
8174
+ onSave() {
8175
+ this.detailsForm().submit();
8176
+ }
8177
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8178
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitUsersSettingsDetailsComponent, isStandalone: true, selector: "kit-users-settings-details", viewQueries: [{ propertyName: "detailsForm", first: true, predicate: KitUsersSettingsDetailsFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-user-settings-details\">\n <kit-entity-section-container>\n <ng-container title>\n <div class=\"kit-user-settings-details-header\">\n <span>{{ \"kit.usersSettings.details.title\" | translate }}</span>\n <div class=\"kit-user-settings-details-actions\">\n <kit-button [label]=\"'kit.usersSettings.details.changePassword' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"userDetails().loading\"\n (clicked)=\"isPasswordDialogOpened.set(true)\" />\n <kit-button [label]=\"'kit.usersSettings.details.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isFormDisabled || userDetails().loading\"\n (clicked)=\"onSave()\" />\n </div>\n </div>\n </ng-container>\n </kit-entity-section-container>\n <kit-users-settings-details-form />\n\n <kit-users-settings-password-dialog [(opened)]=\"isPasswordDialogOpened\" />\n</div>", styles: [".kit-user-settings-details-header{display:flex;align-items:center;justify-content:space-between}.kit-user-settings-details-actions{display:flex;gap:8px}.kit-user-settings-details ::ng-deep .kit-entity-section-container{padding-bottom:10px;gap:0;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: KitEntitySectionContainerComponent, selector: "kit-entity-section-container" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsPasswordDialogComponent, selector: "kit-users-settings-password-dialog", inputs: ["opened"], outputs: ["openedChange"] }, { kind: "component", type: KitUsersSettingsDetailsFormComponent, selector: "kit-users-settings-details-form", inputs: ["isCreatingNewUser"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8179
+ }
8180
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsComponent, decorators: [{
8181
+ type: Component,
8182
+ args: [{ selector: 'kit-users-settings-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
8183
+ KitEntitySectionContainerComponent,
8184
+ KitButtonComponent,
8185
+ TranslatePipe,
8186
+ KitUsersSettingsPasswordDialogComponent,
8187
+ KitUsersSettingsDetailsFormComponent,
8188
+ ], template: "<div class=\"kit-user-settings-details\">\n <kit-entity-section-container>\n <ng-container title>\n <div class=\"kit-user-settings-details-header\">\n <span>{{ \"kit.usersSettings.details.title\" | translate }}</span>\n <div class=\"kit-user-settings-details-actions\">\n <kit-button [label]=\"'kit.usersSettings.details.changePassword' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"userDetails().loading\"\n (clicked)=\"isPasswordDialogOpened.set(true)\" />\n <kit-button [label]=\"'kit.usersSettings.details.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isFormDisabled || userDetails().loading\"\n (clicked)=\"onSave()\" />\n </div>\n </div>\n </ng-container>\n </kit-entity-section-container>\n <kit-users-settings-details-form />\n\n <kit-users-settings-password-dialog [(opened)]=\"isPasswordDialogOpened\" />\n</div>", styles: [".kit-user-settings-details-header{display:flex;align-items:center;justify-content:space-between}.kit-user-settings-details-actions{display:flex;gap:8px}.kit-user-settings-details ::ng-deep .kit-entity-section-container{padding-bottom:10px;gap:0;margin-bottom:15px}\n"] }]
8189
+ }], propDecorators: { detailsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsDetailsFormComponent), { isSignal: true }] }] } });
8190
+
8191
+ class KitUsersSettingsComponent {
8192
+ constructor() {
8193
+ this.destroyRef = inject(DestroyRef);
8194
+ this.store = inject(Store);
8195
+ this.kitDialogService = inject(KitDialogService);
8196
+ this.translateService = inject(TranslateService);
8197
+ this.viewContainerRef = inject(ViewContainerRef);
8198
+ this.cardDetailsComponent = viewChild.required(KitCardDetailsComponent);
8199
+ this.deleteDialogActionsTemplate = viewChild.required('deleteDialogActions', { read: TemplateRef });
8200
+ this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
8201
+ this.currentUserId = this.store.selectSignal((state) => state.user?.data?.id?.toString() ?? null);
8202
+ this.isCreatingNewUser = signal(false, ...(ngDevMode ? [{ debugName: "isCreatingNewUser" }] : /* istanbul ignore next */ []));
8203
+ this.pendingDeleteUser = signal(null, ...(ngDevMode ? [{ debugName: "pendingDeleteUser" }] : /* istanbul ignore next */ []));
8204
+ this.cardData$ = this.store.select(KIT_USERS_SETTINGS_STATE_TOKEN).pipe(map(state => kitBuildGridDataResults(state?.users?.data ?? [], state?.users?.loading ?? false, state?.users?.total ?? 0)));
8205
+ this.pageSize = 10;
8206
+ this.kitSvgIcon = KitSvgIcon;
8207
+ this.kitButtonIconPosition = KitButtonIconPosition;
8208
+ this.kitButtonKind = KitButtonKind;
8209
+ this.kitButtonType = KitButtonType;
8210
+ this.kitSvgIconType = KitSvgIconType;
8211
+ }
8212
+ onDataStateChanged({ skip, take, search, filters }) {
8213
+ this.store.dispatch(new KitFetchUsersSettings({
8214
+ skip,
8215
+ take,
8216
+ filter: this.buildFilter(search, filters),
8217
+ }));
8218
+ }
8219
+ onCardSelected(card) {
8220
+ this.store.dispatch(new KitFetchUsersSettingsDetails(card.id));
8221
+ }
8222
+ isDeleteDisabled(userId) {
8223
+ return this.currentUserId() === userId.toString();
8224
+ }
8225
+ getUserDisplayName(user) {
8226
+ const fullName = [
8227
+ user.firstName,
8228
+ user.lastName,
8229
+ ].filter(Boolean).join(' ').trim();
8230
+ return fullName || user.userName;
8231
+ }
8232
+ onDeleteUser(user) {
8233
+ this.pendingDeleteUser.set(user);
8234
+ this.kitDialogService.openDialog({
8235
+ title: this.translateService.instant('kit.usersSettings.deleteDialog.title'),
8236
+ content: this.translateService.instant('kit.usersSettings.deleteDialog.content', {
8237
+ name: this.getUserDisplayName(user),
8238
+ }),
8239
+ actions: this.deleteDialogActionsTemplate(),
8240
+ appendTo: this.viewContainerRef,
8241
+ });
8242
+ }
8243
+ closeDeleteDialog() {
8244
+ this.kitDialogService.closeDialog();
8245
+ this.pendingDeleteUser.set(null);
8246
+ }
8247
+ confirmDeleteUser() {
8248
+ const user = this.pendingDeleteUser();
8249
+ if (!user) {
8250
+ return;
8251
+ }
8252
+ this.store.dispatch(new KitDeleteUsersSettingsUser(user.id)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
8253
+ this.cardDetailsComponent().deleteCard(user.id);
8254
+ this.closeDeleteDialog();
8255
+ });
8256
+ }
8257
+ buildFilter(search, filters) {
8258
+ if (!search) {
8259
+ return filters;
8260
+ }
8261
+ return {
8262
+ logic: KitFilterLogic.AND,
8263
+ filters: [
8264
+ { field: 'name', operator: 'contains', value: search },
8265
+ ...(filters?.filters ?? []),
8266
+ ],
8267
+ };
8268
+ }
8269
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8270
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitUsersSettingsComponent, isStandalone: true, selector: "kit-users-settings", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "cardDetailsComponent", first: true, predicate: KitCardDetailsComponent, descendants: true, isSignal: true }, { propertyName: "deleteDialogActionsTemplate", first: true, predicate: ["deleteDialogActions"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-users-settings\">\n <kit-card-details [title]=\"title()\"\n [pageSize]=\"pageSize\"\n [cardData$]=\"cardData$\"\n (cardClicked)=\"onCardSelected($event)\"\n (dataStateChanged)=\"onDataStateChanged($event)\">\n <ng-template #headerActions>\n <kit-button [label]=\"'kit.usersSettings.details.createNewUser' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"isCreatingNewUser.set(true)\" />\n </ng-template>\n\n <ng-template #cardElement\n let-user>\n <div class=\"kit-users-settings-card-row\">\n <kit-truncate-text class=\"kit-users-settings-card\">{{ getUserDisplayName(user) }}</kit-truncate-text>\n <kit-button [icon]=\"kitSvgIcon.TRASH\"\n [kind]=\"kitButtonKind.SMALL\"\n [type]=\"kitButtonType.TEXT\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [disabled]=\"isDeleteDisabled(user.id)\"\n (clicked)=\"onDeleteUser(user)\" />\n </div>\n </ng-template>\n\n <ng-template #details\n let-activeId>\n <kit-users-settings-details />\n </ng-template>\n </kit-card-details>\n\n <kit-users-settings-create-dialog [(opened)]=\"isCreatingNewUser\" />\n\n <ng-template #deleteDialogActions>\n <div class=\"kit-users-settings-delete-dialog-actions\">\n <kit-button [label]=\"'kit.usersSettings.deleteDialog.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"closeDeleteDialog()\" />\n <kit-button [label]=\"'kit.usersSettings.deleteDialog.confirm' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"confirmDeleteUser()\" />\n </div>\n </ng-template>\n</div>\n", styles: [".kit-users-settings-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.kit-users-settings-card{margin:10px 0;min-width:0}::ng-deep .kit-users-settings-delete-dialog-actions{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: KitCardDetailsComponent, selector: "kit-card-details", inputs: ["cardData$", "pageSize", "title", "kitCardSkeletonConfig"], outputs: ["dataStateChanged", "cardClicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "component", type: KitUsersSettingsDetailsComponent, selector: "kit-users-settings-details" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitUsersSettingsCreateDialogComponent, selector: "kit-users-settings-create-dialog", inputs: ["opened"], outputs: ["openedChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8271
+ }
8272
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, decorators: [{
8273
+ type: Component,
8274
+ args: [{ selector: 'kit-users-settings', imports: [
8275
+ KitCardDetailsComponent,
8276
+ KitTruncateTextComponent,
8277
+ KitUsersSettingsDetailsComponent,
8278
+ KitButtonComponent,
8279
+ TranslatePipe,
8280
+ KitUsersSettingsCreateDialogComponent,
8281
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-users-settings\">\n <kit-card-details [title]=\"title()\"\n [pageSize]=\"pageSize\"\n [cardData$]=\"cardData$\"\n (cardClicked)=\"onCardSelected($event)\"\n (dataStateChanged)=\"onDataStateChanged($event)\">\n <ng-template #headerActions>\n <kit-button [label]=\"'kit.usersSettings.details.createNewUser' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"isCreatingNewUser.set(true)\" />\n </ng-template>\n\n <ng-template #cardElement\n let-user>\n <div class=\"kit-users-settings-card-row\">\n <kit-truncate-text class=\"kit-users-settings-card\">{{ getUserDisplayName(user) }}</kit-truncate-text>\n <kit-button [icon]=\"kitSvgIcon.TRASH\"\n [kind]=\"kitButtonKind.SMALL\"\n [type]=\"kitButtonType.TEXT\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [disabled]=\"isDeleteDisabled(user.id)\"\n (clicked)=\"onDeleteUser(user)\" />\n </div>\n </ng-template>\n\n <ng-template #details\n let-activeId>\n <kit-users-settings-details />\n </ng-template>\n </kit-card-details>\n\n <kit-users-settings-create-dialog [(opened)]=\"isCreatingNewUser\" />\n\n <ng-template #deleteDialogActions>\n <div class=\"kit-users-settings-delete-dialog-actions\">\n <kit-button [label]=\"'kit.usersSettings.deleteDialog.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"closeDeleteDialog()\" />\n <kit-button [label]=\"'kit.usersSettings.deleteDialog.confirm' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"confirmDeleteUser()\" />\n </div>\n </ng-template>\n</div>\n", styles: [".kit-users-settings-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.kit-users-settings-card{margin:10px 0;min-width:0}::ng-deep .kit-users-settings-delete-dialog-actions{display:flex;justify-content:space-between}\n"] }]
8282
+ }], propDecorators: { cardDetailsComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitCardDetailsComponent), { isSignal: true }] }], deleteDialogActionsTemplate: [{ type: i0.ViewChild, args: ['deleteDialogActions', { ...{ read: TemplateRef }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }] } });
8283
+
8284
+ var KitThemes;
8285
+ (function (KitThemes) {
8286
+ KitThemes["Light"] = "light";
8287
+ KitThemes["Dark"] = "dark";
8288
+ })(KitThemes || (KitThemes = {}));
8289
+
8290
+ class SetSelectedMobileMenuItem extends KitAbstractPayloadAction {
8291
+ static { this.type = '[KitMobileMenu] SetSelectedMobileMenuItem'; }
8292
+ }
8293
+
8294
+ const KIT_MOBILE_MENU_STATE_TOKEN = new StateToken('kitMobileMenu');
8295
+ let KitMobileMenuState = class KitMobileMenuState {
8296
+ static selectedItem(state) {
8297
+ return state?.selectedItem || null;
8298
+ }
8299
+ setSelectedMobileMenuItem(ctx, action) {
8300
+ ctx.patchState({ selectedItem: action.payload });
8301
+ }
8302
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
8303
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState }); }
8304
+ };
8305
+ __decorate([
8306
+ Action(SetSelectedMobileMenuItem)
8307
+ ], KitMobileMenuState.prototype, "setSelectedMobileMenuItem", null);
8308
+ __decorate([
8309
+ Selector([KIT_MOBILE_MENU_STATE_TOKEN])
8310
+ ], KitMobileMenuState, "selectedItem", null);
8311
+ KitMobileMenuState = __decorate([
8312
+ State({
8313
+ name: KIT_MOBILE_MENU_STATE_TOKEN,
8314
+ defaults: {
8315
+ selectedItem: null,
8316
+ },
8317
+ })
8318
+ ], KitMobileMenuState);
8319
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, decorators: [{
8320
+ type: Injectable
8321
+ }], propDecorators: { setSelectedMobileMenuItem: [] } });
8322
+
8323
+ class KitMobileHeaderComponent {
8324
+ constructor() {
8325
+ this.store = inject(Store);
8326
+ this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
8327
+ this.kitSvgIcon = KitSvgIcon;
8328
+ this.kitButtonType = KitButtonType;
8329
+ this.kitSvgIconType = KitSvgIconType;
8330
+ this.themes = KitThemes;
8331
+ this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
8332
+ }
8333
+ setSelectedItem(item) {
8334
+ this.store.dispatch(new SetSelectedMobileMenuItem(item));
8335
+ }
8336
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8337
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMobileHeaderComponent, isStandalone: true, selector: "kit-mobile-header", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"header\"\n [ngClass]=\"theme()\">\n @if (selectedItem()) {\n <kit-svg-icon class=\"header-icon\"\n [routerLink]=\"['/']\"\n [icon]=\"kitSvgIcon.MOBILE_HOME\"\n (click)=\"setSelectedItem(null)\" />\n\n <div class=\"header-selected-category\">\n <kit-svg-icon class=\"header-icon category\"\n [icon]=\"selectedItem()?.icon\" \n [iconClass]=\"kitSvgIconType.STROKE\" />\n <p class=\"header-selected-category-title\">{{ selectedItem()?.title }}</p>\n </div>\n } @else {\n <div class=\"header-logo\"\n [routerLink]=\"['/']\"\n (click)=\"selectedItem() && setSelectedItem(null)\">\n @if (theme() === themes.Light) {\n <img class=\"header-logo\" \n src=\"assets/config/logo.svg\" alt=\"Logo\"/>\n } @else {\n <img class=\"header-logo\" \n src=\"assets/config/logo-dark-theme.svg\" alt=\"Logo\"/>\n }\n </div>\n }\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:0 25px;height:100%;border-bottom:1px solid var(--ui-kit-color-grey-11)}.header-selected-category{display:flex;align-items:center;gap:15px}.header-selected-category-title{color:var(--ui-kit-color-navy);flex:16px;line-height:24px}.header-icon{width:38px;height:38px;cursor:pointer}.header-icon.category{fill:none;cursor:auto}.header-logo{margin:auto;width:212px;height:38px}.header.dark{background-color:var(--ui-kit-color-navy);border-bottom-color:var(--ui-kit-color-grey-14)}.header.dark .header-selected-category-title{color:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8338
+ }
8339
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileHeaderComponent, decorators: [{
8340
+ type: Component,
8341
+ args: [{ selector: 'kit-mobile-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
8342
+ KitSvgIconComponent,
8343
+ NgClass,
8344
+ RouterLink,
8345
+ ], template: "<div class=\"header\"\n [ngClass]=\"theme()\">\n @if (selectedItem()) {\n <kit-svg-icon class=\"header-icon\"\n [routerLink]=\"['/']\"\n [icon]=\"kitSvgIcon.MOBILE_HOME\"\n (click)=\"setSelectedItem(null)\" />\n\n <div class=\"header-selected-category\">\n <kit-svg-icon class=\"header-icon category\"\n [icon]=\"selectedItem()?.icon\" \n [iconClass]=\"kitSvgIconType.STROKE\" />\n <p class=\"header-selected-category-title\">{{ selectedItem()?.title }}</p>\n </div>\n } @else {\n <div class=\"header-logo\"\n [routerLink]=\"['/']\"\n (click)=\"selectedItem() && setSelectedItem(null)\">\n @if (theme() === themes.Light) {\n <img class=\"header-logo\" \n src=\"assets/config/logo.svg\" alt=\"Logo\"/>\n } @else {\n <img class=\"header-logo\" \n src=\"assets/config/logo-dark-theme.svg\" alt=\"Logo\"/>\n }\n </div>\n }\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:0 25px;height:100%;border-bottom:1px solid var(--ui-kit-color-grey-11)}.header-selected-category{display:flex;align-items:center;gap:15px}.header-selected-category-title{color:var(--ui-kit-color-navy);flex:16px;line-height:24px}.header-icon{width:38px;height:38px;cursor:pointer}.header-icon.category{fill:none;cursor:auto}.header-logo{margin:auto;width:212px;height:38px}.header.dark{background-color:var(--ui-kit-color-navy);border-bottom-color:var(--ui-kit-color-grey-14)}.header.dark .header-selected-category-title{color:var(--ui-kit-color-white)}\n"] }]
8346
+ }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
8347
+
8348
+ class KitPageLayoutComponent {
8349
+ constructor() {
8350
+ this.kitNavigationMenuService = inject(KitNavigationMenuService);
8351
+ this.deviceService = inject(DeviceDetectorService);
8352
+ this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
8353
+ this.sidebarContainer = viewChild('sidebarContainer', ...(ngDevMode ? [{ debugName: "sidebarContainer" }] : /* istanbul ignore next */ []));
8354
+ this.topBarContainer = viewChild('topBarContainer', ...(ngDevMode ? [{ debugName: "topBarContainer" }] : /* istanbul ignore next */ []));
8355
+ this.isMenuCollapsed = this.kitNavigationMenuService.getCollapsedState();
8356
+ this.hasMenuSelected = this.kitNavigationMenuService.getSelectedState();
8357
+ this.hasSidebar = signal(false, ...(ngDevMode ? [{ debugName: "hasSidebar" }] : /* istanbul ignore next */ []));
8358
+ this.hasTopBar = signal(false, ...(ngDevMode ? [{ debugName: "hasTopBar" }] : /* istanbul ignore next */ []));
8359
+ effect(() => {
8360
+ const sidebar = this.sidebarContainer()?.nativeElement;
8361
+ const topBar = this.topBarContainer()?.nativeElement;
8362
+ this.hasSidebar.set(!!sidebar?.querySelector('[sidebar]'));
8363
+ this.hasTopBar.set(!!topBar?.querySelector('[topBar]'));
8364
+ });
8365
+ }
8366
+ get isMobile() {
8367
+ return this.deviceService.isMobile();
8368
+ }
8369
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8370
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitPageLayoutComponent, isStandalone: true, selector: "kit-page-layout", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidebarContainer", first: true, predicate: ["sidebarContainer"], descendants: true, isSignal: true }, { propertyName: "topBarContainer", first: true, predicate: ["topBarContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"page-layout\"\n [ngClass]=\"theme()\"\n [class.mobile]=\"isMobile\"\n [class.sidebar-expanded]=\"!isMenuCollapsed() && hasMenuSelected()\"\n [class.has-sidebar]=\"hasSidebar()\"\n [class.has-top-bar]=\"hasTopBar()\">\n\n @if (!isMobile) {\n <div class=\"sidebar\" #sidebarContainer>\n <ng-content select=\"[sidebar]\" />\n </div>\n }\n\n <div class=\"main\">\n @if (isMobile) {\n <kit-mobile-header class=\"mobile-header\"\n [theme]=\"theme()\"/>\n } @else {\n <div class=\"top-bar\" #topBarContainer>\n <ng-content select=\"[topBar]\" />\n </div>\n }\n\n <div class=\"content\">\n <ng-content select=\"[content]\" />\n </div>\n </div>\n</div>\n", styles: [".page-layout{display:flex;min-height:100%}.page-layout.has-sidebar .sidebar{position:fixed;top:0;left:0;height:100%;min-width:var(--ui-kit-sidebar-collapsed-width);background:var(--ui-kit-color-navy);overflow-x:hidden;z-index:11}.page-layout.has-sidebar .main{margin-left:var(--ui-kit-sidebar-collapsed-width)}.page-layout.has-sidebar.sidebar-expanded .main{margin-left:var(--ui-kit-sidebar-expanded-width)}.page-layout .main{display:flex;flex-direction:column;flex:1;padding:0 var(--ui-kit-layout-gap);width:0;transition:.2s ease-in-out}.page-layout.has-top-bar .top-bar,.page-layout .mobile-header{position:sticky;top:0;left:0;width:100%;height:var(--ui-kit-header-height);background:var(--ui-kit-color-grey-13);z-index:10}.page-layout .content{padding:25px 0;flex:1}.page-layout .content:has(.kit-breadcrumbs){padding-top:10px}.page-layout .content:has(.iframe-wrapper){padding:0}.page-layout.mobile .mobile-header{background-color:var(--ui-kit-color-white)}.page-layout.mobile .main{padding:0}.page-layout.mobile .content{background-color:var(--ui-kit-color-grey-13);padding:var(--ui-kit-layout-gap)}.page-layout.mobile.dark .content{background-color:var(--ui-kit-color-navy)}\n"], dependencies: [{ kind: "component", type: KitMobileHeaderComponent, selector: "kit-mobile-header", inputs: ["theme"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8371
+ }
8372
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPageLayoutComponent, decorators: [{
8373
+ type: Component,
8374
+ args: [{ selector: 'kit-page-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
8375
+ KitMobileHeaderComponent,
8376
+ NgClass,
8377
+ ], template: "<div class=\"page-layout\"\n [ngClass]=\"theme()\"\n [class.mobile]=\"isMobile\"\n [class.sidebar-expanded]=\"!isMenuCollapsed() && hasMenuSelected()\"\n [class.has-sidebar]=\"hasSidebar()\"\n [class.has-top-bar]=\"hasTopBar()\">\n\n @if (!isMobile) {\n <div class=\"sidebar\" #sidebarContainer>\n <ng-content select=\"[sidebar]\" />\n </div>\n }\n\n <div class=\"main\">\n @if (isMobile) {\n <kit-mobile-header class=\"mobile-header\"\n [theme]=\"theme()\"/>\n } @else {\n <div class=\"top-bar\" #topBarContainer>\n <ng-content select=\"[topBar]\" />\n </div>\n }\n\n <div class=\"content\">\n <ng-content select=\"[content]\" />\n </div>\n </div>\n</div>\n", styles: [".page-layout{display:flex;min-height:100%}.page-layout.has-sidebar .sidebar{position:fixed;top:0;left:0;height:100%;min-width:var(--ui-kit-sidebar-collapsed-width);background:var(--ui-kit-color-navy);overflow-x:hidden;z-index:11}.page-layout.has-sidebar .main{margin-left:var(--ui-kit-sidebar-collapsed-width)}.page-layout.has-sidebar.sidebar-expanded .main{margin-left:var(--ui-kit-sidebar-expanded-width)}.page-layout .main{display:flex;flex-direction:column;flex:1;padding:0 var(--ui-kit-layout-gap);width:0;transition:.2s ease-in-out}.page-layout.has-top-bar .top-bar,.page-layout .mobile-header{position:sticky;top:0;left:0;width:100%;height:var(--ui-kit-header-height);background:var(--ui-kit-color-grey-13);z-index:10}.page-layout .content{padding:25px 0;flex:1}.page-layout .content:has(.kit-breadcrumbs){padding-top:10px}.page-layout .content:has(.iframe-wrapper){padding:0}.page-layout.mobile .mobile-header{background-color:var(--ui-kit-color-white)}.page-layout.mobile .main{padding:0}.page-layout.mobile .content{background-color:var(--ui-kit-color-grey-13);padding:var(--ui-kit-layout-gap)}.page-layout.mobile.dark .content{background-color:var(--ui-kit-color-navy)}\n"] }]
8378
+ }], ctorParameters: () => [], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], sidebarContainer: [{ type: i0.ViewChild, args: ['sidebarContainer', { isSignal: true }] }], topBarContainer: [{ type: i0.ViewChild, args: ['topBarContainer', { isSignal: true }] }] } });
8379
+
8380
+ const KIT_USER_PATH = new InjectionToken('kitUserPath');
8381
+
7011
8382
  const KIT_USER_APPLICATIONS_PATH = new InjectionToken('kitUserApplicationsPath');
7012
8383
 
7013
8384
  const kitTranslations = {
@@ -7074,6 +8445,46 @@ const kitTranslations = {
7074
8445
  searchButtonLabel: 'Search',
7075
8446
  closeButtonLabel: 'Close',
7076
8447
  },
8448
+ usersSettings: {
8449
+ details: {
8450
+ title: 'User Details',
8451
+ loginId: 'Login ID',
8452
+ firstName: 'First Name',
8453
+ lastName: 'Last Name',
8454
+ email: 'Email',
8455
+ forcePassword: 'Force Password Reset',
8456
+ mfa: 'Multi-Factor Authentication',
8457
+ save: 'Save',
8458
+ createNewUser: 'Create New User',
8459
+ changePassword: 'Change Password',
8460
+ password: 'Password',
8461
+ passwordRequired: 'Password is required',
8462
+ passwordTooWeak: 'Your password is too weak.',
8463
+ userNameInvalid: 'You have specified invalid Login ID.',
8464
+ },
8465
+ passwordDialog: {
8466
+ title: 'Change Password',
8467
+ confirm: 'Confirm',
8468
+ cancel: 'Cancel',
8469
+ newPassword: 'New Password',
8470
+ repeatNewPassword: 'Repeat New Password',
8471
+ newPasswordRequired: 'New password is required',
8472
+ repeatNewPasswordRequired: 'Please repeat the new password',
8473
+ passwordsDoNotMatch: 'Passwords do not match',
8474
+ forcePassword: 'Force Password Reset',
8475
+ },
8476
+ createDialog: {
8477
+ title: 'Create New User',
8478
+ confirm: 'Create',
8479
+ cancel: 'Cancel',
8480
+ },
8481
+ deleteDialog: {
8482
+ title: 'Delete User',
8483
+ content: 'Are you sure you want to permanently delete "{{name}}"?',
8484
+ confirm: 'Delete',
8485
+ cancel: 'Cancel',
8486
+ },
8487
+ },
7077
8488
  globalSearch: {
7078
8489
  placeholder: 'Global Search',
7079
8490
  showResults: 'Show Results',
@@ -7231,508 +8642,163 @@ const kitTranslations = {
7231
8642
  search: {
7232
8643
  placeholder: 'Поиск',
7233
8644
  searchButtonLabel: 'Поиск',
7234
- closeButtonLabel: 'Закрыть',
7235
- },
7236
- globalSearch: {
7237
- placeholder: 'Глобальный поиск',
7238
- showResults: 'Показать результаты',
7239
- noData: 'Данные не найдены',
7240
- showMore: 'Показать больше',
7241
- showLess: 'Показать меньше',
7242
- },
7243
- columns: {
7244
- columnManager: 'Менеджер колонок',
7245
- title: 'Колонки',
7246
- cancel: 'Отмена',
7247
- apply: 'Применить',
7248
- reset: 'Сбросить',
7249
- },
7250
- multiselect: {
7251
- all: 'Все',
7252
- },
7253
- grid: {
7254
- pagerItemsText: 'элементов',
7255
- view: 'Вид',
7256
- noRecords: 'Нет доступных записей.',
7257
- actions: {
7258
- archive: 'Перейти к архиву',
7259
- refresh: 'Обновить',
7260
- },
7261
- },
7262
- routePath: {
7263
- tbc: 'Уточняется',
7264
- by: 'от',
7265
- },
7266
- userSettings: {
7267
- title: 'Настройки пользователя',
7268
- },
7269
- common: {
7270
- noData: 'Нет доступных данных',
7271
- loading: 'Загрузка...',
7272
- error: 'Произошла ошибка при загрузке данных',
7273
- loadMore: 'Загрузить еще',
7274
- },
7275
- notFound: {
7276
- title: '404',
7277
- subtitle: 'Не найдено',
7278
- description: 'Страница, которую вы ищете, не найдена.<br><br>' +
7279
- 'Веб-страница, к которой вы пытаетесь получить доступ, могла быть перемещена, удалена или не существует.',
7280
- },
7281
- forbidden: {
7282
- title: '403',
7283
- subtitle: 'Доступ запрещен',
7284
- description: 'У вас нет прав для просмотра этой страницы с текущими учетными данными.<br><br>' +
7285
- 'Веб-страница, которую вы пытаетесь просмотреть, имеет ограниченный доступ.<br>' +
7286
- 'Попробуйте войти под другим пользователем или обратитесь в службу поддержки/к администратору за помощью.',
7287
- logout: 'Выйти',
7288
- },
7289
- formControlError: {
7290
- required: 'Обязательно для заполнения',
7291
- invalidLength: 'Значение должно быть меньше, чем {{ requiredLength }} символов',
7292
- invalidEmailFormat: 'Невалидный имэйл',
7293
- },
7294
- liveUpdates: {
7295
- pause: 'Остановить обновление',
7296
- resume: 'Включить обновление',
7297
- },
7298
- scheduler: {
7299
- week: 'Неделя',
7300
- month: 'Месяц',
7301
- },
7302
- apiTokenMaintenance: {
7303
- title: 'API Токены',
7304
- details: 'Информация о Api Токене',
7305
- export: 'Экспорт',
7306
- createNew: 'Создать',
7307
- delete: 'Удалить',
7308
- cancel: 'Отмена',
7309
- save: 'Сохранить',
7310
- createdDate: 'Дата создания',
7311
- enabled: 'Активен',
7312
- name: 'Название',
7313
- token: 'Токен',
7314
- on: 'Вкл',
7315
- off: 'Выкл',
7316
- pleaseCopyToken: 'Пожалуйста, скопируйте токен ниже. Вы не сможете его увидеть позже.',
7317
- copy: 'Намите, чтобы скопировать в буфер обмена.',
7318
- copiedToClipboard: 'Скопировано в буфер обмена',
7319
- failedToCopy: 'Не удалось скопировать',
7320
- deleteConfirmation: 'Вы уверены, что хотите удалить',
8645
+ closeButtonLabel: 'Закрыть',
7321
8646
  },
7322
- entitySectionEditable: {
7323
- add: 'Добавить',
7324
- edit: 'Редактировать',
7325
- save: 'Сохранить',
8647
+ usersSettings: {
8648
+ details: {
8649
+ title: 'Детали пользователя',
8650
+ loginId: 'Логин',
8651
+ firstName: 'Имя',
8652
+ lastName: 'Фамилия',
8653
+ email: 'Email',
8654
+ forcePassword: 'Принудительно изменить пароль',
8655
+ mfa: 'Многофакторная аутентификация',
8656
+ save: 'Сохранить',
8657
+ createNewUser: 'Создать нового пользователя',
8658
+ changePassword: 'Изменить пароль',
8659
+ password: 'Пароль',
8660
+ passwordRequired: 'Пароль обязателен',
8661
+ passwordTooWeak: 'Пароль слишком слабый.',
8662
+ userNameInvalid: 'Указан некорректный Логин.',
8663
+ },
8664
+ passwordDialog: {
8665
+ title: 'Изменить пароль',
8666
+ confirm: 'Подтвердить',
8667
+ cancel: 'Отмена',
8668
+ newPassword: 'Новый пароль',
8669
+ repeatNewPassword: 'Повторите новый пароль',
8670
+ newPasswordRequired: 'Новый пароль обязателен',
8671
+ repeatNewPasswordRequired: 'Пожалуйста, повторите новый пароль',
8672
+ passwordsDoNotMatch: 'Пароли не совпадают',
8673
+ forcePassword: 'Принудительно изменить пароль',
8674
+ },
8675
+ createDialog: {
8676
+ title: 'Создать нового пользователя',
8677
+ confirm: 'Создать',
8678
+ cancel: 'Отмена',
8679
+ },
8680
+ deleteDialog: {
8681
+ title: 'Удалить пользователя',
8682
+ content: 'Вы уверены, что хотите удалить пользователя "{{name}}" без возможности восстановления?',
8683
+ confirm: 'Удалить',
8684
+ cancel: 'Отмена',
8685
+ },
8686
+ },
8687
+ globalSearch: {
8688
+ placeholder: 'Глобальный поиск',
8689
+ showResults: 'Показать результаты',
8690
+ noData: 'Данные не найдены',
8691
+ showMore: 'Показать больше',
8692
+ showLess: 'Показать меньше',
8693
+ },
8694
+ columns: {
8695
+ columnManager: 'Менеджер колонок',
8696
+ title: 'Колонки',
7326
8697
  cancel: 'Отмена',
7327
- delete: 'Удалить',
8698
+ apply: 'Применить',
8699
+ reset: 'Сбросить',
7328
8700
  },
7329
- },
7330
- },
7331
- };
7332
-
7333
- class KitTranslateService {
7334
- constructor() {
7335
- this.translateService = inject(TranslateService);
7336
- }
7337
- registerTranslations() {
7338
- Object.keys(kitTranslations).forEach(lang => {
7339
- this.translateService.setTranslation(lang, kitTranslations[lang], true);
7340
- });
7341
- }
7342
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7343
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, providedIn: 'root' }); }
7344
- }
7345
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, decorators: [{
7346
- type: Injectable,
7347
- args: [{
7348
- providedIn: 'root',
7349
- }]
7350
- }] });
7351
-
7352
- class SetGridSkip extends KitAbstractPayloadAction {
7353
- static { this.type = '[Grid] SetSkip'; }
7354
- }
7355
- class SetGridTake extends KitAbstractPayloadAction {
7356
- static { this.type = '[Grid] SetTake'; }
7357
- }
7358
- class SetGridSearch extends KitAbstractPayloadAction {
7359
- static { this.type = '[Grid] SetSearch'; }
7360
- }
7361
- class RemoveGridSearch {
7362
- static { this.type = '[Grid] RemoveSearch'; }
7363
- }
7364
- class SetGridSort extends KitAbstractPayloadAction {
7365
- static { this.type = '[Grid] SetSort'; }
7366
- }
7367
- class SetGridColumns extends KitAbstractPayloadAction {
7368
- static { this.type = '[Grid] SetColumns'; }
7369
- }
7370
- class AddGridFilter extends KitAbstractPayloadAction {
7371
- static { this.type = '[Grid] AddFilter'; }
7372
- }
7373
- class RemoveGridFilter extends KitAbstractPayloadAction {
7374
- static { this.type = '[Grid] RemoveFilter'; }
7375
- }
7376
- class UpdateGridFilter extends KitAbstractPayloadAction {
7377
- static { this.type = '[Grid] UpdateFilter'; }
7378
- }
7379
- class SetGridFilters extends KitAbstractPayloadAction {
7380
- static { this.type = '[Grid] SetFilters'; }
7381
- }
7382
- class SetGridArchive extends KitAbstractPayloadAction {
7383
- static { this.type = '[Grid] SetArchive'; }
7384
- }
7385
-
7386
- const KIT_GRID_STATE_TOKEN = new StateToken('grid');
7387
- let KitGridState = class KitGridState {
7388
- setGridSkip(ctx, action) {
7389
- ctx.setState(patch({
7390
- skip: action.payload,
7391
- }));
7392
- }
7393
- setGridTake(ctx, action) {
7394
- ctx.setState(patch({
7395
- take: action.payload,
7396
- }));
7397
- }
7398
- setGridSearch(ctx, action) {
7399
- ctx.setState(patch({
7400
- search: action.payload,
7401
- }));
7402
- }
7403
- removeGridSearch(ctx) {
7404
- const { search, ...rest } = ctx.getState();
7405
- ctx.setState(rest);
7406
- }
7407
- setGridSort(ctx, action) {
7408
- ctx.setState(patch({
7409
- sort: action.payload,
7410
- }));
7411
- }
7412
- setGridColumns(ctx, action) {
7413
- ctx.setState(patch({
7414
- columns: action.payload,
7415
- }));
7416
- }
7417
- addGridFilter(ctx, action) {
7418
- const items = ctx.getState().filter;
7419
- return of(items).pipe(tap(() => ctx.setState(patch({
7420
- filter: append([action.payload]),
7421
- }))));
7422
- }
7423
- removeGridFilter(ctx, action) {
7424
- const items = ctx.getState().filter;
7425
- return of(items).pipe(tap(() => ctx.setState(patch({
7426
- filter: removeItem(item => item.field === action.payload),
7427
- }))));
7428
- }
7429
- updateGridFilter(ctx, action) {
7430
- const items = ctx.getState().filter;
7431
- return of(items).pipe(tap(() => ctx.setState(patch({
7432
- filter: updateItem(item => item.field === action.payload.field, action.payload),
7433
- }))));
7434
- }
7435
- setGridFilters(ctx, action) {
7436
- return of(action.payload).pipe(tap(filters => ctx.setState(patch({
7437
- filter: filters,
7438
- }))));
7439
- }
7440
- setGridArchive(ctx, action) {
7441
- ctx.setState(patch({
7442
- archive: action.payload,
7443
- }));
7444
- }
7445
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7446
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState }); }
7447
- };
7448
- __decorate([
7449
- Action(SetGridSkip)
7450
- ], KitGridState.prototype, "setGridSkip", null);
7451
- __decorate([
7452
- Action(SetGridTake)
7453
- ], KitGridState.prototype, "setGridTake", null);
7454
- __decorate([
7455
- Action(SetGridSearch)
7456
- ], KitGridState.prototype, "setGridSearch", null);
7457
- __decorate([
7458
- Action(RemoveGridSearch)
7459
- ], KitGridState.prototype, "removeGridSearch", null);
7460
- __decorate([
7461
- Action(SetGridSort)
7462
- ], KitGridState.prototype, "setGridSort", null);
7463
- __decorate([
7464
- Action(SetGridColumns)
7465
- ], KitGridState.prototype, "setGridColumns", null);
7466
- __decorate([
7467
- Action(AddGridFilter)
7468
- ], KitGridState.prototype, "addGridFilter", null);
7469
- __decorate([
7470
- Action(RemoveGridFilter)
7471
- ], KitGridState.prototype, "removeGridFilter", null);
7472
- __decorate([
7473
- Action(UpdateGridFilter)
7474
- ], KitGridState.prototype, "updateGridFilter", null);
7475
- __decorate([
7476
- Action(SetGridFilters)
7477
- ], KitGridState.prototype, "setGridFilters", null);
7478
- __decorate([
7479
- Action(SetGridArchive)
7480
- ], KitGridState.prototype, "setGridArchive", null);
7481
- KitGridState = __decorate([
7482
- State({
7483
- name: KIT_GRID_STATE_TOKEN,
7484
- defaults: {
7485
- skip: 0,
7486
- take: 10,
7487
- sort: [],
7488
- filter: [],
7489
- columns: [],
7490
- },
7491
- })
7492
- ], KitGridState);
7493
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, decorators: [{
7494
- type: Injectable
7495
- }], propDecorators: { setGridSkip: [], setGridTake: [], setGridSearch: [], removeGridSearch: [], setGridSort: [], setGridColumns: [], addGridFilter: [], removeGridFilter: [], updateGridFilter: [], setGridFilters: [], setGridArchive: [] } });
7496
-
7497
- var KitFilterType;
7498
- (function (KitFilterType) {
7499
- KitFilterType["CHECKBOX"] = "checkbox";
7500
- KitFilterType["RADIO"] = "radio";
7501
- KitFilterType["DATE"] = "date";
7502
- KitFilterType["TEXT"] = "text";
7503
- KitFilterType["NUMERIC"] = "numeric";
7504
- KitFilterType["NULL"] = "null";
7505
- KitFilterType["GUID"] = "guid";
7506
- KitFilterType["CUSTOM_INPUT"] = "customInput";
7507
- })(KitFilterType || (KitFilterType = {}));
7508
- var KitFilterDateRange;
7509
- (function (KitFilterDateRange) {
7510
- KitFilterDateRange["TODAY"] = "today";
7511
- KitFilterDateRange["LAST_24_HOURS"] = "last24Hours";
7512
- KitFilterDateRange["LAST_THREE_DAYS"] = "lastThreeDays";
7513
- KitFilterDateRange["LAST_WEEK"] = "lastWeek";
7514
- KitFilterDateRange["LAST_MONTH"] = "lastMonth";
7515
- KitFilterDateRange["CUSTOM_RANGE"] = "customRange";
7516
- })(KitFilterDateRange || (KitFilterDateRange = {}));
7517
-
7518
- const textFilterOperators = [
7519
- KitFilterOperator.CONTAINS,
7520
- KitFilterOperator.EQ,
7521
- KitFilterOperator.IS_NOT_NULL,
7522
- KitFilterOperator.IS_NULL,
7523
- KitFilterOperator.NEQ,
7524
- KitFilterOperator.STARTS_WITH,
7525
- KitFilterOperator.ENDS_WITH,
7526
- KitFilterOperator.DOES_NOT_CONTAIN,
7527
- ];
7528
- const numericFilterOperators = [
7529
- KitFilterOperator.EQ,
7530
- KitFilterOperator.NEQ,
7531
- KitFilterOperator.GTE,
7532
- KitFilterOperator.GT,
7533
- KitFilterOperator.LTE,
7534
- KitFilterOperator.LT,
7535
- KitFilterOperator.IS_NULL,
7536
- KitFilterOperator.IS_NOT_NULL,
7537
- ];
7538
- const noValueRequiredFilterOperators = [
7539
- KitFilterOperator.IS_NOT_NULL,
7540
- KitFilterOperator.IS_NULL,
7541
- ];
7542
-
7543
- const convertFilterStringDate = (filters, columns, userTimeZone) => filters.map(filter => {
7544
- if (filter.type == KitFilterType.DATE && filter.value) {
7545
- const column = columns?.find(col => col.field === filter.field);
7546
- const timeZoneOffset = getTimeZoneOffset(userTimeZone, column);
7547
- const filters = filter.value.dateRange
7548
- ? getValueFiltersByRange(filter.value.dateRange, timeZoneOffset, filter.field, column?.customRangeHandler)
7549
- : getValueFilters(filter.value);
7550
- return {
7551
- ...filter,
7552
- value: {
7553
- ...filter.value,
7554
- filters,
8701
+ multiselect: {
8702
+ all: 'Все',
8703
+ },
8704
+ grid: {
8705
+ pagerItemsText: 'элементов',
8706
+ view: 'Вид',
8707
+ noRecords: 'Нет доступных записей.',
8708
+ actions: {
8709
+ archive: 'Перейти к архиву',
8710
+ refresh: 'Обновить',
8711
+ },
8712
+ },
8713
+ routePath: {
8714
+ tbc: 'Уточняется',
8715
+ by: 'от',
8716
+ },
8717
+ userSettings: {
8718
+ title: 'Настройки пользователя',
8719
+ },
8720
+ common: {
8721
+ noData: 'Нет доступных данных',
8722
+ loading: 'Загрузка...',
8723
+ error: 'Произошла ошибка при загрузке данных',
8724
+ loadMore: 'Загрузить еще',
8725
+ },
8726
+ notFound: {
8727
+ title: '404',
8728
+ subtitle: 'Не найдено',
8729
+ description: 'Страница, которую вы ищете, не найдена.<br><br>' +
8730
+ 'Веб-страница, к которой вы пытаетесь получить доступ, могла быть перемещена, удалена или не существует.',
8731
+ },
8732
+ forbidden: {
8733
+ title: '403',
8734
+ subtitle: 'Доступ запрещен',
8735
+ description: 'У вас нет прав для просмотра этой страницы с текущими учетными данными.<br><br>' +
8736
+ 'Веб-страница, которую вы пытаетесь просмотреть, имеет ограниченный доступ.<br>' +
8737
+ 'Попробуйте войти под другим пользователем или обратитесь в службу поддержки/к администратору за помощью.',
8738
+ logout: 'Выйти',
8739
+ },
8740
+ formControlError: {
8741
+ required: 'Обязательно для заполнения',
8742
+ invalidLength: 'Значение должно быть меньше, чем {{ requiredLength }} символов',
8743
+ invalidEmailFormat: 'Невалидный имэйл',
8744
+ },
8745
+ liveUpdates: {
8746
+ pause: 'Остановить обновление',
8747
+ resume: 'Включить обновление',
8748
+ },
8749
+ scheduler: {
8750
+ week: 'Неделя',
8751
+ month: 'Месяц',
8752
+ },
8753
+ apiTokenMaintenance: {
8754
+ title: 'API Токены',
8755
+ details: 'Информация о Api Токене',
8756
+ export: 'Экспорт',
8757
+ createNew: 'Создать',
8758
+ delete: 'Удалить',
8759
+ cancel: 'Отмена',
8760
+ save: 'Сохранить',
8761
+ createdDate: 'Дата создания',
8762
+ enabled: 'Активен',
8763
+ name: 'Название',
8764
+ token: 'Токен',
8765
+ on: 'Вкл',
8766
+ off: 'Выкл',
8767
+ pleaseCopyToken: 'Пожалуйста, скопируйте токен ниже. Вы не сможете его увидеть позже.',
8768
+ copy: 'Намите, чтобы скопировать в буфер обмена.',
8769
+ copiedToClipboard: 'Скопировано в буфер обмена',
8770
+ failedToCopy: 'Не удалось скопировать',
8771
+ deleteConfirmation: 'Вы уверены, что хотите удалить',
8772
+ },
8773
+ entitySectionEditable: {
8774
+ add: 'Добавить',
8775
+ edit: 'Редактировать',
8776
+ save: 'Сохранить',
8777
+ cancel: 'Отмена',
8778
+ delete: 'Удалить',
7555
8779
  },
7556
- };
7557
- }
7558
- return filter;
7559
- });
7560
- const removeReadonlyPropertyFromFilters = (filters) => filters.map(({ readonly, ...item }) => item);
7561
- const kitBuildFilterListOptions = (enumObject) => {
7562
- return Object.values(enumObject).map(item => ({
7563
- title: item,
7564
- value: item,
7565
- checked: false,
7566
- }));
7567
- };
7568
- const kitBuildFilterBooleanOptions = (trueLabelKey, falseLabelKey) => {
7569
- return [
7570
- {
7571
- title: trueLabelKey,
7572
- value: true,
7573
- checked: false,
7574
- },
7575
- {
7576
- title: falseLabelKey,
7577
- value: false,
7578
- checked: false,
7579
- },
7580
- ];
7581
- };
7582
- const getTimeZoneOffset = (userTimeZone, column) => {
7583
- let timeZoneOffset = 'UTC';
7584
- if (column?.type === 'dateZone' || column?.type === 'dateTimeZone') {
7585
- timeZoneOffset = userTimeZone;
7586
- }
7587
- return timeZoneOffset;
7588
- };
7589
- const removeFilterPrefix = (value) => value.split('$filter=')[1];
7590
- const filterEmptyValues = (filters) => ({
7591
- logic: filters?.logic ?? KitFilterLogic.AND,
7592
- filters: filters?.filters.filter(item => noValueRequiredFilterOperators.includes(item.operator) || (item.value !== null && item.value !== undefined)) ?? [],
7593
- });
7594
- const normalizeGuidFilter = (filter) => {
7595
- const guidFormat = /'((\{)?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(\})?)'/g;
7596
- return filter.replace(guidFormat, '$1');
7597
- };
7598
- const getDatesByRange = (range, timezoneOffset = 'UTC', dateRangeHandler) => {
7599
- const now = new Date();
7600
- let endDate = new Date(now.setHours(0, 0, 0, 0));
7601
- let startDate = new Date();
7602
- switch (range) {
7603
- case KitFilterDateRange.LAST_24_HOURS:
7604
- endDate = new Date(now);
7605
- startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000);
7606
- return [
7607
- kitNormalizeDateToUtc(startDate, timezoneOffset),
7608
- kitNormalizeDateToUtc(endDate, timezoneOffset),
7609
- ];
7610
- case KitFilterDateRange.LAST_THREE_DAYS:
7611
- startDate.setDate(now.getDate() - 3);
7612
- break;
7613
- case KitFilterDateRange.LAST_WEEK:
7614
- startDate.setDate(now.getDate() - 7);
7615
- break;
7616
- case KitFilterDateRange.LAST_MONTH:
7617
- startDate.setMonth(now.getMonth() - 1);
7618
- break;
7619
- case KitFilterDateRange.CUSTOM_RANGE:
7620
- if (dateRangeHandler) {
7621
- return dateRangeHandler();
7622
- }
7623
- break;
7624
- }
7625
- return [
7626
- kitNormalizeDateToUtc(startDate, timezoneOffset),
7627
- kitNormalizeDateToUtc(endDate, timezoneOffset, true),
7628
- ];
7629
- };
7630
- const getValueFiltersByRange = (range, timezoneOffset = 'UTC', field, dateRangeHandler) => {
7631
- const [startDate, endDate,] = getDatesByRange(range, timezoneOffset, dateRangeHandler);
7632
- return [
7633
- {
7634
- operator: KitFilterOperator.GTE,
7635
- value: startDate,
7636
- field,
7637
- },
7638
- {
7639
- operator: KitFilterOperator.LTE,
7640
- value: endDate,
7641
- field,
7642
8780
  },
7643
- ];
7644
- };
7645
- const getValueFilters = (value) => {
7646
- return value.filters.map(item => {
7647
- const value = item.value ? new Date(item.value) : item.value;
7648
- return {
7649
- ...item,
7650
- value,
7651
- };
7652
- });
7653
- };
7654
- const kitBuildOdataFilter = (filter, columns) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({ filter }, true, columns)));
7655
- const kitBuildFilters = (filters) => ({
7656
- logic: KitFilterLogic.AND,
7657
- filters: filters.map(filter => {
7658
- const cleanedFilter = filterEmptyValues(filter.value);
7659
- return {
7660
- ...cleanedFilter,
7661
- isCustomField: filter.type === KitFilterType.CUSTOM_INPUT,
7662
- };
7663
- }),
7664
- });
7665
-
7666
- const kitFormatStringForSearch = (inputString) => {
7667
- return inputString
7668
- .split(/\s+/)
7669
- .filter(text => !!text)
7670
- .map(text => text + '*')
7671
- .join(' ');
7672
- };
7673
-
7674
- const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField, hiddenInGrid, customFieldHandler, customRangeHandler) => ({
7675
- field,
7676
- title,
7677
- sortable,
7678
- hidden,
7679
- width,
7680
- filterType,
7681
- type,
7682
- excelFormat,
7683
- apiField,
7684
- hiddenInGrid,
7685
- customFieldHandler,
7686
- customRangeHandler,
7687
- });
7688
- const kitBuildGridDataResults = (data, loading, total) => ({
7689
- results: {
7690
- data,
7691
- total: total ?? 0,
7692
8781
  },
7693
- loading,
7694
- });
7695
- const kitBuildSortString = (sort, columns) => {
7696
- const sortString = sort?.filter(({ dir }) => dir)
7697
- .map(({ field, dir }) => {
7698
- const column = columns?.find(col => col.field === field);
7699
- const targetField = column?.apiField ?? field;
7700
- return `${targetField.split('.').join('/')} ${dir}`;
7701
- }).join(', ');
7702
- return sortString !== '' && sortString || undefined;
7703
- };
7704
- const kitFetchGridData = ({ store, destroyRef, isLoading, fetchAction, fetchFromIndexAction, hasArchiveToggle, error, }) => {
7705
- isLoading.set(true);
7706
- const { skip, take, sort, filter, search, archive } = store.selectSnapshot(KIT_GRID_STATE_TOKEN);
7707
- const gridState = {
7708
- take,
7709
- skip,
7710
- sort,
7711
- filter: kitBuildFilters(filter),
7712
- };
7713
- const isArchive = hasArchiveToggle && archive || false;
7714
- const isSearchMode = hasArchiveToggle && !isArchive || !!search;
7715
- const searchTerm = search && kitFormatStringForSearch(search) || undefined;
7716
- const action = isSearchMode && fetchFromIndexAction({ ...gridState, searchTerm }) || fetchAction(gridState);
7717
- store.dispatch(action).pipe(takeUntilDestroyed(destroyRef), finalize(() => isLoading.set(false))).subscribe({ error });
7718
8782
  };
7719
- const kitFetchExportGridData = ({ fetchAction, fetchIndexAction, sort, filter, search, columns, total, hasArchiveToggle = false, archiveModeEnabled = false, }) => {
7720
- const isArchive = hasArchiveToggle && archiveModeEnabled || false;
7721
- const isSearchMode = hasArchiveToggle && !isArchive || !!search;
7722
- if (isSearchMode) {
7723
- const searchTerm = search && kitFormatStringForSearch(search) || undefined;
7724
- return fetchIndexAction(0, total, kitBuildSortString(sort, columns), kitBuildOdataFilter(kitBuildFilters(filter)), searchTerm);
8783
+
8784
+ class KitTranslateService {
8785
+ constructor() {
8786
+ this.translateService = inject(TranslateService);
7725
8787
  }
7726
- return fetchAction(0, total, kitBuildSortString(sort, columns), kitBuildOdataFilter(kitBuildFilters(filter)));
7727
- };
7728
- const kitShouldResetGridState = ({ stateColumns, availableColumns, }) => {
7729
- if (!stateColumns.length) {
7730
- return true;
8788
+ registerTranslations() {
8789
+ Object.keys(kitTranslations).forEach(lang => {
8790
+ this.translateService.setTranslation(lang, kitTranslations[lang], true);
8791
+ });
7731
8792
  }
7732
- const stateTitles = stateColumns.filter(col => !col.hiddenInGrid).map(col => col.title);
7733
- const availableTitles = new Set(availableColumns.filter(col => !col.hiddenInGrid).map(col => col.title));
7734
- return !stateTitles.every(field => availableTitles.has(field));
7735
- };
8793
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
8794
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, providedIn: 'root' }); }
8795
+ }
8796
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, decorators: [{
8797
+ type: Injectable,
8798
+ args: [{
8799
+ providedIn: 'root',
8800
+ }]
8801
+ }] });
7736
8802
 
7737
8803
  var KitGridViewType;
7738
8804
  (function (KitGridViewType) {
@@ -7873,12 +8939,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
7873
8939
  }]
7874
8940
  }] });
7875
8941
 
7876
- const kitApiResponseDefaultEntities = () => ({
7877
- data: [],
7878
- total: 0,
7879
- loading: true,
7880
- });
7881
-
7882
8942
  var KitGridViewsState_1;
7883
8943
  const KIT_GRID_VIEWS_STATE_TOKEN = new StateToken('gridViews');
7884
8944
  let KitGridViewsState = class KitGridViewsState {
@@ -8538,7 +9598,7 @@ class KitGridViewsComponent {
8538
9598
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitGridViewsComponent, isStandalone: true, selector: "kit-grid-views", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, systemViews: { classPropertyName: "systemViews", publicName: "systemViews", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, providers: [
8539
9599
  TitleCasePipe,
8540
9600
  KitGridUrlStateService,
8541
- ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n <div class=\"views-actions\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.addView' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [active]=\"popup.isPopupOpen\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"onCreateViewPopupToggle()\"\n ></kit-button>\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views()\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n (resetQueryParams)=\"resetQueryParams()\"\n ></kit-grid-views-save>\n <kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.manageViews' | translate\"\n [icon]=\"kitSvgIcon.VIEWS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n <div class=\"views-list\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [gap]=\"0\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n (selectItem)=\"onSelectView($event)\"/>\n </div>\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n\n<ng-template #collapsedListItem let-item>\n <kit-button class=\"views-item\"\n [ngClass]=\"item.type\"\n [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n [label]=\"item.title | titlecase\"\n [type]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n kitButtonType.GHOST || kitButtonType.LINK\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(anchor())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox class=\"new-view-input\"\n [defaultValue]=\"createNewViewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"createNewViewName.set($event)\"\n ></kit-textbox>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9601
+ ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n <div class=\"views-actions\">\n <kit-button #toggleButton\n kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.addView' | translate\"\n [icon]=\"kitSvgIcon.PLUS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [active]=\"popup.isPopupOpen\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"onCreateViewPopupToggle()\"\n ></kit-button>\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views()\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n (resetQueryParams)=\"resetQueryParams()\"\n ></kit-grid-views-save>\n <kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.views.manageViews' | translate\"\n [icon]=\"kitSvgIcon.VIEWS\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n <div class=\"views-list\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n [lineHeight]=\"32\"\n [gap]=\"0\"\n [itemTemplate]=\"collapsedListItem\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n (selectItem)=\"onSelectView($event)\"/>\n </div>\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n\n<ng-template #collapsedListItem let-item>\n <kit-button class=\"views-item\"\n [ngClass]=\"item.type\"\n [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n [label]=\"item.title | titlecase\"\n [type]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n kitButtonType.GHOST || kitButtonType.LINK\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n popupClass=\"kit-grid-new-view-popup\"\n [anchor]=\"$any(anchor())\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"new-view\">\n <kit-textbox class=\"new-view-input\"\n [defaultValue]=\"createNewViewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"createNewViewName.set($event)\"\n ></kit-textbox>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { 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: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8542
9602
  }
8543
9603
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridViewsComponent, decorators: [{
8544
9604
  type: Component,
@@ -8790,7 +9850,7 @@ class KitFilterCheckboxComponent {
8790
9850
  })));
8791
9851
  }
8792
9852
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8793
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ displayedValues[0] }}\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n {{ displayedValues[0] ?? '' }}\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-search\" \n [hidden]=\"!isContentOverflowing && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n \n <div #popupContent\n class=\"popup-content\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [(ngModel)]=\"allSelected\"\n (changed)=\"toggleAll($event)\"> \n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9853
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ displayedValues[0] }}\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n {{ displayedValues[0] ?? '' }}\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-search\" \n [hidden]=\"!isContentOverflowing && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n \n <div #popupContent\n class=\"popup-content\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [(ngModel)]=\"allSelected\"\n (changed)=\"toggleAll($event)\"> \n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { 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: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8794
9854
  }
8795
9855
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
8796
9856
  type: Component,
@@ -9128,7 +10188,7 @@ class KitFilterInputComponent {
9128
10188
  }));
9129
10189
  }
9130
10190
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9131
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues()?.filters; as selectedFilters) {\n @for (filter of selectedFilters; track $index) {\n {{ getSelectedFilterText(filter) }}\n\n @if ($index === 0) {\n {{ getSelectedLogicText(selectedValues()) }}\n }\n }\n }\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of filterItems().filters; track $index) {\n <div class=\"filter-item\">\n <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n [size]=\"kitDropdownSize.SMALL\"\n [selectedItem]=\"$any(item.operator)\"\n (selected)=\"onOperatorSelect($event.value, $index)\"\n ></kit-dropdown>\n <div class=\"filter-controls\">\n @switch (filterInputType()) {\n @case (kitFilterType.TEXT) {\n <kit-textbox class=\"filter-item-value\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n ></kit-textbox>\n }\n @case (kitFilterType.NUMERIC) {\n <kit-numeric-textbox class=\"filter-item-value\"\n format=\"#.###\"\n [size]=\"kitNumericTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [min]=\"0\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n ></kit-numeric-textbox>\n }\n }\n @if ($index === 0) {\n <kit-dropdown class=\"logic-selector\"\n [selectedItem]=\"filterItems().logic\"\n [items]=\"filterLogicDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n (selected)=\"onLogicChange($event.value)\"\n ></kit-dropdown>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10191
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues()?.filters; as selectedFilters) {\n @for (filter of selectedFilters; track $index) {\n {{ getSelectedFilterText(filter) }}\n\n @if ($index === 0) {\n {{ getSelectedLogicText(selectedValues()) }}\n }\n }\n }\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of filterItems().filters; track $index) {\n <div class=\"filter-item\">\n <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n [size]=\"kitDropdownSize.SMALL\"\n [selectedItem]=\"$any(item.operator)\"\n (selected)=\"onOperatorSelect($event.value, $index)\"\n ></kit-dropdown>\n <div class=\"filter-controls\">\n @switch (filterInputType()) {\n @case (kitFilterType.TEXT) {\n <kit-textbox class=\"filter-item-value\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n ></kit-textbox>\n }\n @case (kitFilterType.NUMERIC) {\n <kit-numeric-textbox class=\"filter-item-value\"\n format=\"#.###\"\n [size]=\"kitNumericTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [min]=\"0\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n ></kit-numeric-textbox>\n }\n }\n @if ($index === 0) {\n <kit-dropdown class=\"logic-selector\"\n [selectedItem]=\"filterItems().logic\"\n [items]=\"filterLogicDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n (selected)=\"onLogicChange($event.value)\"\n ></kit-dropdown>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9132
10192
  }
9133
10193
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, decorators: [{
9134
10194
  type: Component,
@@ -9386,7 +10446,7 @@ class KitFilterSelectorComponent {
9386
10446
  this.popup()?.close();
9387
10447
  }
9388
10448
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9389
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n <kit-pill #toggleButton\n [type]=\"kitPillType.DASHED\"\n [selectable]=\"true\"\n [selected]=\"popup.isPopupOpen\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"popup.toggle()\">\n {{ \"kit.filters.addNewFilter\" | translate }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-selector-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n </div>\n <div class=\"filter-items\">\n @for (item of filterItems(); track item.field) {\n <div class=\"filter-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n {{ item.title | translate }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--ui-kit-color-grey-12);pointer-events:none}\n"], dependencies: [{ kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { 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"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10449
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n <kit-pill #toggleButton\n [type]=\"kitPillType.DASHED\"\n [selectable]=\"true\"\n [selected]=\"popup.isPopupOpen\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"popup.toggle()\">\n {{ \"kit.filters.addNewFilter\" | translate }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-selector-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n </div>\n <div class=\"filter-items\">\n @for (item of filterItems(); track item.field) {\n <div class=\"filter-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n {{ item.title | translate }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--ui-kit-color-grey-12);pointer-events:none}\n"], dependencies: [{ kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { 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: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9390
10450
  }
9391
10451
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterSelectorComponent, decorators: [{
9392
10452
  type: Component,
@@ -9475,7 +10535,7 @@ class KitFilterCustomInputComponent {
9475
10535
  }
9476
10536
  }
9477
10537
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9478
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n {{ selectedValue() }}\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"inputValue()\"\n (changed)=\"onValueChange($event)\"\n ></kit-textbox>\n </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10538
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n {{ selectedValue() }}\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"inputValue()\"\n (changed)=\"onValueChange($event)\"\n ></kit-textbox>\n </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9479
10539
  }
9480
10540
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, decorators: [{
9481
10541
  type: Component,
@@ -10707,541 +11767,284 @@ class KitTranslateLoader {
10707
11767
  result[key] = this.deepMerge(result[key] ?? {}, source[key]);
10708
11768
  }
10709
11769
  else {
10710
- result[key] = source[key];
10711
- }
10712
- }
10713
- return result;
10714
- }
10715
- }
10716
-
10717
- class KitTrackingCardComponent {
10718
- constructor() {
10719
- this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
10720
- this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
10721
- this.contentIsHighlighted = input(false, ...(ngDevMode ? [{ debugName: "contentIsHighlighted" }] : /* istanbul ignore next */ []));
10722
- this.firstTabIsActive = signal(true, ...(ngDevMode ? [{ debugName: "firstTabIsActive" }] : /* istanbul ignore next */ []));
10723
- this.kitButtonType = KitButtonType;
10724
- }
10725
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10726
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: KitTrackingCardComponent, isStandalone: true, selector: "kit-tracking-card", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, contentIsHighlighted: { classPropertyName: "contentIsHighlighted", publicName: "contentIsHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-tracking-card\"\n [class.selected]=\"selected()\">\n <div class=\"kit-tracking-card-head\">\n <ng-content select=\"[headTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-content\">\n <ng-content select=\"[contentTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs\"\n [class.highlighted]=\"contentIsHighlighted()\">\n <div class=\"kit-tracking-card-tabs-head\">\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"firstTabIsActive()\"\n [label]=\"tabs().first\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(true)\"/>\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"!firstTabIsActive()\"\n [label]=\"tabs().second\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(false)\"/>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"firstTabIsActive()\">\n <ng-content select=\"[firstTabTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"!firstTabIsActive()\">\n <ng-content select=\"[secondTabTemplate]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".kit-tracking-card{display:flex;flex-direction:column;padding:25px;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;min-height:337px;gap:15px}.kit-tracking-card-head{padding-bottom:12px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tracking-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-tracking-card-tabs{border-radius:8px;min-height:107px}.kit-tracking-card-tabs.highlighted{padding:10px;background-color:var(--ui-kit-color-grey-13)}.kit-tracking-card-tabs-head{display:flex;justify-content:space-between;margin-bottom:12px}.kit-tracking-card-tabs-head ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-tracking-card-tabs-head ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-tracking-card-tabs-head ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-tracking-card-tabs-content{display:none}.kit-tracking-card-tabs-content.active{display:block}.kit-tracking-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media screen and (max-width:1512px){.kit-tracking-card{width:320px;min-height:320px}.kit-tracking-card-tabs{padding:0}.kit-tracking-card-tabs.highlighted{background-color:inherit}}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10727
- }
10728
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, decorators: [{
10729
- type: Component,
10730
- args: [{ selector: 'kit-tracking-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
10731
- KitButtonComponent,
10732
- ], template: "<div class=\"kit-tracking-card\"\n [class.selected]=\"selected()\">\n <div class=\"kit-tracking-card-head\">\n <ng-content select=\"[headTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-content\">\n <ng-content select=\"[contentTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs\"\n [class.highlighted]=\"contentIsHighlighted()\">\n <div class=\"kit-tracking-card-tabs-head\">\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"firstTabIsActive()\"\n [label]=\"tabs().first\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(true)\"/>\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"!firstTabIsActive()\"\n [label]=\"tabs().second\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(false)\"/>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"firstTabIsActive()\">\n <ng-content select=\"[firstTabTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"!firstTabIsActive()\">\n <ng-content select=\"[secondTabTemplate]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".kit-tracking-card{display:flex;flex-direction:column;padding:25px;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;min-height:337px;gap:15px}.kit-tracking-card-head{padding-bottom:12px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tracking-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-tracking-card-tabs{border-radius:8px;min-height:107px}.kit-tracking-card-tabs.highlighted{padding:10px;background-color:var(--ui-kit-color-grey-13)}.kit-tracking-card-tabs-head{display:flex;justify-content:space-between;margin-bottom:12px}.kit-tracking-card-tabs-head ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-tracking-card-tabs-head ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-tracking-card-tabs-head ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-tracking-card-tabs-content{display:none}.kit-tracking-card-tabs-content.active{display:block}.kit-tracking-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media screen and (max-width:1512px){.kit-tracking-card{width:320px;min-height:320px}.kit-tracking-card-tabs{padding:0}.kit-tracking-card-tabs.highlighted{background-color:inherit}}\n"] }]
10733
- }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], contentIsHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentIsHighlighted", required: false }] }] } });
10734
-
10735
- class KitTrackingTimelineComponent {
10736
- constructor() {
10737
- this.timelineItems = input.required(...(ngDevMode ? [{ debugName: "timelineItems" }] : /* istanbul ignore next */ []));
10738
- }
10739
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10740
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitTrackingTimelineComponent, isStandalone: true, selector: "kit-tracking-timeline", inputs: { timelineItems: { classPropertyName: "timelineItems", publicName: "timelineItems", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-tracking-timeline\">\n @for (item of timelineItems(); track $index) {\n <div class=\"kit-tracking-timeline-item\">\n <kit-truncate-text>\n <span class=\"kit-tracking-timeline-item-title\">{{ item.label }}: </span>\n <span class=\"kit-tracking-timeline-item-text\">{{ item.value }}</span>\n </kit-truncate-text>\n </div>\n }\n</div>", styles: [".kit-tracking-timeline{display:flex;flex-direction:column;gap:5px}.kit-tracking-timeline-item{padding-left:30px;position:relative;line-height:20px}.kit-tracking-timeline-item-title{font-size:13px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-tracking-timeline-item-text{font-size:14px;font-weight:500}.kit-tracking-timeline-item:before{content:\"\";display:inline-block;position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);top:5px;left:0}.kit-tracking-timeline-item:after{content:\"\";display:inline-block;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);position:absolute;top:10px;left:5px;transform:translate(-50%)}.kit-tracking-timeline-item:last-child:after{display:none}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10741
- }
10742
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, decorators: [{
10743
- type: Component,
10744
- args: [{ selector: 'kit-tracking-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
10745
- KitTruncateTextComponent,
10746
- ], template: "<div class=\"kit-tracking-timeline\">\n @for (item of timelineItems(); track $index) {\n <div class=\"kit-tracking-timeline-item\">\n <kit-truncate-text>\n <span class=\"kit-tracking-timeline-item-title\">{{ item.label }}: </span>\n <span class=\"kit-tracking-timeline-item-text\">{{ item.value }}</span>\n </kit-truncate-text>\n </div>\n }\n</div>", styles: [".kit-tracking-timeline{display:flex;flex-direction:column;gap:5px}.kit-tracking-timeline-item{padding-left:30px;position:relative;line-height:20px}.kit-tracking-timeline-item-title{font-size:13px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-tracking-timeline-item-text{font-size:14px;font-weight:500}.kit-tracking-timeline-item:before{content:\"\";display:inline-block;position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);top:5px;left:0}.kit-tracking-timeline-item:after{content:\"\";display:inline-block;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);position:absolute;top:10px;left:5px;transform:translate(-50%)}.kit-tracking-timeline-item:last-child:after{display:none}\n"] }]
10747
- }], propDecorators: { timelineItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineItems", required: true }] }] } });
10748
-
10749
- class KitMobileMenuComponent {
10750
- constructor() {
10751
- this.store = inject(Store);
10752
- this.kitMobileMenuItems = input.required(...(ngDevMode ? [{ debugName: "kitMobileMenuItems" }] : /* istanbul ignore next */ []));
10753
- this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
10754
- this.categoryItem = contentChild.required('categoryItem');
10755
- this.linkItem = contentChild.required('linkItem');
10756
- this.navListFooter = contentChild('navListFooter', ...(ngDevMode ? [{ debugName: "navListFooter" }] : /* istanbul ignore next */ []));
10757
- this.kitSvgIcon = KitSvgIcon;
10758
- this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
10759
- this.displayedItems = combineLatest([
10760
- this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN),
10761
- toObservable(this.kitMobileMenuItems),
10762
- ]).pipe(tap(([permissions]) => !Object.keys(permissions).length && this.store.dispatch(new FetchUserPermissions())), map(([permissions]) => this.filterMenuItemsByPermissions(permissions)));
10763
- }
10764
- setSelectedItem(item) {
10765
- this.store.dispatch(new SetSelectedMobileMenuItem(item));
10766
- }
10767
- filterMenuItemsByPermissions(permissions) {
10768
- if (!Object.keys(permissions).length) {
10769
- return [];
10770
- }
10771
- return this.kitMobileMenuItems()
10772
- .map(item => ({
10773
- ...item,
10774
- links: item.links.filter(link => !link.permissions || kitHasPermission(link.permissions, permissions)),
10775
- }))
10776
- .filter(item => item.links.length > 0);
10777
- }
10778
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10779
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMobileMenuComponent, isStandalone: true, selector: "kit-mobile-menu", inputs: { kitMobileMenuItems: { classPropertyName: "kitMobileMenuItems", publicName: "kitMobileMenuItems", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "categoryItem", first: true, predicate: ["categoryItem"], descendants: true, isSignal: true }, { propertyName: "linkItem", first: true, predicate: ["linkItem"], descendants: true, isSignal: true }, { propertyName: "navListFooter", first: true, predicate: ["navListFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mobile-menu\"\n [ngClass]=\"theme()\">\n @if (!selectedItem()) {\n <div class=\"mobile-menu-category-list\">\n @for (item of displayedItems | async; track item.key) {\n <div class=\"mobile-menu-category-item-wrapper\"\n (click)=\"setSelectedItem(item)\">\n <ng-container *ngTemplateOutlet=\"categoryItem(); context: { $implicit: item }\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"mobile-menu-nav-list\">\n @for (item of selectedItem()?.links; track item) {\n <ng-container *ngTemplateOutlet=\"linkItem(); context: { $implicit: item, key: selectedItem()?.key }\" />\n }\n </div>\n\n <div class=\"mobile-menu-nav-list-footer\">\n <ng-container *ngTemplateOutlet=\"navListFooter(); context: { key: selectedItem()?.key }\" />\n </div>\n }\n</div>\n", styles: [".mobile-menu-category-list{display:grid;gap:25px;grid-template-columns:1fr 1fr;justify-content:center}.mobile-menu-category-item-wrapper{display:flex;flex-direction:column}.mobile-menu-nav-list{border:1px solid var(--ui-kit-color-grey-11);border-radius:15px;padding:25px;background-color:var(--ui-kit-color-white)}.mobile-menu-nav-list-footer{position:absolute;bottom:0;margin:25px 0;width:calc(100% - 50px)}.mobile-menu.dark .mobile-menu-nav-list{background-color:var(--ui-kit-color-navy)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10780
- }
10781
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, decorators: [{
10782
- type: Component,
10783
- args: [{ selector: 'kit-mobile-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
10784
- NgTemplateOutlet,
10785
- NgClass,
10786
- AsyncPipe,
10787
- ], template: "<div class=\"mobile-menu\"\n [ngClass]=\"theme()\">\n @if (!selectedItem()) {\n <div class=\"mobile-menu-category-list\">\n @for (item of displayedItems | async; track item.key) {\n <div class=\"mobile-menu-category-item-wrapper\"\n (click)=\"setSelectedItem(item)\">\n <ng-container *ngTemplateOutlet=\"categoryItem(); context: { $implicit: item }\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"mobile-menu-nav-list\">\n @for (item of selectedItem()?.links; track item) {\n <ng-container *ngTemplateOutlet=\"linkItem(); context: { $implicit: item, key: selectedItem()?.key }\" />\n }\n </div>\n\n <div class=\"mobile-menu-nav-list-footer\">\n <ng-container *ngTemplateOutlet=\"navListFooter(); context: { key: selectedItem()?.key }\" />\n </div>\n }\n</div>\n", styles: [".mobile-menu-category-list{display:grid;gap:25px;grid-template-columns:1fr 1fr;justify-content:center}.mobile-menu-category-item-wrapper{display:flex;flex-direction:column}.mobile-menu-nav-list{border:1px solid var(--ui-kit-color-grey-11);border-radius:15px;padding:25px;background-color:var(--ui-kit-color-white)}.mobile-menu-nav-list-footer{position:absolute;bottom:0;margin:25px 0;width:calc(100% - 50px)}.mobile-menu.dark .mobile-menu-nav-list{background-color:var(--ui-kit-color-navy)}\n"] }]
10788
- }], propDecorators: { kitMobileMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "kitMobileMenuItems", required: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], categoryItem: [{ type: i0.ContentChild, args: ['categoryItem', { isSignal: true }] }], linkItem: [{ type: i0.ContentChild, args: ['linkItem', { isSignal: true }] }], navListFooter: [{ type: i0.ContentChild, args: ['navListFooter', { isSignal: true }] }] } });
10789
-
10790
- class KitThemeService {
10791
- constructor() {
10792
- this.store = inject(Store);
10793
- this.useDarkThemeForMobile = this.store.selectSignal(KitUserSettingsState.getSettingByKey(KitUserSettingsKeys.UseDarkThemeForMobile));
10794
- this.theme = computed(() => {
10795
- try {
10796
- return JSON.parse(this.useDarkThemeForMobile()) ? KitThemes.Dark : KitThemes.Light;
10797
- }
10798
- catch {
10799
- return KitThemes.Light;
10800
- }
10801
- }, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
10802
- }
10803
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
10804
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, providedIn: 'root' }); }
10805
- }
10806
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, decorators: [{
10807
- type: Injectable,
10808
- args: [{ providedIn: 'root' }]
10809
- }] });
10810
-
10811
- const kitUserPermissionsGuard = (route) => {
10812
- const permissionsData = route.data?.permission;
10813
- const store = inject(Store);
10814
- const checkPermission = (userPermissions) => {
10815
- if (permissionsData) {
10816
- return kitHasPermission(permissionsData, userPermissions);
10817
- }
10818
- return true;
10819
- };
10820
- return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(tap(permissions => !Object.keys(permissions).length && store.dispatch(new FetchUserPermissions())), filter(permissions => !!Object.keys(permissions).length), map(permissions => checkPermission(permissions)));
10821
- };
10822
-
10823
- var KitUserType;
10824
- (function (KitUserType) {
10825
- KitUserType["Admin"] = "Admin";
10826
- KitUserType["User"] = "User";
10827
- })(KitUserType || (KitUserType = {}));
10828
-
10829
- var KitStatusLabelColor;
10830
- (function (KitStatusLabelColor) {
10831
- KitStatusLabelColor["WHITE"] = "white";
10832
- KitStatusLabelColor["PURPLE"] = "purple";
10833
- KitStatusLabelColor["TEAL"] = "teal";
10834
- KitStatusLabelColor["GREY"] = "grey";
10835
- KitStatusLabelColor["ORANGE"] = "orange";
10836
- KitStatusLabelColor["GREEN"] = "green";
10837
- KitStatusLabelColor["BLUE"] = "blue";
10838
- KitStatusLabelColor["PINK"] = "pink";
10839
- KitStatusLabelColor["RED"] = "red";
10840
- })(KitStatusLabelColor || (KitStatusLabelColor = {}));
10841
- var KitStatusLabelSize;
10842
- (function (KitStatusLabelSize) {
10843
- KitStatusLabelSize["SMALL"] = "small";
10844
- KitStatusLabelSize["LARGE"] = "large";
10845
- })(KitStatusLabelSize || (KitStatusLabelSize = {}));
10846
-
10847
- class KitStatusLabelComponent {
10848
- constructor() {
10849
- this.color = input(KitStatusLabelColor.WHITE, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
10850
- this.size = input(KitStatusLabelSize.SMALL, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
10851
- }
10852
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10853
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: KitStatusLabelComponent, isStandalone: true, selector: "kit-status-label", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-status-label\"\n [ngClass]=\"[color(), size()]\">\n <kit-truncate-text><ng-content></ng-content></kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10854
- }
10855
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, decorators: [{
10856
- type: Component,
10857
- args: [{ selector: 'kit-status-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
10858
- KitTruncateTextComponent,
10859
- NgClass,
10860
- ], template: "<div class=\"kit-status-label\"\n [ngClass]=\"[color(), size()]\">\n <kit-truncate-text><ng-content></ng-content></kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"] }]
10861
- }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
10862
-
10863
- class FetchUserIdentities {
10864
- static { this.type = '[UserIdentities] Fetch'; }
10865
- }
10866
- class SetUserIdentity extends KitAbstractPayloadAction {
10867
- static { this.type = '[UserIdentity] Set'; }
10868
- }
10869
-
10870
- class KitUserIdentitiesApiService {
10871
- constructor() {
10872
- this.httpClient = inject(HttpClient);
10873
- this.basePath = inject(KIT_BASE_PATH);
10874
- }
10875
- getUserIdentities() {
10876
- const url = `${this.basePath}/users/me/identities`;
10877
- return this.httpClient.get(url);
10878
- }
10879
- setCurrentIdentity(id) {
10880
- const url = `${this.basePath}/users/me/identities/current`;
10881
- return this.httpClient.put(url, { id });
10882
- }
10883
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
10884
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, providedIn: 'root' }); }
10885
- }
10886
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, decorators: [{
10887
- type: Injectable,
10888
- args: [{
10889
- providedIn: 'root',
10890
- }]
10891
- }] });
10892
-
10893
- const KIT_USER_IDENTITIES_STATE_TOKEN = new StateToken('userIdentities');
10894
- let KitUserIdentitiesState = class KitUserIdentitiesState {
10895
- constructor() {
10896
- this.kitUserIdentitiesApiService = inject(KitUserIdentitiesApiService);
10897
- }
10898
- fetchUserApplications(ctx) {
10899
- return this.kitUserIdentitiesApiService.getUserIdentities().pipe(tap(userIdentities => ctx.setState(userIdentities)));
10900
- }
10901
- setUserIdentity(ctx, action) {
10902
- return this.kitUserIdentitiesApiService.setCurrentIdentity(action.payload);
10903
- }
10904
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
10905
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState }); }
10906
- };
10907
- __decorate([
10908
- Action(FetchUserIdentities)
10909
- ], KitUserIdentitiesState.prototype, "fetchUserApplications", null);
10910
- __decorate([
10911
- Action(SetUserIdentity)
10912
- ], KitUserIdentitiesState.prototype, "setUserIdentity", null);
10913
- KitUserIdentitiesState = __decorate([
10914
- State({
10915
- name: KIT_USER_IDENTITIES_STATE_TOKEN,
10916
- defaults: {
10917
- data: [],
10918
- total: 0,
10919
- },
10920
- })
10921
- ], KitUserIdentitiesState);
10922
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, decorators: [{
10923
- type: Injectable
10924
- }], propDecorators: { fetchUserApplications: [], setUserIdentity: [] } });
10925
-
10926
- class KitUserIdentitiesSelector {
10927
- constructor() {
10928
- this.store = inject(Store);
10929
- this.router = inject(Router);
10930
- this.window = inject(WINDOW);
10931
- this.userIdentities = this.store.selectSignal(KIT_USER_IDENTITIES_STATE_TOKEN);
10932
- this.userIdentitiesDropdownItems = computed(() => this.userIdentities().data.map(item => ({
10933
- text: item.alias,
10934
- value: item.id,
10935
- data: item,
10936
- })), ...(ngDevMode ? [{ debugName: "userIdentitiesDropdownItems" }] : /* istanbul ignore next */ []));
10937
- this.user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
10938
- this.currentIdentity = computed(() => this.userIdentities().data.find(item => item.id === this.user().data?.identityId) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentity" }] : /* istanbul ignore next */ []));
10939
- this.currentIdentityDropdownItem = computed(() => this.userIdentitiesDropdownItems()?.find(item => item.value === this.currentIdentity()?.id) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentityDropdownItem" }] : /* istanbul ignore next */ []));
10940
- }
10941
- ngOnInit() {
10942
- this.fetchUserIdentities();
10943
- }
10944
- onIdentitySelect(item) {
10945
- const currentIdentityId = this.currentIdentity()?.id;
10946
- if (!currentIdentityId) {
10947
- return;
10948
- }
10949
- this.store.dispatch(new SetUserIdentity(item.value)).subscribe(() => {
10950
- if (this.user().data?.type !== item.data?.type) {
10951
- this.window.location.href = '/';
10952
- return;
11770
+ result[key] = source[key];
10953
11771
  }
10954
- this.router.navigate([], { fragment: '' }).then(() => {
10955
- this.window.location.reload();
10956
- });
10957
- });
11772
+ }
11773
+ return result;
10958
11774
  }
10959
- fetchUserIdentities() {
10960
- this.store.dispatch(new FetchUserIdentities());
11775
+ }
11776
+
11777
+ class KitTrackingCardComponent {
11778
+ constructor() {
11779
+ this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
11780
+ this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
11781
+ this.contentIsHighlighted = input(false, ...(ngDevMode ? [{ debugName: "contentIsHighlighted" }] : /* istanbul ignore next */ []));
11782
+ this.firstTabIsActive = signal(true, ...(ngDevMode ? [{ debugName: "firstTabIsActive" }] : /* istanbul ignore next */ []));
11783
+ this.kitButtonType = KitButtonType;
10961
11784
  }
10962
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10963
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUserIdentitiesSelector, isStandalone: true, selector: "kit-user-identities-selector", ngImport: i0, template: "@if (userIdentities().data.length > 1) {\n <div class=\"kit-user-identities-selector\">\n <kit-dropdown [items]=\"userIdentitiesDropdownItems()\"\n [selectedItem]=\"currentIdentityDropdownItem()?.value\"\n (selected)=\"onIdentitySelect($event)\"\n ></kit-dropdown>\n </div>\n}\n", styles: [".kit-user-identities-selector{width:250px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11785
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11786
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: KitTrackingCardComponent, isStandalone: true, selector: "kit-tracking-card", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, contentIsHighlighted: { classPropertyName: "contentIsHighlighted", publicName: "contentIsHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-tracking-card\"\n [class.selected]=\"selected()\">\n <div class=\"kit-tracking-card-head\">\n <ng-content select=\"[headTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-content\">\n <ng-content select=\"[contentTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs\"\n [class.highlighted]=\"contentIsHighlighted()\">\n <div class=\"kit-tracking-card-tabs-head\">\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"firstTabIsActive()\"\n [label]=\"tabs().first\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(true)\"/>\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"!firstTabIsActive()\"\n [label]=\"tabs().second\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(false)\"/>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"firstTabIsActive()\">\n <ng-content select=\"[firstTabTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"!firstTabIsActive()\">\n <ng-content select=\"[secondTabTemplate]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".kit-tracking-card{display:flex;flex-direction:column;padding:25px;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;min-height:337px;gap:15px}.kit-tracking-card-head{padding-bottom:12px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tracking-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-tracking-card-tabs{border-radius:8px;min-height:107px}.kit-tracking-card-tabs.highlighted{padding:10px;background-color:var(--ui-kit-color-grey-13)}.kit-tracking-card-tabs-head{display:flex;justify-content:space-between;margin-bottom:12px}.kit-tracking-card-tabs-head ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-tracking-card-tabs-head ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-tracking-card-tabs-head ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-tracking-card-tabs-content{display:none}.kit-tracking-card-tabs-content.active{display:block}.kit-tracking-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media screen and (max-width:1512px){.kit-tracking-card{width:320px;min-height:320px}.kit-tracking-card-tabs{padding:0}.kit-tracking-card-tabs.highlighted{background-color:inherit}}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10964
11787
  }
10965
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesSelector, decorators: [{
11788
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, decorators: [{
10966
11789
  type: Component,
10967
- args: [{ selector: 'kit-user-identities-selector', imports: [
10968
- KitDropdownComponent,
10969
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (userIdentities().data.length > 1) {\n <div class=\"kit-user-identities-selector\">\n <kit-dropdown [items]=\"userIdentitiesDropdownItems()\"\n [selectedItem]=\"currentIdentityDropdownItem()?.value\"\n (selected)=\"onIdentitySelect($event)\"\n ></kit-dropdown>\n </div>\n}\n", styles: [".kit-user-identities-selector{width:250px}\n"] }]
10970
- }] });
11790
+ args: [{ selector: 'kit-tracking-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
11791
+ KitButtonComponent,
11792
+ ], template: "<div class=\"kit-tracking-card\"\n [class.selected]=\"selected()\">\n <div class=\"kit-tracking-card-head\">\n <ng-content select=\"[headTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-content\">\n <ng-content select=\"[contentTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs\"\n [class.highlighted]=\"contentIsHighlighted()\">\n <div class=\"kit-tracking-card-tabs-head\">\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"firstTabIsActive()\"\n [label]=\"tabs().first\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(true)\"/>\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"!firstTabIsActive()\"\n [label]=\"tabs().second\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(false)\"/>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"firstTabIsActive()\">\n <ng-content select=\"[firstTabTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"!firstTabIsActive()\">\n <ng-content select=\"[secondTabTemplate]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".kit-tracking-card{display:flex;flex-direction:column;padding:25px;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;min-height:337px;gap:15px}.kit-tracking-card-head{padding-bottom:12px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tracking-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-tracking-card-tabs{border-radius:8px;min-height:107px}.kit-tracking-card-tabs.highlighted{padding:10px;background-color:var(--ui-kit-color-grey-13)}.kit-tracking-card-tabs-head{display:flex;justify-content:space-between;margin-bottom:12px}.kit-tracking-card-tabs-head ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-tracking-card-tabs-head ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-tracking-card-tabs-head ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-tracking-card-tabs-content{display:none}.kit-tracking-card-tabs-content.active{display:block}.kit-tracking-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media screen and (max-width:1512px){.kit-tracking-card{width:320px;min-height:320px}.kit-tracking-card-tabs{padding:0}.kit-tracking-card-tabs.highlighted{background-color:inherit}}\n"] }]
11793
+ }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], contentIsHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentIsHighlighted", required: false }] }] } });
10971
11794
 
10972
- class KitUserIdentitiesInterceptor {
11795
+ class KitTrackingTimelineComponent {
10973
11796
  constructor() {
10974
- this.store = inject(Store);
10975
- }
10976
- intercept(req, next) {
10977
- const user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
10978
- if (!user().data?.identityId) {
10979
- return next.handle(req);
10980
- }
10981
- return next.handle(req.clone({
10982
- setHeaders: {
10983
- 'X-Identity-Id': `${user().data?.identityId}`,
10984
- },
10985
- }));
11797
+ this.timelineItems = input.required(...(ngDevMode ? [{ debugName: "timelineItems" }] : /* istanbul ignore next */ []));
10986
11798
  }
11799
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11800
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitTrackingTimelineComponent, isStandalone: true, selector: "kit-tracking-timeline", inputs: { timelineItems: { classPropertyName: "timelineItems", publicName: "timelineItems", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-tracking-timeline\">\n @for (item of timelineItems(); track $index) {\n <div class=\"kit-tracking-timeline-item\">\n <kit-truncate-text>\n <span class=\"kit-tracking-timeline-item-title\">{{ item.label }}: </span>\n <span class=\"kit-tracking-timeline-item-text\">{{ item.value }}</span>\n </kit-truncate-text>\n </div>\n }\n</div>", styles: [".kit-tracking-timeline{display:flex;flex-direction:column;gap:5px}.kit-tracking-timeline-item{padding-left:30px;position:relative;line-height:20px}.kit-tracking-timeline-item-title{font-size:13px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-tracking-timeline-item-text{font-size:14px;font-weight:500}.kit-tracking-timeline-item:before{content:\"\";display:inline-block;position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);top:5px;left:0}.kit-tracking-timeline-item:after{content:\"\";display:inline-block;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);position:absolute;top:10px;left:5px;transform:translate(-50%)}.kit-tracking-timeline-item:last-child:after{display:none}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10987
11801
  }
11802
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, decorators: [{
11803
+ type: Component,
11804
+ args: [{ selector: 'kit-tracking-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
11805
+ KitTruncateTextComponent,
11806
+ ], template: "<div class=\"kit-tracking-timeline\">\n @for (item of timelineItems(); track $index) {\n <div class=\"kit-tracking-timeline-item\">\n <kit-truncate-text>\n <span class=\"kit-tracking-timeline-item-title\">{{ item.label }}: </span>\n <span class=\"kit-tracking-timeline-item-text\">{{ item.value }}</span>\n </kit-truncate-text>\n </div>\n }\n</div>", styles: [".kit-tracking-timeline{display:flex;flex-direction:column;gap:5px}.kit-tracking-timeline-item{padding-left:30px;position:relative;line-height:20px}.kit-tracking-timeline-item-title{font-size:13px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-tracking-timeline-item-text{font-size:14px;font-weight:500}.kit-tracking-timeline-item:before{content:\"\";display:inline-block;position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);top:5px;left:0}.kit-tracking-timeline-item:after{content:\"\";display:inline-block;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);position:absolute;top:10px;left:5px;transform:translate(-50%)}.kit-tracking-timeline-item:last-child:after{display:none}\n"] }]
11807
+ }], propDecorators: { timelineItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineItems", required: true }] }] } });
10988
11808
 
10989
- class KitCardDetailsComponent {
11809
+ class KitMobileMenuComponent {
10990
11810
  constructor() {
10991
- this.router = inject(Router);
10992
- this.activatedRoute = inject(ActivatedRoute);
10993
- this.host = inject(ElementRef);
10994
- this.destroyRef = inject(DestroyRef);
10995
- this.cardData$ = input.required(...(ngDevMode ? [{ debugName: "cardData$" }] : /* istanbul ignore next */ []));
10996
- this.pageSize = input.required(...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
10997
- this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
10998
- this.kitCardSkeletonConfig = input({
10999
- itemHeight: 200,
11000
- itemsCount: 3,
11001
- }, ...(ngDevMode ? [{ debugName: "kitCardSkeletonConfig" }] : /* istanbul ignore next */ []));
11002
- this.dataStateChanged = output();
11003
- this.cardClicked = output();
11004
- this.kitTextboxComponent = viewChild.required(KitTextboxComponent);
11005
- this.cardElement = contentChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : /* istanbul ignore next */ []));
11006
- this.headerActions = contentChild('headerActions', ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
11007
- this.details = contentChild('details', ...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
11811
+ this.store = inject(Store);
11812
+ this.kitMobileMenuItems = input.required(...(ngDevMode ? [{ debugName: "kitMobileMenuItems" }] : /* istanbul ignore next */ []));
11813
+ this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
11814
+ this.categoryItem = contentChild.required('categoryItem');
11815
+ this.linkItem = contentChild.required('linkItem');
11816
+ this.navListFooter = contentChild('navListFooter', ...(ngDevMode ? [{ debugName: "navListFooter" }] : /* istanbul ignore next */ []));
11008
11817
  this.kitSvgIcon = KitSvgIcon;
11009
- this.kitButtonType = KitButtonType;
11010
- this.kitButtonKind = KitButtonKind;
11011
- this.kitButtonIconPosition = KitButtonIconPosition;
11012
- this.kitTextboxSize = KitTextboxSize;
11013
- this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
11014
- this.cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
11015
- this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
11016
- this.dataState = signal({
11017
- skip: 0,
11018
- take: 0,
11019
- }, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
11020
- this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : /* istanbul ignore next */ []));
11021
- this.skipNewCreatedCardFilter = computed(() => {
11022
- return this.newCreatedCards().length ? {
11023
- logic: KitFilterLogic.AND,
11024
- filters: this.newCreatedCards().map(card => ({
11025
- field: 'id',
11026
- operator: KitFilterOperator.NEQ,
11027
- value: card.id,
11028
- })),
11029
- } : {};
11030
- }, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
11031
- this.shouldAppendFetchedData = true;
11032
- this.showDetails = false;
11033
- }
11034
- ngOnInit() {
11035
- this.dataState.update(state => ({
11036
- ...state,
11037
- take: this.pageSize(),
11038
- }));
11039
- this.initCardDataSubscription();
11040
- this.initSearchSubscription();
11041
- this.initStateFromUrl();
11042
- }
11043
- loadMoreData() {
11044
- this.shouldAppendFetchedData = true;
11045
- this.dataState.update(state => ({
11046
- ...state,
11047
- skip: (this.dataState()?.skip ?? 0) + this.pageSize(),
11048
- take: this.pageSize(),
11049
- }));
11050
- this.updateData();
11818
+ this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
11819
+ this.displayedItems = combineLatest([
11820
+ this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN),
11821
+ toObservable(this.kitMobileMenuItems),
11822
+ ]).pipe(tap(([permissions]) => !Object.keys(permissions).length && this.store.dispatch(new FetchUserPermissions())), map(([permissions]) => this.filterMenuItemsByPermissions(permissions)));
11051
11823
  }
11052
- onCardClick(card) {
11053
- const normalizedId = this.normalizeCardId(card.id);
11054
- this.dataState.update(state => ({ ...state, activeId: normalizedId }));
11055
- this.navigateToCard(normalizedId);
11056
- this.cardClicked.emit({ ...card, id: normalizedId });
11824
+ setSelectedItem(item) {
11825
+ this.store.dispatch(new SetSelectedMobileMenuItem(item));
11057
11826
  }
11058
- appendCard(card, navigateToCard = true) {
11059
- this.cardData.set([
11060
- ...this.cardData(),
11061
- card,
11062
- ]);
11063
- this.newCreatedCards.set([
11064
- ...this.newCreatedCards(),
11065
- card,
11066
- ]);
11067
- this.dataState.update(state => ({
11068
- ...state,
11069
- filters: this.skipNewCreatedCardFilter(),
11070
- }));
11071
- this.total.set(this.total() + 1);
11072
- if (navigateToCard) {
11073
- this.onCardClick(card);
11074
- this.showDetails = true;
11827
+ filterMenuItemsByPermissions(permissions) {
11828
+ if (!Object.keys(permissions).length) {
11829
+ return [];
11075
11830
  }
11831
+ return this.kitMobileMenuItems()
11832
+ .map(item => ({
11833
+ ...item,
11834
+ links: item.links.filter(link => !link.permissions || kitHasPermission(link.permissions, permissions)),
11835
+ }))
11836
+ .filter(item => item.links.length > 0);
11076
11837
  }
11077
- deleteCard(cardId) {
11078
- this.isLoading.set(true);
11079
- const normalizedId = this.normalizeCardId(cardId);
11080
- const deletedIndex = this.cardData().findIndex(card => this.normalizeCardId(card.id) === normalizedId);
11081
- this.cardData.set(this.cardData().filter(card => this.normalizeCardId(card.id) !== normalizedId));
11082
- this.total.set(this.total() - 1);
11083
- const remainingCards = this.cardData();
11084
- const nextCard = remainingCards.length ? remainingCards[deletedIndex] ?? remainingCards[deletedIndex - 1] : null;
11085
- if (!this.cardData().length) {
11086
- this.showDetails = false;
11087
- }
11088
- if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
11089
- this.removeFromNewCreatedCards(normalizedId);
11090
- this.isLoading.set(false);
11091
- if (nextCard) {
11092
- this.onCardClick(nextCard);
11838
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11839
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMobileMenuComponent, isStandalone: true, selector: "kit-mobile-menu", inputs: { kitMobileMenuItems: { classPropertyName: "kitMobileMenuItems", publicName: "kitMobileMenuItems", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "categoryItem", first: true, predicate: ["categoryItem"], descendants: true, isSignal: true }, { propertyName: "linkItem", first: true, predicate: ["linkItem"], descendants: true, isSignal: true }, { propertyName: "navListFooter", first: true, predicate: ["navListFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mobile-menu\"\n [ngClass]=\"theme()\">\n @if (!selectedItem()) {\n <div class=\"mobile-menu-category-list\">\n @for (item of displayedItems | async; track item.key) {\n <div class=\"mobile-menu-category-item-wrapper\"\n (click)=\"setSelectedItem(item)\">\n <ng-container *ngTemplateOutlet=\"categoryItem(); context: { $implicit: item }\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"mobile-menu-nav-list\">\n @for (item of selectedItem()?.links; track item) {\n <ng-container *ngTemplateOutlet=\"linkItem(); context: { $implicit: item, key: selectedItem()?.key }\" />\n }\n </div>\n\n <div class=\"mobile-menu-nav-list-footer\">\n <ng-container *ngTemplateOutlet=\"navListFooter(); context: { key: selectedItem()?.key }\" />\n </div>\n }\n</div>\n", styles: [".mobile-menu-category-list{display:grid;gap:25px;grid-template-columns:1fr 1fr;justify-content:center}.mobile-menu-category-item-wrapper{display:flex;flex-direction:column}.mobile-menu-nav-list{border:1px solid var(--ui-kit-color-grey-11);border-radius:15px;padding:25px;background-color:var(--ui-kit-color-white)}.mobile-menu-nav-list-footer{position:absolute;bottom:0;margin:25px 0;width:calc(100% - 50px)}.mobile-menu.dark .mobile-menu-nav-list{background-color:var(--ui-kit-color-navy)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11840
+ }
11841
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, decorators: [{
11842
+ type: Component,
11843
+ args: [{ selector: 'kit-mobile-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
11844
+ NgTemplateOutlet,
11845
+ NgClass,
11846
+ AsyncPipe,
11847
+ ], template: "<div class=\"mobile-menu\"\n [ngClass]=\"theme()\">\n @if (!selectedItem()) {\n <div class=\"mobile-menu-category-list\">\n @for (item of displayedItems | async; track item.key) {\n <div class=\"mobile-menu-category-item-wrapper\"\n (click)=\"setSelectedItem(item)\">\n <ng-container *ngTemplateOutlet=\"categoryItem(); context: { $implicit: item }\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"mobile-menu-nav-list\">\n @for (item of selectedItem()?.links; track item) {\n <ng-container *ngTemplateOutlet=\"linkItem(); context: { $implicit: item, key: selectedItem()?.key }\" />\n }\n </div>\n\n <div class=\"mobile-menu-nav-list-footer\">\n <ng-container *ngTemplateOutlet=\"navListFooter(); context: { key: selectedItem()?.key }\" />\n </div>\n }\n</div>\n", styles: [".mobile-menu-category-list{display:grid;gap:25px;grid-template-columns:1fr 1fr;justify-content:center}.mobile-menu-category-item-wrapper{display:flex;flex-direction:column}.mobile-menu-nav-list{border:1px solid var(--ui-kit-color-grey-11);border-radius:15px;padding:25px;background-color:var(--ui-kit-color-white)}.mobile-menu-nav-list-footer{position:absolute;bottom:0;margin:25px 0;width:calc(100% - 50px)}.mobile-menu.dark .mobile-menu-nav-list{background-color:var(--ui-kit-color-navy)}\n"] }]
11848
+ }], propDecorators: { kitMobileMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "kitMobileMenuItems", required: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], categoryItem: [{ type: i0.ContentChild, args: ['categoryItem', { isSignal: true }] }], linkItem: [{ type: i0.ContentChild, args: ['linkItem', { isSignal: true }] }], navListFooter: [{ type: i0.ContentChild, args: ['navListFooter', { isSignal: true }] }] } });
11849
+
11850
+ class KitThemeService {
11851
+ constructor() {
11852
+ this.store = inject(Store);
11853
+ this.useDarkThemeForMobile = this.store.selectSignal(KitUserSettingsState.getSettingByKey(KitUserSettingsKeys.UseDarkThemeForMobile));
11854
+ this.theme = computed(() => {
11855
+ try {
11856
+ return JSON.parse(this.useDarkThemeForMobile()) ? KitThemes.Dark : KitThemes.Light;
11093
11857
  }
11094
- return;
11095
- }
11096
- const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
11097
- if (loadedCards >= this.total()) {
11098
- this.isLoading.set(false);
11099
- if (nextCard) {
11100
- this.onCardClick(nextCard);
11858
+ catch {
11859
+ return KitThemes.Light;
11101
11860
  }
11102
- return;
11103
- }
11104
- this.showDetails = false;
11105
- this.shouldAppendFetchedData = true;
11106
- this.dataStateChanged.emit({
11107
- skip: loadedCards,
11108
- take: 1,
11109
- filters: this.skipNewCreatedCardFilter(),
11110
- search: this.dataState().search,
11111
- });
11861
+ }, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
11112
11862
  }
11113
- updateSpecificCardData(cardData) {
11114
- this.cardData.set(this.cardData().map(card => this.normalizeCardId(card.id) === this.normalizeCardId(cardData.id) ? cardData : card));
11863
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11864
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, providedIn: 'root' }); }
11865
+ }
11866
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, decorators: [{
11867
+ type: Injectable,
11868
+ args: [{ providedIn: 'root' }]
11869
+ }] });
11870
+
11871
+ const kitUserPermissionsGuard = (route) => {
11872
+ const permissionsData = route.data?.permission;
11873
+ const store = inject(Store);
11874
+ const checkPermission = (userPermissions) => {
11875
+ if (permissionsData) {
11876
+ return kitHasPermission(permissionsData, userPermissions);
11877
+ }
11878
+ return true;
11879
+ };
11880
+ return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(tap(permissions => !Object.keys(permissions).length && store.dispatch(new FetchUserPermissions())), filter(permissions => !!Object.keys(permissions).length), map(permissions => checkPermission(permissions)));
11881
+ };
11882
+
11883
+ var KitUserType;
11884
+ (function (KitUserType) {
11885
+ KitUserType["Admin"] = "Admin";
11886
+ KitUserType["User"] = "User";
11887
+ })(KitUserType || (KitUserType = {}));
11888
+
11889
+ var KitStatusLabelColor;
11890
+ (function (KitStatusLabelColor) {
11891
+ KitStatusLabelColor["WHITE"] = "white";
11892
+ KitStatusLabelColor["PURPLE"] = "purple";
11893
+ KitStatusLabelColor["TEAL"] = "teal";
11894
+ KitStatusLabelColor["GREY"] = "grey";
11895
+ KitStatusLabelColor["ORANGE"] = "orange";
11896
+ KitStatusLabelColor["GREEN"] = "green";
11897
+ KitStatusLabelColor["BLUE"] = "blue";
11898
+ KitStatusLabelColor["PINK"] = "pink";
11899
+ KitStatusLabelColor["RED"] = "red";
11900
+ })(KitStatusLabelColor || (KitStatusLabelColor = {}));
11901
+ var KitStatusLabelSize;
11902
+ (function (KitStatusLabelSize) {
11903
+ KitStatusLabelSize["SMALL"] = "small";
11904
+ KitStatusLabelSize["LARGE"] = "large";
11905
+ })(KitStatusLabelSize || (KitStatusLabelSize = {}));
11906
+
11907
+ class KitStatusLabelComponent {
11908
+ constructor() {
11909
+ this.color = input(KitStatusLabelColor.WHITE, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
11910
+ this.size = input(KitStatusLabelSize.SMALL, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
11115
11911
  }
11116
- scrollToCardById(id) {
11117
- const cardsEl = this.host.nativeElement.querySelector('.kit-card-details .cards');
11118
- const el = cardsEl?.querySelector(`[data-card-id="${id}"]`) ?? null;
11119
- el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
11912
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11913
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: KitStatusLabelComponent, isStandalone: true, selector: "kit-status-label", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-status-label\"\n [ngClass]=\"[color(), size()]\">\n <kit-truncate-text><ng-content></ng-content></kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11914
+ }
11915
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, decorators: [{
11916
+ type: Component,
11917
+ args: [{ selector: 'kit-status-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
11918
+ KitTruncateTextComponent,
11919
+ NgClass,
11920
+ ], template: "<div class=\"kit-status-label\"\n [ngClass]=\"[color(), size()]\">\n <kit-truncate-text><ng-content></ng-content></kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"] }]
11921
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
11922
+
11923
+ class FetchUserIdentities {
11924
+ static { this.type = '[UserIdentities] Fetch'; }
11925
+ }
11926
+ class SetUserIdentity extends KitAbstractPayloadAction {
11927
+ static { this.type = '[UserIdentity] Set'; }
11928
+ }
11929
+
11930
+ class KitUserIdentitiesApiService {
11931
+ constructor() {
11932
+ this.httpClient = inject(HttpClient);
11933
+ this.basePath = inject(KIT_BASE_PATH);
11120
11934
  }
11121
- initSearchSubscription() {
11122
- outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef), map((value) => value.trim())).subscribe((searchValue) => {
11123
- this.cardData.set([]);
11124
- this.newCreatedCards.set([]);
11125
- this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
11126
- this.shouldAppendFetchedData = true;
11127
- this.showDetails = false;
11128
- this.updateData();
11129
- });
11935
+ getUserIdentities() {
11936
+ const url = `${this.basePath}/users/me/identities`;
11937
+ return this.httpClient.get(url);
11130
11938
  }
11131
- initStateFromUrl() {
11132
- const { skip, search } = this.getStateFromUrl();
11133
- if (search) {
11134
- this.kitTextboxComponent().writeValue(search);
11135
- if (skip && skip > 0) {
11136
- this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize(), search });
11137
- this.dataState.set({ skip, take: this.pageSize(), search });
11138
- }
11139
- else {
11140
- this.isLoading.set(false);
11141
- this.kitTextboxComponent().changed.emit(search);
11142
- }
11143
- return;
11144
- }
11145
- if (skip !== undefined) {
11146
- this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize() });
11147
- this.dataState.set({ skip, take: this.pageSize() });
11148
- return;
11149
- }
11150
- this.updateData();
11939
+ setCurrentIdentity(id) {
11940
+ const url = `${this.basePath}/users/me/identities/current`;
11941
+ return this.httpClient.put(url, { id });
11151
11942
  }
11152
- initCardDataSubscription() {
11153
- const { activeId } = this.getStateFromUrl();
11154
- this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
11155
- if (this.shouldAppendFetchedData) {
11156
- this.cardData.set([
11157
- ...this.cardData(),
11158
- ...data.results.data,
11159
- ]);
11160
- this.total.set(data.results.total + this.newCreatedCards().length);
11161
- this.shouldAppendFetchedData = false;
11162
- if (activeId && !this.dataState().activeId) {
11163
- const activeCard = this.cardData().find(item => this.normalizeCardId(item.id) === activeId);
11164
- if (activeCard) {
11165
- this.selectNewLoadedCard(activeCard);
11166
- return;
11167
- }
11168
- }
11169
- if (!this.showDetails && data.results.data.length) {
11170
- this.selectNewLoadedCard(data.results.data[0]);
11171
- }
11172
- }
11173
- this.isLoading.set(false);
11174
- });
11943
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11944
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, providedIn: 'root' }); }
11945
+ }
11946
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, decorators: [{
11947
+ type: Injectable,
11948
+ args: [{
11949
+ providedIn: 'root',
11950
+ }]
11951
+ }] });
11952
+
11953
+ const KIT_USER_IDENTITIES_STATE_TOKEN = new StateToken('userIdentities');
11954
+ let KitUserIdentitiesState = class KitUserIdentitiesState {
11955
+ constructor() {
11956
+ this.kitUserIdentitiesApiService = inject(KitUserIdentitiesApiService);
11175
11957
  }
11176
- updateData() {
11177
- this.isLoading.set(true);
11178
- this.setQueryParamsToUrl(this.dataState());
11179
- this.dataStateChanged.emit(this.dataState());
11958
+ fetchUserApplications(ctx) {
11959
+ return this.kitUserIdentitiesApiService.getUserIdentities().pipe(tap(userIdentities => ctx.setState(userIdentities)));
11180
11960
  }
11181
- normalizeCardId(id) {
11182
- return id.toString();
11961
+ setUserIdentity(ctx, action) {
11962
+ return this.kitUserIdentitiesApiService.setCurrentIdentity(action.payload);
11183
11963
  }
11184
- removeFromNewCreatedCards(cardId) {
11185
- this.newCreatedCards.set(this.newCreatedCards().filter(card => this.normalizeCardId(card.id) !== cardId));
11186
- this.dataState.update(state => ({
11187
- ...state,
11188
- filters: this.skipNewCreatedCardFilter(),
11189
- }));
11964
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11965
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState }); }
11966
+ };
11967
+ __decorate([
11968
+ Action(FetchUserIdentities)
11969
+ ], KitUserIdentitiesState.prototype, "fetchUserApplications", null);
11970
+ __decorate([
11971
+ Action(SetUserIdentity)
11972
+ ], KitUserIdentitiesState.prototype, "setUserIdentity", null);
11973
+ KitUserIdentitiesState = __decorate([
11974
+ State({
11975
+ name: KIT_USER_IDENTITIES_STATE_TOKEN,
11976
+ defaults: {
11977
+ data: [],
11978
+ total: 0,
11979
+ },
11980
+ })
11981
+ ], KitUserIdentitiesState);
11982
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, decorators: [{
11983
+ type: Injectable
11984
+ }], propDecorators: { fetchUserApplications: [], setUserIdentity: [] } });
11985
+
11986
+ class KitUserIdentitiesSelector {
11987
+ constructor() {
11988
+ this.store = inject(Store);
11989
+ this.router = inject(Router);
11990
+ this.window = inject(WINDOW);
11991
+ this.userIdentities = this.store.selectSignal(KIT_USER_IDENTITIES_STATE_TOKEN);
11992
+ this.userIdentitiesDropdownItems = computed(() => this.userIdentities().data.map(item => ({
11993
+ text: item.alias,
11994
+ value: item.id,
11995
+ data: item,
11996
+ })), ...(ngDevMode ? [{ debugName: "userIdentitiesDropdownItems" }] : /* istanbul ignore next */ []));
11997
+ this.user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
11998
+ this.currentIdentity = computed(() => this.userIdentities().data.find(item => item.id === this.user().data?.identityId) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentity" }] : /* istanbul ignore next */ []));
11999
+ this.currentIdentityDropdownItem = computed(() => this.userIdentitiesDropdownItems()?.find(item => item.value === this.currentIdentity()?.id) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentityDropdownItem" }] : /* istanbul ignore next */ []));
11190
12000
  }
11191
- getStateFromUrl() {
11192
- const queryParams = this.activatedRoute.snapshot.queryParams;
11193
- const routeParams = this.activatedRoute.snapshot.firstChild?.params ?? this.activatedRoute.snapshot.params;
11194
- return {
11195
- skip: queryParams?.skip && Number(queryParams.skip),
11196
- take: queryParams?.take && Number(queryParams.take),
11197
- search: queryParams?.search && String(queryParams.search),
11198
- activeId: routeParams?.id && String(routeParams.id),
11199
- };
12001
+ ngOnInit() {
12002
+ this.fetchUserIdentities();
11200
12003
  }
11201
- setQueryParamsToUrl(state) {
11202
- const queryParams = Object.keys(state).reduce((acc, key) => {
11203
- const val = state[key];
11204
- if (val !== undefined && val !== '' && key !== 'filters' && key !== 'activeId') {
11205
- acc[key] = val;
12004
+ onIdentitySelect(item) {
12005
+ const currentIdentityId = this.currentIdentity()?.id;
12006
+ if (!currentIdentityId) {
12007
+ return;
12008
+ }
12009
+ this.store.dispatch(new SetUserIdentity(item.value)).subscribe(() => {
12010
+ if (this.user().data?.type !== item.data?.type) {
12011
+ this.window.location.href = '/';
12012
+ return;
11206
12013
  }
11207
- return acc;
11208
- }, {});
11209
- this.router.navigate([], {
11210
- relativeTo: this.activatedRoute,
11211
- queryParams,
11212
- queryParamsHandling: 'replace',
11213
- });
11214
- }
11215
- navigateToCard(id) {
11216
- this.router.navigate([id], {
11217
- relativeTo: this.activatedRoute,
11218
- queryParamsHandling: 'preserve',
12014
+ this.router.navigate([], { fragment: '' }).then(() => {
12015
+ this.window.location.reload();
12016
+ });
11219
12017
  });
11220
12018
  }
11221
- selectNewLoadedCard(card) {
11222
- this.isLoading.set(false);
11223
- this.showDetails = true;
11224
- this.onCardClick(card);
11225
- requestAnimationFrame(() => {
11226
- this.scrollToCardById(card.id.toString());
11227
- });
12019
+ fetchUserIdentities() {
12020
+ this.store.dispatch(new FetchUserIdentities());
11228
12021
  }
11229
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11230
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardDetailsComponent, isStandalone: true, selector: "kit-card-details", inputs: { cardData$: { classPropertyName: "cardData$", publicName: "cardData$", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, kitCardSkeletonConfig: { classPropertyName: "kitCardSkeletonConfig", publicName: "kitCardSkeletonConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked" }, queries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: ["headerActions"], descendants: true, isSignal: true }, { propertyName: "details", first: true, predicate: ["details"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n [placeholder]=\"'kit.search.placeholder' | translate\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @if (kitCardSkeletonConfig(); as config) {\n @for (_ of [].constructor(config.itemsCount); track $index) {\n <kit-skeleton [width]=\"'100%'\"\n [height]=\"config.itemHeight\" />\n }\n }\n } @else {\n @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (cardData().length && (total() > cardData().length)) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n @if (showDetails) {\n <div class=\"details\">\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n </div>\n }\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { 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"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12022
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12023
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitUserIdentitiesSelector, isStandalone: true, selector: "kit-user-identities-selector", ngImport: i0, template: "@if (userIdentities().data.length > 1) {\n <div class=\"kit-user-identities-selector\">\n <kit-dropdown [items]=\"userIdentitiesDropdownItems()\"\n [selectedItem]=\"currentIdentityDropdownItem()?.value\"\n (selected)=\"onIdentitySelect($event)\"\n ></kit-dropdown>\n </div>\n}\n", styles: [".kit-user-identities-selector{width:250px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11231
12024
  }
11232
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
12025
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesSelector, decorators: [{
11233
12026
  type: Component,
11234
- args: [{ selector: 'kit-card-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
11235
- AsyncPipe,
11236
- KitSkeletonComponent,
11237
- KitEmptySectionComponent,
11238
- KitButtonComponent,
11239
- TranslatePipe,
11240
- KitTextboxComponent,
11241
- NgTemplateOutlet,
11242
- KitEntityTitleComponent,
11243
- ], template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n [placeholder]=\"'kit.search.placeholder' | translate\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @if (kitCardSkeletonConfig(); as config) {\n @for (_ of [].constructor(config.itemsCount); track $index) {\n <kit-skeleton [width]=\"'100%'\"\n [height]=\"config.itemHeight\" />\n }\n }\n } @else {\n @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (cardData().length && (total() > cardData().length)) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n @if (showDetails) {\n <div class=\"details\">\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n </div>\n }\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"] }]
11244
- }], propDecorators: { cardData$: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardData$", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], kitCardSkeletonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "kitCardSkeletonConfig", required: false }] }], dataStateChanged: [{ type: i0.Output, args: ["dataStateChanged"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], kitTextboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], cardElement: [{ type: i0.ContentChild, args: ['cardElement', { isSignal: true }] }], headerActions: [{ type: i0.ContentChild, args: ['headerActions', { isSignal: true }] }], details: [{ type: i0.ContentChild, args: ['details', { isSignal: true }] }] } });
12027
+ args: [{ selector: 'kit-user-identities-selector', imports: [
12028
+ KitDropdownComponent,
12029
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (userIdentities().data.length > 1) {\n <div class=\"kit-user-identities-selector\">\n <kit-dropdown [items]=\"userIdentitiesDropdownItems()\"\n [selectedItem]=\"currentIdentityDropdownItem()?.value\"\n (selected)=\"onIdentitySelect($event)\"\n ></kit-dropdown>\n </div>\n}\n", styles: [".kit-user-identities-selector{width:250px}\n"] }]
12030
+ }] });
12031
+
12032
+ class KitUserIdentitiesInterceptor {
12033
+ constructor() {
12034
+ this.store = inject(Store);
12035
+ }
12036
+ intercept(req, next) {
12037
+ const user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
12038
+ if (!user().data?.identityId) {
12039
+ return next.handle(req);
12040
+ }
12041
+ return next.handle(req.clone({
12042
+ setHeaders: {
12043
+ 'X-Identity-Id': `${user().data?.identityId}`,
12044
+ },
12045
+ }));
12046
+ }
12047
+ }
11245
12048
 
11246
12049
  class KitListComponent {
11247
12050
  constructor() {
@@ -11456,17 +12259,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
11456
12259
  type: Injectable
11457
12260
  }] });
11458
12261
 
11459
- const kitBuildHttpParams = (obj) => {
11460
- let params = new HttpParams();
11461
- Object.entries(obj).forEach(([key, value,]) => {
11462
- if (value === undefined || value === null) {
11463
- return;
11464
- }
11465
- params = params.set(key, String(value));
11466
- });
11467
- return params;
11468
- };
11469
-
11470
12262
  class KitApiTokenMaintenanceService {
11471
12263
  constructor() {
11472
12264
  this.httpClient = inject(HttpClient);
@@ -11689,7 +12481,7 @@ class KitApiTokenMaintenanceFormComponent {
11689
12481
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitApiTokenMaintenanceFormComponent, isStandalone: true, selector: "kit-api-token-maintenance-form", inputs: { isCreateMode: { classPropertyName: "isCreateMode", publicName: "isCreateMode", isSignal: true, isRequired: false, transformFunction: null }, cardDetailsComponent: { classPropertyName: "cardDetailsComponent", publicName: "cardDetailsComponent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saved: "saved" }, providers: [
11690
12482
  KitFormErrors,
11691
12483
  KitClipboardService,
11692
- ], ngImport: i0, template: "<form class=\"kit-api-token-maintenance-form\"\n [formGroup]=\"apiTokensForm\">\n <kit-textbox formControlName=\"name\"\n [label]=\"'kit.apiTokenMaintenance.name' | translate\"\n [state]=\"getTextboxState(apiTokensForm, 'name')\"\n [messageText]=\"getFormErrorMessages(apiTokensForm, 'name')\"\n ></kit-textbox>\n @if (!isCreateMode()) {\n <kit-datepicker formControlName=\"createdDate\"\n [readonly]=\"true\"\n [label]=\"'kit.apiTokenMaintenance.createdDate' | translate\"\n ></kit-datepicker>\n @if (apiToken().data.token; as token) {\n <div class=\"token-item\">\n <div class=\"token-item-label\">{{ \"kit.apiTokenMaintenance.token\" | translate }}</div>\n <div class=\"token-item-value\">\n <div class=\"token-item-text\">{{ token }}</div>\n <kit-svg-icon kitTooltip\n class=\"token-item-icon\"\n [title]=\"'kit.apiTokenMaintenance.copy' | translate\"\n kitTooltipFilter=\".token-item-icon\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [icon]=\"kitSvgIcon.COPY\"\n (click)=\"onCopy(token)\"\n ></kit-svg-icon>\n </div>\n </div>\n }\n <kit-textbox formControlName=\"token\"\n [hidden]=\"apiToken().data.token\"\n [label]=\"'kit.apiTokenMaintenance.token' | translate\"\n [readonly]=\"true\"\n ></kit-textbox>\n }\n <kit-toggle formControlName=\"enabled\"\n [label]=\"'kit.apiTokenMaintenance.enabled' | translate\"\n [leftLabel]=\"'kit.apiTokenMaintenance.off' | translate\"\n [rightLabel]=\"'kit.apiTokenMaintenance.on' | translate\"\n ></kit-toggle>\n</form>\n", styles: [".kit-api-token-maintenance-form{display:flex;flex-direction:column;gap:20px;padding:0}.kit-api-token-maintenance-form .token-item{display:flex;flex-direction:column;gap:4px}.kit-api-token-maintenance-form .token-item-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-api-token-maintenance-form .token-item-value{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-api-token-maintenance-form .token-item-text{color:var(--ui-kit-color-grey-10);font-size:14px;word-wrap:break-word;min-width:0}.kit-api-token-maintenance-form .token-item-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-api-token-maintenance-form .token-item-icon:hover{stroke:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12484
+ ], ngImport: i0, template: "<form class=\"kit-api-token-maintenance-form\"\n [formGroup]=\"apiTokensForm\">\n <kit-textbox formControlName=\"name\"\n [label]=\"'kit.apiTokenMaintenance.name' | translate\"\n [state]=\"getTextboxState(apiTokensForm, 'name')\"\n [messageText]=\"getFormErrorMessages(apiTokensForm, 'name')\"\n ></kit-textbox>\n @if (!isCreateMode()) {\n <kit-datepicker formControlName=\"createdDate\"\n [readonly]=\"true\"\n [label]=\"'kit.apiTokenMaintenance.createdDate' | translate\"\n ></kit-datepicker>\n @if (apiToken().data.token; as token) {\n <div class=\"token-item\">\n <div class=\"token-item-label\">{{ \"kit.apiTokenMaintenance.token\" | translate }}</div>\n <div class=\"token-item-value\">\n <div class=\"token-item-text\">{{ token }}</div>\n <kit-svg-icon kitTooltip\n class=\"token-item-icon\"\n [title]=\"'kit.apiTokenMaintenance.copy' | translate\"\n kitTooltipFilter=\".token-item-icon\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [icon]=\"kitSvgIcon.COPY\"\n (click)=\"onCopy(token)\"\n ></kit-svg-icon>\n </div>\n </div>\n }\n <kit-textbox formControlName=\"token\"\n [hidden]=\"apiToken().data.token\"\n [label]=\"'kit.apiTokenMaintenance.token' | translate\"\n [readonly]=\"true\"\n ></kit-textbox>\n }\n <kit-toggle formControlName=\"enabled\"\n [label]=\"'kit.apiTokenMaintenance.enabled' | translate\"\n [leftLabel]=\"'kit.apiTokenMaintenance.off' | translate\"\n [rightLabel]=\"'kit.apiTokenMaintenance.on' | translate\"\n ></kit-toggle>\n</form>\n", styles: [".kit-api-token-maintenance-form{display:flex;flex-direction:column;gap:20px;padding:0}.kit-api-token-maintenance-form .token-item{display:flex;flex-direction:column;gap:4px}.kit-api-token-maintenance-form .token-item-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-api-token-maintenance-form .token-item-value{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-api-token-maintenance-form .token-item-text{color:var(--ui-kit-color-grey-10);font-size:14px;word-wrap:break-word;min-width:0}.kit-api-token-maintenance-form .token-item-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-api-token-maintenance-form .token-item-icon:hover{stroke:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11693
12485
  }
11694
12486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitApiTokenMaintenanceFormComponent, decorators: [{
11695
12487
  type: Component,
@@ -12005,5 +12797,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
12005
12797
  * Generated bundle index. Do not edit.
12006
12798
  */
12007
12799
 
12008
- 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, 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, KitFileCardComponent, KitFileCardMessagesComponent, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, 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, 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, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, 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 };
12800
+ 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_USERS_SETTINGS_STATE_TOKEN, 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, 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, KitFileCardComponent, KitFileCardMessagesComponent, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, 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, 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, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersSettingsComponent, KitUsersSettingsDetailsField, 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 };
12009
12801
  //# sourceMappingURL=indigina-ui-kit.mjs.map